107 lines
5.1 KiB
TypeScript
107 lines
5.1 KiB
TypeScript
import Footer from "@/app/components/Footer";
|
|
import { contactContent } from "@/app/data/mock";
|
|
|
|
export const metadata = {
|
|
title: "联系我们 | 游牧中国",
|
|
description: "联系我们，获取支持或商务合作。",
|
|
};
|
|
|
|
export default function ContactPage() {
|
|
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 md:grid-cols-2 gap-8">
|
|
{/* Contact Info */}
|
|
<div className="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-6">联系方式</h2>
|
|
<div className="space-y-4">
|
|
{contactContent.social.map((item, index) => (
|
|
<div key={index} className="flex items-center gap-3">
|
|
<span className="w-10 h-10 rounded-lg bg-gray-100 dark:bg-gray-800 flex items-center justify-center text-lg">
|
|
{item.name === "微信" ? "💬" : item.name === "邮箱" ? "📧" : item.name === "Twitter" ? "🐦" : "📱"}
|
|
</span>
|
|
<div>
|
|
<p className="text-xs text-gray-500">{item.name}</p>
|
|
<p className="text-gray-900 dark:text-gray-100 font-medium">{item.value}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="mt-6 pt-6 border-t border-gray-100 dark:border-gray-800">
|
|
<p className="text-sm text-gray-500">{contactContent.responseTime}</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Contact Form */}
|
|
<div className="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-6">发送消息</h2>
|
|
<form className="space-y-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
|
您的邮箱
|
|
</label>
|
|
<input
|
|
type="email"
|
|
placeholder="your@email.com"
|
|
className="w-full px-4 py-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-[#ff4d4f] focus:border-transparent"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
|
主题
|
|
</label>
|
|
<input
|
|
type="text"
|
|
placeholder="请输入主题"
|
|
className="w-full px-4 py-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-[#ff4d4f] focus:border-transparent"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
|
消息内容
|
|
</label>
|
|
<textarea
|
|
rows={4}
|
|
placeholder="请描述您的问题或建议..."
|
|
className="w-full px-4 py-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-[#ff4d4f] focus:border-transparent resize-none"
|
|
/>
|
|
</div>
|
|
<button
|
|
type="submit"
|
|
className="w-full py-2 px-4 bg-[#ff4d4f] text-white font-medium rounded-lg hover:bg-[#ff4d4f]/90 transition-colors"
|
|
>
|
|
发送消息
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Business Cooperation */}
|
|
<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>
|
|
<p className="text-gray-600 dark:text-gray-400 text-sm mb-4">
|
|
欢迎品牌合作、活动联合、媒体报道等商务咨询。
|
|
</p>
|
|
<a
|
|
href="mailto:business@nomadcna.com"
|
|
className="inline-block px-5 py-2 bg-[#ff4d4f] text-white font-medium rounded-lg hover:bg-[#ff4d4f]/90 transition-colors"
|
|
>
|
|
商务合作邮箱
|
|
</a>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
<Footer />
|
|
</>
|
|
);
|
|
}
|