432 lines
18 KiB
TypeScript
432 lines
18 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 {
|
||
Book,
|
||
HelpCircle,
|
||
Activity,
|
||
GraduationCap,
|
||
Users,
|
||
Phone,
|
||
Mail,
|
||
MessageCircle,
|
||
} from 'lucide-react';
|
||
|
||
export default function SupportPage() {
|
||
const [currentLang, setCurrentLang] = useState<'zh' | 'zh-tw' | 'en'>('zh');
|
||
|
||
const translations = {
|
||
zh: {
|
||
title: '技术支持 - CloudPro 云服务器代理商',
|
||
description:
|
||
'提供全方位的技术支持服务，包括技术文档、帮助中心、服务状态、培训认证、社区论坛等。',
|
||
keywords: '技术支持,帮助中心,技术文档,培训认证,社区论坛,客服支持',
|
||
nav: {
|
||
home: '首页',
|
||
products: '产品',
|
||
solutions: '解决方案',
|
||
support: '支持',
|
||
contact: '联系我们',
|
||
},
|
||
hero: {
|
||
title: '全方位技术支持服务',
|
||
subtitle: '7x24小时专业技术支持',
|
||
description: '我们提供完善的技术支持体系，确保您的云服务稳定运行',
|
||
},
|
||
support: [
|
||
{
|
||
id: 'docs',
|
||
name: '技术文档',
|
||
description: '详细的产品文档和API参考，帮助您快速上手',
|
||
features: ['产品使用指南', 'API接口文档', '最佳实践', '故障排除'],
|
||
icon: Book,
|
||
},
|
||
{
|
||
id: 'help',
|
||
name: '帮助中心',
|
||
description: '常见问题解答和操作指南',
|
||
features: ['常见问题FAQ', '操作视频教程', '配置示例', '问题诊断工具'],
|
||
icon: HelpCircle,
|
||
},
|
||
{
|
||
id: 'status',
|
||
name: '服务状态',
|
||
description: '实时监控各项服务的运行状态',
|
||
features: ['服务可用性监控', '故障通知', '维护公告', '性能指标'],
|
||
icon: Activity,
|
||
},
|
||
{
|
||
id: 'training',
|
||
name: '培训认证',
|
||
description: '专业的云计算培训和认证课程',
|
||
features: ['在线培训课程', '认证考试', '实验环境', '学习路径'],
|
||
icon: GraduationCap,
|
||
},
|
||
{
|
||
id: 'community',
|
||
name: '社区论坛',
|
||
description: '与其他用户和专家交流经验',
|
||
features: ['技术讨论', '经验分享', '专家答疑', '用户案例'],
|
||
icon: Users,
|
||
},
|
||
],
|
||
|
||
contact: {
|
||
title: '联系我们',
|
||
subtitle: '多种方式获得技术支持',
|
||
methods: [
|
||
{
|
||
name: '电话支持',
|
||
description: '7x24小时技术热线',
|
||
contact: '+86 400-123-4567',
|
||
icon: Phone,
|
||
},
|
||
{
|
||
name: '邮件支持',
|
||
description: '技术问题邮件咨询',
|
||
contact: 'support@cloudpro.com',
|
||
icon: Mail,
|
||
},
|
||
{
|
||
name: '在线客服',
|
||
description: '实时在线技术支持',
|
||
contact: '点击开始对话',
|
||
icon: MessageCircle,
|
||
},
|
||
],
|
||
},
|
||
},
|
||
'zh-tw': {
|
||
title: '技術支援 - CloudPro 雲伺服器代理商',
|
||
description:
|
||
'提供全方位的技術支援服務，包括技術文件、幫助中心、服務狀態、培訓認證、社群論壇等。',
|
||
keywords: '技術支援,幫助中心,技術文件,培訓認證,社群論壇,客服支援',
|
||
nav: {
|
||
home: '首頁',
|
||
products: '產品',
|
||
solutions: '解決方案',
|
||
support: '支援',
|
||
contact: '聯絡我們',
|
||
},
|
||
hero: {
|
||
title: '全方位技術支援服務',
|
||
subtitle: '7x24小時專業技術支援',
|
||
description: '我們提供完善的技術支援體系，確保您的雲服務穩定運行',
|
||
},
|
||
support: [
|
||
{
|
||
id: 'docs',
|
||
name: '技術文件',
|
||
description: '詳細的產品文件和API參考，幫助您快速上手',
|
||
features: ['產品使用指南', 'API介面文件', '最佳實踐', '故障排除'],
|
||
icon: Book,
|
||
},
|
||
{
|
||
id: 'help',
|
||
name: '幫助中心',
|
||
description: '常見問題解答和操作指南',
|
||
features: ['常見問題FAQ', '操作影片教學', '配置範例', '問題診斷工具'],
|
||
icon: HelpCircle,
|
||
},
|
||
{
|
||
id: 'status',
|
||
name: '服務狀態',
|
||
description: '即時監控各項服務的運行狀態',
|
||
features: ['服務可用性監控', '故障通知', '維護公告', '效能指標'],
|
||
icon: Activity,
|
||
},
|
||
{
|
||
id: 'training',
|
||
name: '培訓認證',
|
||
description: '專業的雲端運算培訓和認證課程',
|
||
features: ['線上培訓課程', '認證考試', '實驗環境', '學習路徑'],
|
||
icon: GraduationCap,
|
||
},
|
||
{
|
||
id: 'community',
|
||
name: '社群論壇',
|
||
description: '與其他用戶和專家交流經驗',
|
||
features: ['技術討論', '經驗分享', '專家答疑', '用戶案例'],
|
||
icon: Users,
|
||
},
|
||
],
|
||
|
||
contact: {
|
||
title: '聯絡我們',
|
||
subtitle: '多種方式獲得技術支援',
|
||
methods: [
|
||
{
|
||
name: '電話支援',
|
||
description: '7x24小時技術熱線',
|
||
contact: '+86 400-123-4567',
|
||
icon: Phone,
|
||
},
|
||
{
|
||
name: '郵件支援',
|
||
description: '技術問題郵件諮詢',
|
||
contact: 'support@cloudpro.com',
|
||
icon: Mail,
|
||
},
|
||
{
|
||
name: '線上客服',
|
||
description: '即時線上技術支援',
|
||
contact: '點擊開始對話',
|
||
icon: MessageCircle,
|
||
},
|
||
],
|
||
},
|
||
},
|
||
en: {
|
||
title: 'Technical Support - CloudPro Cloud Server Reseller',
|
||
description:
|
||
'Comprehensive technical support services including documentation, help center, service status, training certification, community forum and more.',
|
||
keywords:
|
||
'technical support,help center,documentation,training certification,community forum,customer support',
|
||
nav: {
|
||
home: 'Home',
|
||
products: 'Products',
|
||
solutions: 'Solutions',
|
||
support: 'Support',
|
||
contact: 'Contact',
|
||
},
|
||
hero: {
|
||
title: 'Comprehensive Technical Support',
|
||
subtitle: '7x24 Professional Technical Support',
|
||
description:
|
||
'We provide a complete technical support system to ensure your cloud services run stably',
|
||
},
|
||
support: [
|
||
{
|
||
id: 'docs',
|
||
name: 'Documentation',
|
||
description:
|
||
'Detailed product documentation and API references to help you get started quickly',
|
||
features: [
|
||
'Product User Guide',
|
||
'API Documentation',
|
||
'Best Practices',
|
||
'Troubleshooting',
|
||
],
|
||
|
||
icon: Book,
|
||
},
|
||
{
|
||
id: 'help',
|
||
name: 'Help Center',
|
||
description: 'Frequently asked questions and operation guides',
|
||
features: [
|
||
'FAQ',
|
||
'Video Tutorials',
|
||
'Configuration Examples',
|
||
'Diagnostic Tools',
|
||
],
|
||
|
||
icon: HelpCircle,
|
||
},
|
||
{
|
||
id: 'status',
|
||
name: 'Service Status',
|
||
description: 'Real-time monitoring of service operational status',
|
||
features: [
|
||
'Service Availability Monitoring',
|
||
'Incident Notifications',
|
||
'Maintenance Announcements',
|
||
'Performance Metrics',
|
||
],
|
||
|
||
icon: Activity,
|
||
},
|
||
{
|
||
id: 'training',
|
||
name: 'Training & Certification',
|
||
description: 'Professional cloud computing training and certification courses',
|
||
features: [
|
||
'Online Training Courses',
|
||
'Certification Exams',
|
||
'Lab Environment',
|
||
'Learning Paths',
|
||
],
|
||
|
||
icon: GraduationCap,
|
||
},
|
||
{
|
||
id: 'community',
|
||
name: 'Community Forum',
|
||
description: 'Exchange experiences with other users and experts',
|
||
features: [
|
||
'Technical Discussions',
|
||
'Experience Sharing',
|
||
'Expert Q&A',
|
||
'User Cases',
|
||
],
|
||
|
||
icon: Users,
|
||
},
|
||
],
|
||
|
||
contact: {
|
||
title: 'Contact Us',
|
||
subtitle: 'Multiple ways to get technical support',
|
||
methods: [
|
||
{
|
||
name: 'Phone Support',
|
||
description: '7x24 Technical Hotline',
|
||
contact: '+86 400-123-4567',
|
||
icon: Phone,
|
||
},
|
||
{
|
||
name: 'Email Support',
|
||
description: 'Technical inquiry via email',
|
||
contact: 'support@cloudpro.com',
|
||
icon: Mail,
|
||
},
|
||
{
|
||
name: 'Live Chat',
|
||
description: 'Real-time online technical support',
|
||
contact: 'Click to start chat',
|
||
icon: MessageCircle,
|
||
},
|
||
],
|
||
},
|
||
},
|
||
};
|
||
|
||
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');
|
||
}
|
||
}, []);
|
||
|
||
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>
|
||
|
||
{/* Support Services */}
|
||
<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 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||
{t.support.map((service) => {
|
||
const IconComponent = service.icon;
|
||
return (
|
||
<div
|
||
key={service.id}
|
||
className="bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 border border-amber-200"
|
||
>
|
||
<div className="p-8">
|
||
<div className="flex items-center mb-6">
|
||
<div className="w-12 h-12 bg-gradient-to-r from-amber-500 to-yellow-500 rounded-lg flex items-center justify-center mr-4">
|
||
<IconComponent className="w-6 h-6 text-white" />
|
||
</div>
|
||
<h3 className="text-xl font-semibold text-amber-900">
|
||
{service.name}
|
||
</h3>
|
||
</div>
|
||
|
||
<p className="text-amber-700 mb-6 leading-relaxed">
|
||
{service.description}
|
||
</p>
|
||
|
||
<div className="mb-6">
|
||
<ul className="space-y-2">
|
||
{service.features.map((feature, index) => (
|
||
<li
|
||
key={index}
|
||
className="flex items-center text-amber-700"
|
||
>
|
||
<div className="w-2 h-2 bg-yellow-500 rounded-full mr-3" />
|
||
|
||
{feature}
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
|
||
<button className="bg-gradient-to-r from-amber-500 to-yellow-500 text-white px-6 py-2 rounded-lg font-semibold hover:from-amber-600 hover:to-yellow-600 transition-all duration-200 w-full">
|
||
{currentLang === 'zh'
|
||
? '访问'
|
||
: currentLang === 'zh-tw'
|
||
? '存取'
|
||
: 'Access'}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Contact Section */}
|
||
<section className="py-20 bg-white">
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div className="text-center mb-16">
|
||
<h2 className="text-3xl md:text-4xl font-bold text-amber-900 mb-4">
|
||
{t.contact.title}
|
||
</h2>
|
||
<p className="text-xl text-amber-700">{t.contact.subtitle}</p>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||
{t.contact.methods.map((method, index) => {
|
||
const IconComponent = method.icon;
|
||
return (
|
||
<div
|
||
key={index}
|
||
className="text-center p-8 bg-gradient-to-br from-amber-50 to-yellow-50 rounded-xl border border-amber-200 hover:shadow-lg transition-all duration-300"
|
||
>
|
||
<div className="w-16 h-16 bg-gradient-to-r from-amber-500 to-yellow-500 rounded-full flex items-center justify-center mx-auto mb-6">
|
||
<IconComponent className="w-8 h-8 text-white" />
|
||
</div>
|
||
<h3 className="text-xl font-semibold text-amber-900 mb-3">
|
||
{method.name}
|
||
</h3>
|
||
<p className="text-amber-700 mb-4">{method.description}</p>
|
||
<div className="text-lg font-semibold text-amber-600">
|
||
{method.contact}
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<Footer currentLang={currentLang} translations={translations} />
|
||
</div>
|
||
);
|
||
}
|