50 lines
2.6 KiB
JavaScript
50 lines
2.6 KiB
JavaScript
const Hero = () => {
|
|
return (
|
|
<section className="relative">
|
|
{/* Subtle grid background */}
|
|
<div className="absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px]"></div>
|
|
|
|
<div className="relative mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
|
|
<div className="space-y-4 text-center">
|
|
{/* Badge */}
|
|
<div className="bg-background/50 inline-flex items-center gap-2 rounded-full border px-3 py-1 text-sm backdrop-blur-sm">
|
|
<div className="h-2 w-2 rounded-full bg-green-500"></div>
|
|
<span className="text-muted-foreground">Free meme videos • No signup required</span>
|
|
</div>
|
|
|
|
{/* Main heading */}
|
|
<div className="space-y-0">
|
|
<h1 className="font-display text-6xl font-black tracking-tight sm:text-7xl lg:text-8xl">
|
|
<span className="text-foreground">MEME</span>
|
|
<span className="text-muted-foreground">AI</span>
|
|
<span className="text-foreground">GEN</span>
|
|
</h1>
|
|
|
|
<h2 className="text-muted-foreground mx-auto max-w-4xl text-xl leading-relaxed font-light sm:text-2xl lg:text-3xl">
|
|
Create viral memes in seconds for free!
|
|
</h2>
|
|
</div>
|
|
|
|
{/* Stats */}
|
|
<div className="flex flex-wrap justify-center gap-8 sm:gap-12">
|
|
<div className="text-center">
|
|
<div className="text-foreground text-3xl font-bold sm:text-4xl">200+</div>
|
|
<div className="text-muted-foreground text-sm">Meme Templates</div>
|
|
</div>
|
|
<div className="text-center">
|
|
<div className="text-foreground text-3xl font-bold sm:text-4xl">200+</div>
|
|
<div className="text-muted-foreground text-sm">Backgrounds</div>
|
|
</div>
|
|
<div className="text-center">
|
|
<div className="text-foreground text-3xl font-bold sm:text-4xl">MP4</div>
|
|
<div className="text-muted-foreground text-sm">Export</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default Hero;
|