93 lines
4.0 KiB
TypeScript
93 lines
4.0 KiB
TypeScript
const stats = [
|
||
{ value: "200+", label: "精选资源" },
|
||
{ value: "7 天", label: "入门路径" },
|
||
{ value: "50+", label: "远程工具" },
|
||
{ value: "30+", label: "目的地" },
|
||
{ value: "100%", label: "免费开源" },
|
||
];
|
||
|
||
export default function Hero() {
|
||
return (
|
||
<section className="relative overflow-hidden pt-24 pb-16 sm:pt-32 sm:pb-20">
|
||
<div className="pointer-events-none absolute inset-0 bg-gradient-to-b from-sky-50/80 via-white to-white" />
|
||
<div className="pointer-events-none absolute top-0 left-1/2 h-[600px] w-[800px] -translate-x-1/2 rounded-full bg-gradient-to-br from-sky-100/60 via-cyan-50/40 to-amber-50/30 blur-3xl" />
|
||
|
||
<div className="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||
<div className="text-center">
|
||
<div className="mb-6 inline-flex items-center gap-2 rounded-full border border-sky-200 bg-sky-50 px-4 py-1.5 text-sm font-medium text-sky-700">
|
||
<span>🎒</span>
|
||
<span>开源免费 · 收录 200+ 篇实用资源</span>
|
||
</div>
|
||
|
||
<h1 className="mx-auto max-w-4xl text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-7xl">
|
||
<span className="gradient-text">数字游民</span>
|
||
<br className="sm:hidden" />
|
||
生活指南
|
||
</h1>
|
||
|
||
<p className="mx-auto mt-6 max-w-2xl text-lg leading-relaxed text-slate-600 sm:text-xl">
|
||
从零开始，7天开启你的数字游民生活
|
||
<br className="hidden sm:block" />
|
||
<span className="text-slate-400 sm:text-slate-600">
|
||
The open-source guide to becoming a digital nomad
|
||
</span>
|
||
</p>
|
||
|
||
<div className="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row sm:gap-4">
|
||
<a
|
||
href="#roadmap"
|
||
className="inline-flex w-full items-center justify-center gap-2 rounded-full bg-sky-500 px-8 py-3.5 text-base font-semibold text-white shadow-lg shadow-sky-500/25 transition-all hover:bg-sky-600 hover:shadow-xl hover:shadow-sky-500/30 sm:w-auto"
|
||
>
|
||
🚀 开始学习
|
||
<span>→</span>
|
||
</a>
|
||
<a
|
||
href="#resources"
|
||
className="inline-flex w-full items-center justify-center gap-2 rounded-full border border-slate-200 bg-white px-8 py-3.5 text-base font-semibold text-slate-700 shadow-sm transition-all hover:border-slate-300 hover:bg-slate-50 sm:w-auto"
|
||
>
|
||
📚 浏览资源
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Stats marquee */}
|
||
<div className="marquee-container mt-16 overflow-hidden">
|
||
<div className="flex animate-scroll w-max gap-6">
|
||
{[...stats, ...stats].map((s, i) => (
|
||
<div
|
||
key={i}
|
||
className="flex shrink-0 items-center gap-3 rounded-2xl border border-slate-100 bg-white/80 px-6 py-4 shadow-sm backdrop-blur-sm"
|
||
>
|
||
<span className="text-2xl font-bold text-sky-600 sm:text-3xl">
|
||
{s.value}
|
||
</span>
|
||
<span className="text-sm font-medium text-slate-500">
|
||
{s.label}
|
||
</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="marquee-container mt-4 overflow-hidden">
|
||
<div className="flex animate-scroll-reverse w-max gap-6">
|
||
{[...stats, ...stats].map((s, i) => (
|
||
<div
|
||
key={i}
|
||
className="flex shrink-0 items-center gap-3 rounded-2xl border border-slate-100 bg-white/80 px-6 py-4 shadow-sm backdrop-blur-sm"
|
||
>
|
||
<span className="text-2xl font-bold text-amber-500 sm:text-3xl">
|
||
{s.value}
|
||
</span>
|
||
<span className="text-sm font-medium text-slate-500">
|
||
{s.label}
|
||
</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|