'多语言'

app/components/Community.tsx

@@ -1,144 +1,94 @@
-const links = [
-  {
-    icon: "📖",
-    title: "入门指南",
-    desc: "完整的数字游民入门教程",
-    label: "开始学习 ↗",
-  },
-  {
-    icon: "💬",
-    title: "Discord 社区",
-    desc: "与全球数字游民实时交流",
-    label: "加入社区 ↗",
-  },
-  {
-    icon: "🛒",
-    title: "工具集市",
-    desc: "发现、评测和分享远程工具",
-    label: "浏览工具 ↗",
-  },
-  {
-    icon: "📦",
-    title: "GitHub",
-    desc: "开源项目，欢迎 Star 和 PR",
-    label: "访问仓库 ↗",
-  },
-  {
-    icon: "📝",
-    title: "飞书知识库",
-    desc: "7天入门指南 · 中文图文教程",
-    label: "查看文档 ↗",
-  },
-  {
-    icon: "🗺️",
-    title: "目的地数据库",
-    desc: "全球数字游民城市信息",
-    label: "探索城市 ↗",
-  },
-];
+"use client";
+
+import { Link, useTranslation } from "@/i18n/navigation";
+
+const linkKeys = ["guide", "discord", "tools", "github", "feishu", "destinations"] as const;
+const linkIcons: Record<(typeof linkKeys)[number], string> = {
+  guide: "📖",
+  discord: "💬",
+  tools: "🛒",
+  github: "📦",
+  feishu: "📝",
+  destinations: "🗺️",
+};
 
 export default function Community() {
+  const { t } = useTranslation("community");
   return (
     <section id="community" className="py-20 sm:py-28">
       <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-        {/* Community cards */}
-        <div className="mb-20 grid gap-6 md:grid-cols-2">
-          <a
+        {/* 数字游民社区 - 优化布局 */}
+        <div className="mb-20">
+          <Link
             href="/join"
-            className="block rounded-2xl border border-sky-200 bg-gradient-to-br from-sky-50 to-cyan-50 p-8 transition-all hover:shadow-lg"
+            className="group block overflow-hidden rounded-2xl border border-sky-200/80 bg-gradient-to-br from-sky-50 via-white to-cyan-50/60 p-8 shadow-sm transition-all duration-300 hover:border-sky-300 hover:shadow-xl hover:shadow-sky-100/50 sm:p-10"
           >
-            <div className="mb-2 text-sm font-semibold text-sky-600">
-              👥 数字游民社区
-            </div>
-            <h3 className="mb-3 text-xl font-bold text-slate-900">
-              加入全球华人数字游民网络
-            </h3>
-            <p className="mb-6 text-sm leading-relaxed text-slate-600">
-              填写申请表加入社区
-              <br />
-              1000+ 数字游民 · 每周线上分享 · 城市攻略
-            </p>
-            <div className="flex items-center justify-center rounded-xl bg-white/80 p-6 shadow-sm backdrop-blur-sm">
-              <div className="flex items-center gap-4">
-                <div className="flex h-14 w-14 items-center justify-center rounded-full bg-sky-100 text-3xl">
+            <div className="flex flex-col gap-6 sm:flex-row sm:items-center sm:justify-between">
+              <div className="flex-1">
+                <div className="mb-3 inline-flex items-center gap-2 rounded-full bg-sky-100 px-4 py-1.5 text-sm font-semibold text-sky-700">
+                  <span className="text-lg">👥</span>
+                  {t("nomadCommunity")}
+                </div>
+                <h3 className="mb-3 text-2xl font-bold tracking-tight text-slate-900 sm:text-3xl">
+                  {t("joinTitle")}
+                </h3>
+                <p className="mb-4 max-w-xl text-base leading-relaxed text-slate-600">
+                  {t("joinDesc")}
+                </p>
+                <div className="flex flex-wrap gap-3">
+                  <span className="rounded-lg bg-white/90 px-3 py-1.5 text-sm font-medium text-slate-600 shadow-sm">
+                    {t("applyForm")}
+                  </span>
+                  <span className="rounded-lg bg-white/90 px-3 py-1.5 text-sm font-medium text-slate-600 shadow-sm">
+                    {t("approveJoin")}
+                  </span>
+                </div>
+              </div>
+              <div className="flex shrink-0 items-center gap-4 rounded-2xl bg-white/90 p-6 shadow-md backdrop-blur-sm transition-transform group-hover:scale-[1.02] sm:p-8">
+                <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-sky-400 to-cyan-500 text-3xl shadow-lg shadow-sky-200/50">
                   📝
                 </div>
                 <div className="text-left">
                   <div className="font-bold text-slate-800">
-                    立即申请加入 →
+                    {t("applyNow")}
                   </div>
-                  <div className="mt-1 text-xs text-slate-400">
-                    填写简单表单，审核通过即可入群
+                  <div className="mt-1 text-sm text-slate-500">
+                    {t("applyHint")}
                   </div>
                 </div>
               </div>
             </div>
-          </a>
-
-          <a
-            href="/course"
-            className="block rounded-2xl border border-amber-200 bg-gradient-to-br from-amber-50 to-orange-50 p-8 transition-all hover:shadow-lg"
-          >
-            <div className="mb-2 text-sm font-semibold text-amber-600">
-              🎬 数字游民实战课
-            </div>
-            <h3 className="mb-3 text-xl font-bold text-slate-900">
-              打造 7×24 小时自动化收入系统
-            </h3>
-            <div className="mb-4 flex flex-wrap gap-3">
-              <span className="rounded-full bg-white/80 px-3 py-1 text-xs font-medium text-slate-600">
-                🔥 实战训练营
-              </span>
-              <span className="rounded-full bg-white/80 px-3 py-1 text-xs font-medium text-slate-600">
-                📹 视频教程
-              </span>
-              <span className="rounded-full bg-white/80 px-3 py-1 text-xs font-medium text-slate-600">
-                ¥199
-              </span>
-            </div>
-            <p className="mb-6 text-sm leading-relaxed text-slate-600">
-              7 天打造你的远程工作体系 · 从入门到精通
-            </p>
-            <div className="flex items-center justify-center rounded-xl bg-white/80 p-6 shadow-sm backdrop-blur-sm">
-              <div className="text-center">
-                <div className="text-5xl">🎓</div>
-                <div className="mt-3 text-sm font-medium text-slate-600">
-                  点击查看课程详情 →
-                </div>
-              </div>
-            </div>
-          </a>
+          </Link>
         </div>
 
-        {/* Open source contribution */}
         <div className="text-center">
           <div className="mb-2 text-sm font-semibold text-slate-400">
-            🤝 开源共建
+            {t("openSource")}
           </div>
           <h2 className="text-3xl font-bold tracking-tight sm:text-4xl">
-            社区与<span className="gradient-text">贡献</span>
+            {t("contributeTitle")} <span className="gradient-text">{t("contributeHighlight")}</span>
           </h2>
           <p className="mx-auto mt-4 max-w-2xl text-lg text-slate-600">
-            数字游民指南是开源项目，致力于做最好的中文数字游民资源聚合站。
+            {t("contributeSubtitle")}
             <br />
-            欢迎补充资源、改进内容、分享经验。
+            {t("contributeSubtitle2")}
           </p>
         </div>
 
         <div className="mt-12 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-          {links.map((l) => (
+          {linkKeys.map((key) => (
             <div
-              key={l.title}
+              key={key}
               className="card-hover flex items-start gap-4 rounded-xl border border-slate-100 bg-white p-5 shadow-sm"
             >
               <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-slate-50 text-xl">
-                {l.icon}
+                {linkIcons[key]}
               </span>
               <div>
-                <h4 className="font-bold text-slate-900">{l.title}</h4>
-                <p className="mt-1 text-sm text-slate-500">{l.desc}</p>
+                <h4 className="font-bold text-slate-900">{t(`links.${key}.title`)}</h4>
+                <p className="mt-1 text-sm text-slate-500">{t(`links.${key}.desc`)}</p>
                 <span className="mt-2 inline-block text-sm font-medium text-sky-600">
-                  {l.label}
+                  {t(`links.${key}.label`)}
                 </span>
               </div>
             </div>
@@ -147,15 +97,15 @@ export default function Community() {
 
         <div className="mt-12 text-center">
           <div className="mb-4 text-lg font-bold text-slate-900">
-            🌟 一起让数字游民指南变得更好
+            {t("betterTitle")}
           </div>
           <p className="mb-6 text-slate-600">
-            发现了好资源？写了旅居心得？有工具推荐？
+            {t("betterDesc")}
             <br />
-            提一个 PR，你的贡献将帮助更多人。
+            {t("betterDesc2")}
           </p>
           <button className="inline-flex items-center gap-2 rounded-full bg-slate-900 px-8 py-3 font-semibold text-white transition-colors hover:bg-slate-800">
-            ⭐ Star & Fork on GitHub
+            {t("starFork")}
           </button>
         </div>
       </div>