129 lines
4.6 KiB
TypeScript
129 lines
4.6 KiB
TypeScript
import Footer from "@/app/components/Footer";
|
|
import Link from "next/link";
|
|
|
|
export const metadata = {
|
|
title: "支持 | 游牧中国",
|
|
description: "游牧中国支持中心，获取帮助和联系我们的多种方式。",
|
|
};
|
|
|
|
export default function SupportPage() {
|
|
const supportOptions = [
|
|
{
|
|
icon: "❓",
|
|
title: "帮助中心",
|
|
description: "浏览常见问题和使用指南",
|
|
link: "/help",
|
|
color: "bg-blue-50 dark:bg-blue-900/20",
|
|
},
|
|
{
|
|
icon: "💬",
|
|
title: "联系我们",
|
|
description: "通过邮件或社群联系我们",
|
|
link: "/contact",
|
|
color: "bg-green-50 dark:bg-green-900/20",
|
|
},
|
|
{
|
|
icon: "🛡️",
|
|
title: "安全指南",
|
|
description: "旅居安全建议和保护措施",
|
|
link: "/safety",
|
|
color: "bg-red-50 dark:bg-red-900/20",
|
|
},
|
|
{
|
|
icon: "📋",
|
|
title: "社区准则",
|
|
description: "了解社区规则和行为规范",
|
|
link: "/guidelines",
|
|
color: "bg-purple-50 dark:bg-purple-900/20",
|
|
},
|
|
{
|
|
icon: "🔒",
|
|
title: "隐私政策",
|
|
description: "了解我们如何保护您的数据",
|
|
link: "/privacy",
|
|
color: "bg-gray-50 dark:bg-gray-800/50",
|
|
},
|
|
{
|
|
icon: "📜",
|
|
title: "服务条款",
|
|
description: "平台使用条款和条件",
|
|
link: "/terms",
|
|
color: "bg-orange-50 dark:bg-orange-900/20",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<>
|
|
<main className="min-h-screen bg-[#fafafa] dark:bg-gray-950">
|
|
<section className="max-w-4xl mx-auto px-4 sm:px-6 py-12 sm:py-20">
|
|
<h1 className="text-3xl sm:text-4xl font-bold text-gray-900 dark:text-gray-100 mb-2 flex items-center gap-2">
|
|
<span className="w-1 h-10 bg-[#ff4d4f] rounded-full" />
|
|
支持
|
|
</h1>
|
|
<p className="text-gray-600 dark:text-gray-400 mb-10">
|
|
选择下方选项获取帮助
|
|
</p>
|
|
|
|
<div className="grid sm:grid-cols-2 gap-4">
|
|
{supportOptions.map((option, index) => (
|
|
<Link
|
|
key={index}
|
|
href={option.link}
|
|
className="bg-white dark:bg-gray-900 rounded-xl p-5 border border-gray-100 dark:border-gray-800 hover:shadow-md transition-shadow flex items-start gap-4"
|
|
>
|
|
<div className={`w-12 h-12 rounded-lg ${option.color} flex items-center justify-center text-2xl flex-shrink-0`}>
|
|
{option.icon}
|
|
</div>
|
|
<div>
|
|
<h2 className="text-lg font-bold text-gray-900 dark:text-gray-100 mb-1">
|
|
{option.title}
|
|
</h2>
|
|
<p className="text-sm text-gray-500">
|
|
{option.description}
|
|
</p>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
|
|
{/* Quick Help */}
|
|
<div className="mt-10 bg-white dark:bg-gray-900 rounded-xl p-6 border border-gray-100 dark:border-gray-800">
|
|
<h2 className="text-lg font-bold text-gray-900 dark:text-gray-100 mb-4">快速帮助</h2>
|
|
<div className="grid sm:grid-cols-2 gap-4">
|
|
<div className="flex items-center gap-3">
|
|
<span className="text-xl">📧</span>
|
|
<div>
|
|
<p className="text-sm font-medium text-gray-900 dark:text-gray-100">邮件支持</p>
|
|
<p className="text-xs text-gray-500">hello@nomadcna.com</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<span className="text-xl">💬</span>
|
|
<div>
|
|
<p className="text-sm font-medium text-gray-900 dark:text-gray-100">微信社群</p>
|
|
<p className="text-xs text-gray-500">NomadCNA</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<span className="text-xl">🐦</span>
|
|
<div>
|
|
<p className="text-sm font-medium text-gray-900 dark:text-gray-100">Twitter</p>
|
|
<p className="text-xs text-gray-500">@NomadCNA</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<span className="text-xl">⏰</span>
|
|
<div>
|
|
<p className="text-sm font-medium text-gray-900 dark:text-gray-100">响应时间</p>
|
|
<p className="text-xs text-gray-500">24小时内回复</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
<Footer />
|
|
</>
|
|
);
|
|
}
|