67 lines
2.6 KiB
TypeScript
67 lines
2.6 KiB
TypeScript
import Footer from "@/app/components/Footer";
|
||
import Link from "next/link";
|
||
import { helpArticles } from "@/app/data/mock";
|
||
|
||
export const metadata = {
|
||
title: "帮助中心 | 游牧中国",
|
||
description: "游牧中国帮助中心，解决您在使用过程中的常见问题。",
|
||
};
|
||
|
||
export default function HelpPage() {
|
||
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">
|
||
{helpArticles.map((category) => (
|
||
<div
|
||
key={category.id}
|
||
className="bg-white dark:bg-gray-900 rounded-xl p-5 border border-gray-100 dark:border-gray-800"
|
||
>
|
||
<div className="flex items-center gap-3 mb-4">
|
||
<span className="text-2xl">{category.icon}</span>
|
||
<h2 className="text-lg font-bold text-gray-900 dark:text-gray-100">{category.title}</h2>
|
||
</div>
|
||
<ul className="space-y-2">
|
||
{category.articles.map((article) => (
|
||
<li key={article.id}>
|
||
<Link
|
||
href={`/help?category=${category.category}&article=${article.id}`}
|
||
className="text-sm text-gray-600 dark:text-gray-400 hover:text-[#ff4d4f] transition-colors block"
|
||
>
|
||
{article.title}
|
||
</Link>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* Contact Support */}
|
||
<div className="mt-10 bg-[#ff4d4f]/5 dark:bg-[#ff4d4f]/10 rounded-xl p-6 text-center">
|
||
<h3 className="font-bold text-gray-900 dark:text-gray-100 mb-2">没有找到答案？</h3>
|
||
<p className="text-gray-600 dark:text-gray-400 text-sm mb-4">
|
||
请通过联系我们页面提交您的问题
|
||
</p>
|
||
<Link
|
||
href="/contact"
|
||
className="inline-block px-5 py-2 bg-[#ff4d4f] text-white font-medium rounded-lg hover:bg-[#ff4d4f]/90 transition-colors"
|
||
>
|
||
联系我们
|
||
</Link>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
<Footer />
|
||
</>
|
||
);
|
||
}
|