197 lines
8.5 KiB
TypeScript
197 lines
8.5 KiB
TypeScript
import type { Metadata } from "next";
|
|
import Link from "next/link";
|
|
import {
|
|
Sparkles,
|
|
Wand2,
|
|
ShieldCheck,
|
|
Globe,
|
|
Zap,
|
|
HeartHandshake,
|
|
ArrowRight,
|
|
} from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
|
|
export const metadata: Metadata = {
|
|
title: "About",
|
|
description:
|
|
"Podcast Distribution AI is an AI studio that turns a single idea into a finished, publishable podcast — script, voices, and cover art — in minutes. Learn why we built it and what we believe.",
|
|
};
|
|
|
|
const STATS = [
|
|
{ value: "3", label: "AI models in one workflow" },
|
|
{ value: "14+", label: "Realistic narrator voices" },
|
|
{ value: "13+", label: "Languages supported" },
|
|
{ value: "Minutes", label: "From idea to finished episode" },
|
|
];
|
|
|
|
const VALUES = [
|
|
{
|
|
icon: Sparkles,
|
|
title: "Creativity for everyone",
|
|
body: "Powerful production shouldn't require gear, a budget, or technical skill. If you can describe an idea, you can turn it into a finished episode.",
|
|
},
|
|
{
|
|
icon: Wand2,
|
|
title: "Quality you'd actually publish",
|
|
body: "AI drafts are a starting point, not the finish line. Every script and voice is editable, so the final cut always sounds like you.",
|
|
},
|
|
{
|
|
icon: ShieldCheck,
|
|
title: "Built responsibly",
|
|
body: "We screen content against a clear policy, never use your private work to train our models, and make sure you own everything you create.",
|
|
},
|
|
{
|
|
icon: Globe,
|
|
title: "Global from day one",
|
|
body: "Stories aren't only told in English. With 13+ languages, you can produce for an audience anywhere — no re-recording required.",
|
|
},
|
|
{
|
|
icon: Zap,
|
|
title: "Fast, but never careless",
|
|
body: "Minutes from idea to episode, with the controls to get the details right before you hit publish. Speed and craft aren't a trade-off.",
|
|
},
|
|
{
|
|
icon: HeartHandshake,
|
|
title: "Honest and transparent",
|
|
body: "Simple plans, clear limits, cancel anytime. No dark patterns and no surprises — just a tool that respects your time and your work.",
|
|
},
|
|
];
|
|
|
|
export default function AboutPage() {
|
|
return (
|
|
<>
|
|
{/* Hero */}
|
|
<section className="bg-hero-wash">
|
|
<div className="container max-w-4xl py-24 text-center md:py-32">
|
|
<p className="text-[13px] font-semibold uppercase tracking-[0.04em] text-brand">About us</p>
|
|
<h1 className="mt-4 text-balance font-display text-5xl font-extrabold leading-[1.05] tracking-tight md:text-6xl">
|
|
Making great podcasts possible for everyone
|
|
</h1>
|
|
<p className="mx-auto mt-6 max-w-2xl text-lg text-muted-foreground sm:text-xl">
|
|
Podcast Distribution AI is an AI studio that turns a single idea into a finished, publishable episode —
|
|
script, voices, and cover art — in minutes. No microphone, no editing suite, no production
|
|
budget.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Stats */}
|
|
<section className="border-y border-border bg-card">
|
|
<div className="container grid grid-cols-2 gap-8 py-14 lg:grid-cols-4">
|
|
{STATS.map((s) => (
|
|
<div key={s.label} className="text-center">
|
|
<p className="font-display text-4xl font-extrabold tracking-tight text-brand md:text-5xl">
|
|
{s.value}
|
|
</p>
|
|
<p className="mt-2 text-sm text-muted-foreground">{s.label}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
{/* Mission */}
|
|
<section className="py-24 md:py-28">
|
|
<div className="container max-w-3xl text-center">
|
|
<p className="text-[13px] font-semibold uppercase tracking-[0.04em] text-brand">Our mission</p>
|
|
<p className="mt-5 text-balance font-display text-3xl font-bold leading-tight tracking-tight md:text-4xl">
|
|
To remove every barrier between a great idea and a published podcast — so anyone with
|
|
something to say can be{" "}
|
|
<span className="text-brand">heard</span>.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Story */}
|
|
<section className="border-t border-border bg-secondary py-24 md:py-28">
|
|
<div className="container max-w-3xl">
|
|
<p className="text-[13px] font-semibold uppercase tracking-[0.04em] text-brand">Our story</p>
|
|
<h2 className="mt-3 font-display text-3xl font-extrabold tracking-tight md:text-4xl">
|
|
Why we built Podcast Distribution AI
|
|
</h2>
|
|
<div className="mt-8 space-y-5 text-lg leading-relaxed text-muted-foreground">
|
|
<p>
|
|
Podcasting is one of the most personal ways to reach an audience — and one of the
|
|
hardest to start. Scripting, recording, editing, designing artwork, and publishing can
|
|
take days and a stack of tools and skills most people simply don't have. Brilliant
|
|
ideas die in that gap between “I should make a podcast” and actually
|
|
shipping one.
|
|
</p>
|
|
<p>
|
|
We thought the modern AI stack could collapse all of that into a single workflow. GPT-4
|
|
can write a tight, on-brand script. ElevenLabs can voice it with realistic, multi-speaker
|
|
narration. DALL·E can design cover art that matches the topic. Stitched together, they
|
|
turn “I have a topic” into “I have an episode.”
|
|
</p>
|
|
<p>
|
|
So we built Podcast Distribution AI: a studio that lives in your browser. Describe an idea, fine-tune
|
|
the result in a real editor, download the MP3 — then repurpose it into a blog post, a
|
|
social thread, or a newsletter. We're a small team of engineers, audio nerds, and
|
|
storytellers obsessed with making production effortless without making it feel generic.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Values */}
|
|
<section className="py-24 md:py-28">
|
|
<div className="container">
|
|
<div className="mx-auto max-w-2xl text-center">
|
|
<p className="text-[13px] font-semibold uppercase tracking-[0.04em] text-brand">
|
|
What we believe
|
|
</p>
|
|
<h2 className="mt-3 font-display text-3xl font-extrabold tracking-tight md:text-4xl">
|
|
The principles behind the product
|
|
</h2>
|
|
</div>
|
|
<div className="mt-16 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
|
{VALUES.map((v) => (
|
|
<div
|
|
key={v.title}
|
|
className="rounded-2xl border border-border bg-card p-7 transition-all hover:-translate-y-0.5 hover:shadow-md"
|
|
>
|
|
<span className="flex h-12 w-12 items-center justify-center rounded-2xl bg-brand/10 text-brand">
|
|
<v.icon className="h-6 w-6" />
|
|
</span>
|
|
<h3 className="mt-5 font-display text-lg font-bold tracking-tight">{v.title}</h3>
|
|
<p className="mt-2 leading-relaxed text-muted-foreground">{v.body}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* CTA */}
|
|
<section className="pb-24 md:pb-28">
|
|
<div className="container">
|
|
<div className="relative overflow-hidden rounded-3xl bg-primary px-8 py-20 text-center text-primary-foreground">
|
|
<div className="pointer-events-none absolute inset-0 bg-[radial-gradient(60%_80%_at_50%_0%,hsl(var(--brand)/0.35),transparent_70%)]" />
|
|
<div className="relative">
|
|
<h2 className="font-display text-4xl font-extrabold tracking-tight sm:text-5xl">
|
|
Come make something worth listening to
|
|
</h2>
|
|
<p className="mx-auto mt-4 max-w-xl text-lg text-primary-foreground/75">
|
|
Spin up a fully produced episode on the free plan in a couple of minutes — then decide.
|
|
</p>
|
|
<div className="mt-9 flex flex-col justify-center gap-3 sm:flex-row">
|
|
<Button asChild size="lg" variant="brand">
|
|
<Link href="/sign-up">
|
|
Start free <ArrowRight className="h-4 w-4" />
|
|
</Link>
|
|
</Button>
|
|
<Button
|
|
asChild
|
|
size="lg"
|
|
variant="outline"
|
|
className="border-white/25 bg-transparent text-primary-foreground hover:bg-white/10 hover:text-primary-foreground"
|
|
>
|
|
<Link href="/pricing">See pricing</Link>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</>
|
|
);
|
|
}
|