's'

2026-03-09 01:44:13 -05:00
parent 8eef28536e
commit 7638e4032e
18 changed files with 1038 additions and 264 deletions
--- a/README.md
+++ b/README.md
@@ -1,36 +1,110 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+# 游牧中国 NomadCNA

-## Getting Started
+数字游民生活操作系统 (Nomad OS) - 你的下一站，由数据决定

-First, run the development server:
+## 项目简介
+
+NomadCNA 是一个面向数字游民的站式生活平台，提供城市决策、税务签证、智能匹配、赏金任务等功能。从 Free 到 Pro，开启你的游牧人生。
+
+## 技术栈
+
+- **前端框架**: Next.js 16 (App Router)
+- **UI 框架**: React 19 + Tailwind CSS 4
+- **样式**: Tailwind CSS
+- **字体**: Geist (Vercel)
+- **数据库**: PocketBase
+- **对象存储**: MinIO
+- **语言**: TypeScript
+
+## 功能特性
+
+- 🌏 **城市探索** - 发现最适合数字游民的中国城市
+- 📍 **城市数据** - 成本、生活质量、网络速度等数据对比
+- 🎯 **智能匹配** - 根据个人偏好推荐适合的城市
+- 🤝 **社区聚会** - 与各地游民建立联系
+- 💬 **社区互动** - 论坛、话题讨论
+- 🛠️ **实用工具** - 汇率、天气等实用工具
+- 🌙 **暗色模式** - 支持亮色/暗色主题切换
+- 🌐 **国际化** - 支持中文/英文
+
+## 快速开始
+
+### 环境要求
+
+- Node.js 18+
+- npm / yarn / pnpm / bun
+
+### 安装依赖
+
+```bash
+npm install
+```
+
+### 开发模式

 ```bash
 npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
 ```

-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+打开 [http://localhost:3000](http://localhost:3000) 查看项目。

-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+### 生产构建

-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+```bash
+npm run build
+npm start
+```

-## Learn More
+## 项目结构

-To learn more about Next.js, take a look at the following resources:
+```
+├── app/                    # Next.js App Router
+│   ├── components/         # React 组件
+│   ├── context/           # React Context (主题等)
+│   ├── lib/              # 工具库
+│   └── [locale]/         # 国际化路由
+├── config/                # 配置文件
+│   ├── site.config.ts    # 站点配置
+│   ├── nav.config.ts     # 导航配置
+│   ├── footer.config.ts  # 页脚配置
+│   └── ...
+├── public/                # 静态资源
+└── i18n/                  # 国际化配置
+```

- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+## 主要页面

-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+- `/` - 首页 (城市探索)
+- `/about` - 关于我们
+- `/meetups` - 聚会活动
+- `/dating` - 社区交友
+- `/tools` - 实用工具
+- `/ai` - AI 助手
+- `/gigs` - 赏金任务
+- `/pricing` - 会员价格
+- `/join` - 加入社区

-## Deploy on Vercel
+## 配置

-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+### 主题配置

-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+主题相关逻辑位于 `app/context/ThemeContext.tsx`，支持：
+- 手动切换亮色/暗色模式
+- 记住用户偏好 (localStorage)
+- 跟随系统设置
+
+### 导航配置
+
+导航链接位于 `config/nav.config.ts`，可自定义修改。
+
+### 页脚配置
+
+页脚链接位于 `config/footer.config.ts`，可自定义修改。
+
+## 贡献指南
+
+欢迎提交 Pull Request 和 Issue！
+
+## 许可证
+
+MIT License
--- a/app/[locale]/page.tsx
+++ b/app/[locale]/page.tsx
@@ -1,60 +1,17 @@
 "use client";

 import { useState, useMemo } from "react";
-import { Link } from "@/i18n/navigation";
+import { Link, useLocale } from "@/i18n/navigation";
+import { useTranslation } from "@/i18n/navigation";
 import HeroSection from "../components/HeroSection";
 import FilterBar from "../components/FilterBar";
 import CityCard from "../components/CityCard";
 import CityModal from "../components/CityModal";
 import Footer from "../components/Footer";
 import { cities, type City } from "../data/cities";
+import { HOME_CONFIG } from "@/config";

-const memberPhotos = [
-  { name: "林晓", photo: "https://i.pravatar.cc/150?img=5" },
-  { name: "张浩", photo: "https://i.pravatar.cc/150?img=3" },
-  { name: "陈悦", photo: "https://i.pravatar.cc/150?img=9" },
-  { name: "周杰", photo: "https://i.pravatar.cc/150?img=7" },
-  { name: "吴婷", photo: "https://i.pravatar.cc/150?img=1" },
-  { name: "杨帅", photo: "https://i.pravatar.cc/150?img=12" },
-  { name: "赵琪", photo: "https://i.pravatar.cc/150?img=16" },
-  { name: "黄磊", photo: "https://i.pravatar.cc/150?img=11" },
-  { name: "孙莉", photo: "https://i.pravatar.cc/150?img=20" },
-];
-
-const travelingNow = [
-  { name: "小明", photo: "https://i.pravatar.cc/150?img=52", dest: "大理" },
-  { name: "雨晴", photo: "https://i.pravatar.cc/150?img=44", dest: "成都" },
-  { name: "阿杰", photo: "https://i.pravatar.cc/150?img=53", dest: "深圳" },
-  { name: "小燕", photo: "https://i.pravatar.cc/150?img=47", dest: "杭州" },
-  { name: "大伟", photo: "https://i.pravatar.cc/150?img=55", dest: "厦门" },
-  { name: "佳琪", photo: "https://i.pravatar.cc/150?img=48", dest: "昆明" },
-  { name: "志远", photo: "https://i.pravatar.cc/150?img=57", dest: "丽江" },
-  { name: "心怡", photo: "https://i.pravatar.cc/150?img=49", dest: "三亚" },
-  { name: "凯文", photo: "https://i.pravatar.cc/150?img=59", dest: "上海" },
-  { name: "子豪", photo: "https://i.pravatar.cc/150?img=60", dest: "北京" },
-  { name: "浩然", photo: "https://i.pravatar.cc/150?img=61", dest: "广州" },
-  { name: "雅琪", photo: "https://i.pravatar.cc/150?img=21", dest: "南京" },
-  { name: "天翔", photo: "https://i.pravatar.cc/150?img=67", dest: "长沙" },
-  { name: "美玲", photo: "https://i.pravatar.cc/150?img=23", dest: "苏州" },
-  { name: "俊杰", photo: "https://i.pravatar.cc/150?img=68", dest: "青岛" },
-  { name: "晓华", photo: "https://i.pravatar.cc/150?img=26", dest: "珠海" },
-];
-
-const meetups = [
-  { city: "大理", emoji: "🏯", date: "3月9日", count: 12 },
-  { city: "成都", emoji: "🐼", date: "3月12日", count: 8 },
-  { city: "深圳", emoji: "🌃", date: "3月14日", count: 15 },
-  { city: "厦门", emoji: "🌊", date: "3月16日", count: 6 },
-  { city: "杭州", emoji: "⛲", date: "3月20日", count: 23 },
-];
-
-const hotTopics = [
-  { title: "大理最佳共享办公空间推荐 Top 10", views: 2340 },
-  { title: "2026年数字游民友好城市排名", views: 1890 },
-  { title: "远程工作者的税务规划指南", views: 1560 },
-  { title: "成都 vs 大理：哪个更适合游民？", views: 1230 },
-  { title: "新手游民必备工具与装备清单", views: 980 },
-];
+const { memberPhotos, travelingNow, meetups: homeMeetups, hotTopics, routes, stats, communityStats } = HOME_CONFIG;

 function safetyOrder(s: string): number {
  const o: Record<string, number> = { 极好: 5, 很好: 4, 好: 3, 一般: 2, 差: 1 };
@@ -65,6 +22,9 @@ export default function Home() {
  const [activeFilter, setActiveFilter] = useState("全部");
  const [sortBy, setSortBy] = useState("score");
  const [cityModal, setCityModal] = useState<City | null>(null);
+  const locale = useLocale();
+  const { t } = useTranslation("home");
+  const { t: tNav } = useTranslation("nav");

  const filteredCities = useMemo(() => {
    let result = [...cities];
@@ -99,23 +59,23 @@ export default function Home() {
      <div className="border-y border-gray-100 dark:border-gray-800 bg-white dark:bg-gray-900">
        <div className="max-w-[1400px] mx-auto px-5 sm:px-10 py-4 flex flex-wrap items-center justify-center gap-6 sm:gap-12 text-center">
          <div>
-            <span className="text-xl sm:text-2xl font-bold text-gray-900 dark:text-gray-100">18</span>
-            <p className="text-xs text-gray-400 dark:text-gray-500 mt-0.5">个城市</p>
+            <span className="text-xl sm:text-2xl font-bold text-gray-900 dark:text-gray-100">{stats.cities}</span>
+            <p className="text-xs text-gray-400 dark:text-gray-500 mt-0.5">{t("stats.cities")}</p>
          </div>
          <div className="w-px h-8 bg-gray-100 dark:bg-gray-700 hidden sm:block" />
          <div>
-            <span className="text-xl sm:text-2xl font-bold text-gray-900 dark:text-gray-100">5,000+</span>
-            <p className="text-xs text-gray-400 dark:text-gray-500 mt-0.5">位游民</p>
+            <span className="text-xl sm:text-2xl font-bold text-gray-900 dark:text-gray-100">{stats.nomads}</span>
+            <p className="text-xs text-gray-400 dark:text-gray-500 mt-0.5">{t("stats.nomads")}</p>
          </div>
          <div className="w-px h-8 bg-gray-100 dark:bg-gray-700 hidden sm:block" />
          <div>
-            <span className="text-xl sm:text-2xl font-bold text-gray-900 dark:text-gray-100">8+</span>
-            <p className="text-xs text-gray-400 dark:text-gray-500 mt-0.5">场聚会/月</p>
+            <span className="text-xl sm:text-2xl font-bold text-gray-900 dark:text-gray-100">{stats.homeMeetups}</span>
+            <p className="text-xs text-gray-400 dark:text-gray-500 mt-0.5">{t("stats.meetups")}</p>
          </div>
          <div className="w-px h-8 bg-gray-100 dark:bg-gray-700 hidden sm:block" />
          <div>
-            <span className="text-xl sm:text-2xl font-bold text-gray-900 dark:text-gray-100">¥3,000</span>
-            <p className="text-xs text-gray-400 dark:text-gray-500 mt-0.5">起/月生活费</p>
+            <span className="text-xl sm:text-2xl font-bold text-gray-900 dark:text-gray-100">{stats.cost}</span>
+            <p className="text-xs text-gray-400 dark:text-gray-500 mt-0.5">{t("stats.cost")}</p>
          </div>
        </div>
      </div>
@@ -132,23 +92,23 @@ export default function Home() {

      <div className="items-grid">
        <Link href="/join" className="right-item block">
-          <div className="right-item-header">加入社群</div>
+          <div className="right-item-header">{t("joinCommunity")}</div>
          <div className="flex flex-col items-center justify-center text-center p-2 sm:p-5 h-[calc(100%-38px)] sm:h-[calc(100%-42px)]">
            <span className="text-2xl sm:text-5xl mb-1 sm:mb-3">💬</span>
            <p className="text-[10px] sm:text-sm text-gray-600 dark:text-gray-400 mb-0.5">
-              加入数字游民微信社群
+              {t("joinCommunityDesc")}
            </p>
            <p className="text-[9px] sm:text-xs text-gray-400 dark:text-gray-500 mb-1.5 sm:mb-4">
-              3,200+ 在线成员
+              {communityStats.onlineMembers} {t("membersOnline")}
            </p>
            <span className="bg-[#ff4d4f] text-white px-2.5 sm:px-6 py-1 sm:py-2 rounded-lg text-[10px] sm:text-sm font-semibold whitespace-nowrap">
-              加入社群 →
+              {t("joinCommunity")} →
            </span>
          </div>
        </Link>

        <Link href="/dating" className="right-item block">
-          <div className="right-item-header">新成员</div>
+          <div className="right-item-header">{t("newMembers")}</div>
          <div className="p-2 sm:p-5 flex flex-wrap gap-1 sm:gap-2 content-start">
            {memberPhotos.map((m) => (
              <img
@@ -160,13 +120,13 @@ export default function Home() {
              />
            ))}
            <div className="w-full mt-0.5 text-[9px] sm:text-xs text-gray-400 dark:text-gray-500 text-center">
-              本月 86 人加入
+              {locale === "zh" ? "本月 86 人加入" : "86 joined this month"}
            </div>
          </div>
        </Link>

-        <Link href="/meetups" className="right-item block">
-          <div className="right-item-header">最新活动</div>
+        <Link href="/homeMeetups" className="right-item block">
+          <div className="right-item-header">{t("latestEvents")}</div>
          <div className="p-1.5 sm:p-4 flex flex-col gap-0.5 sm:gap-2.5 text-[10px] sm:text-sm text-gray-700 dark:text-gray-300 h-[calc(100%-38px)] sm:h-[calc(100%-42px)]">
            <div className="flex items-center gap-1 bg-[#f5f6f7] dark:bg-gray-800 rounded-lg px-1.5 py-1 sm:px-3 sm:py-2 font-medium text-gray-900 dark:text-gray-100">
              🗓 3月15日
@@ -175,7 +135,7 @@ export default function Home() {
              📍 深圳南山
            </div>
            <div className="flex items-center gap-1 bg-[#f5f6f7] dark:bg-gray-800 rounded-lg px-1.5 py-1 sm:px-3 sm:py-2 font-medium text-gray-900 dark:text-gray-100">
-              👥 12人
+              👥 12{t("people")}
            </div>
            <div className="flex -space-x-1 mt-auto">
              {memberPhotos.slice(0, 5).map((m) => (
@@ -204,13 +164,13 @@ export default function Home() {
        <div className="text-center py-16 sm:py-20">
          <span className="text-4xl sm:text-5xl mb-4 block">🏜️</span>
          <p className="text-gray-500 dark:text-gray-400 text-base sm:text-lg">
-            没有找到匹配的城市
+            {t("noMatch")}
          </p>
          <button
            onClick={() => setActiveFilter("全部")}
            className="mt-4 text-sm text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-700 px-5 py-2 rounded-full hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
          >
-            显示全部城市
+            {t("showAll")}
          </button>
        </div>
      )}
@@ -218,38 +178,10 @@ export default function Home() {
      <section className="max-w-[1500px] mx-auto px-3 sm:px-6 md:px-10 pt-8 sm:pt-12 pb-4">
        <h2 className="text-lg sm:text-xl font-bold text-gray-900 dark:text-gray-100 mb-5 sm:mb-6 flex items-center gap-2">
          <span className="w-1 h-5 bg-[#ff4d4f] rounded-full" />
-          热门路线
+          {t("hotRoutes")}
        </h2>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5">
-          {[
-            {
-              title: "云南慢生活线",
-              cities: ["昆明", "大理", "丽江"],
-              emojis: ["🌸", "🏯", "🏔️"],
-              duration: "3-6个月",
-              cost: "¥3,200/月起",
-              desc: "从春城昆明出发，沿着滇西北一路感受最纯粹的慢生活",
-              gradient: "from-purple-500 to-pink-500",
-            },
-            {
-              title: "科技创业线",
-              cities: ["深圳", "杭州", "上海"],
-              emojis: ["🌃", "⛲", "🏙️"],
-              duration: "2-4个月",
-              cost: "¥7,000/月起",
-              desc: "穿越中国三大科技中心，连接最前沿的创业生态",
-              gradient: "from-blue-500 to-cyan-500",
-            },
-            {
-              title: "美食文化线",
-              cities: ["成都", "重庆", "长沙"],
-              emojis: ["🐼", "🌶️", "🎪"],
-              duration: "2-3个月",
-              cost: "¥4,000/月起",
-              desc: "巴蜀到湘楚，用味蕾丈量中国最火辣的城市",
-              gradient: "from-orange-500 to-red-500",
-            },
-          ].map((route) => (
+          {routes.map((route) => (
            <div
              key={route.title}
              className="community-card group cursor-pointer"
@@ -295,7 +227,7 @@ export default function Home() {
      <section id="community" className="max-w-[1500px] mx-auto px-3 sm:px-6 md:px-10 py-8 sm:py-12">
        <h2 className="text-lg sm:text-xl font-bold text-gray-900 dark:text-gray-100 mb-5 sm:mb-6 flex items-center gap-2">
          <span className="w-1 h-5 bg-[#ff4d4f] rounded-full" />
-          社区动态
+          {t("communityDynamics")}
        </h2>

        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5">
@@ -303,14 +235,14 @@ export default function Home() {
            <div className="p-4 sm:p-5">
              <div className="flex items-center justify-between mb-4">
                <h3 className="font-bold text-gray-900 dark:text-gray-100 text-sm flex items-center gap-1.5">
-                  🍹 近期聚会
+                  🍹 {t("recentMeetups")}
                </h3>
                <span className="text-[11px] text-gray-400 dark:text-gray-500 bg-gray-50 dark:bg-gray-800 rounded-full px-2 py-0.5">
-                  8场/月
+                  {homeMeetups.length}{t("perMonth")}
                </span>
              </div>
              <div className="space-y-2.5">
-                {meetups.map((m) => (
+                {homeMeetups.map((m) => (
                  <div key={m.city} className="flex items-center justify-between py-1.5">
                    <div className="flex items-center gap-2">
                      <span className="text-base">{m.emoji}</span>
@@ -320,16 +252,16 @@ export default function Home() {
                      </div>
                    </div>
                    <span className="text-[11px] text-gray-400 dark:text-gray-500 bg-gray-50 dark:bg-gray-800 rounded-full px-2 py-0.5">
-                      {m.count}人
+                      {m.count}{t("people")}
                    </span>
                  </div>
                ))}
              </div>
              <Link
-                href="/meetups"
+                href="/homeMeetups"
                className="block w-full text-center text-xs font-medium text-[#ff4d4f] hover:text-[#ff7a45] mt-4 pt-3 border-t border-gray-100 dark:border-gray-700 transition-colors"
              >
-                查看全部聚会 →
+                {t("viewMore")}
              </Link>
            </div>
          </div>
@@ -338,10 +270,10 @@ export default function Home() {
            <div className="p-4 sm:p-5">
              <div className="flex items-center justify-between mb-4">
                <h3 className="font-bold text-gray-900 dark:text-gray-100 text-sm flex items-center gap-1.5">
-                  🛩️ 正在旅行
+                  🛩️ {t("travelingNow")}
                </h3>
                <span className="text-[11px] text-gray-400 dark:text-gray-500 bg-gray-50 dark:bg-gray-800 rounded-full px-2 py-0.5">
-                  {travelingNow.length}人
+                  {travelingNow.length}{t("people")}
                </span>
              </div>
              <div className="flex flex-wrap gap-2">
@@ -361,27 +293,27 @@ export default function Home() {
          <div className="community-card">
            <div className="p-4 sm:p-5">
              <h3 className="font-bold text-gray-900 dark:text-gray-100 text-sm flex items-center gap-1.5 mb-4">
-                🔥 热门讨论
+                🔥 {t("hotDiscussions")}
              </h3>
              <div className="space-y-3">
-                {hotTopics.map((t, i) => (
-                  <a key={t.title} href="#" className="flex items-start gap-2.5 group">
+                {hotTopics.map((t_item, i) => (
+                  <a key={t_item.title} href="#" className="flex items-start gap-2.5 group">
                    <span className={`text-xs font-bold mt-0.5 w-4 shrink-0 ${i < 3 ? "text-[#ff4d4f]" : "text-gray-300 dark:text-gray-600"}`}>
                      {i + 1}
                    </span>
-                    <div className="flex-1 min-w-0">
-                      <p className="text-sm text-gray-700 dark:text-gray-300 group-hover:text-gray-900 dark:group-hover:text-gray-100 transition-colors line-clamp-1 leading-snug">
-                        {t.title}
+                    <div className="flex-1">
+                      <p min-w-0 className="text-sm text-gray-700 dark:text-gray-300 group-hover:text-gray-900 dark:group-hover:text-gray-100 transition-colors line-clamp-1 leading-snug">
+                        {t_item.title}
                      </p>
                      <p className="text-[11px] text-gray-400 dark:text-gray-500 mt-0.5">
-                        {t.views.toLocaleString()} 次浏览
+                        {t_item.views.toLocaleString()} {t("views")}
                      </p>
                    </div>
                  </a>
                ))}
              </div>
              <button className="w-full text-center text-xs font-medium text-[#ff4d4f] hover:text-[#ff7a45] mt-4 pt-3 border-t border-gray-100 dark:border-gray-700 transition-colors">
-                查看更多话题 →
+                {t("viewMore")}
              </button>
            </div>
          </div>
@@ -391,15 +323,15 @@ export default function Home() {
              <div className="flex items-start gap-3 mb-3">
                <span className="text-2xl">🛡️</span>
                <div>
-                  <h3 className="font-bold text-gray-900 dark:text-gray-100 text-sm">旅行保险</h3>
-                  <p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">数字游民定制方案</p>
+                  <h3 className="font-bold text-gray-900 dark:text-gray-100 text-sm">{t("travelInsurance")}</h3>
+                  <p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">{t("travelInsuranceDesc")}</p>
                </div>
              </div>
              <p className="text-xs text-emerald-700 dark:text-emerald-400 bg-emerald-100/50 dark:bg-emerald-900/30 rounded-lg px-3 py-2 mb-3">
-                覆盖全国 + 境外，远程工作专属条款，¥15/天起
+                {t("insuranceCoverage")}
              </p>
              <button className="w-full text-center text-sm font-semibold text-emerald-700 dark:text-emerald-400 hover:text-emerald-800 dark:hover:text-emerald-300 bg-white/80 dark:bg-gray-800/80 hover:bg-white dark:hover:bg-gray-800 border border-emerald-200 dark:border-emerald-800 rounded-full py-2 transition-colors">
-                了解更多 →
+                {t("learnMore")}
              </button>
            </div>
          </div>
@@ -409,8 +341,8 @@ export default function Home() {
              <div className="flex items-start gap-3 mb-3">
                <span className="text-2xl">💬</span>
                <div>
-                  <h3 className="font-bold text-gray-900 dark:text-gray-100 text-sm">社区聊天</h3>
-                  <p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">本月 3,200+ 条消息</p>
+                  <h3 className="font-bold text-gray-900 dark:text-gray-100 text-sm">{t("communityChat")}</h3>
+                  <p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">{locale === "zh" ? `本月 ${communityStats.messagesPerMonth} 条消息` : `${communityStats.messagesPerMonth} messages this month`}</p>
                </div>
              </div>
              <div className="flex items-center gap-2 mb-4">
@@ -424,10 +356,10 @@ export default function Home() {
                    />
                  ))}
                </div>
-                <span className="text-xs text-gray-400 dark:text-gray-500">在线中</span>
+                <span className="text-xs text-gray-400 dark:text-gray-500">{t("onlineNow")}</span>
              </div>
              <button className="w-full text-center text-sm font-semibold text-violet-700 dark:text-violet-400 hover:text-violet-800 dark:hover:text-violet-300 bg-white/80 dark:bg-gray-800/80 hover:bg-white dark:hover:bg-gray-800 border border-violet-200 dark:border-violet-800 rounded-full py-2 transition-colors">
-                加入聊天 →
+                {t("joinChat")}
              </button>
            </div>
          </div>
@@ -437,9 +369,9 @@ export default function Home() {
              <div className="flex items-start gap-3 mb-3">
                <span className="text-2xl">🏛️</span>
                <div>
-                  <h3 className="font-bold text-gray-900 dark:text-gray-100 text-sm">落地指南</h3>
+                  <h3 className="font-bold text-gray-900 dark:text-gray-100 text-sm">{t("landingGuide")}</h3>
                  <p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
-                    租房 · 共享办公 · 本地攻略
+                    {t("landingGuideDesc")}
                  </p>
                </div>
              </div>
@@ -454,7 +386,7 @@ export default function Home() {
                ))}
              </div>
              <button className="w-full text-center text-sm font-semibold text-amber-700 dark:text-amber-400 hover:text-amber-800 dark:hover:text-amber-300 bg-white/80 dark:bg-gray-800/80 hover:bg-white dark:hover:bg-gray-800 border border-amber-200 dark:border-amber-800 rounded-full py-2 transition-colors">
-                查看攻略 →
+                {t("viewGuides")}
              </button>
            </div>
          </div>
--- a/app/[locale]/tools/page.tsx
+++ b/app/[locale]/tools/page.tsx
@@ -123,6 +123,26 @@ export default function ToolsPage() {
              </div>
            </div>
          </section>
+
+          <section className="rounded-2xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 p-6">
+            <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">
+              🌱 {t("fireCalculator")}
+            </h2>
+            <p className="text-sm text-gray-500 dark:text-gray-400 mb-4">{t("fireDesc")}</p>
+            <div className="p-4 rounded-xl bg-gray-50 dark:bg-gray-800 text-center text-sm text-gray-500 dark:text-gray-400">
+              {t("comingSoon")}
+            </div>
+          </section>
+
+          <section className="rounded-2xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 p-6">
+            <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">
+              🌤️ {t("climateFinder")}
+            </h2>
+            <p className="text-sm text-gray-500 dark:text-gray-400 mb-4">{t("climateDesc")}</p>
+            <div className="p-4 rounded-xl bg-gray-50 dark:bg-gray-800 text-center text-sm text-gray-500 dark:text-gray-400">
+              {t("comingSoon")}
+            </div>
+          </section>
        </div>
      </div>
      <Footer />
--- a/app/components/CityCard.tsx
+++ b/app/components/CityCard.tsx
@@ -1,6 +1,6 @@
 "use client";

-import { useState } from "react";
+import { memo, useState } from "react";
 import { City } from "../data/cities";

 function ratingToPercent(rating: string): number {
@@ -20,17 +20,14 @@ function getBarColor(p: number): string {
  return "#ef4444";
 }

-function ScoreBar({
-  icon,
-  label,
-  percent,
-  animate,
-}: {
+interface ScoreBarProps {
  icon: string;
  label: string;
  percent: number;
  animate: boolean;
-}) {
+}
+
+const ScoreBar = memo(function ScoreBar({ icon, label, percent, animate }: ScoreBarProps) {
  return (
    <div className="flex items-center gap-2 sm:gap-3">
      <span className="text-white/80 text-xs sm:text-sm w-14 sm:w-16 shrink-0 flex items-center gap-1">
@@ -48,17 +45,15 @@ function ScoreBar({
      </div>
    </div>
  );
-}
+});

-export default function CityCard({
-  city,
-  rank,
-  onClick,
-}: {
+interface CityCardProps {
  city: City;
  rank: number;
  onClick?: () => void;
-}) {
+}
+
+function CityCardComponent({ city, rank, onClick }: CityCardProps) {
  const [hovered, setHovered] = useState(false);

  const scores = [
@@ -194,3 +189,5 @@ export default function CityCard({
    </div>
  );
 }
+
+export default memo(CityCardComponent);
--- a/app/components/FilterBar.tsx
+++ b/app/components/FilterBar.tsx
@@ -1,6 +1,7 @@
 "use client";

-import { allTags } from "../data/cities";
+import { memo } from "react";
+import { allTags, FILTER_OPTIONS } from "../data/cities";

 interface FilterBarProps {
  activeFilter: string;
@@ -10,16 +11,6 @@ interface FilterBarProps {
  resultCount: number;
 }

-const sortOptions = [
-  { value: "score", label: "综合评分" },
-  { value: "cost-asc", label: "费用最低" },
-  { value: "cost-desc", label: "费用最高" },
-  { value: "internet", label: "网速最快" },
-  { value: "safety", label: "最安全" },
-  { value: "nomads", label: "游民最多" },
-  { value: "temperature", label: "最温暖" },
-];
-
 const tagIcons: Record<string, string> = {
  全部: "🌍",
  热门: "🔥",
@@ -40,7 +31,7 @@ const tagIcons: Record<string, string> = {
  户外运动: "🏄",
 };

-export default function FilterBar({
+function FilterBarComponent({
  activeFilter,
  onFilterChange,
  sortBy,
@@ -52,21 +43,21 @@ export default function FilterBar({
      {/* Top bar: result count + sort */}
      <div className="flex items-center justify-between mb-4">
        <div className="flex items-center gap-2">
-          <h2 className="text-lg font-bold text-gray-900">
+          <h2 className="text-lg font-bold text-gray-900 dark:text-gray-100">
            发现目的地
          </h2>
-          <span className="text-sm text-gray-400">
+          <span className="text-sm text-gray-400 dark:text-gray-500">
            {resultCount} 个城市
          </span>
        </div>
        <div className="flex items-center gap-2">
-          <span className="text-xs text-gray-400 hidden sm:block">排序:</span>
+          <span className="text-xs text-gray-400 dark:text-gray-500 hidden sm:block">排序:</span>
          <select
            value={sortBy}
            onChange={(e) => onSortChange(e.target.value)}
-            className="text-sm bg-white border border-gray-200 rounded-lg px-3 py-1.5 text-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-200 cursor-pointer"
+            className="text-sm bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg px-3 py-1.5 text-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:focus:ring-gray-700 cursor-pointer"
          >
-            {sortOptions.map((opt) => (
+            {FILTER_OPTIONS.map((opt) => (
              <option key={opt.value} value={opt.value}>
                {opt.label}
              </option>
@@ -83,8 +74,8 @@ export default function FilterBar({
            onClick={() => onFilterChange(tag)}
            className={`filter-btn shrink-0 flex items-center gap-1 px-3 py-1.5 rounded-full text-sm font-medium border transition-all ${
              activeFilter === tag
-                ? "active border-gray-900"
-                : "border-gray-200 text-gray-600 hover:border-gray-300"
+                ? "active border-gray-900 dark:border-gray-100"
+                : "border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-400 hover:border-gray-300 dark:hover:border-gray-600"
            }`}
          >
            <span className="text-xs">{tagIcons[tag] || "🏷️"}</span>
@@ -95,3 +86,5 @@ export default function FilterBar({
    </div>
  );
 }
+
+export default memo(FilterBarComponent);
--- a/app/components/Footer.tsx
+++ b/app/components/Footer.tsx
@@ -1,59 +1,18 @@
 "use client";

+import { memo } from "react";
 import { Link, useTranslation } from "@/i18n/navigation";
+import { FOOTER_SECTIONS } from "@/config";

-const footerSections = [
-  {
-    titleKey: "community" as const,
-    links: [
-      { labelKey: "join" as const, href: "/join" },
-      { labelKey: "meetups" as const, href: "/meetups" },
-      { labelKey: "dating" as const, href: "/dating" },
-      { labelKey: "map" as const, href: "#" },
-    ],
-  },
-  {
-    titleKey: "tools" as const,
-    links: [
-      { labelKey: "dashboard" as const, href: "/dashboard" },
-      { labelKey: "cost" as const, href: "/tools" },
-      { labelKey: "ai" as const, href: "/ai" },
-      { labelKey: "coworking" as const, href: "#" },
-      { labelKey: "compare" as const, href: "#" },
-    ],
-  },
-  {
-    titleKey: "resources" as const,
-    links: [
-      { labelKey: "guide" as const, href: "#" },
-      { labelKey: "cityGuide" as const, href: "#" },
-      { labelKey: "stories" as const, href: "#" },
-      { labelKey: "report" as const, href: "/report" },
-      { labelKey: "faq" as const, href: "#" },
-    ],
-  },
-  {
-    titleKey: "about" as const,
-    links: [
-      { labelKey: "aboutUs" as const, href: "/about" },
-      { labelKey: "pricing" as const, href: "/pricing" },
-      { labelKey: "gigs" as const, href: "/gigs" },
-      { labelKey: "recruit" as const, href: "/jobs" },
-      { labelKey: "terms" as const, href: "#" },
-      { labelKey: "privacy" as const, href: "#" },
-      { labelKey: "contact" as const, href: "#" },
-    ],
-  },
-];
-
-export default function Footer() {
+function FooterComponent() {
  const { t } = useTranslation("footer");
+  const { t: tCommon } = useTranslation("common");

  return (
    <footer className="border-t border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900">
      <div className="max-w-[1400px] mx-auto px-5 sm:px-10 py-10 sm:py-12">
        <div className="grid grid-cols-2 md:grid-cols-4 gap-6 sm:gap-8 mb-8">
-          {footerSections.map((section) => (
+          {FOOTER_SECTIONS.map((section) => (
            <div key={section.titleKey}>
              <h4 className="font-bold text-gray-900 dark:text-gray-100 text-sm mb-3">
                {t(section.titleKey)}
@@ -85,13 +44,13 @@ export default function Footer() {
        <div className="pt-8 border-t border-gray-200 dark:border-gray-800 flex flex-col sm:flex-row items-center justify-between gap-4">
          <div className="flex items-center gap-2">
            <span className="text-xl">🌏</span>
-            <span className="text-sm font-bold text-gray-900 dark:text-gray-100">游牧中国</span>
+            <span className="text-sm font-bold text-gray-900 dark:text-gray-100">{tCommon("siteNameShort")}</span>
          </div>
          <p className="text-xs text-gray-400 dark:text-gray-500">
            {t("copyright")}
          </p>
          <div className="flex items-center gap-4 text-xs text-gray-400 dark:text-gray-500">
-            <span>CNY ¥</span>
+            <span>{tCommon("currency") || "CNY ¥"}</span>
            <span>°C</span>
          </div>
        </div>
@@ -99,3 +58,5 @@ export default function Footer() {
    </footer>
  );
 }
+
+export default memo(FooterComponent);
--- a/app/components/Navbar.tsx
+++ b/app/components/Navbar.tsx
@@ -1,47 +1,40 @@
 "use client";

-import { useState, useEffect } from "react";
+import { useState, useEffect, useCallback } from "react";
 import { Link, useLocale, usePathname, useRouter, useTranslation } from "@/i18n/navigation";
 import { getStoredUserEmail, pbLogout } from "@/app/lib/pocketbase";
+import { getNavLinks } from "@/config";
 import AuthModal from "./AuthModal";
 import ThemeToggle from "./ThemeToggle";
+import SiteMenu from "./SiteMenu";

-const navLinks = [
-  { labelKey: "cities" as const, icon: "🏙️", href: "/" },
-  { labelKey: "dashboard" as const, icon: "📍", href: "/dashboard" },
-  { labelKey: "travel" as const, icon: "✈️", href: "/meetups" },
-  { labelKey: "community" as const, icon: "💬", href: "/dating" },
-  { labelKey: "tools" as const, icon: "📊", href: "/tools" },
-  { labelKey: "ai" as const, icon: "🤖", href: "/ai" },
-  { labelKey: "gigs" as const, icon: "💰", href: "/gigs" },
-  { labelKey: "pricing" as const, icon: "👑", href: "/pricing" },
-  { labelKey: "explore" as const, icon: "🎒", href: "/#community" },
-];
-
-export default function Navbar() {
+export default function NavbarComponent() {
  const { t } = useTranslation("common");
  const { t: tNav } = useTranslation("nav");
  const locale = useLocale();
  const pathname = usePathname();
  const router = useRouter();
  const [mobileOpen, setMobileOpen] = useState(false);
+  const [menuOpen, setMenuOpen] = useState(false);
  const [authOpen, setAuthOpen] = useState(false);
  const [userEmail, setUserEmail] = useState<string | null>(null);

+  const navLinks = getNavLinks();
+
  useEffect(() => {
    setUserEmail(getStoredUserEmail());
  }, []);

-  const handleLogout = () => {
+  const handleLogout = useCallback(() => {
    pbLogout();
    setUserEmail(null);
-  };
+  }, []);

-  function isActive(href: string) {
+  const isActive = useCallback((href: string) => {
    if (href.startsWith("/#")) return false;
    if (href === "/") return pathname === "/";
    return pathname.startsWith(href);
-  }
+  }, [pathname]);

  return (
    <nav className="sticky top-0 z-50 bg-white/80 dark:bg-gray-900/80 backdrop-blur-lg border-b border-gray-100 dark:border-gray-800">
@@ -53,24 +46,41 @@ export default function Navbar() {
          </span>
        </Link>

-        <div className="hidden md:flex items-center gap-1 overflow-x-auto max-w-[calc(100vw-280px)] scrollbar-hide">
-          {navLinks.map((link) => (
+        <div className="hidden lg:flex items-center gap-1 overflow-x-auto max-w-[calc(100vw-400px)] scrollbar-hide">
+          <button
+            onClick={() => setMenuOpen(true)}
+            className="flex items-center gap-1.5 px-3 py-2 rounded-full text-sm font-medium text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors border border-gray-200 dark:border-gray-700 whitespace-nowrap"
+          >
+            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+            </svg>
+            <span className="hidden xl:inline">{tNav("menu")}</span>
+          </button>
+          {navLinks.slice(0, 5).map((link) => (
            <Link
              key={link.labelKey}
              href={link.href}
-              className={`flex items-center gap-1.5 px-4 py-2 rounded-full text-sm font-medium transition-colors ${
+              className={`flex items-center gap-1.5 px-3 py-2 rounded-full text-sm font-medium transition-colors whitespace-nowrap ${
                isActive(link.href)
                  ? "text-gray-900 dark:text-gray-100 bg-gray-100 dark:bg-gray-800"
                  : "text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-gray-50 dark:hover:bg-gray-800"
              }`}
            >
              <span>{link.icon}</span>
-              <span>{tNav(link.labelKey)}</span>
+              <span className="hidden 2xl:inline">{tNav(link.labelKey)}</span>
            </Link>
          ))}
        </div>

-        <div className="flex items-center gap-2 sm:gap-3">
+        <div className="flex items-center gap-1 sm:gap-2">
+          <button
+            className="lg:hidden p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800"
+            onClick={() => setMenuOpen(true)}
+          >
+            <svg className="w-5 h-5 text-gray-600 dark:text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+            </svg>
+          </button>
          {userEmail ? (
            <div className="flex items-center gap-2">
              <span className="hidden sm:block max-w-[120px] truncate text-sm text-gray-600 dark:text-gray-400">
@@ -78,7 +88,7 @@ export default function Navbar() {
              </span>
              <button
                onClick={handleLogout}
-                className="rounded-full border border-gray-200 dark:border-gray-700 px-4 py-2 text-sm font-medium text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+                className="rounded-full border border-gray-200 dark:border-gray-700 px-2 sm:px-4 py-2 text-xs sm:text-sm font-medium text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors whitespace-nowrap"
              >
                {t("logout")}
              </button>
@@ -86,7 +96,7 @@ export default function Navbar() {
          ) : (
            <button
              onClick={() => setAuthOpen(true)}
-              className="hidden sm:block text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 px-3 py-2 rounded-full hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+              className="hidden md:block text-xs sm:text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 px-2 sm:px-3 py-2 rounded-full hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors whitespace-nowrap"
            >
              {t("loginRegister")}
            </button>
@@ -94,7 +104,7 @@ export default function Navbar() {
          <button
            type="button"
            onClick={() => router.replace(pathname, { locale: locale === "zh" ? "en" : "zh" })}
-            className="inline-flex shrink-0 items-center justify-center rounded-lg p-2 text-sm font-medium text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+            className="inline-flex shrink-0 items-center justify-center rounded-lg p-2 text-xs sm:text-sm font-medium text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
            aria-label={locale === "zh" ? "Switch to English" : "切换到中文"}
            title={locale === "zh" ? "EN" : "中文"}
          >
@@ -103,7 +113,7 @@ export default function Navbar() {
          <ThemeToggle />
          <Link
            href="/join"
-            className="text-sm bg-[#ff4d4f] text-white px-4 py-2 rounded-full hover:bg-[#ff7a45] transition-colors font-medium"
+            className="text-xs sm:text-sm bg-[#ff4d4f] text-white px-3 sm:px-4 py-2 rounded-full hover:bg-[#ff7a45] transition-colors font-medium whitespace-nowrap"
          >
            {t("explore")}
          </Link>
@@ -172,6 +182,11 @@ export default function Navbar() {
        onClose={() => setAuthOpen(false)}
        onSuccess={(email) => setUserEmail(email)}
      />
+      <SiteMenu
+        isOpen={menuOpen}
+        onClose={() => setMenuOpen(false)}
+        onLoginClick={() => { setMenuOpen(false); setAuthOpen(true); }}
+      />
    </nav>
  );
 }
--- a/app/components/SiteMenu.tsx
+++ b/app/components/SiteMenu.tsx
@@ -0,0 +1,257 @@
+"use client";
+
+import { memo, useState, useEffect, useRef } from "react";
+import { Link, usePathname, useTranslation } from "@/i18n/navigation";
+import { getStoredUserEmail, pbLogout } from "@/app/lib/pocketbase";
+import ThemeToggle from "./ThemeToggle";
+
+interface MenuItem {
+  labelKey: string;
+  href: string;
+  icon: string;
+  new?: boolean;
+  ad?: boolean;
+}
+
+interface MenuSection {
+  titleKey: string;
+  items: MenuItem[];
+}
+
+export default memo(function SiteMenu({
+  isOpen,
+  onClose,
+  onLoginClick,
+}: {
+  isOpen: boolean;
+  onClose: () => void;
+  onLoginClick: () => void;
+}) {
+  const { t } = useTranslation("menu");
+  const pathname = usePathname();
+  const ref = useRef<HTMLDivElement>(null);
+  const [search, setSearch] = useState("");
+  const [userEmail, setUserEmail] = useState<string | null>(null);
+
+  useEffect(() => {
+    setUserEmail(getStoredUserEmail());
+  }, []);
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) onClose();
+    };
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      document.addEventListener("keydown", handleEscape);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, [isOpen, onClose]);
+
+  const sections: MenuSection[] = [
+    {
+      titleKey: "community",
+      items: [
+        { labelKey: "dating", href: "/dating", icon: "❤️" },
+        { labelKey: "chat", href: "/join", icon: "💬" },
+        { labelKey: "hostMeetup", href: "/meetups", icon: "🎤", new: true },
+        { labelKey: "friendFinder", href: "/dating", icon: "💛" },
+        { labelKey: "membersMap", href: "#", icon: "🌐" },
+        { labelKey: "attendMeetup", href: "/meetups", icon: "🍹" },
+      ],
+    },
+    {
+      titleKey: "tools",
+      items: [
+        { labelKey: "explore", href: "/", icon: "📍" },
+        { labelKey: "nextStop", href: "/dashboard", icon: "🗺️" },
+        { labelKey: "climateFinder", href: "/tools", icon: "🌤️" },
+        { labelKey: "fireCalculator", href: "/tools", icon: "🌱" },
+        { labelKey: "aiAssistant", href: "/ai", icon: "🤖", new: true },
+        { labelKey: "yearInReview", href: "/report", icon: "🥂" },
+        { labelKey: "nomadStats", href: "/report", icon: "📊", new: true },
+        { labelKey: "gigBoard", href: "/gigs", icon: "💰" },
+        { labelKey: "costCalculator", href: "/tools", icon: "💱" },
+      ],
+    },
+    {
+      titleKey: "help",
+      items: [
+        { labelKey: "ideasBugs", href: "#", icon: "💡" },
+        { labelKey: "faq", href: "#", icon: "🆘" },
+        { labelKey: "terms", href: "#", icon: "📄" },
+        { labelKey: "changelog", href: "#", icon: "🚀" },
+      ],
+    },
+    {
+      titleKey: "other",
+      items: [
+        { labelKey: "remoteJobs", href: "#", icon: "💼" },
+        { labelKey: "coworking", href: "#", icon: "🏢" },
+      ],
+    },
+  ];
+
+  const profileItems: MenuItem[] = [
+    { labelKey: "yourProfile", href: "/join", icon: "👤" },
+    { labelKey: "settings", href: "/join", icon: "⚙️" },
+    { labelKey: "favorites", href: "/", icon: "❤️" },
+    { labelKey: "pricing", href: "/pricing", icon: "👑" },
+    { labelKey: "nomadInsurance", href: "#", icon: "🛡️", ad: true },
+  ];
+
+  const filteredSections = sections.map((sec) => ({
+    ...sec,
+    items: search
+      ? sec.items.filter((i) =>
+          t(i.labelKey).toLowerCase().includes(search.toLowerCase())
+        )
+      : sec.items,
+  })).filter((sec) => sec.items.length > 0);
+
+  if (!isOpen) return null;
+
+  return (
+    <>
+      <div className="fixed inset-0 z-40 bg-black/20 backdrop-blur-sm md:bg-transparent md:backdrop-blur-none" aria-hidden />
+      <div
+        ref={ref}
+        className="fixed left-4 right-4 top-20 md:left-auto md:right-4 md:top-16 md:w-[480px] z-50 rounded-2xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 shadow-2xl overflow-hidden"
+      >
+        {/* Header */}
+        <div className="p-4 border-b border-gray-100 dark:border-gray-800 space-y-3">
+          <div className="flex items-center gap-2">
+            {userEmail ? (
+              <div className="flex items-center gap-2 flex-1 min-w-0">
+                <div className="w-9 h-9 rounded-full bg-gradient-to-br from-[#ff4d4f] to-orange-500 flex items-center justify-center text-white text-sm font-bold shrink-0">
+                  {userEmail[0].toUpperCase()}
+                </div>
+                <span className="text-sm font-medium text-gray-900 dark:text-gray-100 truncate">
+                  {userEmail}
+                </span>
+              </div>
+            ) : (
+              <button
+                onClick={onLoginClick}
+                className="px-4 py-2 rounded-lg bg-[#ff4d4f] text-white text-sm font-medium hover:bg-[#ff3333] transition-colors"
+              >
+                {t("login")}
+              </button>
+            )}
+            <Link
+              href="/dashboard"
+              onClick={onClose}
+              className="px-4 py-2 rounded-lg bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 text-sm font-medium hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
+            >
+              {t("filters")}
+            </Link>
+            <Link
+              href="/join"
+              onClick={onClose}
+              className="w-9 h-9 rounded-full bg-[#ff4d4f] text-white flex items-center justify-center hover:bg-[#ff3333] transition-colors shrink-0"
+              aria-label={t("add")}
+            >
+              <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+              </svg>
+            </Link>
+          </div>
+          <div className="relative">
+            <svg className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+            </svg>
+            <input
+              type="text"
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              placeholder={t("searchPlaceholder")}
+              className="w-full pl-10 pr-4 py-2.5 rounded-xl border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-400 text-sm focus:outline-none focus:ring-2 focus:ring-[#ff4d4f]/20 focus:border-[#ff4d4f]"
+            />
+          </div>
+        </div>
+
+        {/* Profile + Dark mode */}
+        <div className="px-4 py-3 border-b border-gray-100 dark:border-gray-800 flex flex-wrap items-center gap-2">
+          {profileItems.map((item) => (
+            <Link
+              key={item.labelKey}
+              href={item.href}
+              onClick={onClose}
+              className="flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-gray-100 transition-colors"
+            >
+              <span>{item.icon}</span>
+              <span>{t(item.labelKey)}</span>
+            </Link>
+          ))}
+          <div className="ml-auto flex items-center gap-2">
+            <span className="text-xs text-gray-500 dark:text-gray-400">{t("darkMode")}</span>
+            <ThemeToggle />
+          </div>
+        </div>
+
+        {/* Sections */}
+        <div className="max-h-[60vh] overflow-y-auto p-4">
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
+            {filteredSections.map((section) => (
+              <div key={section.titleKey}>
+                <h3 className="text-xs font-bold uppercase tracking-wider text-gray-400 dark:text-gray-500 mb-3">
+                  {t(section.titleKey)}
+                </h3>
+                <ul className="space-y-1">
+                  {section.items.map((item) => (
+                    <li key={item.labelKey}>
+                      <Link
+                        href={item.href}
+                        onClick={onClose}
+                        className={`flex items-center gap-2 px-3 py-2 rounded-lg text-sm transition-colors ${
+                          item.href !== "#" && (pathname === item.href || (item.href !== "/" && pathname.startsWith(item.href)))
+                            ? "bg-[#ff4d4f]/10 text-[#ff4d4f]"
+                            : "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800"
+                        }`}
+                      >
+                        <span className="w-5 text-center">{item.icon}</span>
+                        <span className="flex-1">{t(item.labelKey)}</span>
+                        {item.new && (
+                          <span className="px-2 py-0.5 rounded-full bg-[#ff4d4f] text-white text-[10px] font-medium">
+                            NEW
+                          </span>
+                        )}
+                        {item.ad && (
+                          <span className="px-2 py-0.5 rounded bg-gray-200 dark:bg-gray-700 text-[10px] text-gray-500">
+                            Ad
+                          </span>
+                        )}
+                      </Link>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Footer */}
+        {userEmail && (
+          <div className="p-4 border-t border-gray-100 dark:border-gray-800">
+            <button
+              onClick={() => {
+                pbLogout();
+                onClose();
+              }}
+              className="flex items-center gap-2 w-full px-3 py-2 rounded-lg text-sm text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors"
+            >
+              <span>🚪</span>
+              <span>{t("logout")}</span>
+            </button>
+          </div>
+        )}
+      </div>
+    </>
+  );
+});
--- a/app/components/ThemeToggle.tsx
+++ b/app/components/ThemeToggle.tsx
@@ -1,19 +1,38 @@
 "use client";

-import { useTheme } from "../context/ThemeContext";
+import { useTheme } from "@/app/context/ThemeContext";
+import { useState, useEffect } from "react";

 export default function ThemeToggle() {
  const { theme, toggleTheme } = useTheme();
+  const isDark = theme === "dark";
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return (
+      <button
+        type="button"
+        className="rounded-lg p-2 text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-100"
+        aria-label="切换主题"
+      >
+        <div className="h-5 w-5" />
+      </button>
+    );
+  }

  return (
    <button
      type="button"
      onClick={toggleTheme}
      className="rounded-lg p-2 text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-100"
-      aria-label={theme === "dark" ? "切换到日间模式" : "切换到夜间模式"}
-      title={theme === "dark" ? "日间模式" : "夜间模式"}
+      aria-label={isDark ? "切换到日间模式" : "切换到夜间模式"}
+      title={isDark ? "日间模式" : "夜间模式"}
    >
-      {theme === "dark" ? (
+      {isDark ? (
        <svg
          className="h-5 w-5"
          fill="none"
--- a/app/context/ThemeContext.tsx
+++ b/app/context/ThemeContext.tsx
@@ -21,14 +21,25 @@ type ThemeContextValue = {

 const ThemeContext = createContext<ThemeContextValue | null>(null);

+function getInitialTheme(): Theme {
+  if (typeof window === "undefined") return "light";
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY) as Theme | null;
+    if (stored === "dark" || stored === "light") return stored;
+    if (window.matchMedia("(prefers-color-scheme: dark)").matches) return "dark";
+  } catch {
+    /* ignore */
+  }
+  return "light";
+}
+
 export function ThemeProvider({ children }: { children: ReactNode }) {
  const [theme, setThemeState] = useState<Theme>("light");
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
+    setThemeState(getInitialTheme());
    setMounted(true);
-    const hasDark = document.documentElement.classList.contains("dark");
-    setThemeState(hasDark ? "dark" : "light");
  }, []);

  useEffect(() => {
@@ -39,7 +50,11 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
    } else {
      root.classList.remove("dark");
    }
-    localStorage.setItem(STORAGE_KEY, theme);
+    try {
+      localStorage.setItem(STORAGE_KEY, theme);
+    } catch {
+      /* ignore */
+    }
  }, [theme, mounted]);

  const setTheme = useCallback((newTheme: Theme) => {
--- a/app/data/cities.ts
+++ b/app/data/cities.ts
@@ -439,3 +439,13 @@ export const allTags = [
  "友好社区",
  "户外运动",
 ];
+
+export const FILTER_OPTIONS = [
+  { value: "score", label: "综合评分" },
+  { value: "cost-asc", label: "费用最低" },
+  { value: "cost-desc", label: "费用最高" },
+  { value: "internet", label: "网速最快" },
+  { value: "safety", label: "最安全" },
+  { value: "nomads", label: "游民最多" },
+  { value: "temperature", label: "最温暖" },
+];
--- a/config/filter.config.ts
+++ b/config/filter.config.ts
@@ -0,0 +1,53 @@
+/**
+ * 筛选栏配置
+ */
+
+export interface FilterOption {
+  value: string;
+  label: string;
+}
+
+export const FILTER_OPTIONS: FilterOption[] = [
+  { value: "all", label: "全部" },
+  { value: "popular", label: "热门" },
+  { value: "cheap", label: "便宜" },
+  { value: "fast-internet", label: "高速网络" },
+  { value: "warm", label: "温暖" },
+  { value: "safe", label: "安全" },
+  { value: "beach", label: "海滨" },
+  { value: "mountain", label: "山城" },
+  { value: "urban", label: "都市" },
+  { value: "food", label: "美食" },
+  { value: "culture", label: "文化" },
+  { value: "tier-1", label: "一线城市" },
+  { value: "new-tier-1", label: "新一线" },
+  { value: "livable", label: "宜居" },
+  { value: "historical", label: "历史名城" },
+  { value: "friendly", label: "友好社区" },
+  { value: "outdoor", label: "户外运动" },
+];
+
+export const FILTER_LABELS = {
+  title: "发现目的地",
+  resultCount: "个城市",
+  sortLabel: "排序:",
+  tags: {
+    全部: "🌍",
+    热门: "🔥",
+    便宜: "💰",
+    高速网络: "📡",
+    温暖: "☀️",
+    安全: "🛡️",
+    海滨: "🏖️",
+    山城: "🏔️",
+    都市: "🌆",
+    美食: "🍜",
+    文化: "🎨",
+    一线城市: "🏙️",
+    新一线: "⭐",
+    宜居: "🏡",
+    历史名城: "🏛️",
+    友好社区: "🤝",
+    户外运动: "🏄",
+  },
+};
--- a/config/footer.config.ts
+++ b/config/footer.config.ts
@@ -0,0 +1,55 @@
+/**
+ * 页脚配置
+ */
+
+export interface FooterLink {
+  href: string;
+  labelKey: string;
+}
+
+export interface FooterSection {
+  titleKey: string;
+  links: FooterLink[];
+}
+
+export const FOOTER_SECTIONS: FooterSection[] = [
+  {
+    titleKey: "about",
+    links: [
+      { href: "/about", labelKey: "aboutUs" },
+      { href: "/blog", labelKey: "blog" },
+      { href: "/careers", labelKey: "careers" },
+      { href: "/press", labelKey: "press" },
+    ],
+  },
+  {
+    titleKey: "support",
+    links: [
+      { href: "/help", labelKey: "helpCenter" },
+      { href: "/safety", labelKey: "safety" },
+      { href: "/guidelines", labelKey: "guidelines" },
+      { href: "/contact", labelKey: "contactUs" },
+    ],
+  },
+  {
+    titleKey: "legal",
+    links: [
+      { href: "/terms", labelKey: "termsOfService" },
+      { href: "/privacy", labelKey: "privacyPolicy" },
+      { href: "/cookies", labelKey: "cookiePolicy" },
+    ],
+  },
+  {
+    titleKey: "social",
+    links: [
+      { href: "https://twitter.com", labelKey: "twitter" },
+      { href: "https://facebook.com", labelKey: "facebook" },
+      { href: "https://instagram.com", labelKey: "instagram" },
+      { href: "https://youtube.com", labelKey: "youtube" },
+    ],
+  },
+];
+
+export function getFooterSections() {
+  return FOOTER_SECTIONS;
+}
--- a/config/home.config.ts
+++ b/config/home.config.ts
@@ -0,0 +1,148 @@
+/**
+ * 首页静态数据配置
+ */
+
+export interface MemberPhoto {
+  name: string;
+  photo: string;
+}
+
+export interface TravelingNow {
+  name: string;
+  photo: string;
+  dest: string;
+}
+
+export interface Meetup {
+  city: string;
+  emoji: string;
+  date: string;
+  count: number;
+}
+
+export interface HotTopic {
+  title: string;
+  views: number;
+}
+
+export interface Route {
+  title: string;
+  cities: string[];
+  emojis: string[];
+  duration: string;
+  cost: string;
+  desc: string;
+  gradient: string;
+}
+
+export interface HomeStats {
+  cities: string;
+  nomads: string;
+  meetups: string;
+  homeMeetups: string;
+  cost: string;
+}
+
+export const MEMBER_PHOTOS: MemberPhoto[] = [
+  { name: "林晓", photo: "https://i.pravatar.cc/150?img=5" },
+  { name: "张浩", photo: "https://i.pravatar.cc/150?img=3" },
+  { name: "陈悦", photo: "https://i.pravatar.cc/150?img=9" },
+  { name: "周杰", photo: "https://i.pravatar.cc/150?img=7" },
+  { name: "吴婷", photo: "https://i.pravatar.cc/150?img=1" },
+  { name: "杨帅", photo: "https://i.pravatar.cc/150?img=12" },
+  { name: "赵琪", photo: "https://i.pravatar.cc/150?img=16" },
+  { name: "黄磊", photo: "https://i.pravatar.cc/150?img=11" },
+  { name: "孙莉", photo: "https://i.pravatar.cc/150?img=20" },
+];
+
+export const TRAVELING_NOW: TravelingNow[] = [
+  { name: "小明", photo: "https://i.pravatar.cc/150?img=52", dest: "大理" },
+  { name: "雨晴", photo: "https://i.pravatar.cc/150?img=44", dest: "成都" },
+  { name: "阿杰", photo: "https://i.pravatar.cc/150?img=53", dest: "深圳" },
+  { name: "小燕", photo: "https://i.pravatar.cc/150?img=47", dest: "杭州" },
+  { name: "大伟", photo: "https://i.pravatar.cc/150?img=55", dest: "厦门" },
+  { name: "佳琪", photo: "https://i.pravatar.cc/150?img=48", dest: "昆明" },
+  { name: "志远", photo: "https://i.pravatar.cc/150?img=57", dest: "丽江" },
+  { name: "心怡", photo: "https://i.pravatar.cc/150?img=49", dest: "三亚" },
+  { name: "凯文", photo: "https://i.pravatar.cc/150?img=59", dest: "上海" },
+  { name: "子豪", photo: "https://i.pravatar.cc/150?img=60", dest: "北京" },
+  { name: "浩然", photo: "https://i.pravatar.cc/150?img=61", dest: "广州" },
+  { name: "雅琪", photo: "https://i.pravatar.cc/150?img=21", dest: "南京" },
+  { name: "天翔", photo: "https://i.pravatar.cc/150?img=67", dest: "长沙" },
+  { name: "美玲", photo: "https://i.pravatar.cc/150?img=23", dest: "苏州" },
+  { name: "俊杰", photo: "https://i.pravatar.cc/150?img=68", dest: "青岛" },
+  { name: "晓华", photo: "https://i.pravatar.cc/150?img=26", dest: "珠海" },
+];
+
+export const MEETUPS: Meetup[] = [
+  { city: "大理", emoji: "🏯", date: "3月9日", count: 12 },
+  { city: "成都", emoji: "🐼", date: "3月12日", count: 8 },
+  { city: "深圳", emoji: "🌃", date: "3月14日", count: 15 },
+  { city: "厦门", emoji: "🌊", date: "3月16日", count: 6 },
+  { city: "杭州", emoji: "⛲", date: "3月20日", count: 23 },
+];
+
+export const HOT_TOPICS: HotTopic[] = [
+  { title: "大理最佳共享办公空间推荐 Top 10", views: 2340 },
+  { title: "2026年数字游民友好城市排名", views: 1890 },
+  { title: "远程工作者的税务规划指南", views: 1560 },
+  { title: "成都 vs 大理：哪个更适合游民？", views: 1230 },
+  { title: "新手游民必备工具与装备清单", views: 980 },
+];
+
+export const ROUTES: Route[] = [
+  {
+    title: "云南慢生活线",
+    cities: ["昆明", "大理", "丽江"],
+    emojis: ["🌸", "🏯", "🏔️"],
+    duration: "3-6个月",
+    cost: "¥3,200/月起",
+    desc: "从春城昆明出发，沿着滇西北一路感受最纯粹的慢生活",
+    gradient: "from-purple-500 to-pink-500",
+  },
+  {
+    title: "科技创业线",
+    cities: ["深圳", "杭州", "上海"],
+    emojis: ["🌃", "⛲", "🏙️"],
+    duration: "2-4个月",
+    cost: "¥7,000/月起",
+    desc: "穿越中国三大科技中心，连接最前沿的创业生态",
+    gradient: "from-blue-500 to-cyan-500",
+  },
+  {
+    title: "美食文化线",
+    cities: ["成都", "重庆", "长沙"],
+    emojis: ["🐼", "🌶️", "🎪"],
+    duration: "2-3个月",
+    cost: "¥4,000/月起",
+    desc: "巴蜀到湘楚，用味蕾丈量中国最火辣的城市",
+    gradient: "from-orange-500 to-red-500",
+  },
+];
+
+export const HOME_STATS: HomeStats = {
+  cities: "18",
+  nomads: "5,000+",
+  meetups: "8+",
+  homeMeetups: "50+",
+  cost: "¥3,000",
+};
+
+export const COMMUNITY_STATS = {
+  onlineMembers: "3,200+",
+  messagesPerMonth: "3,200+",
+};
+
+export const HOME_CONFIG = {
+  memberPhotos: MEMBER_PHOTOS,
+  travelingNow: TRAVELING_NOW,
+  meetups: MEETUPS,
+  hotTopics: HOT_TOPICS,
+  routes: ROUTES,
+  stats: HOME_STATS,
+  communityStats: COMMUNITY_STATS,
+};
+
+export function getHomeConfig() {
+  return HOME_CONFIG;
+}
--- a/config/index.ts
+++ b/config/index.ts
@@ -1,4 +1,8 @@
 export { SITE_CONFIG, getSiteConfig } from "./site.config";
+export { getNavLinks, type NavLink } from "./nav.config";
+export { getHomeConfig, HOME_CONFIG, MEMBER_PHOTOS, TRAVELING_NOW, MEETUPS, HOT_TOPICS, ROUTES, HOME_STATS, COMMUNITY_STATS, type MemberPhoto, type TravelingNow, type Meetup, type HotTopic, type Route, type HomeStats } from "./home.config";
+export { FILTER_OPTIONS, FILTER_LABELS, type FilterOption } from "./filter.config";
+export { FOOTER_SECTIONS, getFooterSections, type FooterLink, type FooterSection } from "./footer.config";
 export {
  getPocketBaseConfig,
  getPaymentConfig,
--- a/config/nav.config.ts
+++ b/config/nav.config.ts
@@ -0,0 +1,25 @@
+/**
+ * 导航链接配置
+ */
+
+export interface NavLink {
+  labelKey: "cities" | "dashboard" | "travel" | "community" | "tools" | "ai" | "gigs" | "pricing" | "explore";
+  icon: string;
+  href: string;
+}
+
+export const NAV_LINKS: NavLink[] = [
+  { labelKey: "cities", icon: "🏙️", href: "/" },
+  { labelKey: "dashboard", icon: "📍", href: "/dashboard" },
+  { labelKey: "travel", icon: "✈️", href: "/meetups" },
+  { labelKey: "community", icon: "💬", href: "/dating" },
+  { labelKey: "tools", icon: "📊", href: "/tools" },
+  { labelKey: "ai", icon: "🤖", href: "/ai" },
+  { labelKey: "gigs", icon: "💰", href: "/gigs" },
+  { labelKey: "pricing", icon: "👑", href: "/pricing" },
+  { labelKey: "explore", icon: "🎒", href: "/#community" },
+];
+
+export function getNavLinks() {
+  return NAV_LINKS;
+}
--- a/messages/en.json
+++ b/messages/en.json
@@ -3,13 +3,52 @@
    "siteName": "Nomad China",
    "tagline": "Nomad OS · Your next stop, data-driven",
    "siteNameShort": "NomadCNA",
+    "currency": "CNY ¥",
    "logout": "Logout",
    "loginRegister": "Login / Sign up",
    "explore": "Explore →",
    "toggleMenu": "Toggle menu"
  },
+  "menu": {
+    "searchPlaceholder": "Search or filter",
+    "filters": "Filters",
+    "add": "Add",
+    "login": "Login",
+    "logout": "Log out",
+    "darkMode": "Dark mode",
+    "yourProfile": "Your profile",
+    "settings": "Settings",
+    "favorites": "Favorites",
+    "nomadInsurance": "Nomad Insurance",
+    "community": "Community",
+    "tools": "Tools",
+    "help": "Help",
+    "other": "Other",
+    "dating": "Smart Match",
+    "chat": "Community Chat",
+    "hostMeetup": "Host Meetup",
+    "friendFinder": "Friend Finder",
+    "membersMap": "Members Map",
+    "attendMeetup": "Attend Meetup",
+    "explore": "Explore Cities",
+    "nextStop": "Next Stop",
+    "climateFinder": "Climate Finder",
+    "fireCalculator": "FIRE Calculator",
+    "aiAssistant": "AI Assistant",
+    "yearInReview": "Year in Review",
+    "nomadStats": "Nomad Stats",
+    "gigBoard": "Gig Board",
+    "costCalculator": "Cost Calculator",
+    "ideasBugs": "Ideas & Bugs",
+    "faq": "FAQ & Help",
+    "terms": "TOS & Privacy",
+    "changelog": "Changelog",
+    "remoteJobs": "Remote Jobs",
+    "coworking": "Coworking"
+  },
  "nav": {
    "cities": "Cities",
+    "menu": "Menu",
    "ai": "AI",
    "travel": "Travel",
    "community": "Community",
@@ -38,11 +77,51 @@
      "cost": "Monthly cost from"
    }
  },
+  "home": {
+    "stats": {
+      "cities": "Cities",
+      "nomads": "Nomads",
+      "meetups": "Meetups/month",
+      "cost": "Monthly cost from"
+    },
+    "joinCommunity": "Join Community",
+    "joinCommunityDesc": "Join digital nomad WeChat community",
+    "membersOnline": "members online",
+    "newMembers": "New Members",
+    "joinedThisMonth": "{count} joined this month",
+    "latestEvents": "Latest Events",
+    "people": "people",
+    "hotRoutes": "Hot Routes",
+    "communityDynamics": "Community",
+    "recentMeetups": "Recent Meetups",
+    "perMonth": "/month",
+    "travelingNow": "Traveling Now",
+    "hotDiscussions": "Hot Discussions",
+    "views": "views",
+    "viewMore": "View more →",
+    "travelInsurance": "Travel Insurance",
+    "travelInsuranceDesc": "Nomad-customized plans",
+    "insuranceCoverage": "Coverage in China + overseas, remote work specific terms, from ¥15/day",
+    "learnMore": "Learn more →",
+    "communityChat": "Community Chat",
+    "messagesThisMonth": "{count} messages this month",
+    "onlineNow": "Online now",
+    "joinChat": "Join chat →",
+    "landingGuide": "Landing Guide",
+    "landingGuideDesc": "Housing · Coworking · Local guides",
+    "cityGuides": "City Guides",
+    "viewGuides": "View guides →",
+    "noMatch": "No matching cities found",
+    "showAll": "Show all cities"
+  },
  "footer": {
    "community": "Community",
    "tools": "Tools",
    "resources": "Resources",
    "about": "About",
+    "support": "Support",
+    "legal": "Legal",
+    "social": "Social",
    "links": {
      "ai": "AI Assistant",
      "join": "Join Community",
@@ -65,7 +144,21 @@
      "recruit": "Careers",
      "terms": "Terms",
      "privacy": "Privacy",
-      "contact": "Contact"
+      "contact": "Contact",
+      "blog": "Blog",
+      "careers": "Careers",
+      "press": "Press",
+      "helpCenter": "Help Center",
+      "safety": "Safety",
+      "guidelines": "Guidelines",
+      "contactUs": "Contact Us",
+      "termsOfService": "Terms of Service",
+      "privacyPolicy": "Privacy Policy",
+      "cookiePolicy": "Cookie Policy",
+      "twitter": "Twitter",
+      "facebook": "Facebook",
+      "instagram": "Instagram",
+      "youtube": "YouTube"
    },
    "copyright": "© 2024-2026 Nomad China. All rights reserved."
  },
@@ -208,7 +301,12 @@
    "estimate": "Estimate tax",
    "visaExpiry": "Visa expiry",
    "daysLeft": "days left",
-    "expired": "Expired"
+    "expired": "Expired",
+    "fireCalculator": "FIRE Calculator",
+    "fireDesc": "Input savings, monthly spend, expected return to estimate FI years",
+    "climateFinder": "Climate Finder",
+    "climateDesc": "Filter cities by temp, humidity, rainy season",
+    "comingSoon": "Coming soon"
  },
  "match": {
    "title": "Smart Match",
--- a/messages/zh.json
+++ b/messages/zh.json
@@ -3,13 +3,52 @@
    "siteName": "游牧中国",
    "tagline": "Nomad OS · 你的下一站，由数据决定",
    "siteNameShort": "游牧中国",
+    "currency": "CNY ¥",
    "logout": "退出",
    "loginRegister": "登录 / 注册",
    "explore": "开始探索 →",
    "toggleMenu": "切换菜单"
  },
+  "menu": {
+    "searchPlaceholder": "搜索或筛选",
+    "filters": "筛选",
+    "add": "添加",
+    "login": "登录",
+    "logout": "退出登录",
+    "darkMode": "夜间模式",
+    "yourProfile": "个人资料",
+    "settings": "设置",
+    "favorites": "收藏",
+    "nomadInsurance": "游民保险",
+    "community": "社区",
+    "tools": "工具",
+    "help": "帮助",
+    "other": "其他",
+    "dating": "智能匹配",
+    "chat": "社群聊天",
+    "hostMeetup": "发起聚会",
+    "friendFinder": "找伙伴",
+    "membersMap": "成员地图",
+    "attendMeetup": "参加聚会",
+    "explore": "探索城市",
+    "nextStop": "下一站",
+    "climateFinder": "气候查询",
+    "fireCalculator": "FIRE 计算器",
+    "aiAssistant": "AI 助理",
+    "yearInReview": "年度回顾",
+    "nomadStats": "游民统计",
+    "gigBoard": "赏金墙",
+    "costCalculator": "成本计算",
+    "ideasBugs": "建议与反馈",
+    "faq": "常见问题",
+    "terms": "条款与隐私",
+    "changelog": "更新日志",
+    "remoteJobs": "远程工作",
+    "coworking": "共享办公"
+  },
  "nav": {
    "cities": "城市",
+    "menu": "功能菜单",
    "ai": "AI",
    "travel": "旅行",
    "community": "社区",
@@ -38,11 +77,51 @@
      "cost": "起/月生活费"
    }
  },
+  "home": {
+    "stats": {
+      "cities": "个城市",
+      "nomads": "位游民",
+      "meetups": "场聚会/月",
+      "cost": "起/月生活费"
+    },
+    "joinCommunity": "加入社群",
+    "joinCommunityDesc": "加入数字游民微信社群",
+    "membersOnline": "在线成员",
+    "newMembers": "新成员",
+    "joinedThisMonth": "本月 {count} 人加入",
+    "latestEvents": "最新活动",
+    "people": "人",
+    "hotRoutes": "热门路线",
+    "communityDynamics": "社区动态",
+    "recentMeetups": "近期聚会",
+    "perMonth": "场/月",
+    "travelingNow": "正在旅行",
+    "hotDiscussions": "热门讨论",
+    "views": "次浏览",
+    "viewMore": "查看更多 →",
+    "travelInsurance": "旅行保险",
+    "travelInsuranceDesc": "数字游民定制方案",
+    "insuranceCoverage": "覆盖全国 + 境外，远程工作专属条款，¥15/天起",
+    "learnMore": "了解更多 →",
+    "communityChat": "社区聊天",
+    "messagesThisMonth": "本月 {count} 条消息",
+    "onlineNow": "在线中",
+    "joinChat": "加入聊天 →",
+    "landingGuide": "落地指南",
+    "landingGuideDesc": "租房 · 共享办公 · 本地攻略",
+    "cityGuides": "城市攻略",
+    "viewGuides": "查看攻略 →",
+    "noMatch": "没有找到匹配的城市",
+    "showAll": "显示全部城市"
+  },
  "footer": {
    "community": "社区",
    "tools": "工具",
    "resources": "资源",
    "about": "关于",
+    "support": "支持",
+    "legal": "法律",
+    "social": "社交",
    "links": {
      "ai": "AI 助理",
      "join": "加入社群",
@@ -65,7 +144,21 @@
      "recruit": "招聘",
      "terms": "使用条款",
      "privacy": "隐私政策",
-      "contact": "联系我们"
+      "contact": "联系我们",
+      "blog": "博客",
+      "careers": "加入我们",
+      "press": "媒体报道",
+      "helpCenter": "帮助中心",
+      "safety": "安全指南",
+      "guidelines": "社区准则",
+      "contactUs": "联系我们",
+      "termsOfService": "服务条款",
+      "privacyPolicy": "隐私政策",
+      "cookiePolicy": "Cookie政策",
+      "twitter": "Twitter",
+      "facebook": "Facebook",
+      "instagram": "Instagram",
+      "youtube": "YouTube"
    },
    "copyright": "© 2024-2026 游牧中国 NomadCNA. All rights reserved."
  },
@@ -208,7 +301,12 @@
    "estimate": "估算税负",
    "visaExpiry": "签证到期",
    "daysLeft": "天剩余",
-    "expired": "已过期"
+    "expired": "已过期",
+    "fireCalculator": "FIRE 计算器",
+    "fireDesc": "输入储蓄、月支出、预期回报率，估算财务自由年限",
+    "climateFinder": "气候查询",
+    "climateDesc": "按温度、湿度、雨季筛选城市气候",
+    "comingSoon": "即将上线"
  },
  "match": {
    "title": "智能匹配",