mirror of
https://github.com/jamiepine/voicebox.git
synced 2026-09-18 06:10:43 -07:00
Jamie Pine
8377152d86
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.
228 lines
10 KiB
TypeScript
228 lines
10 KiB
TypeScript
'use client';
|
|
|
|
import { Github } from 'lucide-react';
|
|
import Image from 'next/image';
|
|
import { useEffect, useState } from 'react';
|
|
import { ControlUI } from '@/components/ControlUI';
|
|
import { Features } from '@/components/Features';
|
|
import { Footer } from '@/components/Footer';
|
|
import { Navbar } from '@/components/Navbar';
|
|
import { AppleIcon, LinuxIcon, WindowsIcon } from '@/components/PlatformIcons';
|
|
import { DOWNLOAD_LINKS, GITHUB_REPO } from '@/lib/constants';
|
|
import type { DownloadLinks } from '@/lib/releases';
|
|
|
|
export default function Home() {
|
|
const [downloadLinks, setDownloadLinks] = useState<DownloadLinks>(DOWNLOAD_LINKS);
|
|
|
|
useEffect(() => {
|
|
fetch('/api/releases')
|
|
.then((res) => {
|
|
if (!res.ok) throw new Error('Failed to fetch releases');
|
|
return res.json();
|
|
})
|
|
.then((data) => {
|
|
if (data.downloadLinks) setDownloadLinks(data.downloadLinks);
|
|
})
|
|
.catch((error) => {
|
|
console.error('Failed to fetch release info:', error);
|
|
});
|
|
}, []);
|
|
|
|
return (
|
|
<>
|
|
<Navbar />
|
|
|
|
{/* ── Hero Section ─────────────────────────────────────────────── */}
|
|
<section className="relative pt-32 pb-16">
|
|
{/* Background glow */}
|
|
<div className="hero-glow pointer-events-none absolute inset-0 -top-32">
|
|
<div className="absolute left-1/2 top-0 -translate-x-1/2 w-[800px] h-[600px] rounded-full bg-accent/15 blur-[150px]" />
|
|
<div className="absolute left-1/2 top-12 -translate-x-1/2 w-[500px] h-[400px] rounded-full bg-accent/10 blur-[80px]" />
|
|
</div>
|
|
|
|
<div className="relative mx-auto max-w-7xl px-6 text-center">
|
|
{/* Logo */}
|
|
<div
|
|
className="fade-in mx-auto mb-8 h-[120px] w-[120px] md:h-[160px] md:w-[160px]"
|
|
style={{ animationDelay: '0ms' }}
|
|
>
|
|
<Image
|
|
src="/voicebox-logo-app.webp"
|
|
alt="Voicebox"
|
|
width={160}
|
|
height={160}
|
|
className="h-full w-full object-contain"
|
|
style={{
|
|
filter:
|
|
'drop-shadow(0 0 20px hsl(43 60% 50% / 0.4)) drop-shadow(0 0 60px hsl(43 60% 50% / 0.2))',
|
|
}}
|
|
priority
|
|
/>
|
|
</div>
|
|
|
|
{/* Headline */}
|
|
<div className="fade-in relative" style={{ animationDelay: '100ms' }}>
|
|
<h1 className="text-5xl font-bold tracking-tighter leading-[0.9] text-foreground drop-shadow-[0_16px_50px_rgba(0,0,0,0.95)] md:text-7xl lg:text-8xl">
|
|
Your voice, your machine.
|
|
</h1>
|
|
</div>
|
|
|
|
{/* Subtitle */}
|
|
<p
|
|
className="fade-in mx-auto mt-6 max-w-2xl text-lg text-muted-foreground md:text-xl"
|
|
style={{ animationDelay: '200ms' }}
|
|
>
|
|
Open source voice cloning studio powered by Qwen3-TTS. Clone any voice, generate natural
|
|
speech, and compose multi-voice projects — all running locally.
|
|
</p>
|
|
|
|
{/* CTAs */}
|
|
<div
|
|
className="fade-in mt-10 flex flex-col sm:flex-row items-center justify-center gap-4"
|
|
style={{ animationDelay: '300ms' }}
|
|
>
|
|
<a
|
|
href="#download"
|
|
className="rounded-full bg-accent px-8 py-3.5 text-sm font-semibold uppercase tracking-wider text-white shadow-[0_4px_20px_hsl(43_60%_50%/0.3),inset_0_2px_0_rgba(255,255,255,0.2),inset_0_-2px_0_rgba(0,0,0,0.1)] transition-all hover:bg-accent-faint active:shadow-[0_2px_10px_hsl(43_60%_50%/0.3),inset_0_4px_8px_rgba(0,0,0,0.3)]"
|
|
>
|
|
Download
|
|
</a>
|
|
<a
|
|
href={GITHUB_REPO}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="flex items-center gap-2 rounded-full border border-border/60 bg-card/40 backdrop-blur-sm px-6 py-3 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground hover:border-border"
|
|
>
|
|
<Github className="h-4 w-4" />
|
|
View on GitHub
|
|
</a>
|
|
</div>
|
|
|
|
{/* Version */}
|
|
<p
|
|
className="fade-in mt-4 text-xs text-muted-foreground/50"
|
|
style={{ animationDelay: '400ms' }}
|
|
>
|
|
Free and open source · macOS, Windows, Linux
|
|
</p>
|
|
</div>
|
|
|
|
{/* ── ControlUI mockup ─────────────────────────────────────── */}
|
|
<div className="mt-16">
|
|
<ControlUI />
|
|
</div>
|
|
</section>
|
|
|
|
{/* ── Features ─────────────────────────────────────────────── */}
|
|
<Features />
|
|
|
|
{/* ── About / Manifesto ────────────────────────────────────── */}
|
|
<section id="about" className="border-t border-border py-24">
|
|
<div className="mx-auto max-w-3xl px-6">
|
|
<h2 className="mb-10 text-center text-3xl font-semibold tracking-tight text-foreground md:text-4xl">
|
|
Why Voicebox exists
|
|
</h2>
|
|
<div className="space-y-6 text-center">
|
|
<p className="text-base leading-relaxed text-muted-foreground">
|
|
Cloud voice cloning services lock your voice data behind subscriptions, rate limits,
|
|
and terms of service that can change at any time. Your voice — and the voices you
|
|
clone — should belong to you.
|
|
</p>
|
|
<p className="text-lg font-medium text-foreground">
|
|
Voicebox is a local-first voice cloning studio. Download a model, clone any voice from
|
|
a few seconds of audio, and generate speech entirely on your machine.
|
|
</p>
|
|
<p className="text-sm leading-relaxed text-muted-foreground">
|
|
Optimized with Metal acceleration on Mac and CUDA on Windows/Linux. No Python install
|
|
required. No cloud. No subscriptions. Free and open-source, forever.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ── Download Section ─────────────────────────────────────── */}
|
|
<section id="download" className="border-t border-border py-24">
|
|
<div className="mx-auto max-w-4xl px-6">
|
|
<div className="text-center mb-12">
|
|
<h2 className="text-3xl font-semibold tracking-tight text-foreground md:text-4xl mb-4">
|
|
Download Voicebox
|
|
</h2>
|
|
<p className="text-muted-foreground">
|
|
Available for macOS, Windows, and Linux. No dependencies required.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3 max-w-2xl mx-auto">
|
|
{/* macOS ARM */}
|
|
<a
|
|
href={downloadLinks.macArm}
|
|
download
|
|
className="flex items-center rounded-xl border border-border bg-card/60 backdrop-blur-sm px-5 py-4 transition-all hover:border-accent/30 hover:bg-card group"
|
|
>
|
|
<AppleIcon className="h-6 w-6 shrink-0 text-muted-foreground group-hover:text-foreground transition-colors" />
|
|
<div className="ml-4">
|
|
<div className="text-sm font-medium">macOS</div>
|
|
<div className="text-xs text-muted-foreground">Apple Silicon (ARM)</div>
|
|
</div>
|
|
</a>
|
|
|
|
{/* macOS Intel */}
|
|
<a
|
|
href={downloadLinks.macIntel}
|
|
download
|
|
className="flex items-center rounded-xl border border-border bg-card/60 backdrop-blur-sm px-5 py-4 transition-all hover:border-accent/30 hover:bg-card group"
|
|
>
|
|
<AppleIcon className="h-6 w-6 shrink-0 text-muted-foreground group-hover:text-foreground transition-colors" />
|
|
<div className="ml-4">
|
|
<div className="text-sm font-medium">macOS</div>
|
|
<div className="text-xs text-muted-foreground">Intel (x64)</div>
|
|
</div>
|
|
</a>
|
|
|
|
{/* Windows */}
|
|
<a
|
|
href={downloadLinks.windows}
|
|
download
|
|
className="flex items-center rounded-xl border border-border bg-card/60 backdrop-blur-sm px-5 py-4 transition-all hover:border-accent/30 hover:bg-card group"
|
|
>
|
|
<WindowsIcon className="h-6 w-6 shrink-0 text-muted-foreground group-hover:text-foreground transition-colors" />
|
|
<div className="ml-4">
|
|
<div className="text-sm font-medium">Windows</div>
|
|
<div className="text-xs text-muted-foreground">64-bit (MSI)</div>
|
|
</div>
|
|
</a>
|
|
|
|
{/* Linux */}
|
|
<div
|
|
className="flex items-center rounded-xl border border-border bg-card/60 backdrop-blur-sm px-5 py-4 opacity-50 cursor-not-allowed"
|
|
title="Linux builds coming soon"
|
|
>
|
|
<LinuxIcon className="h-6 w-6 shrink-0 text-muted-foreground" />
|
|
<div className="ml-4">
|
|
<div className="text-sm font-medium">Linux</div>
|
|
<div className="text-xs text-muted-foreground">Coming soon</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* GitHub link */}
|
|
<div className="mt-6 text-center">
|
|
<a
|
|
href={`${GITHUB_REPO}/releases`}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
|
|
>
|
|
<Github className="h-4 w-4" />
|
|
View all releases on GitHub
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ── Footer ───────────────────────────────────────────────── */}
|
|
<Footer />
|
|
</>
|
|
);
|
|
}
|