49 lines
1.9 KiB
TypeScript
49 lines
1.9 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-6 md:py-10">
|
|
<div className="mx-auto max-w-4xl px-4 text-center">
|
|
{/* Badge */}
|
|
<Badge className="mb-3 px-3 py-1 text-xs animate-fade-in">
|
|
{t("badge")}
|
|
</Badge>
|
|
|
|
{/* Main Title */}
|
|
<h1 className="mb-3 text-2xl font-bold leading-tight tracking-tight md:text-3xl lg:text-4xl glow-text-pulse animate-fade-in-up">
|
|
{t("title")}
|
|
</h1>
|
|
|
|
{/* Subtitle */}
|
|
<p className="mb-4 text-sm md:text-base 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-3 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-5 py-2.5 text-sm 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-3.5 w-3.5" />
|
|
{t("cta")}
|
|
<ArrowRight className="h-3.5 w-3.5 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-5 py-2.5 text-sm 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>
|
|
);
|
|
}
|