88 lines
2.7 KiB
TypeScript
88 lines
2.7 KiB
TypeScript
const footerSections = [
|
|
{
|
|
title: "指南",
|
|
links: [
|
|
{ label: "7天学习路径", href: "#roadmap" },
|
|
{ label: "全部资源", href: "#resources" },
|
|
{ label: "工具推荐", href: "#tools" },
|
|
{ label: "目的地数据库", href: "#" },
|
|
],
|
|
},
|
|
{
|
|
title: "资源",
|
|
links: [
|
|
{ label: "远程工作平台", href: "#" },
|
|
{ label: "签证政策汇总", href: "#" },
|
|
{ label: "共居空间推荐", href: "#" },
|
|
{ label: "数字游民保险", href: "#" },
|
|
],
|
|
},
|
|
{
|
|
title: "社区",
|
|
links: [
|
|
{ label: "Discord", href: "#" },
|
|
{ label: "微信群", href: "#community" },
|
|
{ label: "即刻", href: "#" },
|
|
{ label: "GitHub", href: "#" },
|
|
],
|
|
},
|
|
{
|
|
title: "关于",
|
|
links: [
|
|
{ label: "关于我们", href: "#" },
|
|
{ label: "贡献指南", href: "#" },
|
|
{ label: "隐私政策", href: "#" },
|
|
{ label: "联系我们", href: "#" },
|
|
],
|
|
},
|
|
];
|
|
|
|
export default function Footer() {
|
|
return (
|
|
<footer className="border-t border-slate-100 bg-white">
|
|
<div className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8 lg:py-16">
|
|
<div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-5">
|
|
<div className="lg:col-span-1">
|
|
<a href="#" className="flex items-center gap-2 text-lg font-bold">
|
|
<span className="text-2xl">🌍</span>
|
|
<span>数字游民指南</span>
|
|
</a>
|
|
<p className="mt-3 text-sm leading-relaxed text-slate-500">
|
|
开源免费的数字游民资源平台
|
|
<br />
|
|
助你开启自由工作与旅行的生活方式
|
|
</p>
|
|
</div>
|
|
|
|
{footerSections.map((section) => (
|
|
<div key={section.title}>
|
|
<h4 className="mb-4 text-sm font-bold text-slate-900">
|
|
{section.title}
|
|
</h4>
|
|
<ul className="space-y-2.5">
|
|
{section.links.map((link) => (
|
|
<li key={link.label}>
|
|
<a
|
|
href={link.href}
|
|
className="text-sm text-slate-500 transition-colors hover:text-slate-700"
|
|
>
|
|
{link.label}
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="mt-12 flex flex-col items-center justify-between gap-4 border-t border-slate-100 pt-8 sm:flex-row">
|
|
<p className="text-sm text-slate-400">
|
|
Made with 🌍 by 数字游民社区 | Digital Nomad Guide
|
|
</p>
|
|
<p className="text-sm text-slate-400">开源共享 · 社区驱动</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
);
|
|
}
|