's'

app/[locale]/help/page.tsx

@@ -0,0 +1,66 @@
+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 />
+    </>
+  );
+}