'多语言'

app/components/Footer.tsx

@@ -1,72 +1,76 @@
+"use client";
+
+import { Link, useTranslation } from "@/i18n/navigation";
+
 const footerSections = [
   {
-    title: "指南",
+    titleKey: "guide" as const,
     links: [
-      { label: "7天学习路径", href: "#roadmap" },
-      { label: "全部资源", href: "#resources" },
-      { label: "工具推荐", href: "#tools" },
-      { label: "目的地数据库", href: "#" },
+      { labelKey: "roadmap" as const, href: "#roadmap" },
+      { labelKey: "tools" as const, href: "#tools" },
+      { labelKey: "destinations" as const, href: "#" },
     ],
   },
   {
-    title: "资源",
+    titleKey: "resources" as const,
     links: [
-      { label: "远程工作平台", href: "#" },
-      { label: "签证政策汇总", href: "#" },
-      { label: "共居空间推荐", href: "#" },
-      { label: "数字游民保险", href: "#" },
+      { labelKey: "remoteJobs" as const, href: "#" },
+      { labelKey: "visa" as const, href: "#" },
+      { labelKey: "coliving" as const, href: "#" },
+      { labelKey: "insurance" as const, href: "#" },
     ],
   },
   {
-    title: "社区",
+    titleKey: "community" as const,
     links: [
-      { label: "Discord", href: "#" },
-      { label: "微信群", href: "#community" },
-      { label: "即刻", href: "#" },
-      { label: "GitHub", href: "#" },
+      { labelKey: "discord" as const, href: "#" },
+      { labelKey: "wechat" as const, href: "#community" },
+      { labelKey: "jike" as const, href: "#" },
+      { labelKey: "github" as const, href: "#" },
     ],
   },
   {
-    title: "关于",
+    titleKey: "about" as const,
     links: [
-      { label: "关于我们", href: "#" },
-      { label: "贡献指南", href: "#" },
-      { label: "隐私政策", href: "#" },
-      { label: "联系我们", href: "#" },
+      { labelKey: "aboutUs" as const, href: "#" },
+      { labelKey: "contribute" as const, href: "#" },
+      { labelKey: "privacy" as const, href: "#" },
+      { labelKey: "contact" as const, href: "#" },
     ],
   },
 ];
 
 export default function Footer() {
+  const { t } = useTranslation("footer");
   return (
     <footer className="border-t border-slate-100 bg-white">
       <div className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8 lg:py-16">
         <div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-5">
           <div className="lg:col-span-1">
-            <a href="#" className="flex items-center gap-2 text-lg font-bold">
+            <Link href="/" className="flex items-center gap-2 text-lg font-bold">
               <span className="text-2xl">🌍</span>
-              <span>数字游民指南</span>
-            </a>
+              <span>{t("siteName")}</span>
+            </Link>
             <p className="mt-3 text-sm leading-relaxed text-slate-500">
-              开源免费的数字游民资源平台
+              {t("tagline")}
               <br />
-              助你开启自由工作与旅行的生活方式
+              {t("tagline2")}
             </p>
           </div>
 
           {footerSections.map((section) => (
-            <div key={section.title}>
+            <div key={section.titleKey}>
               <h4 className="mb-4 text-sm font-bold text-slate-900">
-                {section.title}
+                {t(`sections.${section.titleKey}`)}
               </h4>
               <ul className="space-y-2.5">
                 {section.links.map((link) => (
-                  <li key={link.label}>
+                  <li key={link.labelKey}>
                     <a
                       href={link.href}
                       className="text-sm text-slate-500 transition-colors hover:text-slate-700"
                     >
-                      {link.label}
+                      {t(`links.${link.labelKey}`)}
                     </a>
                   </li>
                 ))}
@@ -77,9 +81,9 @@ export default function Footer() {
 
         <div className="mt-12 flex flex-col items-center justify-between gap-4 border-t border-slate-100 pt-8 sm:flex-row">
           <p className="text-sm text-slate-400">
-            Made with 🌍 by 数字游民社区 | Digital Nomad Guide
+            {t("madeBy")}
           </p>
-          <p className="text-sm text-slate-400">开源共享 · 社区驱动</p>
+          <p className="text-sm text-slate-400">{t("openSource")}</p>
         </div>
       </div>
     </footer>