44 lines
1.5 KiB
TypeScript
44 lines
1.5 KiB
TypeScript
import { Button } from "@/components/ui/button";
|
|
import Link from "next/link";
|
|
import { Sparkles, ArrowRight } from "lucide-react";
|
|
import { homepage } from "@/marketing/content/homepage";
|
|
|
|
export function Hero() {
|
|
return (
|
|
<section className="w-full">
|
|
<div className="container mx-auto px-6">
|
|
<div className="flex flex-col items-center gap-6 pb-16 pt-16 md:py-24 lg:py-32">
|
|
<div className="flex max-w-[980px] flex-col items-center gap-6 text-center">
|
|
{/* Main title */}
|
|
<h1 className="text-3xl font-extrabold leading-tight tracking-tighter md:text-5xl lg:text-6xl lg:leading-[1.1]">
|
|
{homepage.hero.title}
|
|
</h1>
|
|
|
|
{/* Subtitle */}
|
|
<p className="max-w-[750px] text-lg text-muted-foreground sm:text-xl md:text-2xl">
|
|
{homepage.hero.subtitle}
|
|
</p>
|
|
|
|
{/* CTAs */}
|
|
<div className="flex flex-col sm:flex-row gap-4 mt-4">
|
|
<Link href="/auth">
|
|
<Button size="lg" className="h-12 px-8 text-base">
|
|
<Sparkles className="mr-2 h-5 w-5" />
|
|
{homepage.hero.cta.primary}
|
|
</Button>
|
|
</Link>
|
|
<Link href="#how-it-works">
|
|
<Button variant="outline" size="lg" className="h-12 px-8 text-base">
|
|
{homepage.hero.cta.secondary}
|
|
<ArrowRight className="ml-2 h-5 w-5" />
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|