Virtuoso AI

# Production-Ready Prompt: AI-Powered Musical Studio Landing Page

Act as an elite Senior Frontend Engineer and UI/UX Designer. Build a high-performance, premium React landing page using Tailwind CSS and Framer Motion. The concept is "Virtuoso AI Studio"—a hybrid physical/digital music academy featuring autonomous AI tutors and a vibrant community space.

### 1. Core Technology Stack
*   **Framework:** React (Vite) with TypeScript.
*   **Styling:** Tailwind CSS (JIT mode).
*   **Animations:** Framer Motion (scroll-linked, staggered, and layout transitions).
*   **Icons:** Lucide-react.
*   **Components:** Shadcn/UI (Tabs, Dialog, Card, Button).

### 2. Design System & Aesthetics
*   **Tone:** Bright, energetic, and instrument-centric.
*   **Color Palette:**
    *   Primary: `#7C3AED` (Vivid Violet)
    *   Secondary: `#F472B6` (Soft Pink)
    *   Accent: `#34D399` (Fresh Emerald)
    *   Background: `#FFFFFF` with `#F8FAFC` sections.
*   **Typography:** `Plus Jakarta Sans` (Headings), `Inter` (Body).
*   **Visual Style:** Glassmorphism, high-saturation gradients, and large-scale instrument photography.

### 3. Section-By-Section Implementation

**A. Hero Section (The Future of Sound)**
*   **Layout:** Split-screen desktop, stacked mobile.
*   **Content:** H1 with gradient text "Master Music with AI Precision."
*   **Visual:** A floating 3D-style instrument collage using `animate={{ y: [0, -20, 0] }}`.
*   **CTA:** Primary button `.bg-violet-600 .hover:shadow-violet-500/50`.

**B. The AI Tutor (Autonomous Learning)**
*   **Feature:** Interactive dashboard mockup showing real-time waveform analysis.
*   **Tech:** Use a Framer Motion `path` animation to simulate a live audio spectrum.
*   **Copy:** Focus on 24/7 autonomous feedback for on-site and online students.

**C. The Physical Campus (Studio & Stage)**
*   **Grid:** 3-column bento box layout.
*   **Items:** 
    1. **Recording Room:** `https://images.unsplash.com/photo-1598488035139-bdbb2231ce04`
    2. **Instrument Lab:** `https://images.unsplash.com/photo-1511379938547-c1f69419868d`
    3. **Center Stage:** `https://images.unsplash.com/photo-1501386761578-eac5c94b800a`
*   **Effect:** Hover-triggered image zoom and overlay text.

**D. Top Performer Showcase (AI Video)**
*   **Component:** A featured video card with a "Generated by AI" badge.
*   **Visual:** Use a placeholder video URL with a custom play button overlay.
*   **Social Proof:** "Student of the Month" spotlight with community stats.

**E. Instrument Lab (Interactive Samples)**
*   **UI:** Horizontal scroll snapping cards.
*   **Interaction:** Click a card to trigger a Lucide `Volume2` icon animation and a simulated "Play" state.
*   **Images:** High-res close-ups of Piano, Electric Guitar, and Violin.

### 4. Animations & Micro-Interactions
*   **Scroll Reveals:** Use `whileInView` with `viewport={{ once: true }}` for all sections.
*   **Button Hovers:** Scale `1.05` with subtle glow effects.
*   **Navigation:** Sticky glassmorphism header (`backdrop-blur-md`) that shrinks on scroll.
*   **Staggered Lists:** Use `variants` to animate feature list items one by one.

### 5. Technical Requirements
*   **Responsiveness:** Mobile-first approach; use `md:grid-cols-2` and `lg:grid-cols-3`.
*   **Performance:** Lazy load images; use optimized Unsplash source URLs.
*   **Accessibility:** ARIA labels for all interactive elements and high-contrast text ratios.
*   **Code Quality:** Clean, modular component structure (e.g., `Hero.tsx`, `FeatureCard.tsx`, `Navbar.tsx`).

**Output the complete code for `App.tsx` and necessary sub-components in a single, production-ready block.**