512 lines
24 KiB
TypeScript
512 lines
24 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import { useTDK } from '../../../lib/useTDK';
|
|
import { useRouter, usePathname } from 'next/navigation';
|
|
import Navigation from '../../../components/Navigation';
|
|
import Footer from '../../../components/Footer';
|
|
import BackgroundElements from '../../../components/BackgroundElements';
|
|
|
|
interface PageProps {
|
|
params: { locale: string };
|
|
}
|
|
|
|
export default function ContactPage({ params }: PageProps) {
|
|
const [currentLang, setCurrentLang] = useState(params.locale);
|
|
const [isLoaded, setIsLoaded] = useState(false);
|
|
const [formData, setFormData] = useState({
|
|
name: '',
|
|
email: '',
|
|
subject: '',
|
|
message: '',
|
|
});
|
|
const router = useRouter();
|
|
const pathname = usePathname();
|
|
|
|
// Update TDK when language changes
|
|
useTDK(currentLang, 'contact');
|
|
|
|
const translations = {
|
|
'zh-CN': {
|
|
nav: {
|
|
home: '首页',
|
|
products: '产品',
|
|
pricing: '价格',
|
|
support: '支持',
|
|
contact: '联系我们',
|
|
},
|
|
contact: {
|
|
title: '联系我们',
|
|
subtitle: '随时与我们取得联系',
|
|
description: '有任何问题或建议？我们很乐意听到您的声音',
|
|
form: {
|
|
name: '姓名',
|
|
email: '邮箱',
|
|
subject: '主题',
|
|
message: '消息',
|
|
send: '发送消息',
|
|
namePlaceholder: '请输入您的姓名',
|
|
emailPlaceholder: '请输入您的邮箱',
|
|
subjectPlaceholder: '请输入主题',
|
|
messagePlaceholder: '请输入您的消息...',
|
|
},
|
|
info: {
|
|
title: '联系信息',
|
|
address: '地址',
|
|
phone: '电话',
|
|
email: '邮箱',
|
|
hours: '工作时间',
|
|
},
|
|
},
|
|
footer: {
|
|
copyright: `© ${new Date().getFullYear()} CloudProxy. 版权所有.`,
|
|
},
|
|
},
|
|
'zh-TW': {
|
|
nav: {
|
|
home: '首頁',
|
|
products: '產品',
|
|
pricing: '價格',
|
|
support: '支援',
|
|
contact: '聯絡我們',
|
|
},
|
|
contact: {
|
|
title: '聯絡我們',
|
|
subtitle: '隨時與我們取得聯絡',
|
|
description: '有任何問題或建議？我們很樂意聽到您的聲音',
|
|
form: {
|
|
name: '姓名',
|
|
email: '郵箱',
|
|
subject: '主題',
|
|
message: '訊息',
|
|
send: '發送訊息',
|
|
namePlaceholder: '請輸入您的姓名',
|
|
emailPlaceholder: '請輸入您的郵箱',
|
|
subjectPlaceholder: '請輸入主題',
|
|
messagePlaceholder: '請輸入您的訊息...',
|
|
},
|
|
info: {
|
|
title: '聯絡資訊',
|
|
address: '地址',
|
|
phone: '電話',
|
|
email: '郵箱',
|
|
hours: '工作時間',
|
|
},
|
|
},
|
|
footer: {
|
|
copyright: `© ${new Date().getFullYear()} CloudProxy. 版權所有.`,
|
|
},
|
|
},
|
|
en: {
|
|
nav: {
|
|
home: 'Home',
|
|
products: 'Products',
|
|
pricing: 'Pricing',
|
|
support: 'Support',
|
|
contact: 'Contact',
|
|
},
|
|
contact: {
|
|
title: 'Contact Us',
|
|
subtitle: 'Get in touch with us',
|
|
description: "Have any questions or suggestions? We'd love to hear from you",
|
|
form: {
|
|
name: 'Name',
|
|
email: 'Email',
|
|
subject: 'Subject',
|
|
message: 'Message',
|
|
send: 'Send Message',
|
|
namePlaceholder: 'Enter your name',
|
|
emailPlaceholder: 'Enter your email',
|
|
subjectPlaceholder: 'Enter subject',
|
|
messagePlaceholder: 'Enter your message...',
|
|
},
|
|
info: {
|
|
title: 'Contact Information',
|
|
address: 'Address',
|
|
phone: 'Phone',
|
|
email: 'Email',
|
|
hours: 'Business Hours',
|
|
},
|
|
},
|
|
footer: {
|
|
copyright: `© ${new Date().getFullYear()} CloudProxy. All rights reserved.`,
|
|
},
|
|
},
|
|
ko: {
|
|
nav: {
|
|
home: '홈',
|
|
products: '제품',
|
|
pricing: '가격',
|
|
support: '지원',
|
|
contact: '연락처',
|
|
},
|
|
contact: {
|
|
title: '연락처',
|
|
subtitle: '언제든지 연락하세요',
|
|
description: '질문이나 제안이 있으신가요? 여러분의 의견을 듣고 싶습니다',
|
|
form: {
|
|
name: '이름',
|
|
email: '이메일',
|
|
subject: '제목',
|
|
message: '메시지',
|
|
send: '메시지 보내기',
|
|
namePlaceholder: '이름을 입력하세요',
|
|
emailPlaceholder: '이메일을 입력하세요',
|
|
subjectPlaceholder: '제목을 입력하세요',
|
|
messagePlaceholder: '메시지를 입력하세요...',
|
|
},
|
|
info: {
|
|
title: '연락처 정보',
|
|
address: '주소',
|
|
phone: '전화',
|
|
email: '이메일',
|
|
hours: '영업시간',
|
|
},
|
|
},
|
|
footer: {
|
|
copyright: `© ${new Date().getFullYear()} CloudProxy. 모든 권리 보유.`,
|
|
},
|
|
},
|
|
ja: {
|
|
nav: {
|
|
home: 'ホーム',
|
|
products: '製品',
|
|
pricing: '価格',
|
|
support: 'サポート',
|
|
contact: 'お問い合わせ',
|
|
},
|
|
contact: {
|
|
title: 'お問い合わせ',
|
|
subtitle: 'いつでもご連絡ください',
|
|
description: 'ご質問やご提案はありませんか？ぜひお聞かせください',
|
|
form: {
|
|
name: '名前',
|
|
email: 'メール',
|
|
subject: '件名',
|
|
message: 'メッセージ',
|
|
send: 'メッセージを送信',
|
|
namePlaceholder: 'お名前を入力してください',
|
|
emailPlaceholder: 'メールアドレスを入力してください',
|
|
subjectPlaceholder: '件名を入力してください',
|
|
messagePlaceholder: 'メッセージを入力してください...',
|
|
},
|
|
info: {
|
|
title: '連絡先情報',
|
|
address: '住所',
|
|
phone: '電話',
|
|
email: 'メール',
|
|
hours: '営業時間',
|
|
},
|
|
},
|
|
footer: {
|
|
copyright: `© ${new Date().getFullYear()} CloudProxy. 全著作権所有.`,
|
|
},
|
|
},
|
|
};
|
|
|
|
const t = translations[currentLang as keyof typeof translations] || translations['zh-CN'];
|
|
|
|
useEffect(() => {
|
|
setIsLoaded(true);
|
|
setCurrentLang(params.locale);
|
|
}, [params.locale]);
|
|
|
|
const handleLanguageChange = (newLang: string) => {
|
|
const currentPath = pathname.replace(`/${currentLang}`, '');
|
|
router.push(`/${newLang}${currentPath}`);
|
|
};
|
|
|
|
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
|
setFormData({
|
|
...formData,
|
|
[e.target.name]: e.target.value,
|
|
});
|
|
};
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
// Handle form submission here
|
|
console.log('Form submitted:', formData);
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-900 text-white overflow-hidden" data-oid="e2g2plg">
|
|
<BackgroundElements data-oid="x0r:.zw" />
|
|
|
|
<Navigation
|
|
t={t}
|
|
currentLang={currentLang}
|
|
onLanguageChange={handleLanguageChange}
|
|
isLoaded={isLoaded}
|
|
data-oid="yje2h5y"
|
|
/>
|
|
|
|
<main className="relative z-10 max-w-7xl mx-auto px-6 py-12" data-oid="-jf-oim">
|
|
{/* Header */}
|
|
<div
|
|
className={`text-center mb-16 transition-all duration-1000 delay-300 ${isLoaded ? 'translate-y-0 opacity-100' : 'translate-y-20 opacity-0'}`}
|
|
data-oid="0r4y9a7"
|
|
>
|
|
<h1 className="text-5xl lg:text-6xl font-bold mb-6" data-oid="m.2gm4l">
|
|
<span
|
|
className="bg-gradient-to-r from-white via-purple-200 to-pink-200 bg-clip-text text-transparent"
|
|
data-oid="prajcaz"
|
|
>
|
|
{t.contact.title}
|
|
</span>
|
|
</h1>
|
|
<p className="text-xl text-purple-300 mb-4" data-oid="3u2uzr6">
|
|
{t.contact.subtitle}
|
|
</p>
|
|
<p className="text-lg text-gray-300 max-w-3xl mx-auto" data-oid="pematyd">
|
|
{t.contact.description}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12" data-oid="wdab9hb">
|
|
{/* Contact Form */}
|
|
<div
|
|
className={`transition-all duration-1000 delay-500 ${isLoaded ? 'translate-x-0 opacity-100' : '-translate-x-20 opacity-0'}`}
|
|
data-oid="dv8s:ac"
|
|
>
|
|
<form
|
|
onSubmit={handleSubmit}
|
|
className="bg-gray-800/50 backdrop-blur-sm p-8 rounded-2xl border border-gray-700"
|
|
data-oid="4cc4x_b"
|
|
>
|
|
<div
|
|
className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"
|
|
data-oid="hh_am2a"
|
|
>
|
|
<div data-oid="8tks16h">
|
|
<label
|
|
className="block text-sm font-medium text-gray-300 mb-2"
|
|
data-oid="m0_foq5"
|
|
>
|
|
{t.contact.form.name}
|
|
</label>
|
|
<input
|
|
type="text"
|
|
name="name"
|
|
value={formData.name}
|
|
onChange={handleInputChange}
|
|
placeholder={t.contact.form.namePlaceholder}
|
|
className="w-full px-4 py-3 bg-gray-700/50 border border-gray-600 rounded-lg focus:outline-none focus:border-purple-500 transition-colors duration-300"
|
|
required
|
|
data-oid="b:xvny1"
|
|
/>
|
|
</div>
|
|
<div data-oid="2rlrjyb">
|
|
<label
|
|
className="block text-sm font-medium text-gray-300 mb-2"
|
|
data-oid="_x1m00."
|
|
>
|
|
{t.contact.form.email}
|
|
</label>
|
|
<input
|
|
type="email"
|
|
name="email"
|
|
value={formData.email}
|
|
onChange={handleInputChange}
|
|
placeholder={t.contact.form.emailPlaceholder}
|
|
className="w-full px-4 py-3 bg-gray-700/50 border border-gray-600 rounded-lg focus:outline-none focus:border-purple-500 transition-colors duration-300"
|
|
required
|
|
data-oid="2o7vy3q"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mb-6" data-oid="3o7fipp">
|
|
<label
|
|
className="block text-sm font-medium text-gray-300 mb-2"
|
|
data-oid="j1-i3dl"
|
|
>
|
|
{t.contact.form.subject}
|
|
</label>
|
|
<input
|
|
type="text"
|
|
name="subject"
|
|
value={formData.subject}
|
|
onChange={handleInputChange}
|
|
placeholder={t.contact.form.subjectPlaceholder}
|
|
className="w-full px-4 py-3 bg-gray-700/50 border border-gray-600 rounded-lg focus:outline-none focus:border-purple-500 transition-colors duration-300"
|
|
required
|
|
data-oid="aksv1l0"
|
|
/>
|
|
</div>
|
|
|
|
<div className="mb-6" data-oid="vj4r0v2">
|
|
<label
|
|
className="block text-sm font-medium text-gray-300 mb-2"
|
|
data-oid="9h.geih"
|
|
>
|
|
{t.contact.form.message}
|
|
</label>
|
|
<textarea
|
|
name="message"
|
|
value={formData.message}
|
|
onChange={handleInputChange}
|
|
placeholder={t.contact.form.messagePlaceholder}
|
|
rows={6}
|
|
className="w-full px-4 py-3 bg-gray-700/50 border border-gray-600 rounded-lg focus:outline-none focus:border-purple-500 transition-colors duration-300 resize-none"
|
|
required
|
|
data-oid="_bqls44"
|
|
></textarea>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
className="w-full px-6 py-3 bg-gradient-to-r from-purple-600 to-pink-600 rounded-lg font-semibold hover:from-purple-700 hover:to-pink-700 transition-all duration-300 transform hover:scale-105"
|
|
data-oid="v1h8.8x"
|
|
>
|
|
{t.contact.form.send}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
{/* Contact Information */}
|
|
<div
|
|
className={`transition-all duration-1000 delay-700 ${isLoaded ? 'translate-x-0 opacity-100' : 'translate-x-20 opacity-0'}`}
|
|
data-oid="0ewm0hn"
|
|
>
|
|
<h2
|
|
className="text-3xl font-bold mb-8 bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent"
|
|
data-oid="zi0xqmk"
|
|
>
|
|
{t.contact.info.title}
|
|
</h2>
|
|
<div className="space-y-6" data-oid="ob0sw2h">
|
|
{[
|
|
{
|
|
title: t.contact.info.address,
|
|
icon: (
|
|
<svg
|
|
className="w-6 h-6 text-purple-400"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
data-oid="bb.g2rm"
|
|
>
|
|
<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"
|
|
data-oid=":4:ylr9"
|
|
/>
|
|
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
|
|
data-oid="n80pg4t"
|
|
/>
|
|
</svg>
|
|
),
|
|
|
|
content: '123 Cloud Street, Tech City, TC 12345',
|
|
},
|
|
{
|
|
title: t.contact.info.phone,
|
|
icon: (
|
|
<svg
|
|
className="w-6 h-6 text-purple-400"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
data-oid="2v:ut:g"
|
|
>
|
|
<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"
|
|
data-oid="p3clg87"
|
|
/>
|
|
</svg>
|
|
),
|
|
|
|
content: '+1 (555) 123-4567',
|
|
},
|
|
{
|
|
title: t.contact.info.email,
|
|
icon: (
|
|
<svg
|
|
className="w-6 h-6 text-purple-400"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
data-oid="bi1w.q1"
|
|
>
|
|
<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"
|
|
data-oid="2118m5a"
|
|
/>
|
|
</svg>
|
|
),
|
|
|
|
content: 'contact@cloudproxy.com',
|
|
},
|
|
{
|
|
title: t.contact.info.hours,
|
|
icon: (
|
|
<svg
|
|
className="w-6 h-6 text-purple-400"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
data-oid="feq06:n"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
|
|
data-oid="p.0i:j2"
|
|
/>
|
|
</svg>
|
|
),
|
|
|
|
content: 'Mon - Fri: 9:00 AM - 6:00 PM',
|
|
},
|
|
].map((info, index) => (
|
|
<div
|
|
key={index}
|
|
className="bg-gray-800/50 backdrop-blur-sm p-6 rounded-xl border border-gray-700"
|
|
data-oid="vncfoiq"
|
|
>
|
|
<div className="flex items-start space-x-4" data-oid="oaa2spe">
|
|
<div
|
|
className="flex-shrink-0 w-12 h-12 bg-purple-500/20 rounded-lg flex items-center justify-center"
|
|
data-oid="rivomz7"
|
|
>
|
|
{info.icon}
|
|
</div>
|
|
<div data-oid="nmnaut9">
|
|
<h3
|
|
className="text-lg font-semibold text-white mb-2"
|
|
data-oid="i5od13."
|
|
>
|
|
{info.title}
|
|
</h3>
|
|
<p className="text-gray-300" data-oid="i5t:oeh">
|
|
{info.content}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<Footer t={t} data-oid="b6s6ap1" />
|
|
</div>
|
|
);
|
|
}
|