432 lines
20 KiB
TypeScript
432 lines
20 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 { Building, Shield, Cloud, Container, Database, Network } from 'lucide-react';
|
|||
|
|
|
|||
|
|
export default function SolutionsPage() {
|
|||
|
|
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: '为不同行业和场景量身定制',
|
|||
|
|
description: '基于丰富的云服务产品，为企业提供完整的数字化转型解决方案',
|
|||
|
|
},
|
|||
|
|
solutions: [
|
|||
|
|
{
|
|||
|
|
id: 'enterprise',
|
|||
|
|
name: '企业上云',
|
|||
|
|
description: '帮助传统企业平滑迁移到云端，实现数字化转型',
|
|||
|
|
benefits: ['降低IT成本', '提升业务敏捷性', '增强数据安全', '简化运维管理'],
|
|||
|
|
scenarios: ['传统IT架构升级', '新业务快速部署', '成本优化', '弹性扩展'],
|
|||
|
|
icon: Building,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 'backup',
|
|||
|
|
name: '数据备份',
|
|||
|
|
description: '全面的数据保护方案，确保业务数据安全可靠',
|
|||
|
|
benefits: ['自动化备份', '多地容灾', '快速恢复', '成本可控'],
|
|||
|
|
scenarios: ['数据库备份', '文件系统备份', '应用备份', '跨地域备份'],
|
|||
|
|
icon: Database,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 'recovery',
|
|||
|
|
name: '灾难恢复',
|
|||
|
|
description: '构建完善的灾难恢复体系，保障业务连续性',
|
|||
|
|
benefits: ['RTO/RPO保障', '自动故障切换', '定期演练', '7x24监控'],
|
|||
|
|
scenarios: ['同城灾备', '异地灾备', '两地三中心', '云端灾备'],
|
|||
|
|
icon: Shield,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 'hybrid',
|
|||
|
|
name: '混合云',
|
|||
|
|
description: '融合公有云和私有云优势，构建灵活的IT架构',
|
|||
|
|
benefits: ['资源优化配置', '数据安全可控', '成本效益最优', '平滑扩展'],
|
|||
|
|
scenarios: ['核心系统私有化', '弹性业务上云', '数据分级存储', '统一管理'],
|
|||
|
|
icon: Cloud,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 'container',
|
|||
|
|
name: '容器服务',
|
|||
|
|
description: '基于Kubernetes的容器化应用部署和管理',
|
|||
|
|
benefits: ['快速部署', '弹性伸缩', '资源高效利用', 'DevOps集成'],
|
|||
|
|
scenarios: ['微服务架构', 'CI/CD流水线', '应用现代化', '多环境管理'],
|
|||
|
|
icon: Container,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 'network',
|
|||
|
|
name: '网络安全',
|
|||
|
|
description: '全方位的网络安全防护，保障云上业务安全',
|
|||
|
|
benefits: ['DDoS防护', 'Web应用防火墙', '数据加密', '访问控制'],
|
|||
|
|
scenarios: ['网站防护', 'API安全', '数据传输加密', '身份认证'],
|
|||
|
|
icon: Network,
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
'zh-tw': {
|
|||
|
|
title: '解決方案 - CloudPro 雲伺服器代理商',
|
|||
|
|
description:
|
|||
|
|
'為不同行業和場景提供專業的雲端運算解決方案，包括企業上雲、資料備份、災難恢復、混合雲等。',
|
|||
|
|
keywords: '企業上雲,資料備份,災難恢復,混合雲,容器服務,雲端運算解決方案',
|
|||
|
|
nav: {
|
|||
|
|
home: '首頁',
|
|||
|
|
products: '產品',
|
|||
|
|
solutions: '解決方案',
|
|||
|
|
support: '支援',
|
|||
|
|
contact: '聯絡我們',
|
|||
|
|
},
|
|||
|
|
hero: {
|
|||
|
|
title: '專業的雲端運算解決方案',
|
|||
|
|
subtitle: '為不同行業和場景量身定制',
|
|||
|
|
description: '基於豐富的雲服務產品，為企業提供完整的數位化轉型解決方案',
|
|||
|
|
},
|
|||
|
|
solutions: [
|
|||
|
|
{
|
|||
|
|
id: 'enterprise',
|
|||
|
|
name: '企業上雲',
|
|||
|
|
description: '幫助傳統企業平滑遷移到雲端，實現數位化轉型',
|
|||
|
|
benefits: ['降低IT成本', '提升業務敏捷性', '增強資料安全', '簡化運維管理'],
|
|||
|
|
scenarios: ['傳統IT架構升級', '新業務快速部署', '成本優化', '彈性擴展'],
|
|||
|
|
icon: Building,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 'backup',
|
|||
|
|
name: '資料備份',
|
|||
|
|
description: '全面的資料保護方案，確保業務資料安全可靠',
|
|||
|
|
benefits: ['自動化備份', '多地容災', '快速恢復', '成本可控'],
|
|||
|
|
scenarios: ['資料庫備份', '檔案系統備份', '應用備份', '跨地域備份'],
|
|||
|
|
icon: Database,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 'recovery',
|
|||
|
|
name: '災難恢復',
|
|||
|
|
description: '構建完善的災難恢復體系，保障業務連續性',
|
|||
|
|
benefits: ['RTO/RPO保障', '自動故障切換', '定期演練', '7x24監控'],
|
|||
|
|
scenarios: ['同城災備', '異地災備', '兩地三中心', '雲端災備'],
|
|||
|
|
icon: Shield,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 'hybrid',
|
|||
|
|
name: '混合雲',
|
|||
|
|
description: '融合公有雲和私有雲優勢，構建靈活的IT架構',
|
|||
|
|
benefits: ['資源優化配置', '資料安全可控', '成本效益最優', '平滑擴展'],
|
|||
|
|
scenarios: ['核心系統私有化', '彈性業務上雲', '資料分級儲存', '統一管理'],
|
|||
|
|
icon: Cloud,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 'container',
|
|||
|
|
name: '容器服務',
|
|||
|
|
description: '基於Kubernetes的容器化應用部署和管理',
|
|||
|
|
benefits: ['快速部署', '彈性伸縮', '資源高效利用', 'DevOps整合'],
|
|||
|
|
scenarios: ['微服務架構', 'CI/CD流水線', '應用現代化', '多環境管理'],
|
|||
|
|
icon: Container,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 'network',
|
|||
|
|
name: '網路安全',
|
|||
|
|
description: '全方位的網路安全防護，保障雲上業務安全',
|
|||
|
|
benefits: ['DDoS防護', 'Web應用防火牆', '資料加密', '存取控制'],
|
|||
|
|
scenarios: ['網站防護', 'API安全', '資料傳輸加密', '身份認證'],
|
|||
|
|
icon: Network,
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
en: {
|
|||
|
|
title: 'Solutions - CloudPro Cloud Server Reseller',
|
|||
|
|
description:
|
|||
|
|
'Professional cloud computing solutions for different industries and scenarios, including enterprise cloud migration, data backup, disaster recovery, hybrid cloud and more.',
|
|||
|
|
keywords:
|
|||
|
|
'enterprise cloud,data backup,disaster recovery,hybrid cloud,container service,cloud computing solutions',
|
|||
|
|
nav: {
|
|||
|
|
home: 'Home',
|
|||
|
|
products: 'Products',
|
|||
|
|
solutions: 'Solutions',
|
|||
|
|
support: 'Support',
|
|||
|
|
contact: 'Contact',
|
|||
|
|
},
|
|||
|
|
hero: {
|
|||
|
|
title: 'Professional Cloud Computing Solutions',
|
|||
|
|
subtitle: 'Tailored for Different Industries and Scenarios',
|
|||
|
|
description:
|
|||
|
|
'Based on rich cloud service products, we provide complete digital transformation solutions for enterprises',
|
|||
|
|
},
|
|||
|
|
solutions: [
|
|||
|
|
{
|
|||
|
|
id: 'enterprise',
|
|||
|
|
name: 'Enterprise Cloud',
|
|||
|
|
description:
|
|||
|
|
'Help traditional enterprises smoothly migrate to the cloud for digital transformation',
|
|||
|
|
benefits: [
|
|||
|
|
'Reduce IT Costs',
|
|||
|
|
'Improve Business Agility',
|
|||
|
|
'Enhance Data Security',
|
|||
|
|
'Simplify Operations',
|
|||
|
|
],
|
|||
|
|
|
|||
|
|
scenarios: [
|
|||
|
|
'Legacy IT Upgrade',
|
|||
|
|
'Rapid Business Deployment',
|
|||
|
|
'Cost Optimization',
|
|||
|
|
'Elastic Scaling',
|
|||
|
|
],
|
|||
|
|
|
|||
|
|
icon: Building,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 'backup',
|
|||
|
|
name: 'Data Backup',
|
|||
|
|
description:
|
|||
|
|
'Comprehensive data protection solutions ensuring business data security',
|
|||
|
|
benefits: [
|
|||
|
|
'Automated Backup',
|
|||
|
|
'Multi-site Disaster Recovery',
|
|||
|
|
'Fast Recovery',
|
|||
|
|
'Cost Control',
|
|||
|
|
],
|
|||
|
|
|
|||
|
|
scenarios: [
|
|||
|
|
'Database Backup',
|
|||
|
|
'File System Backup',
|
|||
|
|
'Application Backup',
|
|||
|
|
'Cross-region Backup',
|
|||
|
|
],
|
|||
|
|
|
|||
|
|
icon: Database,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 'recovery',
|
|||
|
|
name: 'Disaster Recovery',
|
|||
|
|
description:
|
|||
|
|
'Build comprehensive disaster recovery systems to ensure business continuity',
|
|||
|
|
benefits: [
|
|||
|
|
'RTO/RPO Guarantee',
|
|||
|
|
'Auto Failover',
|
|||
|
|
'Regular Drills',
|
|||
|
|
'7x24 Monitoring',
|
|||
|
|
],
|
|||
|
|
|
|||
|
|
scenarios: [
|
|||
|
|
'Local Disaster Recovery',
|
|||
|
|
'Remote Disaster Recovery',
|
|||
|
|
'Multi-site Setup',
|
|||
|
|
'Cloud Disaster Recovery',
|
|||
|
|
],
|
|||
|
|
|
|||
|
|
icon: Shield,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 'hybrid',
|
|||
|
|
name: 'Hybrid Cloud',
|
|||
|
|
description:
|
|||
|
|
'Combine public and private cloud advantages for flexible IT architecture',
|
|||
|
|
benefits: [
|
|||
|
|
'Optimized Resource Allocation',
|
|||
|
|
'Controlled Data Security',
|
|||
|
|
'Cost Effectiveness',
|
|||
|
|
'Smooth Scaling',
|
|||
|
|
],
|
|||
|
|
|
|||
|
|
scenarios: [
|
|||
|
|
'Core System Privatization',
|
|||
|
|
'Elastic Business Cloud',
|
|||
|
|
'Tiered Data Storage',
|
|||
|
|
'Unified Management',
|
|||
|
|
],
|
|||
|
|
|
|||
|
|
icon: Cloud,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 'container',
|
|||
|
|
name: 'Container Service',
|
|||
|
|
description:
|
|||
|
|
'Kubernetes-based containerized application deployment and management',
|
|||
|
|
benefits: [
|
|||
|
|
'Rapid Deployment',
|
|||
|
|
'Elastic Scaling',
|
|||
|
|
'Efficient Resource Utilization',
|
|||
|
|
'DevOps Integration',
|
|||
|
|
],
|
|||
|
|
|
|||
|
|
scenarios: [
|
|||
|
|
'Microservices Architecture',
|
|||
|
|
'CI/CD Pipeline',
|
|||
|
|
'Application Modernization',
|
|||
|
|
'Multi-environment Management',
|
|||
|
|
],
|
|||
|
|
|
|||
|
|
icon: Container,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 'network',
|
|||
|
|
name: 'Network Security',
|
|||
|
|
description:
|
|||
|
|
'Comprehensive network security protection for cloud business security',
|
|||
|
|
benefits: [
|
|||
|
|
'DDoS Protection',
|
|||
|
|
'Web Application Firewall',
|
|||
|
|
'Data Encryption',
|
|||
|
|
'Access Control',
|
|||
|
|
],
|
|||
|
|
|
|||
|
|
scenarios: [
|
|||
|
|
'Website Protection',
|
|||
|
|
'API Security',
|
|||
|
|
'Data Transmission Encryption',
|
|||
|
|
'Identity Authentication',
|
|||
|
|
],
|
|||
|
|
|
|||
|
|
icon: Network,
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
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>
|
|||
|
|
|
|||
|
|
{/* Solutions Grid */}
|
|||
|
|
<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-8">
|
|||
|
|
{t.solutions.map((solution) => {
|
|||
|
|
const IconComponent = solution.icon;
|
|||
|
|
return (
|
|||
|
|
<div
|
|||
|
|
key={solution.id}
|
|||
|
|
className="bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 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-2xl font-semibold text-amber-900">
|
|||
|
|
{solution.name}
|
|||
|
|
</h3>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<p className="text-amber-700 mb-6 leading-relaxed text-lg">
|
|||
|
|
{solution.description}
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|||
|
|
<div>
|
|||
|
|
<h4 className="font-semibold text-amber-900 mb-3">
|
|||
|
|
{currentLang === 'zh'
|
|||
|
|
? '核心优势:'
|
|||
|
|
: currentLang === 'zh-tw'
|
|||
|
|
? '核心優勢:'
|
|||
|
|
: 'Key Benefits:'}
|
|||
|
|
</h4>
|
|||
|
|
<ul className="space-y-2">
|
|||
|
|
{solution.benefits.map((benefit, index) => (
|
|||
|
|
<li
|
|||
|
|
key={index}
|
|||
|
|
className="flex items-center text-amber-700"
|
|||
|
|
>
|
|||
|
|
<div className="w-2 h-2 bg-green-500 rounded-full mr-3" />
|
|||
|
|
|
|||
|
|
{benefit}
|
|||
|
|
</li>
|
|||
|
|
))}
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<h4 className="font-semibold text-amber-900 mb-3">
|
|||
|
|
{currentLang === 'zh'
|
|||
|
|
? '适用场景:'
|
|||
|
|
: currentLang === 'zh-tw'
|
|||
|
|
? '適用場景:'
|
|||
|
|
: 'Use Cases:'}
|
|||
|
|
</h4>
|
|||
|
|
<ul className="space-y-2">
|
|||
|
|
{solution.scenarios.map((scenario, index) => (
|
|||
|
|
<li
|
|||
|
|
key={index}
|
|||
|
|
className="flex items-center text-amber-700"
|
|||
|
|
>
|
|||
|
|
<div className="w-2 h-2 bg-blue-500 rounded-full mr-3" />
|
|||
|
|
|
|||
|
|
{scenario}
|
|||
|
|
</li>
|
|||
|
|
))}
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="mt-6 pt-6 border-t border-amber-200">
|
|||
|
|
<button className="bg-gradient-to-r from-amber-500 to-yellow-500 text-white px-6 py-3 rounded-lg font-semibold hover:from-amber-600 hover:to-yellow-600 transition-all duration-200 w-full">
|
|||
|
|
{currentLang === 'zh'
|
|||
|
|
? '了解详情'
|
|||
|
|
: currentLang === 'zh-tw'
|
|||
|
|
? '了解詳情'
|
|||
|
|
: 'Learn More'}
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
})}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<Footer currentLang={currentLang} translations={translations} />
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|