Add comprehensive /features page + allow Unsplash imagery
This commit is contained in:
Leon Serfaty
@@ -0,0 +1,196 @@
|
||||
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:
|
||||
"PodcastYes 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">
|
||||
PodcastYes 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 PodcastYes
|
||||
</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 PodcastYes: 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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user