Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project involves creating a landing page for "Jack," a 3D Creator, utilizing React, TypeScript, Tailwind CSS, Framer Motion, and Lucide React. The landing page will showcase Jack's portfolio, skills, and projects in a visually appealing manner, focusing on a minimalist design aesthetic that emphasizes typography and user engagement.

## CORE FEATURES
1. **Hero Section**: A full viewport height section with bold introductory text and a captivating visual of Jack's portrait, designed to grab the visitor's attention immediately.
2. **Marquee Section**: A horizontally scrolling display of animated GIFs that highlight Jack's work, providing an engaging visual experience as the user scrolls.
3. **About Section**: A centered section that introduces Jack, detailing his experience and approach to 3D design, complemented by decorative 3D images.
4. **Services Section**: A well-structured list of services offered by Jack, clearly outlining what potential clients can expect.
5. **Projects Section**: A showcase of selected projects with sticky cards that provide detailed insights and visuals of Jack's work, enhancing user interaction.
6. **Contact Button**: A prominent call-to-action encouraging potential clients to reach out, designed for visibility and engagement.

## DESIGN SPECIFICATIONS
- **Visual Style**: minimalist - Clean, simple design with plenty of white space, minimal color palette, and focus on typography.
- **Color Mode**: Light theme with dark text on light backgrounds.
- **Primary Color**: #1978E5 (accent for buttons, links, highlights).
- **Typography**: Use Inter from Google Fonts for headings, Inter for body text and UI elements.
- **Border Radius**: 8px (moderately rounded) for buttons, cards, and inputs.
- **Layout**: The layout will follow a linear structure with distinct sections including a hero, marquee, about, services, and projects, ensuring fluid navigation and a cohesive user experience.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: Framer Motion for animations, Lucide React for icons.
- **State Management**: Not specified, but can be added if necessary.

## IMPLEMENTATION STEPS
1. **Set Up Environment**: Initialize a new React project using Create React App with TypeScript.
2. **Install Dependencies**: Install Tailwind CSS, Framer Motion, and Lucide React using npm or yarn.
3. **Configure Tailwind CSS**: Set up your Tailwind configuration file and include the necessary styles in your main CSS file.
4. **Create Layout**: Develop the main layout structure, ensuring each section (Hero, Marquee, About, Services, Projects) is responsive.
5. **Implement Hero Section**: Code the hero section with large typography and the magnetic effect for the portrait image. Integrate the fade-in animations using Framer Motion.
6. **Build Marquee Section**: Create the marquee section with horizontal scrolling images that react to the scroll position of the page.
7. **Develop About Section**: Implement the about section with a character-by-character scroll-driven animation for the descriptive text and decorative elements.
8. **Construct Services Section**: Design a vertical list of services with descriptions and ensure each item has staggered animations.
9. **Set Up Projects Section**: Implement sticky project cards with scaling effects as the user scrolls. Populate with images and project details.
10. **Add Contact Button**: Create a contact button component that stands out and encourages user interaction.
11. **Test Responsiveness**: Ensure the design is responsive across various devices and screen sizes.
12. **Deploy**: Deploy the application to a hosting service of your choice.

## USER EXPERIENCE
Users will be greeted with a striking hero section that introduces Jack and invites them to explore further. The marquee section will engage visitors as they scroll, providing a unique visual experience. Each section will smoothly transition into the next, maintaining a flow that highlights Jack’s skills and work. The overall design will be intuitive, with clear calls to action, ensuring that visitors can easily navigate to learn more about Jack's services and to get in touch.

---

This comprehensive prompt outlines the creation of a landing page for "Jack," ensuring that all design, technical, and user experience elements are covered to align with the user's vision.