feat: 首页支持宣传语

components/layout/hero.tsx

@@ -0,0 +1,48 @@
+"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>
+  );
+}