feat(docs): redesign landing page as dark streamer marketing page

[nathanialhenniges]

Summary

• Full rewrite of the docs home (app/(home)/page.tsx) with a midnight-studio aesthetic built for streamers
• Swapped fonts to Unbounded (headings) + Instrument Sans (body) via next/font/google
• Added midnight background utilities, waveform animation, and Now Playing pulse in global.css
• Added ### Release Checklist to CLAUDE.md listing every file that needs updating on each release

What changed

File	Change
apps/docs/app/(home)/page.tsx	Full rewrite — dark marketing page with animated waveform, Now Playing card mockup, proof bar, 4 feature cards, 3-step guide, developer callout, CTA footer
apps/docs/app/layout.tsx	Swapped Inter → Unbounded + Instrument Sans
apps/docs/app/global.css	Added .bg-midnight, .bg-midnight-card, waveform animation, now-playing-pulse
CLAUDE.md	Added release checklist under ## Versioning

Design decisions

• Dark-first — streamers live in dark mode; the midnight palette signals this app is built for them
• ADHD-friendly — version badge above fold, max 2 lines per description, big numbered circles for steps, no walls of text
• CSS-driven animations — waveform bars and Now Playing card pulse are pure CSS, no "use client" needed
• Plain copy — "!song in chat shows exactly what's playing" instead of jargon

Test plan

• bun run dev --filter docs — landing page renders in dark mode
• Waveform bars animate, Now Playing card pulses
• Both fonts load (Unbounded for headings, Instrument Sans for body)
• Proof bar wraps on mobile, CTA buttons stack vertically
• /docs, /docs/architecture, /docs/development, /docs/security links resolve

🤖 Generated with Claude Code

Summary by CodeRabbit

• New Features

  • Added animated waveform visualization and "now playing" card to the home page
  • Introduced new "For Developers" documentation section

• Style

  • Redesigned home page with dark theme and updated visual styling
  • Refreshed typography with new font selections
  • Enhanced button labels and call-to-action elements

• Documentation

  • Added pre-release checklist documenting version bumping and deployment steps

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 150a259a-f802-4c29-adbd-2029c7b0021e

📥 Commits

Reviewing files that changed from the base of the PR and between 7eacc2f and 8e863f3.

📒 Files selected for processing (4)

• CLAUDE.md
• apps/docs/app/(home)/page.tsx
• apps/docs/app/global.css
• apps/docs/app/layout.tsx

---

Walkthrough

Redesigned the documentation site's home page with new animated UI components, a dark theme, restructured content sections, and updated fonts. Changes include new waveform and now-playing card components, refreshed feature descriptions, CSS animations, and font replacements, alongside release checklist documentation.

Changes

Cohort / File(s)	Summary
Documentation & Release Process CLAUDE.md	Added "Release Checklist" section detailing pre-release steps including version bumping, changelog updates, git tagging, and GitHub Actions workflow verification.
Homepage UI Overhaul apps/docs/app/(home)/page.tsx	Introduced WaveformBars and NowPlayingCard components for animated hero visuals. Restructured features from old shape {color,bg} to {accent}, updated copy (e.g., "Stream Overlay", "Discord Status", "Privacy First"), replaced highlights section with "For Developers" developer documentation links, changed theme to dark layout, and updated CTA labels and styling.
Styling & Animations apps/docs/app/global.css	Added .bg-midnight and .bg-midnight-card utility classes, updated .gradient-text to hex-based gradient, refined .hero-glow radial gradient with rgba colors, removed dark mode .hero-glow override, and introduced .waveform and .waveform-bar animation styles with @keyframes wave-bounce (duration/delay/peak variables) and .now-playing-pulse with @keyframes card-pulse.
Typography Configuration apps/docs/app/layout.tsx	Replaced Inter font with Unbounded and Instrument_Sans Google fonts, updated CSS variable assignments (--font-unbounded, --font-instrument), and adjusted root className to apply both font variable classes.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

Possibly related PRs

• Dev #2 — Overlapping modifications to docs home page, global CSS, and layout files suggest parallel or dependent UI redesign work.

Poem

🐰✨ A waveform dances, pulses glow bright,
New fonts and dark themes painting the night,
Components bounce in a rhythm so grand,
While features evolve across the command,
The docs now shimmer with vibrant new sight! 🎨🌙

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch chore/docs-landing-redesign

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}