139 lines
5.2 KiB
TypeScript
139 lines
5.2 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>
|
||
|
||
<div className="relative mt-16">
|
||
{/* Desktop: vertical timeline line */}
|
||
<div className="absolute top-0 bottom-0 left-[27px] hidden w-0.5 bg-gradient-to-b from-sky-200 via-amber-200 to-rose-200 lg:left-1/2 lg:block lg:-translate-x-px" />
|
||
|
||
<div className="space-y-6 lg:space-y-8">
|
||
{days.map((d, i) => (
|
||
<div
|
||
key={d.day}
|
||
className={`relative lg:flex lg:items-center lg:gap-8 ${
|
||
i % 2 === 0 ? "lg:flex-row" : "lg:flex-row-reverse"
|
||
}`}
|
||
>
|
||
{/* Timeline dot (desktop) */}
|
||
<div className="absolute left-1/2 top-8 z-10 hidden h-4 w-4 -translate-x-1/2 rounded-full border-4 border-white shadow-sm lg:block"
|
||
style={{ background: `var(--tw-shadow-color, #0ea5e9)` }}
|
||
>
|
||
<div className={`h-full w-full rounded-full ${d.color}`} />
|
||
</div>
|
||
<div className="hidden lg:block lg:w-1/2" />
|
||
|
||
<div className="card-hover w-full rounded-2xl border border-slate-100 bg-white p-6 shadow-sm lg:w-1/2">
|
||
<div className="flex items-start gap-4">
|
||
<div
|
||
className={`flex h-12 w-12 shrink-0 items-center justify-center rounded-xl text-white text-sm font-bold ${d.color}`}
|
||
>
|
||
DAY {d.day}
|
||
</div>
|
||
<div className="min-w-0 flex-1">
|
||
<div className="mb-1 flex items-center gap-2">
|
||
<span className="text-xl">{d.icon}</span>
|
||
<h3 className="text-lg font-bold text-slate-900">
|
||
{d.title}
|
||
</h3>
|
||
</div>
|
||
<p className="text-sm leading-relaxed text-slate-600">
|
||
{d.desc}
|
||
</p>
|
||
<a
|
||
href={`/day/${d.day}`}
|
||
className="mt-3 inline-block text-sm font-medium text-sky-600 transition-colors hover:text-sky-700"
|
||
>
|
||
查看详情 →
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</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>
|
||
);
|
||
}
|