288 lines
12 KiB
TypeScript
288 lines
12 KiB
TypeScript
'use client';
|
||
import { useState } from 'react';
|
||
import { Mail, Phone, MapPin, Clock, Send, CheckCircle, AlertCircle, Building, MessageSquare, MessageCircle } from 'lucide-react';
|
||
|
||
export default function Contact() {
|
||
const [form, setForm] = useState({
|
||
name: '',
|
||
email: '',
|
||
company: '',
|
||
phone: '',
|
||
subject: '',
|
||
message: '',
|
||
inquiryType: 'general'
|
||
});
|
||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||
const [submitStatus, setSubmitStatus] = useState<'idle' | 'success' | 'error'>('idle');
|
||
|
||
const handleSubmit = async (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
setIsSubmitting(true);
|
||
|
||
try {
|
||
const response = await fetch('https://formspree.io/f/xkgvgzal', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body: JSON.stringify({
|
||
name: form.name,
|
||
email: form.email,
|
||
company: form.company,
|
||
phone: form.phone,
|
||
subject: form.subject,
|
||
message: form.message,
|
||
inquiryType: form.inquiryType,
|
||
_subject: `来自网站的联系表单 - ${form.subject || '一般咨询'}`
|
||
})
|
||
});
|
||
|
||
if (response.ok) {
|
||
setSubmitStatus('success');
|
||
setForm({ name: '', email: '', company: '', phone: '', subject: '', message: '', inquiryType: 'general' });
|
||
} else {
|
||
setSubmitStatus('error');
|
||
}
|
||
} catch (error) {
|
||
setSubmitStatus('error');
|
||
} finally {
|
||
setIsSubmitting(false);
|
||
}
|
||
};
|
||
|
||
const contactInfo = [
|
||
{
|
||
icon: MapPin,
|
||
title: '公司地址',
|
||
details: ['全球远程办公', '总部位于美国纽约'],
|
||
color: 'text-red-500'
|
||
},
|
||
{
|
||
icon: Phone,
|
||
title: 'WhatsApp',
|
||
details: ['+1 917-402-9875', '7×24 小时技术支持'],
|
||
color: 'text-blue-500'
|
||
},
|
||
{
|
||
icon: Mail,
|
||
title: '邮箱地址',
|
||
details: ['support@pinnovatecloud.com', 'info@pinnovatecloud.com'],
|
||
color: 'text-green-500'
|
||
},
|
||
{
|
||
icon: MessageCircle,
|
||
title: 'Telegram',
|
||
details: ['@pinnovatecloud', '即时响应支持'],
|
||
color: 'text-purple-500'
|
||
}
|
||
];
|
||
|
||
return (
|
||
<section className="px-6 py-16 bg-white" id="contact-form">
|
||
<div className="max-w-screen-xl mx-auto">
|
||
<div className="text-center mb-12">
|
||
<h2 className="text-3xl font-bold text-primary mb-4">发送消息</h2>
|
||
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
|
||
填写下面的表单，我们的团队会在 24 小时内回复您。
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-12">
|
||
{/* 联系表单 */}
|
||
<div className="lg:col-span-2">
|
||
<div className="bg-gray-50 rounded-2xl p-8">
|
||
{submitStatus === 'success' && (
|
||
<div className="mb-6 p-4 bg-green-50 border border-green-200 rounded-lg flex items-center gap-3">
|
||
<CheckCircle className="w-5 h-5 text-green-500" />
|
||
<span className="text-green-700">消息发送成功！我们会尽快回复您。</span>
|
||
</div>
|
||
)}
|
||
|
||
{submitStatus === 'error' && (
|
||
<div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg flex items-center gap-3">
|
||
<AlertCircle className="w-5 h-5 text-red-500" />
|
||
<span className="text-red-700">发送失败，请稍后重试或直接联系我们。</span>
|
||
</div>
|
||
)}
|
||
|
||
<form onSubmit={handleSubmit} className="space-y-6">
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||
姓名 *
|
||
</label>
|
||
<input
|
||
type="text"
|
||
required
|
||
className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-accent focus:border-transparent outline-none transition-colors"
|
||
placeholder="请输入您的姓名"
|
||
value={form.name}
|
||
onChange={e => setForm({ ...form, name: e.target.value })}
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||
邮箱 *
|
||
</label>
|
||
<input
|
||
type="email"
|
||
required
|
||
className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-accent focus:border-transparent outline-none transition-colors"
|
||
placeholder="请输入您的邮箱"
|
||
value={form.email}
|
||
onChange={e => setForm({ ...form, email: e.target.value })}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||
公司名称
|
||
</label>
|
||
<input
|
||
type="text"
|
||
className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-accent focus:border-transparent outline-none transition-colors"
|
||
placeholder="请输入您的公司名称"
|
||
value={form.company}
|
||
onChange={e => setForm({ ...form, company: e.target.value })}
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||
联系电话
|
||
</label>
|
||
<input
|
||
type="tel"
|
||
className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-accent focus:border-transparent outline-none transition-colors"
|
||
placeholder="请输入您的联系电话"
|
||
value={form.phone}
|
||
onChange={e => setForm({ ...form, phone: e.target.value })}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||
咨询类型
|
||
</label>
|
||
<select
|
||
className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-accent focus:border-transparent outline-none transition-colors"
|
||
value={form.inquiryType}
|
||
onChange={e => setForm({ ...form, inquiryType: e.target.value })}
|
||
>
|
||
<option value="general">一般咨询</option>
|
||
<option value="sales">销售咨询</option>
|
||
<option value="support">技术支持</option>
|
||
<option value="partnership">合作洽谈</option>
|
||
<option value="feedback">意见反馈</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||
主题
|
||
</label>
|
||
<input
|
||
type="text"
|
||
className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-accent focus:border-transparent outline-none transition-colors"
|
||
placeholder="请输入消息主题"
|
||
value={form.subject}
|
||
onChange={e => setForm({ ...form, subject: e.target.value })}
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||
详细消息 *
|
||
</label>
|
||
<textarea
|
||
required
|
||
rows={6}
|
||
className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-accent focus:border-transparent outline-none transition-colors resize-none"
|
||
placeholder="请详细描述您的问题或需求..."
|
||
value={form.message}
|
||
onChange={e => setForm({ ...form, message: e.target.value })}
|
||
/>
|
||
</div>
|
||
|
||
<button
|
||
type="submit"
|
||
disabled={isSubmitting || !form.name || !form.email || !form.message}
|
||
className="w-full flex items-center justify-center gap-2 py-4 px-6 bg-accent text-white rounded-xl font-semibold hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||
>
|
||
{isSubmitting ? (
|
||
<>
|
||
<div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
|
||
发送中...
|
||
</>
|
||
) : (
|
||
<>
|
||
<Send className="w-5 h-5" />
|
||
发送消息
|
||
</>
|
||
)}
|
||
</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 联系信息 */}
|
||
<div className="space-y-8">
|
||
<div>
|
||
<h3 className="text-2xl font-bold text-primary mb-6">联系信息</h3>
|
||
<div className="space-y-6">
|
||
{contactInfo.map((info, index) => (
|
||
<div key={index} className="flex items-start gap-4">
|
||
<div className={`w-12 h-12 bg-gray-100 rounded-full flex items-center justify-center flex-shrink-0 ${info.color}`}>
|
||
<info.icon className="w-6 h-6" />
|
||
</div>
|
||
<div>
|
||
<h4 className="font-semibold text-primary mb-2">{info.title}</h4>
|
||
{info.details.map((detail, idx) => (
|
||
<p key={idx} className="text-gray-600 text-sm mb-1">{detail}</p>
|
||
))}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* 在线客服 */}
|
||
<div className="bg-gradient-to-r from-accent to-blue-600 rounded-2xl p-6 text-white">
|
||
<div className="flex items-center gap-3 mb-4">
|
||
<MessageSquare className="w-6 h-6" />
|
||
<h4 className="text-lg font-semibold">在线客服</h4>
|
||
</div>
|
||
<p className="text-blue-100 mb-4">
|
||
需要即时帮助？我们的在线客服团队随时为您服务。
|
||
</p>
|
||
<button className="w-full py-3 bg-white text-accent rounded-xl font-semibold hover:bg-gray-100 transition-colors">
|
||
开始对话
|
||
</button>
|
||
</div>
|
||
|
||
{/* 工作时间提醒 */}
|
||
<div className="bg-yellow-50 border border-yellow-200 rounded-xl p-6">
|
||
<div className="flex items-start gap-3">
|
||
<Clock className="w-5 h-5 text-yellow-600 mt-0.5" />
|
||
<div>
|
||
<h4 className="font-semibold text-yellow-800 mb-2">响应时间</h4>
|
||
<ul className="text-sm text-yellow-700 space-y-1">
|
||
<li>• 在线客服：即时响应</li>
|
||
<li>• 邮件支持：24 小时内</li>
|
||
<li>• 电话支持：7×24 小时</li>
|
||
<li>• 紧急问题：1 小时内</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|