Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a high-conversion, single-page e-commerce landing page designed to function as a sleek payment portal for the supplement brand "MyCure". The main purpose is to create an engaging user experience with a minimalist aesthetic, allowing for easy product management and integration of a payment API in the future.

## CORE FEATURES
1. **Sticky Header**: A persistent navigation bar featuring the "MyCure" brand name and a cart indicator that smoothly scrolls to sections of the page.
2. **Hero Section**: A visually impactful area featuring a compelling primary call-to-action (CTA) to drive conversions.
3. **Product Grid**: A clean and organized display of the 8 MyCure products, allowing users to browse and select items easily.
4. **Cart Drawer**: A beautifully designed slide-out cart that allows users to add products, adjust quantities, and view a detailed breakdown of their subtotal, taxes (strict 15% IVA), and grand total.
5. **Mock Checkout Process**: A decoupled shipping/contact form presented in the cart, with a simulated purchase completion process.
6. **Order Notification Hook**: A stubbed data structure for sending order information to a backend service or webhook, ensuring seamless integration later.

## 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 consists of a continuous scrolling structure: sticky header, high-impact hero section, horizontal marquee for brand keywords, a typography block for use cases, a product grid, an about/philosophy section, and a simple contact/footer.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Local state management (Zustand preferred) for product data and cart interactions.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui components.
2. **Create Layout Structure**: Develop the main layout with a sticky header and smooth scrolling functionality.
3. **Implement Hero Section**: Design the hero section with a strong visual impact and a primary CTA button utilizing the reddish-orange accent color.
4. **Build Product Grid & Data**: Create a modular product grid that pulls data from a centralized array. The mock data MUST include these exactly 8 products:
   - Maitake
   - Shiitake
   - Ashwagandha
   - Chaga
   - Cordyceps
   - Lion's Mane
   - Turkey Tail
   - Reishi
5. **Develop Cart Drawer**: Implement the slide-out cart drawer with features to add, adjust, and remove items while calculating the 15% IVA tax rate.
6. **Design Checkout Form**: Inside the cart drawer, create a clean shipping/contact form and a custom checkout button that simulates a successful purchase.
7. **Setup Order Notification Hook**: Stub out the necessary data structure for sending order details to a webhook or backend service.

## USER EXPERIENCE
Users will have a seamless interaction with the landing page, beginning with the sticky header that navigates to different sections as they scroll. The hero section will capture attention with engaging visuals and a clear CTA. The product grid allows users to browse easily, while the cart drawer provides a convenient way to manage their selections and see a transparent breakdown of costs. Finally, the mock checkout process is designed to give users a sense of completion, with clear indications of where actual payment functionalities will be integrated later.