117 lines
4.1 KiB
TypeScript
117 lines
4.1 KiB
TypeScript
const days = [
|
||
{
|
||
day: 1,
|
||
icon: "👋",
|
||
title: "认识数字游民",
|
||
desc: "了解数字游民的真正含义，评估这种生活方式是否适合你，破除常见误解。",
|
||
color: "bg-sky-500",
|
||
},
|
||
{
|
||
day: 2,
|
||
icon: "💡",
|
||
title: "发现远程技能",
|
||
desc: "掌握最受欢迎的远程工作技能，从编程、设计到内容创作，找到你的方向。",
|
||
color: "bg-cyan-500",
|
||
},
|
||
{
|
||
day: 3,
|
||
icon: "💰",
|
||
title: "构建收入体系",
|
||
desc: "自由职业、远程全职、被动收入、在线课程，构建可持续的多元收入来源。",
|
||
color: "bg-teal-500",
|
||
},
|
||
{
|
||
day: 4,
|
||
icon: "🛠️",
|
||
title: "工具武装",
|
||
desc: "生产力工具、通讯协作、项目管理、云服务，打造你的移动办公装备库。",
|
||
color: "bg-emerald-500",
|
||
},
|
||
{
|
||
day: 5,
|
||
icon: "📋",
|
||
title: "签证与法律",
|
||
desc: "数字游民签证政策、税务规划、海外保险、银行账户，搞定法律合规问题。",
|
||
color: "bg-amber-500",
|
||
},
|
||
{
|
||
day: 6,
|
||
icon: "🗺️",
|
||
title: "目的地指南",
|
||
desc: "热门数字游民城市推荐，生活成本对比、网速测评、社区活跃度一目了然。",
|
||
color: "bg-orange-500",
|
||
},
|
||
{
|
||
day: 7,
|
||
icon: "🚀",
|
||
title: "启程出发",
|
||
desc: "打包清单、过渡计划、第一站选择建议，从规划到行动的最后一步。",
|
||
color: "bg-rose-500",
|
||
},
|
||
];
|
||
|
||
export default function Roadmap() {
|
||
return (
|
||
<section id="roadmap" className="bg-slate-50 py-20 sm:py-28">
|
||
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||
<div className="text-center">
|
||
<h2 className="text-3xl font-bold tracking-tight sm:text-4xl">
|
||
7天<span className="gradient-text">学习路径</span>
|
||
</h2>
|
||
<p className="mx-auto mt-4 max-w-2xl text-lg text-slate-600">
|
||
从入门到出发，每天一个主题，循序渐进开启你的数字游民之旅。
|
||
</p>
|
||
</div>
|
||
|
||
{/* 参考 openclaw101.dev：卡片网格，非时间轴 */}
|
||
<div className="mt-14 grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
||
{days.map((d) => (
|
||
<a
|
||
key={d.day}
|
||
href={`/day/${d.day}`}
|
||
className="card-hover group flex flex-col rounded-2xl border border-slate-100 bg-white p-5 shadow-sm transition-all hover:border-sky-200 hover:shadow-md"
|
||
>
|
||
<div className="flex items-center gap-3">
|
||
<div
|
||
className={`flex h-10 w-10 shrink-0 items-center justify-center rounded-lg text-xs font-bold text-white ${d.color}`}
|
||
>
|
||
DAY {d.day}
|
||
</div>
|
||
<span className="text-xl">{d.icon}</span>
|
||
<h3 className="text-base font-bold text-slate-900 group-hover:text-sky-600">
|
||
{d.title}
|
||
</h3>
|
||
</div>
|
||
<p className="mt-3 flex-1 text-sm leading-relaxed text-slate-600">
|
||
{d.desc}
|
||
</p>
|
||
<span className="mt-3 inline-flex items-center text-sm font-medium text-sky-600">
|
||
查看详情 →
|
||
</span>
|
||
</a>
|
||
))}
|
||
</div>
|
||
|
||
{/* Training camp CTA */}
|
||
<div className="mt-16 overflow-hidden rounded-2xl border border-amber-200 bg-gradient-to-r from-amber-50 to-orange-50 p-8 text-center sm:p-10">
|
||
<div className="mb-2 text-sm font-semibold text-amber-600">
|
||
🎓 实战训练营
|
||
</div>
|
||
<h3 className="text-2xl font-bold text-slate-900">
|
||
数字游民实战课
|
||
</h3>
|
||
<p className="mx-auto mt-3 max-w-xl text-slate-600">
|
||
21节视频课程，手把手带你从零规划专属数字游民路线，打通远程工作全流程
|
||
</p>
|
||
<a
|
||
href="/course"
|
||
className="mt-6 inline-flex items-center gap-2 rounded-full bg-amber-500 px-8 py-3 font-semibold text-white transition-colors hover:bg-amber-600"
|
||
>
|
||
了解详情 →
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|