's'

app/components/Footer.tsx

@@ -0,0 +1,87 @@
+const footerSections = [
+  {
+    title: "指南",
+    links: [
+      { label: "7天学习路径", href: "#roadmap" },
+      { label: "全部资源", href: "#resources" },
+      { label: "工具推荐", href: "#tools" },
+      { label: "目的地数据库", href: "#" },
+    ],
+  },
+  {
+    title: "资源",
+    links: [
+      { label: "远程工作平台", href: "#" },
+      { label: "签证政策汇总", href: "#" },
+      { label: "共居空间推荐", href: "#" },
+      { label: "数字游民保险", href: "#" },
+    ],
+  },
+  {
+    title: "社区",
+    links: [
+      { label: "Discord", href: "#" },
+      { label: "微信群", href: "#community" },
+      { label: "即刻", href: "#" },
+      { label: "GitHub", href: "#" },
+    ],
+  },
+  {
+    title: "关于",
+    links: [
+      { label: "关于我们", href: "#" },
+      { label: "贡献指南", href: "#" },
+      { label: "隐私政策", href: "#" },
+      { label: "联系我们", href: "#" },
+    ],
+  },
+];
+
+export default function 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">
+              <span className="text-2xl">🌍</span>
+              <span>数字游民指南</span>
+            </a>
+            <p className="mt-3 text-sm leading-relaxed text-slate-500">
+              开源免费的数字游民资源平台
+              <br />
+              助你开启自由工作与旅行的生活方式
+            </p>
+          </div>
+
+          {footerSections.map((section) => (
+            <div key={section.title}>
+              <h4 className="mb-4 text-sm font-bold text-slate-900">
+                {section.title}
+              </h4>
+              <ul className="space-y-2.5">
+                {section.links.map((link) => (
+                  <li key={link.label}>
+                    <a
+                      href={link.href}
+                      className="text-sm text-slate-500 transition-colors hover:text-slate-700"
+                    >
+                      {link.label}
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+
+        <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
+          </p>
+          <p className="text-sm text-slate-400">开源共享 · 社区驱动</p>
+        </div>
+      </div>
+    </footer>
+  );
+}