165 lines
6.1 KiB
TypeScript
165 lines
6.1 KiB
TypeScript
const links = [
|
||
{
|
||
icon: "📖",
|
||
title: "入门指南",
|
||
desc: "完整的数字游民入门教程",
|
||
label: "开始学习 ↗",
|
||
},
|
||
{
|
||
icon: "💬",
|
||
title: "Discord 社区",
|
||
desc: "与全球数字游民实时交流",
|
||
label: "加入社区 ↗",
|
||
},
|
||
{
|
||
icon: "🛒",
|
||
title: "工具集市",
|
||
desc: "发现、评测和分享远程工具",
|
||
label: "浏览工具 ↗",
|
||
},
|
||
{
|
||
icon: "📦",
|
||
title: "GitHub",
|
||
desc: "开源项目，欢迎 Star 和 PR",
|
||
label: "访问仓库 ↗",
|
||
},
|
||
{
|
||
icon: "📝",
|
||
title: "飞书知识库",
|
||
desc: "7天入门指南 · 中文图文教程",
|
||
label: "查看文档 ↗",
|
||
},
|
||
{
|
||
icon: "🗺️",
|
||
title: "目的地数据库",
|
||
desc: "全球数字游民城市信息",
|
||
label: "探索城市 ↗",
|
||
},
|
||
];
|
||
|
||
export default function Community() {
|
||
return (
|
||
<section id="community" className="py-20 sm:py-28">
|
||
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||
{/* Community cards */}
|
||
<div className="mb-20 grid gap-6 md:grid-cols-2">
|
||
<a
|
||
href="/join"
|
||
className="block rounded-2xl border border-sky-200 bg-gradient-to-br from-sky-50 to-cyan-50 p-8 transition-all hover:shadow-lg"
|
||
>
|
||
<div className="mb-2 text-sm font-semibold text-sky-600">
|
||
👥 数字游民社区
|
||
</div>
|
||
<h3 className="mb-3 text-xl font-bold text-slate-900">
|
||
加入全球华人数字游民网络
|
||
</h3>
|
||
<p className="mb-6 text-sm leading-relaxed text-slate-600">
|
||
填写申请表加入社区
|
||
<br />
|
||
1000+ 数字游民 · 每周线上分享 · 城市攻略
|
||
</p>
|
||
<div className="flex items-center justify-center rounded-xl bg-white/80 p-6 shadow-sm backdrop-blur-sm">
|
||
<div className="flex items-center gap-4">
|
||
<div className="flex h-14 w-14 items-center justify-center rounded-full bg-sky-100 text-3xl">
|
||
📝
|
||
</div>
|
||
<div className="text-left">
|
||
<div className="font-bold text-slate-800">
|
||
立即申请加入 →
|
||
</div>
|
||
<div className="mt-1 text-xs text-slate-400">
|
||
填写简单表单，审核通过即可入群
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
|
||
<a
|
||
href="/course"
|
||
className="block rounded-2xl border border-amber-200 bg-gradient-to-br from-amber-50 to-orange-50 p-8 transition-all hover:shadow-lg"
|
||
>
|
||
<div className="mb-2 text-sm font-semibold text-amber-600">
|
||
🎬 数字游民实战课
|
||
</div>
|
||
<h3 className="mb-3 text-xl font-bold text-slate-900">
|
||
打造 7×24 小时自动化收入系统
|
||
</h3>
|
||
<div className="mb-4 flex flex-wrap gap-3">
|
||
<span className="rounded-full bg-white/80 px-3 py-1 text-xs font-medium text-slate-600">
|
||
🔥 实战训练营
|
||
</span>
|
||
<span className="rounded-full bg-white/80 px-3 py-1 text-xs font-medium text-slate-600">
|
||
📹 视频教程
|
||
</span>
|
||
<span className="rounded-full bg-white/80 px-3 py-1 text-xs font-medium text-slate-600">
|
||
¥199
|
||
</span>
|
||
</div>
|
||
<p className="mb-6 text-sm leading-relaxed text-slate-600">
|
||
7 天打造你的远程工作体系 · 从入门到精通
|
||
</p>
|
||
<div className="flex items-center justify-center rounded-xl bg-white/80 p-6 shadow-sm backdrop-blur-sm">
|
||
<div className="text-center">
|
||
<div className="text-5xl">🎓</div>
|
||
<div className="mt-3 text-sm font-medium text-slate-600">
|
||
点击查看课程详情 →
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
|
||
{/* Open source contribution */}
|
||
<div className="text-center">
|
||
<div className="mb-2 text-sm font-semibold text-slate-400">
|
||
🤝 开源共建
|
||
</div>
|
||
<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 />
|
||
欢迎补充资源、改进内容、分享经验。
|
||
</p>
|
||
</div>
|
||
|
||
<div className="mt-12 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||
{links.map((l) => (
|
||
<div
|
||
key={l.title}
|
||
className="card-hover flex items-start gap-4 rounded-xl border border-slate-100 bg-white p-5 shadow-sm"
|
||
>
|
||
<span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-slate-50 text-xl">
|
||
{l.icon}
|
||
</span>
|
||
<div>
|
||
<h4 className="font-bold text-slate-900">{l.title}</h4>
|
||
<p className="mt-1 text-sm text-slate-500">{l.desc}</p>
|
||
<span className="mt-2 inline-block text-sm font-medium text-sky-600">
|
||
{l.label}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
<div className="mt-12 text-center">
|
||
<div className="mb-4 text-lg font-bold text-slate-900">
|
||
🌟 一起让数字游民指南变得更好
|
||
</div>
|
||
<p className="mb-6 text-slate-600">
|
||
发现了好资源？写了旅居心得？有工具推荐？
|
||
<br />
|
||
提一个 PR，你的贡献将帮助更多人。
|
||
</p>
|
||
<button className="inline-flex items-center gap-2 rounded-full bg-slate-900 px-8 py-3 font-semibold text-white transition-colors hover:bg-slate-800">
|
||
⭐ Star & Fork on GitHub
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|