Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page designed to validate interest in a product that helps active individuals eat better without sacrificing taste. The application will showcase Flavor Boosters™ and provide a simple system that facilitates meal planning, targeting urban users aged 25-35 looking for convenient and delicious vegetarian protein options.

## CORE FEATURES
1. **Hero Section**: Engaging introduction with a title and subtitle that convey the core message of delicious, plant-based meals ready in 10 minutes.
2. **Social Proof**: Display badges and testimonials to create trust, such as "+2,000 people already eat this way."
3. **Meal Planning System**: Interactive feature that allows users to select meal types based on their day (Recovery, Quick & Balance, Social & Enjoy).
4. **Fake Door Interaction**: Clickable CTAs that open a modal for pricing and waitlist signup without navigating away from the page.
5. **Pricing Modal**: Displays three pricing tiers (Starter, Core, Pro) with a clear call-to-action to reserve a spot.
6. **Waitlist Form**: Simple email capture form with an optional interest question to gauge user preferences.

## 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 main layout will consist of a full-width hero section, followed by feature sections arranged vertically, interspersed with CTAs and social proof elements to enhance visual hierarchy and user engagement.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not specified but can use Context API or Zustand if needed for managing modal state.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS.
2. **Create Components**: Develop reusable components such as Button, Modal, and Form elements using shadcn/ui for consistent styling.
3. **Build Layout**: Structure the landing page layout with sections for the hero, features, interactions, and forms using Tailwind CSS for styling.
4. **Implement Hero Section**: Create the hero section with a title, subtitle, and engaging CTAs.
5. **Add Social Proof**: Integrate badges and testimonials to enhance credibility.
6. **Develop Meal Planning Interaction**: Create a selector for meal types and ensure it updates the UI without page reloads.
7. **Configure Fake Door Interaction**: Set up modal logic to display the pricing information when users click on any CTA.
8. **Create Pricing Modal**: Build the modal with pricing plans and a waitlist form, ensuring all interactions are user-friendly.
9. **Test Responsiveness**: Ensure all components are responsive and provide a smooth experience on mobile devices.
10. **Deploy**: Prepare the application for deployment on a web platform and test functionality.

## USER EXPERIENCE
Users will land on a visually appealing page that immediately communicates the product's value. As they scroll, they will encounter engaging content that leads them to interact with the meal planning system. Clicking any CTA will trigger a modal that offers information on pricing and allows them to join a priority waitlist, reinforcing a sense of exclusivity and urgency. The overall experience will be seamless, with a focus on conversion through clear messaging and minimal friction.