49 lines
1.8 KiB
TypeScript
49 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
import { useTranslations } from "next-intl";
|
|
import { ArrowRight, Sparkles } from "lucide-react";
|
|
import { Badge } from "@/components/ui/badge";
|
|
|
|
export function Hero() {
|
|
const t = useTranslations("hero");
|
|
|
|
return (
|
|
<section className="relative py-16 md:py-24">
|
|
<div className="mx-auto max-w-4xl px-4 text-center">
|
|
{/* Badge */}
|
|
<Badge className="mb-6 px-4 py-1.5 text-sm animate-fade-in">
|
|
{t("badge")}
|
|
</Badge>
|
|
|
|
{/* Main Title */}
|
|
<h1 className="mb-6 text-4xl font-bold leading-tight tracking-tight md:text-5xl lg:text-6xl glow-text-pulse animate-fade-in-up">
|
|
{t("title")}
|
|
</h1>
|
|
|
|
{/* Subtitle */}
|
|
<p className="mb-8 text-lg md:text-xl text-[var(--text-secondary)] max-w-2xl mx-auto animate-fade-in-up animation-delay-200">
|
|
{t("subtitle")}
|
|
</p>
|
|
|
|
{/* CTA Buttons */}
|
|
<div className="flex flex-col sm:flex-row items-center justify-center gap-4 animate-fade-in-up animation-delay-400">
|
|
<a
|
|
href="#get-started"
|
|
className="group inline-flex items-center gap-2 rounded-lg bg-[var(--accent-cyan)] px-6 py-3 font-semibold text-[var(--bg-primary)] transition-all hover:shadow-[0_0_20px_rgba(0,240,255,0.4)] hover:scale-105"
|
|
>
|
|
<Sparkles className="h-4 w-4" />
|
|
{t("cta")}
|
|
<ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
|
|
</a>
|
|
<a
|
|
href="#learn-more"
|
|
className="inline-flex items-center gap-2 rounded-lg border border-[var(--accent-cyan)]/30 bg-transparent px-6 py-3 font-semibold text-[var(--text-primary)] transition-all hover:border-[var(--accent-cyan)]/60 hover:bg-[var(--accent-cyan)]/5"
|
|
>
|
|
{t("secondary")}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|