122 lines
4.9 KiB
TypeScript
122 lines
4.9 KiB
TypeScript
import Link from "next/link";
|
|
import { Button } from "@/components/ui/button";
|
|
import { ArrowRight } from "lucide-react";
|
|
|
|
export default function HomePage() {
|
|
return (
|
|
<div className="min-h-screen bg-gradient-to-b from-white via-slate-50 to-white">
|
|
<main className="container mx-auto px-6 py-16 sm:px-10 sm:py-24">
|
|
<div className="mx-auto flex max-w-4xl flex-col items-center justify-center space-y-12 text-center">
|
|
{/* Hero Section */}
|
|
<div className="space-y-8">
|
|
<div className="space-y-6">
|
|
<h1 className="text-balance text-5xl font-bold tracking-tight text-slate-900 sm:text-6xl lg:text-7xl">
|
|
Welcome to Your App
|
|
</h1>
|
|
<p className="mx-auto max-w-2xl text-xl text-slate-600 sm:text-2xl">
|
|
A modern Next.js starter with authentication, billing, and team management built in.
|
|
</p>
|
|
</div>
|
|
|
|
{/* CTA Button */}
|
|
<div className="flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
|
|
<Link href="/signup">
|
|
<Button
|
|
size="lg"
|
|
className="h-14 rounded-full bg-slate-900 px-8 text-base font-semibold text-white shadow-lg hover:bg-slate-800"
|
|
>
|
|
Get Started
|
|
<ArrowRight className="ml-2 h-5 w-5" />
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Features Grid */}
|
|
<div className="grid w-full gap-6 pt-12 md:grid-cols-3">
|
|
<div className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
|
|
<div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-full bg-slate-100">
|
|
<svg
|
|
className="h-6 w-6 text-slate-600"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<h3 className="mb-2 text-lg font-semibold text-slate-900">
|
|
Secure Authentication
|
|
</h3>
|
|
<p className="text-sm text-slate-600">
|
|
Built-in auth with magic link login powered by Stytch.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
|
|
<div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-full bg-slate-100">
|
|
<svg
|
|
className="h-6 w-6 text-slate-600"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<h3 className="mb-2 text-lg font-semibold text-slate-900">
|
|
Billing Integration
|
|
</h3>
|
|
<p className="text-sm text-slate-600">
|
|
Subscription management and payments via Polar.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
|
|
<div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-full bg-slate-100">
|
|
<svg
|
|
className="h-6 w-6 text-slate-600"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<h3 className="mb-2 text-lg font-semibold text-slate-900">
|
|
Team Management
|
|
</h3>
|
|
<p className="text-sm text-slate-600">
|
|
Invite members, manage roles, and collaborate.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
{/* Footer */}
|
|
<footer className="border-t border-slate-200 py-8">
|
|
<div className="container mx-auto px-6 text-center">
|
|
<p className="text-sm text-slate-600">
|
|
Built with Next.js, TypeScript, and Tailwind CSS
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
);
|
|
}
|