Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
Create a single-page React application for a snack brand called "SNAPZ". The purpose is to showcase the brand's personality through a clean, modern design that incorporates bold typography and vibrant colors. The application will serve as a marketing tool to attract and engage customers with a focus on flavor and product offerings.

## CORE FEATURES
1. **Sticky Navbar**: A clean and modern navigation bar with links to Flavors, Bundles, The Drop, and About sections, featuring a prominent "Shop Now" button.
2. **Hero Section**: A bold, typographic hero area that captures attention with a prominent headline and a call to action (CTA) to shop for products.
3. **Flavor Ticker Strip**: A scrolling ticker that highlights new flavors and promotions, creating a dynamic and engaging user experience.
4. **Product Carousel**: A central feature displaying the product lineup with smooth transitions, allowing users to browse flavors easily.
5. **Community Wall**: A section showcasing user reviews and testimonials, enhancing social proof and community engagement.
6. **Email Capture Form**: A clean and direct section for users to subscribe for updates on new flavors and exclusive deals.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean, simple design with plenty of white space, generous padding, and a focus on typography.
- **Color Mode**: Light theme with dark text on light backgrounds, using a vibrant color palette for accents.
- **Layout**: Utilizes a 12-column CSS grid with alternating section backgrounds to create natural rhythm and flow. Each section is well-defined with generous spacing.
- **Typography**: 
  - Display Font: Familjen Grotesk or Syne (wide, modern)
  - Accent/Label Font: Space Mono (monospace for labels and badges)
  - Body Font: DM Sans (clean, friendly, and readable)
  - Sections use large tracking for headers, contrasting weights between display and body text, and italics for emphasis.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS for utility-first styling
- **UI Components**: Utilize shadcn/ui for consistent design patterns and components
- **State Management**: React's built-in state management or Context API for managing state across components

## IMPLEMENTATION STEPS
1. **Set up the Project**:
   - Initialize a new React project with Create React App using TypeScript.
   - Install Tailwind CSS and configure it according to the documentation.
   - Set up shadcn/ui for UI components.

2. **Create Components**:
   - Build the Navbar component with links and the shop button.
   - Create the Hero section with a headline and CTA buttons.
   - Implement the Flavor Ticker as a separate component for scrolling text.
   - Develop the Product Carousel using a horizontal layout for displaying products.
   - Design the Community Wall to show user reviews in a masonry layout.
   - Set up the Email Capture form and footer.

3. **Implement Layout**:
   - Use a 12-column grid for layout consistency across all sections.
   - Apply Tailwind CSS for styling, ensuring to follow the specified design rules for colors, typography, and spacing.

4. **Add Animations**:
   - Implement smooth, purposeful animations for entries and hover states using CSS transitions.
   - Use state hooks to manage animations on scroll and user interactions.

5. **Ensure Responsiveness**:
   - Use responsive design principles to ensure a seamless experience across devices.
   - Stack sections vertically for mobile view and adjust typography sizes accordingly.

6. **Testing and Deployment**:
   - Test the application across different browsers and devices for compatibility.
   - Deploy the application using a hosting service like Vercel or Netlify.

## USER EXPERIENCE
The user experience should be engaging and intuitive. Users will navigate through a sticky navbar, easily accessing different sections. The hero section will draw them in with bold messaging and clear CTAs. The flavor ticker will keep users informed of promotions, while the product carousel invites exploration of different snack options. Community reviews will build trust, and the email capture form provides a direct line for engagement. Overall, the design should feel lively and confident, reflecting the brand's personality while maintaining clarity and simplicity.