Before writing any code, output a brief 3-bullet design specification outlining your plan:
1. LAYOUT & HIERARCHY: Your structural strategy (e.g., Bento Grid proportions, asymmetry, or section transitions).
2. TYPOGRAPHY & DESIGN TOKENS: Your font sizing rhythm and exact color contrast hex codes.
3. MOTION CHOREOGRAPHY: Your plan for entrance animations, hover states, and structural micro-interactions.
---
### TECH STACK CONSTRAINTS
- Framework: React (TypeScript) + Tailwind CSS utilities.
- Icons: Lucide React.
- Animation: Framer Motion (declarative physics-based or smooth spring transitions).
- Style: shadcn/ui design conventions. Absolutely NO custom CSS files; rely entirely on semantic Tailwind classes and inline styles where math-driven dynamics are needed.
- Deliverable: Output the entire interface as a single, self-contained, beautifully commented component. Ensure zero external dependencies outside of standard React, Framer Motion, and Lucide icons.
---
### VISUAL DESIGN SYSTEM & AESTHETIC
- Theme: Ultra-premium Midnight Obsidian (Dark Mode).
- Base Canvas: Background gradient utilizing `bg-[#030712]` fading into a subtle radial ambient glow (`bg-[radial-gradient(...)]`) using deep indigo/violet hues.
- Borders & Glassmorphism: Borders must use sharp, hairline translucent values (`border-white/[0.08]`) paired with crisp background blurs (`backdrop-blur-xl bg-white/[0.02]`).
- Focus State / Accent: Electric Violet (#8B5CF6) and Cyber Cyan (#06B6D4) used sparingly for high-intent interactive elements and glowing text gradients.
- Typography: Perfect optical hierarchy. Massive tracking-tight hero headers, crisp secondary body text with generous leading (leading-relaxed), and mono-spaced badge labels.
---
### LAYOUT STRUCTURE & COMPONENTS
1. GLOBAL NAVIGATION: A floating, translucent sticky header that morphs/shrinks smoothly on scroll, complete with micro-animated interactive menu links.
2. HERO DISCOVERY: An expansive layout featuring a high-impact asymmetric typographic header on the left, flanked on the right by a dynamic, interactive "Live Sandbox" or "Command Console" component.
3. THE BENTO GRID FEATURE DISPLAY: A 4-card responsive Bento grid below the hero. Each card must feature a distinct visual archetype:
- Card A: A live interactive data-visualization indicator or trend graph (simulated cleanly via SVG paths).
- Card B: A drag-and-drop or click-to-activate status toggle board.
- Card C: A rich-text feature showcase with glowing hover-tracking background accents.
- Card D: A sleek metric tracker displaying animated numeric tickers.
---
### MICRO-INTERACTIONS & MOTION REQUIREMENTS (FRAMER MOTION)
- Entrance Animations: Staggered, spring-loaded fade-and-slide up transitions for all major layout containers on page mount (`type: "spring", stiffness: 100`).
- Interactive Hover Tracking: Implement a hover effect on the Bento cards where a subtle glowing cursor-tracking radial gradient follows the user's mouse position across the card container.
- State-Driven UI: Clicking active buttons, changing tabs, or hovering interactive cards must trigger smooth structural layout transitions, not jarring binary visibility cuts.
Ensure the code is robust, cleanly formatted, has no broken imports, handles edge cases gracefully, and is ready for production. Take a deep breath and construct a true masterpiece.