'多语言'

app/components/Roadmap.tsx

@@ -1,72 +1,34 @@
+"use client";
+
+import { Link, useTranslation } from "@/i18n/navigation";
+
 const days = [
-  {
-    day: 1,
-    icon: "👋",
-    title: "认识数字游民",
-    desc: "了解数字游民的真正含义，评估这种生活方式是否适合你，破除常见误解。",
-    color: "bg-sky-500",
-  },
-  {
-    day: 2,
-    icon: "💡",
-    title: "发现远程技能",
-    desc: "掌握最受欢迎的远程工作技能，从编程、设计到内容创作，找到你的方向。",
-    color: "bg-cyan-500",
-  },
-  {
-    day: 3,
-    icon: "💰",
-    title: "构建收入体系",
-    desc: "自由职业、远程全职、被动收入、在线课程，构建可持续的多元收入来源。",
-    color: "bg-teal-500",
-  },
-  {
-    day: 4,
-    icon: "🛠️",
-    title: "工具武装",
-    desc: "生产力工具、通讯协作、项目管理、云服务，打造你的移动办公装备库。",
-    color: "bg-emerald-500",
-  },
-  {
-    day: 5,
-    icon: "📋",
-    title: "签证与法律",
-    desc: "数字游民签证政策、税务规划、海外保险、银行账户，搞定法律合规问题。",
-    color: "bg-amber-500",
-  },
-  {
-    day: 6,
-    icon: "🗺️",
-    title: "目的地指南",
-    desc: "热门数字游民城市推荐，生活成本对比、网速测评、社区活跃度一目了然。",
-    color: "bg-orange-500",
-  },
-  {
-    day: 7,
-    icon: "🚀",
-    title: "启程出发",
-    desc: "打包清单、过渡计划、第一站选择建议，从规划到行动的最后一步。",
-    color: "bg-rose-500",
-  },
+  { day: 1, icon: "👋", color: "bg-sky-500" },
+  { day: 2, icon: "💡", color: "bg-cyan-500" },
+  { day: 3, icon: "💰", color: "bg-teal-500" },
+  { day: 4, icon: "🛠️", color: "bg-emerald-500" },
+  { day: 5, icon: "📋", color: "bg-amber-500" },
+  { day: 6, icon: "🗺️", color: "bg-orange-500" },
+  { day: 7, icon: "🚀", color: "bg-rose-500" },
 ];
 
 export default function Roadmap() {
+  const { t } = useTranslation("roadmap");
   return (
     <section id="roadmap" className="bg-slate-50 py-20 sm:py-28">
       <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
         <div className="text-center">
           <h2 className="text-3xl font-bold tracking-tight sm:text-4xl">
-            7天<span className="gradient-text">学习路径</span>
+            {t("title")} <span className="gradient-text">{t("titleHighlight")}</span>
           </h2>
           <p className="mx-auto mt-4 max-w-2xl text-lg text-slate-600">
-            从入门到出发，每天一个主题，循序渐进开启你的数字游民之旅。
+            {t("subtitle")}
           </p>
         </div>
 
-        {/* 参考 openclaw101.dev：卡片网格，非时间轴 */}
         <div className="mt-14 grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
           {days.map((d) => (
-            <a
+            <Link
               key={d.day}
               href={`/day/${d.day}`}
               className="card-hover group flex flex-col rounded-2xl border border-slate-100 bg-white p-5 shadow-sm transition-all hover:border-sky-200 hover:shadow-md"
@@ -79,36 +41,54 @@ export default function Roadmap() {
                 </div>
                 <span className="text-xl">{d.icon}</span>
                 <h3 className="text-base font-bold text-slate-900 group-hover:text-sky-600">
-                  {d.title}
+                  {t(`days.${d.day}.title`)}
                 </h3>
               </div>
               <p className="mt-3 flex-1 text-sm leading-relaxed text-slate-600">
-                {d.desc}
+                {t(`days.${d.day}.desc`)}
               </p>
               <span className="mt-3 inline-flex items-center text-sm font-medium text-sky-600">
-                查看详情 →
+                {t("viewDetails")}
               </span>
-            </a>
+            </Link>
           ))}
+          <Link
+            href="/ebook"
+            className="card-hover group flex flex-col rounded-2xl border border-slate-100 bg-white p-5 shadow-sm transition-all hover:border-sky-200 hover:shadow-md"
+          >
+            <div className="flex items-center gap-3">
+              <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-gradient-to-r from-sky-500 to-cyan-500 text-xs font-bold text-white">
+                📖
+              </div>
+              <h3 className="text-base font-bold text-slate-900 group-hover:text-sky-600">
+                {t("ebook.title")}
+              </h3>
+            </div>
+            <p className="mt-3 flex-1 text-sm leading-relaxed text-slate-600">
+              {t("ebook.desc")}
+            </p>
+            <span className="mt-3 inline-flex items-center text-sm font-medium text-sky-600">
+              {t("ebook.cta")}
+            </span>
+          </Link>
         </div>
 
-        {/* Training camp CTA */}
         <div className="mt-16 overflow-hidden rounded-2xl border border-amber-200 bg-gradient-to-r from-amber-50 to-orange-50 p-8 text-center sm:p-10">
           <div className="mb-2 text-sm font-semibold text-amber-600">
-            🎓 实战训练营
+            {t("course.tag")}
           </div>
           <h3 className="text-2xl font-bold text-slate-900">
-            数字游民实战课
+            {t("course.title")}
           </h3>
           <p className="mx-auto mt-3 max-w-xl text-slate-600">
-            21节视频课程，手把手带你从零规划专属数字游民路线，打通远程工作全流程
+            {t("course.desc")}
           </p>
-          <a
+          <Link
             href="/course"
             className="mt-6 inline-flex items-center gap-2 rounded-full bg-amber-500 px-8 py-3 font-semibold text-white transition-colors hover:bg-amber-600"
           >
-            了解详情 →
-          </a>
+            {t("course.cta")}
+          </Link>
         </div>
       </div>
     </section>