'app下载页

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>
+  );
+}

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 />
+    </>
+  );
+}

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>

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() {