Mark Henderson
bada63452f
- Map Justine tokens to shadcn CSS variables (--vibn-* aliases) - Switch fonts to Inter + Lora via next/font (IBM Plex Mono for code) - Base typography: body Inter, h1–h3 Lora; marketing hero + wordmark serif - Project shell and global chrome use semantic colors - Replace Outfit/Newsreader references across TSX inline styles Made-with: Cursor
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="font-serif text-3xl font-bold leading-tight tracking-tight md:text-5xl md:font-semibold 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>
|
|
);
|
|
}
|
|
|