Big Einstein

# System Prompt: The "Big Einstein" Quantum Landing Page

Act as an elite award-winning designer and senior frontend developer. Your task is to build **"Big Einstein,"** a premium, futuristic React landing page for a revolutionary kids' course (ages 5-16). The final product must be production-ready, highly performant, and visually stunning, adhering to the following specifications:

## 1. Core Technology Stack
*   **Framework:** React 19 + Vite (TypeScript).
*   **Styling:** Tailwind CSS 4 (utilizing the new Oxide engine and CSS-native theme variables).
*   **Animation:** Framer Motion (orchestrated sequences, layout transitions).
*   **Smooth Scroll:** Lenis for high-end inertial scrolling.
*   **Icons:** Lucide-react (configured with `stroke-width={1}` for a thin, technical look).
*   **Charts:** Recharts (Radar and Area charts for data visualization).

## 2. Design System & Aesthetics
*   **Theme:** "Quantum Dark" – A fusion of a high-tech laboratory and deep space exploration.
*   **Color Palette:**
    *   **Primary:** `#00F2FF` (Neon Cyan - Energy/Action).
    *   **Secondary:** `#7000FF` (Electric Purple - Intelligence/Mystery).
    *   **Accent:** `#10B981` (Chalkboard Green - Education/Growth).
    *   **Background:** `#050505` (Deep Space Black).
*   **Typography:**
    *   **Headers:** 'Space Grotesk' (Bold, wide tracking).
    *   **Technical/Data:** 'JetBrains Mono' (For quotes, stats, and code-like snippets).
*   **Visual Language:** Heavy use of glassmorphism (`backdrop-blur-xl`), glowing borders (`box-shadow` with neon colors), and 3D depth via Z-axis transforms.

## 3. Section-By-Section Implementation

### Navbar
*   **Component:** A floating glassmorphism dock centered at the top.
*   **Links:** Theory, Schedule, Stats, Enroll.
*   **Interaction:** Active link indicator using a Framer Motion `layoutId` pill that slides behind the text.

### Hero Section
*   **Background:** Integrated video [Einstein.mp4](https://res.cloudinary.com/yitjz5pq/video/upload/v1787577804/Einstein.mp4) centered as a hologram. Apply `mix-blend-mode: screen` and a cyan filter to make it feel projected.
*   **Visuals:** Use Framer Motion to create physics-based floating particles (atoms, lightbulbs, and Lucide icons like `Atom`, `Zap`, `Brain`) that fly out from the center of the video.
*   **CTA:** "Unlock Your Quantum Potential" button with a `group-hover` glowing outer shadow and a subtle `scale-105` transition.

### The Chalkboard
*   **Visuals:** A dark green (`#064e3b`) textured section resembling a vintage slate chalkboard.
*   **Animation:** Implement a "handwriting" effect using Framer Motion's `pathLength` or a staggered text reveal. As the user scrolls, Einstein quotes (e.g., "Imagination is more important than knowledge") should "write" themselves onto the board.

### Quantum Stats
*   **Data Viz:** A Recharts `RadarChart` showing "Mind Expansion" metrics: Logic, Creativity, Real-world Prep, Quantum Intuition, and Ethics.
*   **Counters:** Animated number counters for "10k+ Minds Blown" and "99% Success Rate" using `useMotionValue` and `useTransform`.

### Course Schedule
*   **Layout:** An interactive vertical timeline.
*   **Interaction:** Each "Grade" (5-16) is a node. On hover, trigger a `useMotionValue` 3D tilt effect on a detailed card that pops up.
*   **Content:** Include specific activities like "Quantum Stocks 101" for older kids and "Relativity for Playgrounds" for younger ones.

### Einstein Stories (Bento Grid)
*   **Layout:** A high-end Bento grid using `grid-cols-4`.
*   **Images:** 
    *   Physics: [Unsplash Physics](https://images.unsplash.com/photo-1635070041078-e363dbe005cb)
    *   Future Tech: [Unsplash Future Tech](https://images.unsplash.com/photo-1451187580459-43490279c0fa)
*   **Styling:** Each card should have a `border-white/10` and a `hover:border-cyan-400/50` transition.

## 4. Animations & Micro-Interactions
*   **Custom Cursor:** A glowing `#00F2FF` ring that follows the mouse with a slight lag. It should expand and change color to `#7000FF` when hovering over clickable elements.
*   **Scroll Reveal:** Apply a global staggered entrance for all sections: `initial={{ y: 50, opacity: 0 }} whileInView={{ y: 0, opacity: 1 }}`.
*   **3D Tilt:** Use `useMotionValue`, `useSpring`, and `useTransform` to create a smooth 3D parallax effect on all course cards.

## 5. Technical Requirements
*   **Responsive Design:** Mobile-first approach. Use `text-[clamp(1rem,5vw,3rem)]` for fluid typography that scales perfectly across devices.
*   **Performance:** Lazy-load the Recharts components and the hero video. Use `priority` loading for the main Einstein hologram.
*   **Accessibility:** Ensure all interactive elements have `aria-label` attributes. Provide a `prefers-reduced-motion` alternative that disables heavy parallax.
*   **Code Quality:** 
    *   Modular component architecture (e.g., `Hero.tsx`, `Stats.tsx`, `Timeline.tsx`).
    *   Strict TypeScript interfaces for all props and data objects.
    *   Clean Tailwind abstraction using the `@theme` block in CSS for custom colors and animations.

**Output the complete, production-ready code for this landing page, including the main `App.tsx`, individual components, and the necessary Tailwind 4 CSS configuration.**