61 lines
2.3 KiB
TypeScript
61 lines
2.3 KiB
TypeScript
const features = [
|
||
{
|
||
icon: "🌏",
|
||
title: "地点自由",
|
||
desc: "在世界任何角落工作——咖啡馆、海滩、共享空间，你的办公室就是整个地球。告别固定工位，拥抱无限可能。",
|
||
},
|
||
{
|
||
icon: "⚡",
|
||
title: "技能变现",
|
||
desc: "编程、设计、写作、营销、咨询……用你的专业技能换取全球收入，构建多元化的收入体系。",
|
||
},
|
||
{
|
||
icon: "🔄",
|
||
title: "工作生活平衡",
|
||
desc: "自主安排时间，工作与旅行完美融合。按照自己的节奏生活，找到真正属于你的生活方式。",
|
||
},
|
||
];
|
||
|
||
export default function Features() {
|
||
return (
|
||
<section id="features" className="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">
|
||
什么是<span className="gradient-text">数字游民</span>？
|
||
</h2>
|
||
<p className="mx-auto mt-4 max-w-2xl text-lg text-slate-600">
|
||
数字游民是一种利用互联网技术远程工作、不受地理位置限制的生活方式。
|
||
<br className="hidden sm:block" />
|
||
它让你在探索世界的同时，持续创造价值。
|
||
</p>
|
||
</div>
|
||
|
||
<div className="mt-16 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
||
{features.map((f) => (
|
||
<div
|
||
key={f.title}
|
||
className="card-hover rounded-2xl border border-slate-100 bg-white p-8 shadow-sm"
|
||
>
|
||
<div className="mb-4 flex h-14 w-14 items-center justify-center rounded-2xl bg-sky-50 text-3xl">
|
||
{f.icon}
|
||
</div>
|
||
<h3 className="mb-3 text-xl font-bold text-slate-900">
|
||
{f.title}
|
||
</h3>
|
||
<p className="leading-relaxed text-slate-600">{f.desc}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
<div className="mt-12 text-center">
|
||
<div className="inline-flex items-center gap-2 rounded-full border border-amber-200 bg-amber-50 px-5 py-2 text-sm font-medium text-amber-700">
|
||
<span>🔥</span>
|
||
全球已有超过 <span className="font-bold">3500 万</span> 数字游民
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|