Skip to content

Landing page v0.2.0 redesign#274

Merged
jamiepine merged 3 commits intomainfrom
feat/landing-page-redesign
Mar 15, 2026
Merged

Landing page v0.2.0 redesign#274
jamiepine merged 3 commits intomainfrom
feat/landing-page-redesign

Conversation

@jamiepine
Copy link
Owner

@jamiepine jamiepine commented Mar 15, 2026

Summary

Complete redesign of the landing page to reflect the v0.2.0 multi-engine release.

  • Multi-engine messaging — replaced all Qwen-specific copy with multi-engine language across hero, meta tags, and feature descriptions
  • GitHub star count — server-side fetched via /api/stars route with 10-min cache, displayed as a Spacedrive-style badge in the navbar
  • Model cards section — replaced "Why Voicebox exists" manifesto with cards for all 4 TTS engines (Qwen3-TTS, Chatterbox, Chatterbox Turbo, LuxTTS) with specs and capabilities
  • Voice Creator section — new section with animated 3-tab UI (Upload, Microphone, System Audio) featuring waveform background animation matching the real app's recording UI
  • Responsive ControlUI — horizontal scroll profile cards on mobile, stacked layout, scroll-to-active profile with separate mobile/desktop refs, sticky header with gradient fade overlay
  • iOS Safari audio fix — unlock WaveSurfer's actual media element on user gesture to prevent NotAllowedError
  • Linux download enabled — was greyed out "Coming soon", now active with dynamic release link
  • GPU support copy — updated to include ROCm, Intel Arc, and DirectML
  • UI polish — pointer-events-none on all animations, accent play button, fixed-height profile cards, mobile edge fades, hero logo blend fix, grain overlay disabled (tile seams)

Files changed

  • landing/src/components/ControlUI.tsx — new animated hero component
  • landing/src/components/Features.tsx — rewritten feature cards with animations
  • landing/src/components/VoiceCreator.tsx — new voice creator section
  • landing/src/components/LandingAudioPlayer.tsx — new WaveSurfer audio player
  • landing/src/components/Navbar.tsx — star count badge
  • landing/src/app/page.tsx — new sections, model cards, updated copy
  • landing/src/app/api/stars/route.ts — GitHub star count API
  • docs/RELEASE_v0.2.0.md — full release notes and video script

Summary by CodeRabbit

  • New Features

    • Added "Save as Custom Preset" dialog for audio effects with name and description inputs
    • Landing page redesign featuring interactive demos: voice cloning animation, effects showcase, transcription UI, and voice creator component
    • GitHub star counter on landing navigation bar
  • Improvements

    • Enhanced audio playback handling with improved backend configuration
    • Dynamic sidebar styling with progressive accent opacity
    • Updated landing page layout with component-driven architecture and refreshed typography
    • Footer redesign with expanded footer sections
  • Dependencies

    • Added Framer Motion, WaveSurfer.js, and Space Grotesk font

New Spacedrive-inspired landing page with dark warm color system, glassmorphic navbar, feature cards with animated illustrations, and an interactive ControlUI mockup that cycles through voice generations with real audio playback via WaveSurfer.

The ControlUI demo script is fully data-driven - profiles, generation text, audio samples, and effects are all configurable from a single DEMO_SCRIPT array.

Includes 6 real voice samples (Jarvis, Morgan Freeman, Sam Altman, Samuel L. Jackson, Linus Tech Tips, Fireship) converted to webm opus.
…ds, voice creator section, responsive ControlUI, iOS audio fix

- Replace Qwen-specific copy with multi-engine messaging across hero, meta, and features
- Add GitHub star count fetched server-side via /api/stars with Spacedrive-style navbar badge
- Replace 'Why Voicebox exists' section with model cards for all 4 TTS engines
- Enable Linux download card (was 'Coming soon')
- Update GPU support copy to include ROCm, Intel Arc, DirectML
- Add Voice Creator section with animated 3-tab UI (upload, mic, system audio) and waveform background
- Make ControlUI responsive: horizontal scroll cards on mobile, stacked layout, scroll-to-active profile
- Fix iOS Safari audio autoplay (unlock AudioContext on user gesture)
- Fix hero logo square background with mix-blend-lighten
- Remove generation length green coloring, use gray with accent highlights
- Comment out grain overlay (visible tile seams)
- Remove player close button, stack waveform above controls on mobile
- Fixed-height profile cards (143px) with space between badges and buttons
…ith scroll fade, desktop scroll-to-active fix, iOS audio unlock, player and UI tweaks

- Add pointer-events-none/select-none to feature cards, voice creator, and ControlUI mock
- Sticky header with gradient fade overlay (matching real app 3-layer technique)
- Fix desktop scroll-to-active: separate mobile/desktop card refs to prevent mobile refs overwriting desktop
- Scroll selected card to 2nd row when outside safe zone above generate box
- iOS Safari audio unlock via WaveSurfer's actual media element
- Player: accent fill play/pause button, padding on volume slider, remove close button
- Profile cards: fixed 143px height, mobile edge fades with scroll-aware left fade
- Generate box: accent effect pill when active, white fill sparkle icon, edge-aligned on desktop
- Voice creator: animated waveform background with height-based bars
- 12 profiles (added Attenborough, Zendaya, Obama) for 4-row grid with scroll
@coderabbitai
Copy link
Contributor

coderabbitai bot commented Mar 15, 2026

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 0b135f0a-bec0-4563-9ccc-54991265bf29

📥 Commits

Reviewing files that changed from the base of the PR and between 732270b and 0c6aa15.

⛔ Files ignored due to path filters (9)
  • bun.lock is excluded by !**/*.lock
  • landing/public/audio/fireship.webm is excluded by !**/*.webm
  • landing/public/audio/jarvis.webm is excluded by !**/*.webm
  • landing/public/audio/linus.webm is excluded by !**/*.webm
  • landing/public/audio/morganfreeman.webm is excluded by !**/*.webm
  • landing/public/audio/samaltman.webm is excluded by !**/*.webm
  • landing/public/audio/samjackson.webm is excluded by !**/*.webm
  • tauri/src-tauri/gen/Assets.car is excluded by !**/gen/**
  • tauri/src-tauri/gen/voicebox.icns is excluded by !**/gen/**
📒 Files selected for processing (18)
  • app/src/components/AudioPlayer/AudioPlayer.tsx
  • app/src/components/EffectsTab/EffectsDetail.tsx
  • app/src/components/Sidebar.tsx
  • docs/RELEASE_v0.2.0.md
  • landing/package.json
  • landing/public/voicebox-logo-app.webp
  • landing/src/app/api/stars/route.ts
  • landing/src/app/globals.css
  • landing/src/app/layout.tsx
  • landing/src/app/page.tsx
  • landing/src/components/ControlUI.tsx
  • landing/src/components/Features.tsx
  • landing/src/components/Footer.tsx
  • landing/src/components/LandingAudioPlayer.tsx
  • landing/src/components/Navbar.tsx
  • landing/src/components/VoiceCreator.tsx
  • landing/src/lib/releases.ts
  • landing/tailwind.config.js

📝 Walkthrough

Walkthrough

This PR introduces a comprehensive landing page redesign with new interactive demo components, refactors AudioPlayer to use MediaElement backend instead of WebAudio, adds a preset save dialog to EffectsDetail, updates sidebar navigation styling, and documents v0.2.0 release notes with multi-engine voice cloning platform features.

Changes

Cohort / File(s) Summary
AudioPlayer Refactoring
app/src/components/AudioPlayer/AudioPlayer.tsx
Replaced WaveSurfer WebAudio backend with MediaElement, removed direct DOM media element manipulation, and standardized playback control via WaveSurfer APIs (setVolume, setMuted, play, pause, load, empty) across all code paths.
UI Component Updates
app/src/components/EffectsTab/EffectsDetail.tsx, app/src/components/Sidebar.tsx
Added Save as Custom Preset dialog workflow with state management for EffectsDetail; implemented dynamic accent opacity calculation in Sidebar navigation based on item index.
Landing Page New Components
landing/src/components/ControlUI.tsx, landing/src/components/Features.tsx, landing/src/components/VoiceCreator.tsx, landing/src/components/Navbar.tsx, landing/src/components/LandingAudioPlayer.tsx, landing/src/components/Footer.tsx
Created interactive landing page components: ControlUI (phase-driven demo with generation history and audio playback), Features (animated feature showcase with waveforms and effects), VoiceCreator (tabbed voice capture UI), Navbar (navigation with GitHub stars), LandingAudioPlayer (WaveSurfer-based audio player), and redesigned Footer with multi-column layout.
Landing Page Layout & Metadata
landing/src/app/page.tsx, landing/src/app/layout.tsx
Restructured homepage from inline sections to component-driven layout; simplified root layout by removing font imports and header/footer chrome.
Landing Styling & Configuration
landing/src/app/globals.css, landing/tailwind.config.js
Updated CSS theme tokens with warm-tinted dark theme colors, added app and ink color groups, new animations (fadeUp, fade-in), scrollbar hiding rules, and extended Tailwind theme with accent variants and custom color tokens.
Landing Infrastructure
landing/package.json, landing/src/app/api/stars/route.ts, landing/src/lib/releases.ts
Added dependencies (Space Grotesk font, Framer Motion, WaveSurfer); created /api/stars route handler with 10-minute caching for GitHub star count; added getStarCount() utility function.
Documentation
docs/RELEASE_v0.2.0.md
Added comprehensive v0.2.0 release notes documenting multi-engine voice cloning platform with four engines, paralinguistic tagging, audio effects pipeline, async generation queue, platform expansion, and security/accessibility improvements.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related PRs

Poem

🎙️ A rabbit hops through waveforms bright,
New voices dance in stereo light,
With presets saved and demos grand,
The landing page takes design's hand! 🚀✨

✨ Finishing Touches
  • 📝 Generate docstrings (stacked PR)
  • 📝 Generate docstrings (commit on current branch)
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch feat/landing-page-redesign
📝 Coding Plan
  • Generate coding plan for human review comments

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

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

@jamiepine jamiepine merged commit e316b0b into main Mar 15, 2026
1 check was pending
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant