511 lines
23 KiB
TypeScript
511 lines
23 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import { Header } from '../../components/Header';
|
|
import { Footer } from '../../components/Footer';
|
|
|
|
export default function ContactPage() {
|
|
const [currentLang, setCurrentLang] = useState('zh-CN');
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const [formData, setFormData] = useState({
|
|
name: '',
|
|
email: '',
|
|
company: '',
|
|
message: '',
|
|
});
|
|
|
|
useEffect(() => {
|
|
const detectLanguage = () => {
|
|
const browserLang = navigator.language || navigator.languages[0];
|
|
if (browserLang.startsWith('zh-TW') || browserLang.startsWith('zh-HK')) {
|
|
setCurrentLang('zh-TW');
|
|
} else if (browserLang.startsWith('en')) {
|
|
setCurrentLang('en');
|
|
} else {
|
|
setCurrentLang('zh-CN');
|
|
}
|
|
setIsLoading(false);
|
|
};
|
|
|
|
detectLanguage();
|
|
}, []);
|
|
|
|
const content = {
|
|
'zh-CN': {
|
|
title: '联系我们',
|
|
subtitle: '我们很乐意为您提供帮助和支持',
|
|
nav: {
|
|
home: '首页',
|
|
docs: '文档',
|
|
about: '关于',
|
|
contact: '联系我们',
|
|
},
|
|
form: {
|
|
title: '发送消息',
|
|
name: '姓名',
|
|
email: '邮箱',
|
|
company: '公司',
|
|
message: '消息',
|
|
submit: '发送消息',
|
|
namePlaceholder: '请输入您的姓名',
|
|
emailPlaceholder: '请输入您的邮箱地址',
|
|
companyPlaceholder: '请输入您的公司名称（可选）',
|
|
messagePlaceholder: '请描述您的需求或问题...',
|
|
},
|
|
contact: {
|
|
title: '联系方式',
|
|
email: {
|
|
title: '邮箱',
|
|
value: 'contact@multisite.com',
|
|
},
|
|
phone: {
|
|
title: '电话',
|
|
value: '+86 400-123-4567',
|
|
},
|
|
address: {
|
|
title: '地址',
|
|
value: '北京市朝阳区科技园区创新大厦 A 座 1001 室',
|
|
},
|
|
hours: {
|
|
title: '工作时间',
|
|
value: '周一至周五 9:00 - 18:00',
|
|
},
|
|
},
|
|
support: {
|
|
title: '技术支持',
|
|
items: [
|
|
{
|
|
title: '在线文档',
|
|
description: '查看详细的使用指南和 API 文档',
|
|
link: '/docs',
|
|
},
|
|
{
|
|
title: 'GitHub',
|
|
description: '访问我们的开源项目和代码示例',
|
|
link: 'https://github.com',
|
|
},
|
|
{
|
|
title: '社区论坛',
|
|
description: '与其他开发者交流经验和解决方案',
|
|
link: '#',
|
|
},
|
|
],
|
|
},
|
|
},
|
|
'zh-TW': {
|
|
title: '聯繫我們',
|
|
subtitle: '我們很樂意為您提供幫助和支援',
|
|
nav: {
|
|
home: '首頁',
|
|
docs: '文檔',
|
|
about: '關於',
|
|
contact: '聯繫我們',
|
|
},
|
|
form: {
|
|
title: '發送消息',
|
|
name: '姓名',
|
|
email: '郵箱',
|
|
company: '公司',
|
|
message: '消息',
|
|
submit: '發送消息',
|
|
namePlaceholder: '請輸入您的姓名',
|
|
emailPlaceholder: '請輸入您的郵箱地址',
|
|
companyPlaceholder: '請輸入您的公司名稱（可選）',
|
|
messagePlaceholder: '請描述您的需求或問題...',
|
|
},
|
|
contact: {
|
|
title: '聯繫方式',
|
|
email: {
|
|
title: '郵箱',
|
|
value: 'contact@multisite.com',
|
|
},
|
|
phone: {
|
|
title: '電話',
|
|
value: '+86 400-123-4567',
|
|
},
|
|
address: {
|
|
title: '地址',
|
|
value: '北京市朝陽區科技園區創新大廈 A 座 1001 室',
|
|
},
|
|
hours: {
|
|
title: '工作時間',
|
|
value: '週一至週五 9:00 - 18:00',
|
|
},
|
|
},
|
|
support: {
|
|
title: '技術支援',
|
|
items: [
|
|
{
|
|
title: '在線文檔',
|
|
description: '查看詳細的使用指南和 API 文檔',
|
|
link: '/docs',
|
|
},
|
|
{
|
|
title: 'GitHub',
|
|
description: '訪問我們的開源項目和代碼示例',
|
|
link: 'https://github.com',
|
|
},
|
|
{
|
|
title: '社區論壇',
|
|
description: '與其他開發者交流經驗和解決方案',
|
|
link: '#',
|
|
},
|
|
],
|
|
},
|
|
},
|
|
en: {
|
|
title: 'Contact Us',
|
|
subtitle: "We'd love to help and support you",
|
|
nav: {
|
|
home: 'Home',
|
|
docs: 'Docs',
|
|
about: 'About',
|
|
contact: 'Contact',
|
|
},
|
|
form: {
|
|
title: 'Send Message',
|
|
name: 'Name',
|
|
email: 'Email',
|
|
company: 'Company',
|
|
message: 'Message',
|
|
submit: 'Send Message',
|
|
namePlaceholder: 'Enter your name',
|
|
emailPlaceholder: 'Enter your email address',
|
|
companyPlaceholder: 'Enter your company name (optional)',
|
|
messagePlaceholder: 'Describe your needs or questions...',
|
|
},
|
|
contact: {
|
|
title: 'Contact Information',
|
|
email: {
|
|
title: 'Email',
|
|
value: 'contact@multisite.com',
|
|
},
|
|
phone: {
|
|
title: 'Phone',
|
|
value: '+86 400-123-4567',
|
|
},
|
|
address: {
|
|
title: 'Address',
|
|
value: 'Room 1001, Building A, Innovation Tower, Tech Park, Chaoyang District, Beijing',
|
|
},
|
|
hours: {
|
|
title: 'Business Hours',
|
|
value: 'Monday - Friday 9:00 AM - 6:00 PM',
|
|
},
|
|
},
|
|
support: {
|
|
title: 'Technical Support',
|
|
items: [
|
|
{
|
|
title: 'Documentation',
|
|
description: 'View detailed usage guides and API documentation',
|
|
link: '/docs',
|
|
},
|
|
{
|
|
title: 'GitHub',
|
|
description: 'Access our open source projects and code examples',
|
|
link: 'https://github.com',
|
|
},
|
|
{
|
|
title: 'Community Forum',
|
|
description: 'Exchange experiences and solutions with other developers',
|
|
link: '#',
|
|
},
|
|
],
|
|
},
|
|
},
|
|
};
|
|
|
|
const currentContent = content[currentLang];
|
|
|
|
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
|
const { name, value } = e.target;
|
|
setFormData((prev) => ({
|
|
...prev,
|
|
[name]: value,
|
|
}));
|
|
};
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
// 这里可以添加表单提交逻辑
|
|
console.log('Form submitted:', formData);
|
|
alert(currentLang === 'en' ? 'Message sent successfully!' : '消息发送成功！');
|
|
};
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="min-h-screen bg-gray-50 flex items-center justify-center">
|
|
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-white">
|
|
<Header
|
|
currentLang={currentLang}
|
|
setCurrentLang={setCurrentLang}
|
|
currentPage="contact"
|
|
navContent={currentContent.nav}
|
|
/>
|
|
|
|
{/* Hero Section */}
|
|
<section className="bg-gradient-to-br from-blue-50 to-indigo-100 py-16">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="text-center">
|
|
<h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
|
|
{currentContent.title}
|
|
</h1>
|
|
<p className="text-xl text-gray-600 mb-8 max-w-3xl mx-auto">
|
|
{currentContent.subtitle}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Main Content */}
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
|
{/* Contact Form */}
|
|
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-8">
|
|
<h2 className="text-2xl font-bold text-gray-900 mb-6">
|
|
{currentContent.form.title}
|
|
</h2>
|
|
<form onSubmit={handleSubmit} className="space-y-6">
|
|
<div>
|
|
<label
|
|
htmlFor="name"
|
|
className="block text-sm font-medium text-gray-700 mb-2"
|
|
>
|
|
{currentContent.form.name}
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="name"
|
|
name="name"
|
|
value={formData.name}
|
|
onChange={handleInputChange}
|
|
placeholder={currentContent.form.namePlaceholder}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label
|
|
htmlFor="email"
|
|
className="block text-sm font-medium text-gray-700 mb-2"
|
|
>
|
|
{currentContent.form.email}
|
|
</label>
|
|
<input
|
|
type="email"
|
|
id="email"
|
|
name="email"
|
|
value={formData.email}
|
|
onChange={handleInputChange}
|
|
placeholder={currentContent.form.emailPlaceholder}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label
|
|
htmlFor="company"
|
|
className="block text-sm font-medium text-gray-700 mb-2"
|
|
>
|
|
{currentContent.form.company}
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="company"
|
|
name="company"
|
|
value={formData.company}
|
|
onChange={handleInputChange}
|
|
placeholder={currentContent.form.companyPlaceholder}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label
|
|
htmlFor="message"
|
|
className="block text-sm font-medium text-gray-700 mb-2"
|
|
>
|
|
{currentContent.form.message}
|
|
</label>
|
|
<textarea
|
|
id="message"
|
|
name="message"
|
|
rows={4}
|
|
value={formData.message}
|
|
onChange={handleInputChange}
|
|
placeholder={currentContent.form.messagePlaceholder}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
|
required
|
|
></textarea>
|
|
</div>
|
|
<button
|
|
type="submit"
|
|
className="w-full bg-blue-600 text-white px-6 py-3 rounded-md font-medium hover:bg-blue-700 transition-colors"
|
|
>
|
|
{currentContent.form.submit}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
{/* Contact Information */}
|
|
<div className="space-y-8">
|
|
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-8">
|
|
<h2 className="text-2xl font-bold text-gray-900 mb-6">
|
|
{currentContent.contact.title}
|
|
</h2>
|
|
<div className="space-y-6">
|
|
<div className="flex items-start">
|
|
<div className="flex-shrink-0">
|
|
<svg
|
|
className="w-6 h-6 text-blue-600"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div className="ml-4">
|
|
<h3 className="text-lg font-medium text-gray-900">
|
|
{currentContent.contact.email.title}
|
|
</h3>
|
|
<p className="text-gray-600">
|
|
{currentContent.contact.email.value}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-start">
|
|
<div className="flex-shrink-0">
|
|
<svg
|
|
className="w-6 h-6 text-blue-600"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div className="ml-4">
|
|
<h3 className="text-lg font-medium text-gray-900">
|
|
{currentContent.contact.phone.title}
|
|
</h3>
|
|
<p className="text-gray-600">
|
|
{currentContent.contact.phone.value}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-start">
|
|
<div className="flex-shrink-0">
|
|
<svg
|
|
className="w-6 h-6 text-blue-600"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
|
|
/>
|
|
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div className="ml-4">
|
|
<h3 className="text-lg font-medium text-gray-900">
|
|
{currentContent.contact.address.title}
|
|
</h3>
|
|
<p className="text-gray-600">
|
|
{currentContent.contact.address.value}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-start">
|
|
<div className="flex-shrink-0">
|
|
<svg
|
|
className="w-6 h-6 text-blue-600"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div className="ml-4">
|
|
<h3 className="text-lg font-medium text-gray-900">
|
|
{currentContent.contact.hours.title}
|
|
</h3>
|
|
<p className="text-gray-600">
|
|
{currentContent.contact.hours.value}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Technical Support */}
|
|
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-8">
|
|
<h2 className="text-2xl font-bold text-gray-900 mb-6">
|
|
{currentContent.support.title}
|
|
</h2>
|
|
<div className="space-y-4">
|
|
{currentContent.support.items.map((item, index) => (
|
|
<div key={index} className="border-l-4 border-blue-600 pl-4">
|
|
<h3 className="text-lg font-medium text-gray-900 mb-1">
|
|
{item.title}
|
|
</h3>
|
|
<p className="text-gray-600 text-sm mb-2">
|
|
{item.description}
|
|
</p>
|
|
<a
|
|
href={item.link}
|
|
className="text-blue-600 hover:text-blue-700 text-sm font-medium"
|
|
>
|
|
{currentLang === 'en' ? 'Learn more →' : '了解更多 →'}
|
|
</a>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<Footer
|
|
currentLang={currentLang}
|
|
navContent={{
|
|
docs: currentContent.nav.docs,
|
|
contact: currentContent.nav.contact,
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|