Bob's BBQ

### Production-Ready Prompt: The 1969 Airstream BBQ Experience

**Role:** Award-winning Elite Designer & Expert Web Developer
**Objective:** Build a premium, high-performance, animated React landing page for a converted 1969 Airstream BBQ food truck.

---

### 1. Core Technology Stack
*   **Framework:** React 19 (Vite) with TypeScript.
*   **Styling:** Tailwind CSS v4 (utilizing arbitrary values for precision).
*   **Animations:** Framer Motion (for layout transitions and micro-interactions).
*   **3D Elements:** Three.js + React Three Fiber (for falling leaves and 3D scene).
*   **Icons:** Lucide-react (customized for BBQ/Jazz themes).
*   **Fonts:** 'Playfair Display' (Serif for headings), 'Inter' (Sans for body).

### 2. Design System & Aesthetics
*   **Color Palette:**
    *   `Background (Antique):` #F5E6D3 (Textured parchment/aged cream).
    *   `Airstream Silver:` #C0C0C0 with a metallic linear-gradient.
    *   `BBQ Accent (Smoky Red):` #8B0000.
    *   `Text (Charcoal):` #1A1A1A.
*   **Typography:**
    *   H1/H2: `font-serif` with `tracking-tight`.
    *   Body: `font-sans` with `leading-relaxed`.
*   **Visual Style:** "Retro-Modern Fusion." High-grain textures, organic nature overlays, and industrial metallic accents.

### 3. Section-By-Section Implementation

#### **Hero Section: The Airstream Conversion**
*   **Visual:** A high-resolution, centered 1969 Airstream (`https://images.unsplash.com/photo-1523905330026-b8bd1f5f320e`).
*   **Branding:** A black, hand-drawn style SVG logo on the Airstream shell reading "Bob's BBQ."
*   **Interaction:** A "Conversion Toggle" that uses `layoutId` from Framer Motion to morph the Airstream from a standard trailer into a BBQ movable with a fold-out serving hatch and smoke emitters.
*   **Nature Integration:** Background layers of lush greenery (`https://images.unsplash.com/photo-1441974231531-c6227db76b6e`) with a 3D particle system of falling oak leaves.

#### **The Menu: The Holy Trinity**
*   **Layout:** Bento grid style.
*   **Items:** 
    *   *Short Ribs:* (`https://images.unsplash.com/photo-1544025162-d76694265947`)
    *   *Signature Burger:* (`https://images.unsplash.com/photo-1568901346375-23c9450c58cd`)
    *   *Smoked Sausage:* (`https://images.unsplash.com/photo-1547050605-2f268cd5e3ab`)
*   **Hover:** Cards should tilt using `whileHover={{ scale: 1.05, rotateY: 5 }}`.

#### **The Vibe: Jazz & Sitting Area**
*   **Visual:** A lifestyle section showing a cozy outdoor sitting area with string lights and vintage jazz instruments (Saxophone, Trumpet) leaning against wooden crates.
*   **Audio Visualizer:** A subtle Framer Motion SVG path that undulates like a jazz bassline in the background.

### 4. Animations & Micro-Interactions
*   **Custom Cursor:** 
    *   Replace default cursor with a "Spatula" symbol (`lucide-react` UtensilsCrossed).
    *   **Behavior:** Use `useMotionValue` and `useSpring` for a fluid, lagging "flow" effect.
    *   **Magnetic Effect:** Implement a `Magnetic` wrapper component for all CTA buttons that pulls the spatula cursor toward the center of the button when within a 50px radius.
*   **3D Falling Leaves:** A `Canvas` component from `@react-three/fiber` rendering 20-30 instances of a leaf geometry with a random `rotation` and `y-axis` velocity to simulate wind.
*   **Scroll Reveals:** Use `viewport={{ once: false }}` to trigger "smoke" animations (opacity/blur transitions) as the user scrolls to the BBQ sections.

### 5. Technical Requirements
*   **Responsive Design:** 
    *   Mobile: Stacked layout, hidden 3D leaves for performance.
    *   Desktop: Full-width immersive experience with `overflow-x-hidden`.
*   **Performance:** Use `React.lazy` for the Three.js components. Optimize images with `srcset`.
*   **Tailwind Specifics:** 
    *   `bg-[url('/parchment-texture.png')]` for the antique background.
    *   `shadow-[20px_20px_60px_#d1c4b3,-20px_-20px_60px_#ffffff]` for soft retro neumorphism.
*   **Accessibility:** Ensure `aria-label` on all interactive icons and maintain a contrast ratio of at least 4.5:1 for text.