69 lines
2.4 KiB
TypeScript
69 lines
2.4 KiB
TypeScript
import Link from "next/link";
|
|
import { getServerSession } from "next-auth";
|
|
import { authOptions } from "@/lib/auth";
|
|
import { SignInButton } from "@/components/SignInButton";
|
|
|
|
export default async function HomePage() {
|
|
const session = await getServerSession(authOptions);
|
|
|
|
return (
|
|
<main className="min-h-screen">
|
|
<header className="border-b border-gray-800 bg-surface">
|
|
<div className="mx-auto flex max-w-5xl items-center justify-between px-6 py-4">
|
|
<span className="text-xl font-bold text-white">s2yt</span>
|
|
{session ? (
|
|
<Link
|
|
href="/dashboard"
|
|
className="rounded bg-accent px-4 py-2 text-sm font-medium text-white hover:bg-accent-hover"
|
|
>
|
|
Dashboard
|
|
</Link>
|
|
) : (
|
|
<SignInButton />
|
|
)}
|
|
</div>
|
|
</header>
|
|
|
|
<section className="mx-auto max-w-3xl px-6 py-20 text-center">
|
|
<h1 className="mb-4 text-4xl font-bold text-white">
|
|
Turn images and audio into YouTube videos
|
|
</h1>
|
|
<p className="mb-8 text-lg text-gray-400">
|
|
Upload one image and one or more audio files. Each audio becomes its own video
|
|
with individual metadata, then uploads directly to your YouTube channel.
|
|
</p>
|
|
|
|
<div className="mb-12 grid gap-4 text-left sm:grid-cols-3">
|
|
<Feature title="Batch creation" desc="One image, many audios — each becomes a separate video." />
|
|
<Feature title="Per-video settings" desc="Title, tags, privacy, and category for every upload." />
|
|
<Feature title="Direct upload" desc="Connect YouTube once and publish automatically." />
|
|
</div>
|
|
|
|
{session ? (
|
|
<Link
|
|
href="/dashboard"
|
|
className="inline-block rounded bg-accent px-8 py-3 font-medium text-white hover:bg-accent-hover"
|
|
>
|
|
Go to Dashboard
|
|
</Link>
|
|
) : (
|
|
<SignInButton large />
|
|
)}
|
|
|
|
<p className="mt-8 text-sm text-gray-500">
|
|
Free plan: up to 14 videos/month, 720p max, 30 MB per file
|
|
</p>
|
|
</section>
|
|
</main>
|
|
);
|
|
}
|
|
|
|
function Feature({ title, desc }: { title: string; desc: string }) {
|
|
return (
|
|
<div className="rounded-lg border border-gray-700 bg-surface p-4">
|
|
<h3 className="mb-1 font-medium text-white">{title}</h3>
|
|
<p className="text-sm text-gray-400">{desc}</p>
|
|
</div>
|
|
);
|
|
}
|