From 3c9ef24c54a46055e217ac2744baaf00d3b8843c Mon Sep 17 00:00:00 2001
From: eric <xiaoshuang.eric@gmail.com>
Date: Sun, 8 Mar 2026 12:53:01 -0500
Subject: [PATCH] =?UTF-8?q?'app=E4=B8=8B=E8=BD=BD=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/[locale]/app/AppDownloadContent.tsx       | 70 +++++++++++++++++
 app/[locale]/app/page.tsx                     | 21 +++++
 app/components/Community.tsx                  | 76 +++++++++----------
 app/components/Header.tsx                     |  1 +
 content/themes/digital-nomad/messages/en.json | 26 ++++---
 content/themes/digital-nomad/messages/zh.json | 26 ++++---
 6 files changed, 162 insertions(+), 58 deletions(-)
 create mode 100644 app/[locale]/app/AppDownloadContent.tsx
 create mode 100644 app/[locale]/app/page.tsx

diff --git a/app/[locale]/app/AppDownloadContent.tsx b/app/[locale]/app/AppDownloadContent.tsx
new file mode 100644
index 0000000..9cfa36e
--- /dev/null
+++ b/app/[locale]/app/AppDownloadContent.tsx
@@ -0,0 +1,70 @@
+"use client";
+
+import { useEffect } from "react";
+import { useTranslation } from "@/i18n/navigation";
+
+export default function AppDownloadContent() {
+  const { t } = useTranslation("appDownload");
+
+  useEffect(() => {
+    window.history.scrollRestoration = "manual";
+    window.scrollTo(0, 0);
+    return () => {
+      window.history.scrollRestoration = "auto";
+    };
+  }, []);
+
+  const features = [
+    { key: "resources", icon: "📚" },
+    { key: "community", icon: "👥" },
+    { key: "tools", icon: "🛠️" },
+  ] as const;
+
+  return (
+    <div className="min-h-screen bg-slate-50 dark:bg-slate-950">
+      <section className="py-20 sm:py-28">
+        <div className="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
+          <div className="text-center">
+            <div className="mb-6 inline-flex h-24 w-24 items-center justify-center rounded-2xl bg-gradient-to-br from-sky-400 to-cyan-500 text-5xl shadow-lg shadow-sky-200/50 dark:shadow-sky-900/30">
+              📱
+            </div>
+            <h1 className="text-4xl font-bold tracking-tight text-slate-900 dark:text-slate-100 sm:text-5xl">
+              {t("title")}
+            </h1>
+            <p className="mx-auto mt-4 max-w-2xl text-lg text-slate-600 dark:text-slate-400">
+              {t("subtitle")}
+            </p>
+          </div>
+
+          <div className="mt-16 grid gap-6 sm:grid-cols-3">
+            {features.map(({ key, icon }) => (
+              <div
+                key={key}
+                className="card-hover flex flex-col items-center rounded-2xl border border-slate-100 bg-white p-6 text-center shadow-sm dark:border-slate-800 dark:bg-slate-900"
+              >
+                <span className="mb-4 flex h-14 w-14 items-center justify-center rounded-xl bg-slate-50 text-2xl dark:bg-slate-800">
+                  {icon}
+                </span>
+                <h3 className="text-lg font-bold text-slate-900 dark:text-slate-100">
+                  {t(`features.${key}.title`)}
+                </h3>
+                <p className="mt-2 text-sm text-slate-500 dark:text-slate-400">
+                  {t(`features.${key}.desc`)}
+                </p>
+              </div>
+            ))}
+          </div>
+
+          <div className="mt-16 text-center">
+            <div className="inline-flex items-center gap-2 rounded-full bg-amber-100 px-4 py-2 text-sm font-medium text-amber-800 dark:bg-amber-900/50 dark:text-amber-200">
+              {t("comingSoon")}
+            </div>
+            <p className="mt-4 text-slate-500 dark:text-slate-400">
+              {t("comingSoonDesc")}
+            </p>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}
diff --git a/app/[locale]/app/page.tsx b/app/[locale]/app/page.tsx
new file mode 100644
index 0000000..adc381c
--- /dev/null
+++ b/app/[locale]/app/page.tsx
@@ -0,0 +1,21 @@
+import type { Metadata } from "next";
+import Header from "../../components/Header";
+import Footer from "../../components/Footer";
+import AppDownloadContent from "./AppDownloadContent";
+
+export const metadata: Metadata = {
+  title: "App 下载 | App Download",
+  description: "数字游民指南移动端应用，随时随地获取资源与社区动态。",
+};
+
+export default function AppDownloadPage() {
+  return (
+    <>
+      <Header />
+      <main>
+        <AppDownloadContent />
+      </main>
+      <Footer />
+    </>
+  );
+}
diff --git a/app/components/Community.tsx b/app/components/Community.tsx
index 6367f29..a658180 100644
--- a/app/components/Community.tsx
+++ b/app/components/Community.tsx
@@ -3,14 +3,16 @@
 import { Link, useTranslation } from "@/i18n/navigation";
 import ShopCard from "./ShopCard";
 
-const linkKeys = ["guide", "discord", "tools", "github", "feishu", "destinations"] as const;
+const linkKeys = ["github", "destinations", "appDownload"] as const;
 const linkIcons: Record<(typeof linkKeys)[number], string> = {
-  guide: "📖",
-  discord: "💬",
-  tools: "🛒",
   github: "📦",
-  feishu: "📝",
   destinations: "🗺️",
+  appDownload: "📱",
+};
+const linkHrefs: Record<(typeof linkKeys)[number], { href: string; newTab?: boolean }> = {
+  github: { href: "https://github.com" },
+  destinations: { href: "#" },
+  appDownload: { href: "/app" },
 };
 
 export default function Community() {
@@ -67,12 +69,9 @@ export default function Community() {
           </Link>
         </div>
 
-        <div className="text-center">
-          <div className="mb-2 text-sm font-semibold text-slate-400 dark:text-slate-500">
-            {t("openSource")}
-          </div>
+        <div id="resources" className="text-center">
           <h2 className="text-3xl font-bold tracking-tight text-slate-900 dark:text-slate-100 sm:text-4xl">
-            {t("contributeTitle")} <span className="gradient-text">{t("contributeHighlight")}</span>
+            <span className="gradient-text">{t("resourcesTitle")}</span>
           </h2>
           <p className="mx-auto mt-4 max-w-2xl text-lg text-slate-600 dark:text-slate-400">
             {t("contributeSubtitle")}
@@ -82,37 +81,34 @@ export default function Community() {
         </div>
 
         <div className="mt-12 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-          {linkKeys.map((key) => (
-            <div
-              key={key}
-              className="card-hover flex items-start gap-4 rounded-xl border border-slate-100 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900"
-            >
-              <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-slate-50 text-xl dark:bg-slate-800">
-                {linkIcons[key]}
-              </span>
-              <div>
-                <h4 className="font-bold text-slate-900 dark:text-slate-100">{t(`links.${key}.title`)}</h4>
-                <p className="mt-1 text-sm text-slate-500 dark:text-slate-400">{t(`links.${key}.desc`)}</p>
-                <span className="mt-2 inline-block text-sm font-medium text-sky-600">
-                  {t(`links.${key}.label`)}
+          {linkKeys.map((key) => {
+            const { href, newTab } = linkHrefs[key];
+            const content = (
+              <>
+                <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-slate-50 text-xl dark:bg-slate-800">
+                  {linkIcons[key]}
                 </span>
-              </div>
-            </div>
-          ))}
-        </div>
-
-        <div className="mt-12 text-center">
-          <div className="mb-4 text-lg font-bold text-slate-900 dark:text-slate-100">
-            {t("betterTitle")}
-          </div>
-          <p className="mb-6 text-slate-600 dark:text-slate-400">
-            {t("betterDesc")}
-            <br />
-            {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 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-slate-200">
-            {t("starFork")}
-          </button>
+                <div>
+                  <h4 className="font-bold text-slate-900 dark:text-slate-100">{t(`links.${key}.title`)}</h4>
+                  <p className="mt-1 text-sm text-slate-500 dark:text-slate-400">{t(`links.${key}.desc`)}</p>
+                  <span className="mt-2 inline-block text-sm font-medium text-sky-600">
+                    {t(`links.${key}.label`)}
+                  </span>
+                </div>
+              </>
+            );
+            return (
+              <Link
+                key={key}
+                href={href}
+                target={newTab ? "_blank" : undefined}
+                rel={newTab ? "noopener noreferrer" : undefined}
+                className="card-hover flex items-start gap-4 rounded-xl border border-slate-100 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900"
+              >
+                {content}
+              </Link>
+            );
+          })}
         </div>
       </div>
     </section>
diff --git a/app/components/Header.tsx b/app/components/Header.tsx
index c41365d..88f3ca4 100644
--- a/app/components/Header.tsx
+++ b/app/components/Header.tsx
@@ -11,6 +11,7 @@ const navLinks = [
   { labelKey: "tools" as const, href: "#tools" },
   { labelKey: "community" as const, href: "#community" },
   { labelKey: "shop" as const, href: "#shop" },
+  { labelKey: "resources" as const, href: "#resources" },
 ];
 
 export default function Header() {
diff --git a/content/themes/digital-nomad/messages/en.json b/content/themes/digital-nomad/messages/en.json
index 3280eef..d5cf070 100644
--- a/content/themes/digital-nomad/messages/en.json
+++ b/content/themes/digital-nomad/messages/en.json
@@ -11,7 +11,8 @@
     "roadmap": "Learning Path",
     "tools": "Tools",
     "community": "Community",
-    "shop": "Shop"
+    "shop": "Shop",
+    "resources": "Resources"
   },
   "hero": {
     "badge": "Open source · 200+ curated resources",
@@ -98,18 +99,13 @@
     "approveJoin": "Join after approval",
     "applyNow": "Apply now →",
     "applyHint": "Simple form, quick review",
-    "openSource": "🤝 Open Source",
-    "contributeTitle": "Community &",
-    "contributeHighlight": "Contribution",
+    "resourcesTitle": "Resource Downloads",
     "contributeSubtitle": "Digital Nomad Guide is open source, building the best Chinese digital nomad resource hub.",
     "contributeSubtitle2": "Welcome to add resources, improve content, and share experience.",
     "links": {
-      "guide": { "title": "Getting Started", "desc": "Complete digital nomad tutorial", "label": "Start learning ↗" },
-      "discord": { "title": "Discord", "desc": "Chat with global digital nomads", "label": "Join community ↗" },
-      "tools": { "title": "Tool Marketplace", "desc": "Discover, review, and share remote tools", "label": "Browse tools ↗" },
       "github": { "title": "GitHub", "desc": "Open source—Star and PR welcome", "label": "View repo ↗" },
-      "feishu": { "title": "Feishu Docs", "desc": "7-day guide · Chinese tutorials", "label": "View docs ↗" },
-      "destinations": { "title": "Destinations", "desc": "Global digital nomad city info", "label": "Explore cities ↗" }
+      "destinations": { "title": "Destinations", "desc": "Global digital nomad city info", "label": "Explore cities ↗" },
+      "appDownload": { "title": "App Download", "desc": "Digital Nomad Guide mobile app", "label": "Download now ↗" }
     },
     "betterTitle": "🌟 Help Make Digital Nomad Guide Better",
     "betterDesc": "Found a great resource? Wrote travel notes? Have tool recommendations?",
@@ -178,6 +174,18 @@
     "resumeUpload": "Click to upload resume",
     "submit": "Submit Application"
   },
+  "appDownload": {
+    "title": "App Download",
+    "subtitle": "Digital Nomad Guide mobile app—resources and community on the go",
+    "features": {
+      "resources": { "title": "Curated Resources", "desc": "200+ articles, offline reading" },
+      "community": { "title": "Community Updates", "desc": "Latest digital nomad community news" },
+      "tools": { "title": "Tool Recommendations", "desc": "Essential remote work tools" }
+    },
+    "download": "Download Now",
+    "comingSoon": "Coming Soon",
+    "comingSoonDesc": "App is under development, stay tuned"
+  },
   "auth": {
     "title": "Login / Sign up",
     "email": "Email",
diff --git a/content/themes/digital-nomad/messages/zh.json b/content/themes/digital-nomad/messages/zh.json
index 75a278c..7639fb4 100644
--- a/content/themes/digital-nomad/messages/zh.json
+++ b/content/themes/digital-nomad/messages/zh.json
@@ -11,7 +11,8 @@
     "roadmap": "学习路径",
     "tools": "工具推荐",
     "community": "社区",
-    "shop": "商店"
+    "shop": "商店",
+    "resources": "资源"
   },
   "hero": {
     "badge": "开源免费 · 收录 200+ 篇实用资源",
@@ -98,18 +99,13 @@
     "approveJoin": "审核通过入群",
     "applyNow": "立即申请加入 →",
     "applyHint": "简单表单，快速审核",
-    "openSource": "🤝 开源共建",
-    "contributeTitle": "社区与",
-    "contributeHighlight": "贡献",
+    "resourcesTitle": "资源下载",
     "contributeSubtitle": "数字游民指南是开源项目，致力于做最好的中文数字游民资源聚合站。",
     "contributeSubtitle2": "欢迎补充资源、改进内容、分享经验。",
     "links": {
-      "guide": { "title": "入门指南", "desc": "完整的数字游民入门教程", "label": "开始学习 ↗" },
-      "discord": { "title": "Discord 社区", "desc": "与全球数字游民实时交流", "label": "加入社区 ↗" },
-      "tools": { "title": "工具集市", "desc": "发现、评测和分享远程工具", "label": "浏览工具 ↗" },
       "github": { "title": "GitHub", "desc": "开源项目，欢迎 Star 和 PR", "label": "访问仓库 ↗" },
-      "feishu": { "title": "飞书知识库", "desc": "7天入门指南 · 中文图文教程", "label": "查看文档 ↗" },
-      "destinations": { "title": "目的地数据库", "desc": "全球数字游民城市信息", "label": "探索城市 ↗" }
+      "destinations": { "title": "目的地数据库", "desc": "全球数字游民城市信息", "label": "探索城市 ↗" },
+      "appDownload": { "title": "App 下载", "desc": "数字游民指南移动端应用", "label": "立即下载 ↗" }
     },
     "betterTitle": "🌟 一起让数字游民指南变得更好",
     "betterDesc": "发现了好资源？写了旅居心得？有工具推荐？",
@@ -178,6 +174,18 @@
     "resumeUpload": "点击上传简历",
     "submit": "提交申请"
   },
+  "appDownload": {
+    "title": "App 下载",
+    "subtitle": "数字游民指南移动端应用，随时随地获取资源与社区动态",
+    "features": {
+      "resources": { "title": "精选资源", "desc": "200+ 篇实用文章，离线阅读" },
+      "community": { "title": "社区动态", "desc": "实时获取数字游民社区最新资讯" },
+      "tools": { "title": "工具推荐", "desc": "远程工作必备工具一览" }
+    },
+    "download": "立即下载",
+    "comingSoon": "即将上线",
+    "comingSoonDesc": "App 正在开发中，敬请期待"
+  },
   "auth": {
     "title": "登录 / 注册",
     "email": "邮箱",