Candy Stick

# AI Generation Prompt: Candy Stick Landing Page

Build a premium, production-ready React + Tailwind CSS landing page for **"Candy Stick"**, a Willy Wonka-inspired chocolate factory. Focus on immersive "Chocolate Land" visuals, high-end animations, and strict adherence to the provided design system.

## 1. CORE TECHNOLOGY STACK
- **Framework:** React (Vite) with TypeScript.
- **Styling:** Tailwind CSS (Utility-first).
- **Icons:** `lucide-react`.
- **Animation:** Custom CSS Keyframes (No Framer Motion/GSAP).
- **Components:** Functional components with standard hooks.

## 2. DESIGN SYSTEM & AESTHETICS
- **Palette:** 
  - Primary: Wonka Purple (`#4B0082`), Wonka Gold (`#D4AF37`).
  - Secondary: Chocolate Brown (`#3D1F16`), Candy Pink (`#FF69B4`), Mint Green (`#98FF98`).
- **Typography:** 
  - `<h1>`: `font-normal` (Whimsical/Serif style).
  - UI Text: `font-[450]` (Sans-serif).
- **Imagery:** Use high-quality Unsplash URLs for chocolate rivers, candy forests, and glass elevators.

## 3. SECTION-BY-SECTION IMPLEMENTATION
- **Navigation:** Desktop center pill. Height: `52px`, Padding: `24px`, Gap: `30px`. Mobile menu must use `visibility` and `opacity` transitions.
- **Hero:** "Chocolate Land" concept. Background video (muted, playsInline). Buttons: `px-5` (base) to `sm:px-[27px]`.
- **Product Showcase:** Grid featuring "Wonka Bars," "Everlasting Gobstoppers," and "Fizzy Lifting Drinks."
- **Interactive Map:** A stylized town map directing users to the Factory, Candy Shops, and local amenities.
- **Revenue Card:** Asymmetric padding: `p-5 sm:p-8` (top/sides), `pb-5 sm:pb-6` (bottom).

## 4. ANIMATIONS & MICRO-INTERACTIONS
- **Animate Helper:** Create a React component to wrap elements for entrance reveals using CSS keyframes.
- **Keyframes:** Define `reveal-up`, `fade-in`, and `float` in `index.css`.
- **Hover Effects:** Subtle scaling and gold glows for candy cards.

## 5. TECHNICAL REQUIREMENTS (SPACING & BOX MODEL)
- **Max Width:** `max-w-[1800px]` with `px-5` to `md:px-[82px]`.
- **Responsive Logic:**
  - `< 1024px`: Single column, cards centered (`mx-auto`).
  - `≥ 1024px`: Two columns, cards left-aligned (`mx-0`).
- **Non-Negotiables:**
  - No conditional rendering for mobile menus.
  - Text must never touch button borders.
  - Use `muted` and `playsInline` for all video assets.

## 6. FINAL OUTPUT FILES
Provide complete code for:
1.  `App.tsx`: Main layout and section assembly.
2.  `Hero.tsx`: Immersive motion hero component.
3.  `index.css`: Tailwind directives and custom keyframe animations.
4.  `tailwind.config.js`: Theme extensions for colors and fonts.