Lovable Prompt Creator - AI Prompt Generator

## ### # ## APPLICATION OVERVIEW
This project aims to create a visually engaging landing page for professional nutritionists, utilizing effects like Scroll Storytelling and layered parallax to captivate visitors. The page will feature animated cards and premium hover interactions, designed to enhance user experience and convey professionalism, steering away from a typical AI-generated appearance.

## CORE FEATURES
1. **Hero Section**: A captivating introductory area with a prominent title, a brief description, and a call-to-action button that encourages users to learn more or contact the nutritionist.
2. **Scroll Storytelling**: An engaging narrative experience that unfolds as users scroll down the page, integrating smooth animations and transitions to maintain interest.
3. **Animated Cards**: Interactive cards that display services, testimonials, or educational content related to nutrition, featuring hover effects and animations for user engagement.
4. **Cinematic Typography**: Use of striking typography that enhances readability and emphasizes key messages throughout the landing page.
5. **Contact Form**: A streamlined contact section allowing potential clients to get in touch or book consultations easily, enhancing lead generation.
6. **Responsive Design**: Optimized for all devices, ensuring a seamless experience on desktops, tablets, and mobile phones.

## 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**: A single-column layout with sections stacked vertically, including a hero section, features, testimonials, and a contact form, all designed to guide the user through the content smoothly.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Context API or Zustand for managing state across components.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS.
2. **Create Layout Components**: Build reusable components (e.g., Header, Footer, Card, Button) following the design specifications.
3. **Develop Hero Section**: Implement the hero section with a background image or video, prominent text, and a call-to-action button, ensuring it captures attention.
4. **Implement Scroll Effects**: Integrate Scroll Storytelling and parallax effects using libraries like react-scroll-parallax or GSAP for smooth animations.
5. **Design Animated Cards**: Create animated card components that reveal information on hover, utilizing Tailwind CSS for styling and animations.
6. **Build Contact Form**: Create a simple form for potential clients with validation and submission handling, ensuring it aligns with the minimalist design.
7. **Optimize for Responsiveness**: Test and adjust the layout and components for various screen sizes to ensure a seamless experience across devices.
8. **Deploy the Landing Page**: Use a hosting service like Vercel or Netlify to deploy the landing page for public access.

## USER EXPERIENCE
Visitors will experience a fluid and engaging interaction as they scroll through the landing page. The cinematic typography will draw attention to key messages, while animated cards will provide dynamic content that encourages exploration. The smooth inertia scroll will create a sense of continuity, and the magnetic buttons will enhance usability, making it easy for users to navigate and contact the nutritionist directly. Overall, the design will convey professionalism while ensuring a modern and user-friendly experience.