Vibe Bar

# Act as an Award-Winning Elite Designer & Expert Web Developer

Build a premium, production-ready, and fully responsive landing page for **"VIBE-BAR"**, a high-end studio-concept sound bar and music instrument ecosystem. The site must be a visual masterpiece using **Vite + React + TypeScript + Tailwind CSS + Framer Motion + Lucide React**.

## 1. Core Technology Stack
- **Framework:** Vite + React 18 (TypeScript)
- **Styling:** Tailwind CSS (Utility-first)
- **Animations:** Framer Motion (Layout transitions, keyframes, gestures)
- **Icons:** Lucide-react
- **Typography:** 
  - Headings: **Sora** (Display 600/700)
  - Body: **Inter** (400/500)
- **Global Styles:**
  - `-webkit-font-smoothing: antialiased;`
  - `html { scroll-behavior: smooth; }`
  - `body { overflow-x: hidden; background-color: #120A14; color: #F3E8F6; font-family: 'Inter', sans-serif; }`

## 2. Design System & Aesthetics
- **Color Palette:**
  - `brand-bg`: `#120A14`
  - `brand-panel`: `#1C1120`
  - `brand-pink`: `#F472B6`
  - `brand-violet`: `#A855F7`
  - `brand-text`: `#F3E8F6`
- **Tailwind Config Extension:**
  ```javascript
  theme: {
    extend: {
      fontFamily: { display: ['Sora', 'sans-serif'], sans: ['Inter', 'sans-serif'] },
      colors: {
        brand: {
          bg: '#120A14',
          panel: '#1C1120',
          pink: '#F472B6',
          violet: '#A855F7',
          text: '#F3E8F6'
        }
      }
    }
  }
  ```

## 3. Section-By-Section Implementation

### A. Navbar
- **Layout:** Fixed top, `w-full`, `z-50`, `h-20`, `px-8`, `flex items-center justify-between`.
- **Style:** Glassmorphism (`bg-brand-bg/70 backdrop-blur-md border-b border-white/10`).
- **Logo:** `AudioLines` icon (Lucide) in `brand-pink` next to "VIBE-BAR" in `Sora 700`.
- **Links:** "Studio", "Artists", "Releases", "Contact" (Hover: `text-brand-pink` transition).
- **CTA:** "Book a session" button with a `bg-gradient-to-r from-brand-pink to-brand-violet` pill shape.

### B. Hero Section
- **Layout:** `relative min-h-screen flex flex-col items-center justify-center text-center px-4`.
- **Headline:** `h1` text "Sound that moves." using `Sora 700`, `text-transparent bg-clip-text bg-gradient-to-b from-white to-white/50`, `text-[clamp(2.8rem,9vw,6rem)]`, `tracking-tighter`.
- **Text Animation:** Implement per-letter "rise + blur" stagger effect (0.05s delay per letter).
- **Background Waveform:** A live SVG waveform behind the text. 64 vertical bars (`rect`). Animate their height attribute using `framer-motion` with `animate={{ height: [20, 80, 40, 100, 20] }}` using `Math.random()` for variance, looping infinitely. Gradient fill: `url(#wave-gradient)` (Pink to Violet).
- **Interaction:** A "Magnetic" Play Button (`Lucide Play` icon) that follows the cursor slightly within a radius.
- **Scroll Cue:** Animated `Mouse` icon at the bottom center.

### C. Features (Bento Grid)
- **Layout:** `max-w-7xl mx-auto py-24 px-6 grid grid-cols-1 md:grid-cols-3 gap-6`.
- **Tile 1 (Equalizer):** `md:col-span-2 bg-brand-panel rounded-3xl p-8 overflow-hidden`. Features a real-time animating 12-band equalizer graphic.
- **Tile 2 (Mastering):** `bg-brand-pink/10 border border-brand-pink/20 rounded-3xl p-8 flex flex-col items-center justify-center`. Features a circular progress SVG representing "Mastering Precision" (animate `stroke-dashoffset` on scroll).
- **Tile 3 (Sound Bar Product):** `bg-brand-panel rounded-3xl p-8`. Image of a sleek sound bar (Unsplash: `https://images.unsplash.com/photo-1545454675-3531b543be5d?q=80&w=800`).
- **Tile 4 (Instruments):** `md:col-span-2 bg-gradient-to-br from-brand-violet/20 to-brand-bg rounded-3xl p-8`. Showcase a MIDI controller (Unsplash: `https://images.unsplash.com/photo-1598488035139-bdbb2231ce04?q=80&w=800`).

### D. Artists Grid
- **Layout:** `grid grid-cols-2 lg:grid-cols-4 gap-4 px-6`.
- **Interaction:** Image zoom on hover (`scale-110`). Artist name slides up from the bottom on hover. On click, expand a visual bio overlay using Framer Motion `AnimatePresence`.
- **Images:** Use high-contrast studio portraits (Unsplash IDs: `mEZ3Um8nveo`, `i2hoD-9dy6U`, `OhKElOkQ3RE`, `Xj4859ViOBo`).

### E. Call to Action (CTA) & Footer
- **CTA:** Large section with `bg-brand-violet`. Headline "Ready to amplify?" with a Magnetic "Get Started" button.
- **Footer:** 4-column layout (Product, Company, Social, Legal). `brand-text/50` color. `AudioLines` logo in grayscale.

## 4. Animations & Micro-Interactions
- **Magnetic Effect:** Create a reusable `Magnetic` component for all primary buttons using `useMotionValue` and `useSpring`.
- **Scroll Reveal:** Use `useInView` from `framer-motion` to trigger section entries (`y: 50` to `0`, `opacity: 0` to `1`).
- **Accessibility:** Wrap animations in `useReducedMotion`. If true, disable the waveform and equalizer animations.
- **Hover States:** All cards should have a subtle `y-[-8px]` lift and `shadow-2xl` with a `brand-pink/10` tint.

## 5. Technical Requirements
- **Responsive Design:** 
  - Mobile: Stacked bento tiles, hidden desktop nav links, hamburger menu.
  - Tablet: 2-column grid for features.
  - Desktop: Full 64-bar waveform and complex bento layout.
- **Performance:** Use `React.memo` for the Waveform bars to prevent unnecessary re-renders.
- **Clean Code:** Use Tailwind `clsx` or `tailwind-merge` for dynamic classes. Ensure all components are typed with TypeScript interfaces.

**Output the complete code for `App.tsx`, `tailwind.config.js`, and necessary sub-components in a single response.**