diff --git a/frontend/src/components/NomadTips.tsx b/frontend/src/components/NomadTips.tsx
new file mode 100644
index 0000000..1579cf2
--- /dev/null
+++ b/frontend/src/components/NomadTips.tsx
@@ -0,0 +1,48 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+const TIPS = [
+ { emoji: "📶", text: "入住前用 Speedtest 测网速，低于 20Mbps 慎重签约" },
+ { emoji: "💳", text: "准备一张无外汇手续费的信用卡，省下不少换汇成本" },
+ { emoji: "🏥", text: "出发前购买 SafetyWing 等国际医疗保险，月费约 $40+" },
+ { emoji: "🕐", text: "选时区重叠 ≥4 小时的城市，远程协作更轻松" },
+ { emoji: "🛂", text: "护照有效期建议预留 6 个月以上，避免登机被拒" },
+ { emoji: "☕", text: "先订 1 周 Airbnb 探路，再决定长期租房" },
+];
+
+export default function NomadTips() {
+ const [idx, setIdx] = useState(0);
+ const [visible, setVisible] = useState(false);
+
+ useEffect(() => {
+ const show = setTimeout(() => setVisible(true), 8000);
+ return () => clearTimeout(show);
+ }, []);
+
+ useEffect(() => {
+ if (!visible) return;
+ const t = setInterval(() => setIdx((i) => (i + 1) % TIPS.length), 6000);
+ return () => clearInterval(t);
+ }, [visible]);
+
+ if (!visible) return null;
+
+ const tip = TIPS[idx];
+
+ return (
+
+
+
{tip.emoji}
+
+
+ {TIPS.map((_, i) => (
+
+ ))}
+
+
+ );
+}
diff --git a/frontend/src/components/PackingChecklist.tsx b/frontend/src/components/PackingChecklist.tsx
new file mode 100644
index 0000000..4c2c82e
--- /dev/null
+++ b/frontend/src/components/PackingChecklist.tsx
@@ -0,0 +1,125 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+
+interface PackItem {
+ id: string;
+ emoji: string;
+ label: string;
+ category: string;
+}
+
+const ITEMS: PackItem[] = [
+ { id: "laptop", emoji: "💻", label: "笔记本电脑 + 充电器", category: "tech" },
+ { id: "adapter", emoji: "🔌", label: "全球旅行转接插头", category: "tech" },
+ { id: "headset", emoji: "🎧", label: "降噪耳机", category: "tech" },
+ { id: "powerbank", emoji: "🔋", label: "移动电源", category: "tech" },
+ { id: "sim", emoji: "📱", label: "eSIM / 本地 SIM 卡", category: "tech" },
+ { id: "vpn", emoji: "🔐", label: "VPN 订阅已开通", category: "tech" },
+ { id: "passport", emoji: "🛂", label: "护照（有效期 > 6 个月）", category: "docs" },
+ { id: "visa", emoji: "📋", label: "签证 / 电子签确认", category: "docs" },
+ { id: "insurance", emoji: "🏥", label: "国际旅行保险", category: "docs" },
+ { id: "cards", emoji: "💳", label: "银行卡 + 备用卡", category: "docs" },
+ { id: "vaccine", emoji: "💉", label: "疫苗证明（如需要）", category: "docs" },
+ { id: "clothes", emoji: "👕", label: "轻便衣物 7 天量", category: "daily" },
+ { id: "shoes", emoji: "👟", label: "舒适步行鞋", category: "daily" },
+ { id: "medicine", emoji: "💊", label: "常用药品", category: "daily" },
+ { id: "toiletry", emoji: "🧴", label: "洗漱用品（旅行装）", category: "daily" },
+ { id: "umbrella", emoji: "☂️", label: "折叠伞 / 防晒", category: "daily" },
+];
+
+const CATEGORIES = [
+ { key: "all", label: "📦 全部" },
+ { key: "tech", label: "💻 数码" },
+ { key: "docs", label: "📄 证件" },
+ { key: "daily", label: "🧳 日常" },
+];
+
+const STORAGE_KEY = "nomadflow-packing";
+
+export default function PackingChecklist() {
+ const [checked, setChecked] = useState
>({});
+ const [filter, setFilter] = useState("all");
+ const [ready, setReady] = useState(false);
+
+ useEffect(() => {
+ try {
+ const saved = localStorage.getItem(STORAGE_KEY);
+ if (saved) setChecked(JSON.parse(saved));
+ } catch { /* ignore */ }
+ setReady(true);
+ }, []);
+
+ useEffect(() => {
+ if (!ready) return;
+ localStorage.setItem(STORAGE_KEY, JSON.stringify(checked));
+ }, [checked, ready]);
+
+ const filtered = useMemo(
+ () => (filter === "all" ? ITEMS : ITEMS.filter((i) => i.category === filter)),
+ [filter]
+ );
+
+ const done = Object.values(checked).filter(Boolean).length;
+ const total = ITEMS.length;
+ const pct = Math.round((done / total) * 100);
+
+ const toggle = (id: string) => setChecked((prev) => ({ ...prev, [id]: !prev[id] }));
+ const reset = () => setChecked({});
+ const checkAll = () => {
+ const all: Record = {};
+ ITEMS.forEach((i) => { all[i.id] = true; });
+ setChecked(all);
+ };
+
+ return (
+
+
+
+
🧳 PACKING
+
数字游民行李清单
+
出发前逐项勾选，确保远程工作与旅居无忧
+
+
+
+
+
+ 完成度
+ {pct}%
+ {done}/{total}
+
+
+ {pct === 100 &&
🎉 全部就绪，可以出发了！
}
+
+
+
+ {CATEGORIES.map((c) => (
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
🌤️ SEASON
+
最佳旅居月份
+
避开雨季与旺季，选对时间开启旅居生活
+
+
+
+
+ {destinations.map((d) => (
+
+ ))}
+
+
+
+
+
{dest?.emoji} {dest?.name}
+
最佳月份：{bestMonths.join(" · ") || "全年适宜"}
+
+
查看详情 →
+
+
+
+ {MONTHS.map((m, i) => {
+ const level = scores[i] ?? 1;
+ const info = LEVEL[level];
+ const isNow = i === nowMonth;
+ return (
+
+ {info.emoji}
+ {m}
+ {info.label}
+ {isNow && 本月}
+
+ );
+ })}
+
+
+
+ {LEVEL.map((l) => (
+
+ {l.emoji} {l.label}
+
+ ))}
+
+
+
+
+ {open && (
+ <>
+
setOpen(false)} />
+
+
+
+
+
+
+ )}
+
+ );
+}
diff --git a/frontend/src/components/VisaSection.tsx b/frontend/src/components/VisaSection.tsx
index e1db6ec..23a8e73 100644
--- a/frontend/src/components/VisaSection.tsx
+++ b/frontend/src/components/VisaSection.tsx
@@ -2,6 +2,7 @@
import { useMemo, useState } from "react";
import type { Visa } from "@/lib/types";
+import VisaWizard from "./VisaWizard";
const FILTERS = [
{ key: "all", label: "🌏 全部" },
@@ -75,6 +76,7 @@ export default function VisaSection({ visas }: { visas: Visa[] }) {
{filtered.length === 0 && (
暂无匹配的签证类型，试试其他筛选条件
)}
+
+
+
🧙 VISA WIZARD
+
签证智能匹配
+
回答 3 个问题，找到最适合你的远程工作签证
+
+
+ {!showResults ? (
+
+
+ {["月收入", "停留时长", "目的地"].map((label, i) => (
+
+ {i < step ? "✓" : i + 1}
+ {label}
+
+ ))}
+
+
+ {step === 0 && (
+
+ {INCOME_OPTIONS.map((o) => (
+
+ ))}
+
+ )}
+
+ {step === 1 && (
+
+ {DURATION_OPTIONS.map((o) => (
+
+ ))}
+
+ )}
+
+ {step === 2 && (
+
+ {REGION_OPTIONS.map((o) => (
+
+ ))}
+
+ )}
+
+
+ {step > 0 && }
+ {step < 2 ? (
+
+ ) : (
+
+ )}
+
+
+ ) : (
+
+ {results.length === 0 ? (
+
暂无完全匹配的签证，建议咨询专业移民顾问或放宽条件重试
+ ) : (
+
+ {results.map(({ visa, score }, i) => (
+
+ {i === 0 &&
🏆 最佳匹配}
+
+
{visa.flag}
+
+
{visa.name}
+ {score}% 匹配
+
+
+
+ - 💰 {visa.income_req}
+ - 📅 {visa.duration}
+ - ⏱️ {visa.approval_time}
+
+
+ ))}
+
+ )}
+
+
+ )}
+