446 lines
21 KiB
TypeScript
446 lines
21 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 SupportPage({ params }: PageProps) {
|
||
const [currentLang, setCurrentLang] = useState(params.locale);
|
||
const [isLoaded, setIsLoaded] = useState(false);
|
||
const router = useRouter();
|
||
const pathname = usePathname();
|
||
|
||
// Update TDK when language changes
|
||
useTDK(currentLang, 'support');
|
||
|
||
const translations = {
|
||
'zh-CN': {
|
||
nav: {
|
||
home: '首页',
|
||
products: '产品',
|
||
pricing: '价格',
|
||
support: '支持',
|
||
contact: '联系我们',
|
||
},
|
||
support: {
|
||
title: '技术支持',
|
||
subtitle: '我们随时为您提供帮助',
|
||
description: '无论您遇到什么问题，我们的专业团队都会为您提供及时的技术支持',
|
||
faq: {
|
||
title: '常见问题',
|
||
items: [
|
||
{
|
||
question: '如何开始使用云服务器？',
|
||
answer: '注册账户后，选择适合的套餐，我们会在5分钟内为您部署服务器。',
|
||
},
|
||
{
|
||
question: '支持哪些操作系统？',
|
||
answer: '我们支持Ubuntu、CentOS、Debian、Windows Server等主流操作系统。',
|
||
},
|
||
{
|
||
question: '如何备份数据？',
|
||
answer: '我们提供自动备份服务，您也可以手动创建快照备份。',
|
||
},
|
||
],
|
||
},
|
||
contact: {
|
||
title: '联系支持',
|
||
email: '邮箱支持',
|
||
phone: '电话支持',
|
||
chat: '在线客服',
|
||
ticket: '提交工单',
|
||
},
|
||
},
|
||
footer: {
|
||
copyright: `© ${new Date().getFullYear()} CloudProxy. 版权所有.`,
|
||
},
|
||
},
|
||
'zh-TW': {
|
||
nav: {
|
||
home: '首頁',
|
||
products: '產品',
|
||
pricing: '價格',
|
||
support: '支援',
|
||
contact: '聯絡我們',
|
||
},
|
||
support: {
|
||
title: '技術支援',
|
||
subtitle: '我們隨時為您提供幫助',
|
||
description: '無論您遇到什麼問題，我們的專業團隊都會為您提供及時的技術支援',
|
||
faq: {
|
||
title: '常見問題',
|
||
items: [
|
||
{
|
||
question: '如何開始使用雲端伺服器？',
|
||
answer: '註冊帳戶後，選擇適合的套餐，我們會在5分鐘內為您部署伺服器。',
|
||
},
|
||
{
|
||
question: '支援哪些作業系統？',
|
||
answer: '我們支援Ubuntu、CentOS、Debian、Windows Server等主流作業系統。',
|
||
},
|
||
{
|
||
question: '如何備份資料？',
|
||
answer: '我們提供自動備份服務，您也可以手動建立快照備份。',
|
||
},
|
||
],
|
||
},
|
||
contact: {
|
||
title: '聯絡支援',
|
||
email: '郵箱支援',
|
||
phone: '電話支援',
|
||
chat: '線上客服',
|
||
ticket: '提交工單',
|
||
},
|
||
},
|
||
footer: {
|
||
copyright: `© ${new Date().getFullYear()} CloudProxy. 版權所有.`,
|
||
},
|
||
},
|
||
en: {
|
||
nav: {
|
||
home: 'Home',
|
||
products: 'Products',
|
||
pricing: 'Pricing',
|
||
support: 'Support',
|
||
contact: 'Contact',
|
||
},
|
||
support: {
|
||
title: 'Technical Support',
|
||
subtitle: "We're here to help you",
|
||
description:
|
||
'Whatever issues you encounter, our professional team will provide timely technical support',
|
||
faq: {
|
||
title: 'Frequently Asked Questions',
|
||
items: [
|
||
{
|
||
question: 'How do I get started with cloud servers?',
|
||
answer: "After registering an account, choose a suitable plan, and we'll deploy your server within 5 minutes.",
|
||
},
|
||
{
|
||
question: 'Which operating systems are supported?',
|
||
answer: 'We support mainstream operating systems including Ubuntu, CentOS, Debian, Windows Server, etc.',
|
||
},
|
||
{
|
||
question: 'How do I backup my data?',
|
||
answer: 'We provide automatic backup services, and you can also manually create snapshot backups.',
|
||
},
|
||
],
|
||
},
|
||
contact: {
|
||
title: 'Contact Support',
|
||
email: 'Email Support',
|
||
phone: 'Phone Support',
|
||
chat: 'Live Chat',
|
||
ticket: 'Submit Ticket',
|
||
},
|
||
},
|
||
footer: {
|
||
copyright: `© ${new Date().getFullYear()} CloudProxy. All rights reserved.`,
|
||
},
|
||
},
|
||
ko: {
|
||
nav: {
|
||
home: '홈',
|
||
products: '제품',
|
||
pricing: '가격',
|
||
support: '지원',
|
||
contact: '연락처',
|
||
},
|
||
support: {
|
||
title: '기술 지원',
|
||
subtitle: '언제든지 도움을 드립니다',
|
||
description: '어떤 문제가 발생하더라도 전문 팀이 신속한 기술 지원을 제공합니다',
|
||
faq: {
|
||
title: '자주 묻는 질문',
|
||
items: [
|
||
{
|
||
question: '클라우드 서버를 어떻게 시작하나요?',
|
||
answer: '계정 등록 후 적합한 플랜을 선택하면 5분 내에 서버를 배포해드립니다.',
|
||
},
|
||
{
|
||
question: '어떤 운영체제를 지원하나요?',
|
||
answer: 'Ubuntu, CentOS, Debian, Windows Server 등 주요 운영체제를 지원합니다.',
|
||
},
|
||
{
|
||
question: '데이터를 어떻게 백업하나요?',
|
||
answer: '자동 백업 서비스를 제공하며, 수동으로 스냅샷 백업을 생성할 수도 있습니다.',
|
||
},
|
||
],
|
||
},
|
||
contact: {
|
||
title: '지원 연락',
|
||
email: '이메일 지원',
|
||
phone: '전화 지원',
|
||
chat: '실시간 채팅',
|
||
ticket: '티켓 제출',
|
||
},
|
||
},
|
||
footer: {
|
||
copyright: `© ${new Date().getFullYear()} CloudProxy. 모든 권리 보유.`,
|
||
},
|
||
},
|
||
ja: {
|
||
nav: {
|
||
home: 'ホーム',
|
||
products: '製品',
|
||
pricing: '価格',
|
||
support: 'サポート',
|
||
contact: 'お問い合わせ',
|
||
},
|
||
support: {
|
||
title: 'テクニカルサポート',
|
||
subtitle: 'いつでもお手伝いします',
|
||
description:
|
||
'どのような問題が発生しても、専門チームが迅速な技術サポートを提供します',
|
||
faq: {
|
||
title: 'よくある質問',
|
||
items: [
|
||
{
|
||
question: 'クラウドサーバーの使用を開始するには？',
|
||
answer: 'アカウント登録後、適切なプランを選択すると、5分以内にサーバーを展開します。',
|
||
},
|
||
{
|
||
question: 'どのオペレーティングシステムがサポートされていますか？',
|
||
answer: 'Ubuntu、CentOS、Debian、Windows Serverなどの主要なオペレーティングシステムをサポートしています。',
|
||
},
|
||
{
|
||
question: 'データをバックアップするには？',
|
||
answer: '自動バックアップサービスを提供しており、手動でスナップショットバックアップを作成することもできます。',
|
||
},
|
||
],
|
||
},
|
||
contact: {
|
||
title: 'サポートに連絡',
|
||
email: 'メールサポート',
|
||
phone: '電話サポート',
|
||
chat: 'ライブチャット',
|
||
ticket: 'チケット提出',
|
||
},
|
||
},
|
||
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}`);
|
||
};
|
||
|
||
return (
|
||
<div className="min-h-screen bg-gray-900 text-white overflow-hidden" data-oid="xriserc">
|
||
<BackgroundElements data-oid="7754l29" />
|
||
|
||
<Navigation
|
||
t={t}
|
||
currentLang={currentLang}
|
||
onLanguageChange={handleLanguageChange}
|
||
isLoaded={isLoaded}
|
||
data-oid=".ueot:j"
|
||
/>
|
||
|
||
<main className="relative z-10 max-w-7xl mx-auto px-6 py-12" data-oid="msfyv6m">
|
||
{/* 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="kw0yeug"
|
||
>
|
||
<h1 className="text-5xl lg:text-6xl font-bold mb-6" data-oid="8651fb7">
|
||
<span
|
||
className="bg-gradient-to-r from-white via-purple-200 to-pink-200 bg-clip-text text-transparent"
|
||
data-oid="1t1us0b"
|
||
>
|
||
{t.support.title}
|
||
</span>
|
||
</h1>
|
||
<p className="text-xl text-purple-300 mb-4" data-oid="97azn5d">
|
||
{t.support.subtitle}
|
||
</p>
|
||
<p className="text-lg text-gray-300 max-w-3xl mx-auto" data-oid="g6na3pj">
|
||
{t.support.description}
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12" data-oid="ebahobw">
|
||
{/* FAQ Section */}
|
||
<div
|
||
className={`transition-all duration-1000 delay-500 ${isLoaded ? 'translate-x-0 opacity-100' : '-translate-x-20 opacity-0'}`}
|
||
data-oid="xz9wsi6"
|
||
>
|
||
<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="rwi-i34"
|
||
>
|
||
{t.support.faq.title}
|
||
</h2>
|
||
<div className="space-y-6" data-oid="ok_ao19">
|
||
{t.support.faq.items.map((item, index) => (
|
||
<div
|
||
key={index}
|
||
className="bg-gray-800/50 backdrop-blur-sm p-6 rounded-xl border border-gray-700 hover:border-purple-500/50 transition-all duration-300"
|
||
data-oid="i.1wvtv"
|
||
>
|
||
<h3
|
||
className="text-lg font-semibold text-white mb-3"
|
||
data-oid=".uip300"
|
||
>
|
||
{item.question}
|
||
</h3>
|
||
<p className="text-gray-300 leading-relaxed" data-oid="mu00inz">
|
||
{item.answer}
|
||
</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Contact Support */}
|
||
<div
|
||
className={`transition-all duration-1000 delay-700 ${isLoaded ? 'translate-x-0 opacity-100' : 'translate-x-20 opacity-0'}`}
|
||
data-oid="u57fs8g"
|
||
>
|
||
<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="fck_y7_"
|
||
>
|
||
{t.support.contact.title}
|
||
</h2>
|
||
<div className="space-y-6" data-oid="3et391e">
|
||
{[
|
||
{
|
||
title: t.support.contact.email,
|
||
icon: (
|
||
<svg
|
||
className="w-8 h-8 text-purple-400 group-hover:text-purple-300 transition-colors duration-300"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
viewBox="0 0 24 24"
|
||
data-oid="aehqj9e"
|
||
>
|
||
<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="mot6dmt"
|
||
/>
|
||
</svg>
|
||
),
|
||
|
||
desc: 'support@cloudproxy.com',
|
||
},
|
||
{
|
||
title: t.support.contact.phone,
|
||
icon: (
|
||
<svg
|
||
className="w-8 h-8 text-green-400 group-hover:text-green-300 transition-colors duration-300"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
viewBox="0 0 24 24"
|
||
data-oid="w6sd_4d"
|
||
>
|
||
<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=":vdfcau"
|
||
/>
|
||
</svg>
|
||
),
|
||
|
||
desc: '+1 (555) 123-4567',
|
||
},
|
||
{
|
||
title: t.support.contact.chat,
|
||
icon: (
|
||
<svg
|
||
className="w-8 h-8 text-blue-400 group-hover:text-blue-300 transition-colors duration-300"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
viewBox="0 0 24 24"
|
||
data-oid="3_.1h6e"
|
||
>
|
||
<path
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
strokeWidth={2}
|
||
d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
|
||
data-oid="zjaeet2"
|
||
/>
|
||
</svg>
|
||
),
|
||
|
||
desc: '24/7 Live Support',
|
||
},
|
||
{
|
||
title: t.support.contact.ticket,
|
||
icon: (
|
||
<svg
|
||
className="w-8 h-8 text-orange-400 group-hover:text-orange-300 transition-colors duration-300"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
viewBox="0 0 24 24"
|
||
data-oid="62z1bdc"
|
||
>
|
||
<path
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
strokeWidth={2}
|
||
d="M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z"
|
||
data-oid=".jnx:32"
|
||
/>
|
||
</svg>
|
||
),
|
||
|
||
desc: 'Submit Support Ticket',
|
||
},
|
||
].map((contact, index) => (
|
||
<div
|
||
key={index}
|
||
className="bg-gray-800/50 backdrop-blur-sm p-6 rounded-xl border border-gray-700 hover:border-purple-500/50 transition-all duration-300 cursor-pointer group"
|
||
data-oid="eyf334c"
|
||
>
|
||
<div className="flex items-center space-x-4" data-oid="cu-n4ae">
|
||
<div className="flex-shrink-0" data-oid="8gjwu3l">
|
||
{contact.icon}
|
||
</div>
|
||
<div data-oid="tgee76w">
|
||
<h3
|
||
className="text-lg font-semibold text-white group-hover:text-purple-300 transition-colors duration-300"
|
||
data-oid=":-f-ynz"
|
||
>
|
||
{contact.title}
|
||
</h3>
|
||
<p className="text-gray-400" data-oid="0f__c9o">
|
||
{contact.desc}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
<Footer t={t} data-oid="a89892o" />
|
||
</div>
|
||
);
|
||
}
|