454 lines
21 KiB
TypeScript
454 lines
21 KiB
TypeScript
'use client';
|
||
|
||
import { useState, useEffect } from 'react';
|
||
import { Navigation } from '../../components/Navigation';
|
||
import { Footer } from '../../components/Footer';
|
||
import { Head } from '../../components/Head';
|
||
import { Phone, Mail, MapPin, Clock, Send } from 'lucide-react';
|
||
|
||
export default function ContactPage() {
|
||
const [currentLang, setCurrentLang] = useState<'zh' | 'zh-tw' | 'en'>('zh');
|
||
const [formData, setFormData] = useState({
|
||
name: '',
|
||
email: '',
|
||
company: '',
|
||
phone: '',
|
||
subject: '',
|
||
message: '',
|
||
});
|
||
|
||
const translations = {
|
||
zh: {
|
||
title: '联系我们 - CloudPro 云服务器代理商',
|
||
description:
|
||
'联系CloudPro获取专业的云计算咨询服务，我们的专家团队随时为您提供技术支持和解决方案。',
|
||
keywords: '联系我们,技术咨询,云计算咨询,客服支持,商务合作',
|
||
nav: {
|
||
home: '首页',
|
||
products: '产品',
|
||
solutions: '解决方案',
|
||
support: '支持',
|
||
contact: '联系我们',
|
||
},
|
||
hero: {
|
||
title: '联系我们',
|
||
subtitle: '专业的云计算咨询服务',
|
||
description: '我们的专家团队随时为您提供技术支持和解决方案咨询',
|
||
},
|
||
contact: {
|
||
info: [
|
||
{
|
||
icon: Phone,
|
||
title: '客服热线',
|
||
content: '+86 400-123-4567',
|
||
description: '7x24小时技术支持热线',
|
||
},
|
||
{
|
||
icon: Mail,
|
||
title: '邮箱地址',
|
||
content: 'support@cloudpro.com',
|
||
description: '技术支持和商务咨询',
|
||
},
|
||
{
|
||
icon: MapPin,
|
||
title: '公司地址',
|
||
content: '北京市朝阳区科技园区CloudPro大厦',
|
||
description: '欢迎预约参观',
|
||
},
|
||
{
|
||
icon: Clock,
|
||
title: '工作时间',
|
||
content: '周一至周日 9:00-18:00',
|
||
description: '节假日正常服务',
|
||
},
|
||
],
|
||
},
|
||
form: {
|
||
title: '在线咨询',
|
||
subtitle: '填写表单，我们将尽快与您联系',
|
||
fields: {
|
||
name: '姓名',
|
||
email: '邮箱',
|
||
company: '公司名称',
|
||
phone: '联系电话',
|
||
subject: '咨询主题',
|
||
message: '详细描述',
|
||
},
|
||
placeholders: {
|
||
name: '请输入您的姓名',
|
||
email: '请输入您的邮箱地址',
|
||
company: '请输入公司名称',
|
||
phone: '请输入联系电话',
|
||
subject: '请选择咨询主题',
|
||
message: '请详细描述您的需求或问题',
|
||
},
|
||
subjects: ['产品咨询', '技术支持', '商务合作', '解决方案', '其他'],
|
||
submit: '提交咨询',
|
||
},
|
||
},
|
||
'zh-tw': {
|
||
title: '聯絡我們 - CloudPro 雲伺服器代理商',
|
||
description:
|
||
'聯絡CloudPro獲取專業的雲端運算諮詢服務，我們的專家團隊隨時為您提供技術支援和解決方案。',
|
||
keywords: '聯絡我們,技術諮詢,雲端運算諮詢,客服支援,商務合作',
|
||
nav: {
|
||
home: '首頁',
|
||
products: '產品',
|
||
solutions: '解決方案',
|
||
support: '支援',
|
||
contact: '聯絡我們',
|
||
},
|
||
hero: {
|
||
title: '聯絡我們',
|
||
subtitle: '專業的雲端運算諮詢服務',
|
||
description: '我們的專家團隊隨時為您提供技術支援和解決方案諮詢',
|
||
},
|
||
contact: {
|
||
info: [
|
||
{
|
||
icon: Phone,
|
||
title: '客服熱線',
|
||
content: '+86 400-123-4567',
|
||
description: '7x24小時技術支援熱線',
|
||
},
|
||
{
|
||
icon: Mail,
|
||
title: '郵箱地址',
|
||
content: 'support@cloudpro.com',
|
||
description: '技術支援和商務諮詢',
|
||
},
|
||
{
|
||
icon: MapPin,
|
||
title: '公司地址',
|
||
content: '北京市朝陽區科技園區CloudPro大廈',
|
||
description: '歡迎預約參觀',
|
||
},
|
||
{
|
||
icon: Clock,
|
||
title: '工作時間',
|
||
content: '週一至週日 9:00-18:00',
|
||
description: '節假日正常服務',
|
||
},
|
||
],
|
||
},
|
||
form: {
|
||
title: '線上諮詢',
|
||
subtitle: '填寫表單，我們將盡快與您聯絡',
|
||
fields: {
|
||
name: '姓名',
|
||
email: '郵箱',
|
||
company: '公司名稱',
|
||
phone: '聯絡電話',
|
||
subject: '諮詢主題',
|
||
message: '詳細描述',
|
||
},
|
||
placeholders: {
|
||
name: '請輸入您的姓名',
|
||
email: '請輸入您的郵箱地址',
|
||
company: '請輸入公司名稱',
|
||
phone: '請輸入聯絡電話',
|
||
subject: '請選擇諮詢主題',
|
||
message: '請詳細描述您的需求或問題',
|
||
},
|
||
subjects: ['產品諮詢', '技術支援', '商務合作', '解決方案', '其他'],
|
||
submit: '提交諮詢',
|
||
},
|
||
},
|
||
en: {
|
||
title: 'Contact Us - CloudPro Cloud Server Reseller',
|
||
description:
|
||
'Contact CloudPro for professional cloud computing consulting services. Our expert team is ready to provide technical support and solutions.',
|
||
keywords:
|
||
'contact us,technical consulting,cloud computing consulting,customer support,business cooperation',
|
||
nav: {
|
||
home: 'Home',
|
||
products: 'Products',
|
||
solutions: 'Solutions',
|
||
support: 'Support',
|
||
contact: 'Contact',
|
||
},
|
||
hero: {
|
||
title: 'Contact Us',
|
||
subtitle: 'Professional Cloud Computing Consulting',
|
||
description:
|
||
'Our expert team is ready to provide technical support and solution consulting',
|
||
},
|
||
contact: {
|
||
info: [
|
||
{
|
||
icon: Phone,
|
||
title: 'Customer Hotline',
|
||
content: '+86 400-123-4567',
|
||
description: '7x24 Technical Support Hotline',
|
||
},
|
||
{
|
||
icon: Mail,
|
||
title: 'Email Address',
|
||
content: 'support@cloudpro.com',
|
||
description: 'Technical Support and Business Inquiry',
|
||
},
|
||
{
|
||
icon: MapPin,
|
||
title: 'Office Address',
|
||
content: 'CloudPro Building, Beijing Chaoyang Tech Park',
|
||
description: 'Welcome to schedule a visit',
|
||
},
|
||
{
|
||
icon: Clock,
|
||
title: 'Business Hours',
|
||
content: 'Mon-Sun 9:00-18:00',
|
||
description: 'Service available on holidays',
|
||
},
|
||
],
|
||
},
|
||
form: {
|
||
title: 'Online Inquiry',
|
||
subtitle: 'Fill out the form and we will contact you soon',
|
||
fields: {
|
||
name: 'Name',
|
||
email: 'Email',
|
||
company: 'Company',
|
||
phone: 'Phone',
|
||
subject: 'Subject',
|
||
message: 'Message',
|
||
},
|
||
placeholders: {
|
||
name: 'Enter your name',
|
||
email: 'Enter your email address',
|
||
company: 'Enter company name',
|
||
phone: 'Enter phone number',
|
||
subject: 'Select inquiry subject',
|
||
message: 'Please describe your requirements or questions in detail',
|
||
},
|
||
subjects: [
|
||
'Product Inquiry',
|
||
'Technical Support',
|
||
'Business Cooperation',
|
||
'Solutions',
|
||
'Other',
|
||
],
|
||
|
||
submit: 'Submit Inquiry',
|
||
},
|
||
},
|
||
};
|
||
|
||
const t = translations[currentLang];
|
||
|
||
useEffect(() => {
|
||
const browserLang = navigator.language.toLowerCase();
|
||
if (browserLang.includes('en')) {
|
||
setCurrentLang('en');
|
||
} else if (browserLang.includes('zh-tw') || browserLang.includes('zh-hk')) {
|
||
setCurrentLang('zh-tw');
|
||
}
|
||
}, []);
|
||
|
||
const handleInputChange = (
|
||
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>,
|
||
) => {
|
||
const { name, value } = e.target;
|
||
setFormData((prev) => ({
|
||
...prev,
|
||
[name]: value,
|
||
}));
|
||
};
|
||
|
||
const handleSubmit = (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
// Handle form submission
|
||
console.log('Form submitted:', formData);
|
||
alert(
|
||
currentLang === 'zh'
|
||
? '提交成功！我们将尽快与您联系。'
|
||
: currentLang === 'zh-tw'
|
||
? '提交成功！我們將盡快與您聯絡。'
|
||
: 'Submitted successfully! We will contact you soon.',
|
||
);
|
||
};
|
||
|
||
return (
|
||
<div className="min-h-screen bg-gradient-to-br from-amber-50 to-yellow-50">
|
||
<Head
|
||
title={t.title}
|
||
description={t.description}
|
||
keywords={t.keywords}
|
||
currentLang={currentLang}
|
||
/>
|
||
|
||
<Navigation
|
||
currentLang={currentLang}
|
||
onLanguageChange={setCurrentLang}
|
||
translations={translations}
|
||
/>
|
||
|
||
{/* Hero Section */}
|
||
<section className="bg-gradient-to-r from-amber-900 to-yellow-800 text-white py-20">
|
||
<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 mb-6">{t.hero.title}</h1>
|
||
<p className="text-xl md:text-2xl text-yellow-100 mb-8 max-w-3xl mx-auto">
|
||
{t.hero.subtitle}
|
||
</p>
|
||
<p className="text-lg text-yellow-200 max-w-2xl mx-auto">
|
||
{t.hero.description}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Contact Info & Form */}
|
||
<section className="py-20">
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
||
{/* Contact Information */}
|
||
<div>
|
||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
||
{t.contact.info.map((info, index) => {
|
||
const IconComponent = info.icon;
|
||
return (
|
||
<div
|
||
key={index}
|
||
className="bg-white p-6 rounded-xl shadow-lg border border-amber-200 hover:shadow-xl transition-all duration-300"
|
||
>
|
||
<div className="w-12 h-12 bg-gradient-to-r from-amber-500 to-yellow-500 rounded-lg flex items-center justify-center mb-4">
|
||
<IconComponent className="w-6 h-6 text-white" />
|
||
</div>
|
||
<h3 className="text-lg font-semibold text-amber-900 mb-2">
|
||
{info.title}
|
||
</h3>
|
||
<p className="text-amber-600 font-medium mb-1">
|
||
{info.content}
|
||
</p>
|
||
<p className="text-amber-700 text-sm">
|
||
{info.description}
|
||
</p>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Contact Form */}
|
||
<div className="bg-white p-8 rounded-xl shadow-lg border border-amber-200">
|
||
<div className="mb-8">
|
||
<h2 className="text-2xl font-bold text-amber-900 mb-2">
|
||
{t.form.title}
|
||
</h2>
|
||
<p className="text-amber-700">{t.form.subtitle}</p>
|
||
</div>
|
||
|
||
<form onSubmit={handleSubmit} className="space-y-6">
|
||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
||
<div>
|
||
<label className="block text-sm font-medium text-amber-900 mb-2">
|
||
{t.form.fields.name} *
|
||
</label>
|
||
<input
|
||
type="text"
|
||
name="name"
|
||
required
|
||
value={formData.name}
|
||
onChange={handleInputChange}
|
||
placeholder={t.form.placeholders.name}
|
||
className="w-full px-4 py-3 border border-amber-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label className="block text-sm font-medium text-amber-900 mb-2">
|
||
{t.form.fields.email} *
|
||
</label>
|
||
<input
|
||
type="email"
|
||
name="email"
|
||
required
|
||
value={formData.email}
|
||
onChange={handleInputChange}
|
||
placeholder={t.form.placeholders.email}
|
||
className="w-full px-4 py-3 border border-amber-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
||
<div>
|
||
<label className="block text-sm font-medium text-amber-900 mb-2">
|
||
{t.form.fields.company}
|
||
</label>
|
||
<input
|
||
type="text"
|
||
name="company"
|
||
value={formData.company}
|
||
onChange={handleInputChange}
|
||
placeholder={t.form.placeholders.company}
|
||
className="w-full px-4 py-3 border border-amber-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label className="block text-sm font-medium text-amber-900 mb-2">
|
||
{t.form.fields.phone}
|
||
</label>
|
||
<input
|
||
type="tel"
|
||
name="phone"
|
||
value={formData.phone}
|
||
onChange={handleInputChange}
|
||
placeholder={t.form.placeholders.phone}
|
||
className="w-full px-4 py-3 border border-amber-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-amber-900 mb-2">
|
||
{t.form.fields.subject} *
|
||
</label>
|
||
<select
|
||
name="subject"
|
||
required
|
||
value={formData.subject}
|
||
onChange={handleInputChange}
|
||
className="w-full px-4 py-3 border border-amber-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent"
|
||
>
|
||
<option value="">{t.form.placeholders.subject}</option>
|
||
{t.form.subjects.map((subject, index) => (
|
||
<option key={index} value={subject}>
|
||
{subject}
|
||
</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-amber-900 mb-2">
|
||
{t.form.fields.message} *
|
||
</label>
|
||
<textarea
|
||
name="message"
|
||
required
|
||
rows={5}
|
||
value={formData.message}
|
||
onChange={handleInputChange}
|
||
placeholder={t.form.placeholders.message}
|
||
className="w-full px-4 py-3 border border-amber-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent resize-vertical"
|
||
/>
|
||
</div>
|
||
|
||
<button
|
||
type="submit"
|
||
className="w-full bg-gradient-to-r from-amber-500 to-yellow-500 text-white py-3 px-6 rounded-lg font-semibold hover:from-amber-600 hover:to-yellow-600 transition-all duration-200 flex items-center justify-center space-x-2"
|
||
>
|
||
<Send className="w-5 h-5" />
|
||
<span>{t.form.submit}</span>
|
||
</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<Footer currentLang={currentLang} translations={translations} />
|
||
</div>
|
||
);
|
||
}
|