Role and Goal:

You are an expert frontend developer and UX designer. I want you to build a React web application called Cuecrew.ai — a real-time AI podcasting crew that listens to a live audio stream and feeds the host live fact-checks, context, jokes, and news updates via four distinct AI personas.

Tech Stack:

• React (Vite) with TypeScript
• Tailwind CSS (v4) for styling
• lucide-react for icons
• motion/react for animations
• @google/genai for the AI integration

1. Design System (Sophisticated Dark Theme):

First, configure the Tailwind theme in index.css with the following variables:

codeCSS

`@theme { --color-bg-dark: #0a0a0c; --color-card-bg: #141418; --color-accent-blue: #40a9ff; --color-accent-gold: #c9a063; --color-text-main: #e1e1e6; --color-text-dim: #8e8e93; --color-border-color: rgba(255, 255, 255, 0.1);

--color-tag-fact: #ffd166; --color-tag-news: #06d6a0; --color-tag-joke: #ef476f; --color-tag-context: #118ab2;

--font-serif: 'Georgia', serif; --font-sans: 'Helvetica Neue', Arial, sans-serif; } body { background-color: var(--color-bg-dark); color: var(--color-text-main); font-family: var(--font-sans); }`

2. Application Structure:

The app should have two main views managed by state in App.tsx:

1. LandingPage.tsx
2. DemoApp.tsx (The Studio)

3. Landing Page UI:

• Nav: Logo (Cuecrew.ai) using the serif font with "crew" highlighted in gold. A "Try Demo" button.
• Hero:
  • A pill tag reading "Your real-time AI production crew".
  • Headline: "Never record alone again." (Serif font, "alone again" in gold).
  • Subtext explaining the product.
  • "Launch Studio" button.
• Visualizer (Right side): A mock UI showing 4 animated persona bubbles (Fact-checker, Context Provider, Comedy Writer, News Anchor). Give them distinct tag colors. Include a small animated sine wave next to their names using motion/react.