'多语言'

app/components/Hero.tsx

@@ -1,12 +1,16 @@
-const stats = [
-  { value: "200+", label: "精选资源" },
-  { value: "7 天", label: "入门路径" },
-  { value: "50+", label: "远程工具" },
-  { value: "30+", label: "目的地" },
-  { value: "100%", label: "免费开源" },
-];
+"use client";
+
+import { useTranslation } from "@/i18n/navigation";
 
 export default function Hero() {
+  const { t } = useTranslation("hero");
+  const stats = [
+    { value: "200+", labelKey: "resources" as const },
+    { value: "7 天", labelKey: "path" as const },
+    { value: "50+", labelKey: "tools" as const },
+    { value: "30+", labelKey: "destinations" as const },
+    { value: "100%", labelKey: "free" as const },
+  ];
   return (
     <section className="relative overflow-hidden pt-24 pb-16 sm:pt-32 sm:pb-20">
       <div className="pointer-events-none absolute inset-0 bg-gradient-to-b from-sky-50/80 via-white to-white" />
@@ -16,20 +20,20 @@ export default function Hero() {
         <div className="text-center">
           <div className="mb-6 inline-flex items-center gap-2 rounded-full border border-sky-200 bg-sky-50 px-4 py-1.5 text-sm font-medium text-sky-700">
             <span>🎒</span>
-            <span>开源免费 · 收录 200+ 篇实用资源</span>
+            <span>{t("badge")}</span>
           </div>
 
           <h1 className="mx-auto max-w-4xl text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-7xl">
-            <span className="gradient-text">数字游民</span>
+            <span className="gradient-text">{t("title")}</span>
             <br className="sm:hidden" />
-            生活指南
+            {t("titleSuffix")}
           </h1>
 
           <p className="mx-auto mt-6 max-w-2xl text-lg leading-relaxed text-slate-600 sm:text-xl">
-            从零开始，7天开启你的数字游民生活
+            {t("subtitle")}
             <br className="hidden sm:block" />
             <span className="text-slate-400 sm:text-slate-600">
-              The open-source guide to becoming a digital nomad
+              {t("subtitleEn")}
             </span>
           </p>
 
@@ -38,14 +42,14 @@ export default function Hero() {
               href="#roadmap"
               className="inline-flex w-full items-center justify-center gap-2 rounded-full bg-sky-500 px-8 py-3.5 text-base font-semibold text-white shadow-lg shadow-sky-500/25 transition-all hover:bg-sky-600 hover:shadow-xl hover:shadow-sky-500/30 sm:w-auto"
             >
-              🚀 开始学习
+              {t("ctaStart")}
               <span>→</span>
             </a>
             <a
-              href="#resources"
+              href="#community"
               className="inline-flex w-full items-center justify-center gap-2 rounded-full border border-slate-200 bg-white px-8 py-3.5 text-base font-semibold text-slate-700 shadow-sm transition-all hover:border-slate-300 hover:bg-slate-50 sm:w-auto"
             >
-              📚 浏览资源
+              {t("ctaResources")}
             </a>
           </div>
         </div>
@@ -62,7 +66,7 @@ export default function Hero() {
                   {s.value}
                 </span>
                 <span className="text-sm font-medium text-slate-500">
-                  {s.label}
+                  {t(`stats.${s.labelKey}`)}
                 </span>
               </div>
             ))}
@@ -80,7 +84,7 @@ export default function Hero() {
                   {s.value}
                 </span>
                 <span className="text-sm font-medium text-slate-500">
-                  {s.label}
+                  {t(`stats.${s.labelKey}`)}
                 </span>
               </div>
             ))}