's'

2026-03-07 09:34:01 -06:00
parent 742815f2db
commit da5f9c18a7
39 changed files with 8602 additions and 0 deletions
--- a/app/components/Resources.tsx
+++ b/app/components/Resources.tsx
@@ -0,0 +1,175 @@
+const resources = [
+  {
+    lang: "中文",
+    tag: "📖 入门指南",
+    title: "数字游民完全入门手册",
+    desc: "从概念到实践，系统化的数字游民入门指南，含远程工作、签证、财务全攻略",
+    source: "少数派",
+    color: "bg-sky-50 text-sky-700 border-sky-200",
+  },
+  {
+    lang: "EN",
+    tag: "📖 经典书籍",
+    title: "The 4-Hour Workweek — Tim Ferriss",
+    desc: "数字游民圣经，重新定义工作与生活的关系，构建「新富族」生活方式",
+    source: "Amazon",
+    color: "bg-amber-50 text-amber-700 border-amber-200",
+  },
+  {
+    lang: "中文",
+    tag: "☁️ 远程求职",
+    title: "国内远程工作机会汇总 — 电鸭社区",
+    desc: "最大的中文远程工作社区，收录数千个远程岗位，涵盖开发、设计、运营等领域",
+    source: "电鸭社区",
+    color: "bg-emerald-50 text-emerald-700 border-emerald-200",
+  },
+  {
+    lang: "EN",
+    tag: "🗺️ 目的地",
+    title: "Nomad List — Best Cities for Digital Nomads",
+    desc: "全球数字游民城市数据库，含生活成本、网速、安全指数、社区活跃度等指标",
+    source: "Nomad List",
+    color: "bg-violet-50 text-violet-700 border-violet-200",
+  },
+  {
+    lang: "中文",
+    tag: "📹 视频教程",
+    title: "从程序员到数字游民 — 我的转型之路",
+    desc: "真实经历分享：如何从 996 转型为自由的数字游民，含收入、签证、生活细节",
+    source: "Bilibili",
+    color: "bg-rose-50 text-rose-700 border-rose-200",
+  },
+  {
+    lang: "EN",
+    tag: "💰 财务规划",
+    title: "Tax Planning for Digital Nomads — Complete Guide",
+    desc: "数字游民税务规划权威指南：税务居民身份、双重征税协定、合规架构搭建",
+    source: "SafetyWing",
+    color: "bg-teal-50 text-teal-700 border-teal-200",
+  },
+  {
+    lang: "中文",
+    tag: "🛠️ 工具评测",
+    title: "远程工作者必备工具清单 2026",
+    desc: "50+ 工具横评：协作、会议、设计、开发、生产力工具深度体验与推荐",
+    source: "即刻",
+    color: "bg-orange-50 text-orange-700 border-orange-200",
+  },
+  {
+    lang: "EN",
+    tag: "🔬 深度文章",
+    title: "State of Digital Nomads 2026 — Annual Report",
+    desc: "2026年度数字游民状态报告：3500万全球数字游民的收入、工作、生活数据洞察",
+    source: "A Brother Abroad",
+    color: "bg-indigo-50 text-indigo-700 border-indigo-200",
+  },
+  {
+    lang: "中文",
+    tag: "📱 社区",
+    title: "数字游民部落 — 中文社区指南",
+    desc: "连接全球华人数字游民：经验分享、城市攻略、合租搭伴、线下 Meetup",
+    source: "微信公众号",
+    color: "bg-cyan-50 text-cyan-700 border-cyan-200",
+  },
+  {
+    lang: "EN",
+    tag: "📋 签证",
+    title: "Digital Nomad Visa Guide — 50+ Countries",
+    desc: "全球 50+ 国家数字游民签证政策汇总，含申请条件、费用、停留期限对比",
+    source: "VisaGuide.World",
+    color: "bg-lime-50 text-lime-700 border-lime-200",
+  },
+  {
+    lang: "中文",
+    tag: "🏠 共居空间",
+    title: "全球最佳 Coliving 空间推荐",
+    desc: "精选 30+ 数字游民共居空间：巴厘岛、清迈、里斯本、麦德林……含价格与评测",
+    source: "数字游民部落",
+    color: "bg-pink-50 text-pink-700 border-pink-200",
+  },
+  {
+    lang: "EN",
+    tag: "💼 自由职业",
+    title: "Freelancing 101 — From Zero to First Client",
+    desc: "从零开始接单指南：Upwork/Fiverr/Toptal 平台对比、定价策略、客户沟通技巧",
+    source: "freeCodeCamp",
+    color: "bg-sky-50 text-sky-700 border-sky-200",
+  },
+];
+
+const sourceStats = [
+  { value: "200+", label: "篇资源" },
+  { value: "80", label: "中文资源" },
+  { value: "120+", label: "英文资源" },
+  { value: "12", label: "大分类" },
+];
+
+export default function Resources() {
+  return (
+    <section id="resources" 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">
+          <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">
+            从少数派到 Nomad List，从 B站 到 freeCodeCamp
+            —— 一站式获取数字游民最佳资源。
+          </p>
+        </div>
+
+        {/* Stats */}
+        <div className="mt-10 flex flex-wrap items-center justify-center gap-4 text-sm">
+          {sourceStats.map((s) => (
+            <div key={s.label} className="flex items-center gap-1.5">
+              <span className="font-bold text-sky-600">{s.value}</span>
+              <span className="text-slate-500">{s.label}</span>
+            </div>
+          ))}
+        </div>
+
+        {/* Resource grid */}
+        <div className="mt-12 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+          {resources.map((r, i) => (
+            <div
+              key={i}
+              className="resource-card flex flex-col rounded-xl border border-slate-100 bg-white p-5 shadow-sm"
+            >
+              <div className="mb-3 flex items-center gap-2">
+                <span
+                  className={`rounded-md border px-2 py-0.5 text-xs font-semibold ${r.color}`}
+                >
+                  {r.lang}
+                </span>
+                <span className="text-xs text-slate-400">{r.tag}</span>
+              </div>
+              <h3 className="mb-2 text-sm font-bold leading-snug text-slate-900">
+                {r.title}
+              </h3>
+              <p className="mb-4 flex-1 text-xs leading-relaxed text-slate-500">
+                {r.desc}
+              </p>
+              <div className="flex items-center justify-between">
+                <span className="text-xs font-medium text-slate-400">
+                  {r.source}
+                </span>
+                <span className="cursor-pointer text-xs font-medium text-sky-600 transition-colors hover:text-sky-700">
+                  访问 ↗
+                </span>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <div className="mt-10 text-center">
+          <button className="inline-flex items-center gap-2 rounded-full border border-slate-200 bg-white px-6 py-3 text-sm font-semibold text-slate-700 shadow-sm transition-all hover:border-slate-300 hover:bg-slate-50">
+            查看全部 200+ 篇资源 →
+          </button>
+        </div>
+      </div>
+    </section>
+  );
+}