's'

app/components/Community.tsx

@@ -0,0 +1,164 @@
+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: "探索城市 ↗",
+  },
+];
+
+export default function 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
+            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"
+          >
+            <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>
+                <div className="text-left">
+                  <div className="font-bold text-slate-800">
+                    立即申请加入 →
+                  </div>
+                  <div className="mt-1 text-xs text-slate-400">
+                    填写简单表单，审核通过即可入群
+                  </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>
+        </div>
+
+        {/* Open source contribution */}
+        <div className="text-center">
+          <div className="mb-2 text-sm font-semibold text-slate-400">
+            🤝 开源共建
+          </div>
+          <h2 className="text-3xl font-bold tracking-tight sm:text-4xl">
+            社区与<span className="gradient-text">贡献</span>
+          </h2>
+          <p className="mx-auto mt-4 max-w-2xl text-lg text-slate-600">
+            数字游民指南是开源项目，致力于做最好的中文数字游民资源聚合站。
+            <br />
+            欢迎补充资源、改进内容、分享经验。
+          </p>
+        </div>
+
+        <div className="mt-12 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+          {links.map((l) => (
+            <div
+              key={l.title}
+              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}
+              </span>
+              <div>
+                <h4 className="font-bold text-slate-900">{l.title}</h4>
+                <p className="mt-1 text-sm text-slate-500">{l.desc}</p>
+                <span className="mt-2 inline-block text-sm font-medium text-sky-600">
+                  {l.label}
+                </span>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <div className="mt-12 text-center">
+          <div className="mb-4 text-lg font-bold text-slate-900">
+            🌟 一起让数字游民指南变得更好
+          </div>
+          <p className="mb-6 text-slate-600">
+            发现了好资源？写了旅居心得？有工具推荐？
+            <br />
+            提一个 PR，你的贡献将帮助更多人。
+          </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
+          </button>
+        </div>
+      </div>
+    </section>
+  );
+}