676 lines
30 KiB
TypeScript
676 lines
30 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 { Server, Cpu, HardDrive, Shield, Zap, Globe, Check, Star } from 'lucide-react';
|
||
|
||
export default function ECSPage() {
|
||
const [currentLang, setCurrentLang] = useState<'zh' | 'zh-tw' | 'en'>('zh');
|
||
const [selectedPlan, setSelectedPlan] = useState('basic');
|
||
|
||
const translations = {
|
||
zh: {
|
||
title: '云服务器 ECS - 弹性计算服务 | CloudPro',
|
||
description:
|
||
'高性能云服务器ECS，提供弹性计算服务，支持多种实例规格，按需付费，助力业务快速发展。99.9%可用性保证。',
|
||
keywords: '云服务器,ECS,弹性计算,虚拟主机,云主机,服务器租用',
|
||
nav: {
|
||
home: '首页',
|
||
products: '产品',
|
||
solutions: '解决方案',
|
||
support: '支持',
|
||
contact: '联系我们',
|
||
},
|
||
hero: {
|
||
title: '云服务器 ECS',
|
||
subtitle: '弹性计算服务',
|
||
description: '高性能、高可靠的弹性计算服务，为您的应用提供安全稳定的计算环境',
|
||
},
|
||
features: [
|
||
{
|
||
icon: Cpu,
|
||
title: '高性能计算',
|
||
description: '采用最新一代Intel/AMD处理器，提供强劲的计算性能',
|
||
},
|
||
{
|
||
icon: HardDrive,
|
||
title: 'SSD高速存储',
|
||
description: '全SSD存储，IOPS高达数万，保证数据读写性能',
|
||
},
|
||
{
|
||
icon: Shield,
|
||
title: '安全防护',
|
||
description: '多层安全防护，DDoS防护，数据加密，保障业务安全',
|
||
},
|
||
{
|
||
icon: Zap,
|
||
title: '弹性扩展',
|
||
description: '支持在线升降配，按需调整资源，灵活应对业务变化',
|
||
},
|
||
{
|
||
icon: Globe,
|
||
title: '全球部署',
|
||
description: '多地域多可用区部署，就近接入，降低网络延迟',
|
||
},
|
||
{
|
||
icon: Server,
|
||
title: '99.9%可用性',
|
||
description: '企业级可用性保证，7x24小时监控，故障快速恢复',
|
||
},
|
||
],
|
||
|
||
plans: [
|
||
{
|
||
id: 'basic',
|
||
name: '基础型',
|
||
popular: false,
|
||
price: '¥99',
|
||
period: '/月',
|
||
specs: {
|
||
cpu: '2核',
|
||
memory: '4GB',
|
||
storage: '40GB SSD',
|
||
bandwidth: '1Mbps',
|
||
traffic: '不限流量',
|
||
},
|
||
features: ['适合个人网站', '小型应用', '开发测试环境', '基础安全防护'],
|
||
},
|
||
{
|
||
id: 'standard',
|
||
name: '标准型',
|
||
popular: true,
|
||
price: '¥299',
|
||
period: '/月',
|
||
specs: {
|
||
cpu: '4核',
|
||
memory: '8GB',
|
||
storage: '80GB SSD',
|
||
bandwidth: '3Mbps',
|
||
traffic: '不限流量',
|
||
},
|
||
features: ['适合中小企业', '电商网站', '企业应用', '高级安全防护', '负载均衡'],
|
||
},
|
||
{
|
||
id: 'premium',
|
||
name: '高级型',
|
||
popular: false,
|
||
price: '¥599',
|
||
period: '/月',
|
||
specs: {
|
||
cpu: '8核',
|
||
memory: '16GB',
|
||
storage: '160GB SSD',
|
||
bandwidth: '5Mbps',
|
||
traffic: '不限流量',
|
||
},
|
||
features: [
|
||
'适合大型企业',
|
||
'高并发应用',
|
||
'数据库服务器',
|
||
'企业级安全',
|
||
'专属技术支持',
|
||
],
|
||
},
|
||
],
|
||
|
||
advantages: {
|
||
title: '为什么选择我们的云服务器',
|
||
items: [
|
||
{
|
||
title: '性价比高',
|
||
description: '相比传统服务器，成本降低30-50%，按需付费更经济',
|
||
},
|
||
{
|
||
title: '部署快速',
|
||
description: '1分钟内完成服务器创建，快速响应业务需求',
|
||
},
|
||
{
|
||
title: '管理简单',
|
||
description: '可视化控制面板，一键操作，降低运维成本',
|
||
},
|
||
{
|
||
title: '技术支持',
|
||
description: '7x24小时专业技术支持，快速解决问题',
|
||
},
|
||
],
|
||
},
|
||
},
|
||
'zh-tw': {
|
||
title: '雲伺服器 ECS - 彈性運算服務 | CloudPro',
|
||
description:
|
||
'高效能雲伺服器ECS，提供彈性運算服務，支援多種實例規格，按需付費，助力業務快速發展。99.9%可用性保證。',
|
||
keywords: '雲伺服器,ECS,彈性運算,虛擬主機,雲主機,伺服器租用',
|
||
nav: {
|
||
home: '首頁',
|
||
products: '產品',
|
||
solutions: '解決方案',
|
||
support: '支援',
|
||
contact: '聯絡我們',
|
||
},
|
||
hero: {
|
||
title: '雲伺服器 ECS',
|
||
subtitle: '彈性運算服務',
|
||
description: '高效能、高可靠的彈性運算服務，為您的應用提供安全穩定的運算環境',
|
||
},
|
||
features: [
|
||
{
|
||
icon: Cpu,
|
||
title: '高效能運算',
|
||
description: '採用最新一代Intel/AMD處理器，提供強勁的運算效能',
|
||
},
|
||
{
|
||
icon: HardDrive,
|
||
title: 'SSD高速儲存',
|
||
description: '全SSD儲存，IOPS高達數萬，保證資料讀寫效能',
|
||
},
|
||
{
|
||
icon: Shield,
|
||
title: '安全防護',
|
||
description: '多層安全防護，DDoS防護，資料加密，保障業務安全',
|
||
},
|
||
{
|
||
icon: Zap,
|
||
title: '彈性擴展',
|
||
description: '支援線上升降配，按需調整資源，靈活應對業務變化',
|
||
},
|
||
{
|
||
icon: Globe,
|
||
title: '全球部署',
|
||
description: '多地域多可用區部署，就近接入，降低網路延遲',
|
||
},
|
||
{
|
||
icon: Server,
|
||
title: '99.9%可用性',
|
||
description: '企業級可用性保證，7x24小時監控，故障快速恢復',
|
||
},
|
||
],
|
||
|
||
plans: [
|
||
{
|
||
id: 'basic',
|
||
name: '基礎型',
|
||
popular: false,
|
||
price: 'NT$2,990',
|
||
period: '/月',
|
||
specs: {
|
||
cpu: '2核',
|
||
memory: '4GB',
|
||
storage: '40GB SSD',
|
||
bandwidth: '1Mbps',
|
||
traffic: '不限流量',
|
||
},
|
||
features: ['適合個人網站', '小型應用', '開發測試環境', '基礎安全防護'],
|
||
},
|
||
{
|
||
id: 'standard',
|
||
name: '標準型',
|
||
popular: true,
|
||
price: 'NT$8,990',
|
||
period: '/月',
|
||
specs: {
|
||
cpu: '4核',
|
||
memory: '8GB',
|
||
storage: '80GB SSD',
|
||
bandwidth: '3Mbps',
|
||
traffic: '不限流量',
|
||
},
|
||
features: ['適合中小企業', '電商網站', '企業應用', '高級安全防護', '負載平衡'],
|
||
},
|
||
{
|
||
id: 'premium',
|
||
name: '高級型',
|
||
popular: false,
|
||
price: 'NT$17,990',
|
||
period: '/月',
|
||
specs: {
|
||
cpu: '8核',
|
||
memory: '16GB',
|
||
storage: '160GB SSD',
|
||
bandwidth: '5Mbps',
|
||
traffic: '不限流量',
|
||
},
|
||
features: [
|
||
'適合大型企業',
|
||
'高併發應用',
|
||
'資料庫伺服器',
|
||
'企業級安全',
|
||
'專屬技術支援',
|
||
],
|
||
},
|
||
],
|
||
|
||
advantages: {
|
||
title: '為什麼選擇我們的雲伺服器',
|
||
items: [
|
||
{
|
||
title: '性價比高',
|
||
description: '相比傳統伺服器，成本降低30-50%，按需付費更經濟',
|
||
},
|
||
{
|
||
title: '部署快速',
|
||
description: '1分鐘內完成伺服器建立，快速回應業務需求',
|
||
},
|
||
{
|
||
title: '管理簡單',
|
||
description: '視覺化控制面板，一鍵操作，降低運維成本',
|
||
},
|
||
{
|
||
title: '技術支援',
|
||
description: '7x24小時專業技術支援，快速解決問題',
|
||
},
|
||
],
|
||
},
|
||
},
|
||
en: {
|
||
title: 'Cloud Server ECS - Elastic Compute Service | CloudPro',
|
||
description:
|
||
'High-performance Cloud Server ECS providing elastic compute service with multiple instance types, pay-as-you-go pricing. 99.9% availability guarantee.',
|
||
keywords:
|
||
'cloud server,ECS,elastic compute,virtual hosting,cloud hosting,server rental',
|
||
nav: {
|
||
home: 'Home',
|
||
products: 'Products',
|
||
solutions: 'Solutions',
|
||
support: 'Support',
|
||
contact: 'Contact',
|
||
},
|
||
hero: {
|
||
title: 'Cloud Server ECS',
|
||
subtitle: 'Elastic Compute Service',
|
||
description:
|
||
'High-performance, highly reliable elastic compute service providing secure and stable computing environment for your applications',
|
||
},
|
||
features: [
|
||
{
|
||
icon: Cpu,
|
||
title: 'High Performance Computing',
|
||
description:
|
||
'Latest generation Intel/AMD processors providing powerful computing performance',
|
||
},
|
||
{
|
||
icon: HardDrive,
|
||
title: 'SSD High-Speed Storage',
|
||
description:
|
||
'Full SSD storage with IOPS up to tens of thousands, ensuring data read/write performance',
|
||
},
|
||
{
|
||
icon: Shield,
|
||
title: 'Security Protection',
|
||
description:
|
||
'Multi-layer security protection, DDoS protection, data encryption for business security',
|
||
},
|
||
{
|
||
icon: Zap,
|
||
title: 'Elastic Scaling',
|
||
description:
|
||
'Support online scaling up/down, adjust resources on demand, flexible response to business changes',
|
||
},
|
||
{
|
||
icon: Globe,
|
||
title: 'Global Deployment',
|
||
description:
|
||
'Multi-region multi-availability zone deployment, nearby access, reduced network latency',
|
||
},
|
||
{
|
||
icon: Server,
|
||
title: '99.9% Availability',
|
||
description:
|
||
'Enterprise-grade availability guarantee, 7x24 monitoring, rapid fault recovery',
|
||
},
|
||
],
|
||
|
||
plans: [
|
||
{
|
||
id: 'basic',
|
||
name: 'Basic',
|
||
popular: false,
|
||
price: '$15',
|
||
period: '/month',
|
||
specs: {
|
||
cpu: '2 Core',
|
||
memory: '4GB',
|
||
storage: '40GB SSD',
|
||
bandwidth: '1Mbps',
|
||
traffic: 'Unlimited',
|
||
},
|
||
features: [
|
||
'Personal websites',
|
||
'Small applications',
|
||
'Development/test environment',
|
||
'Basic security protection',
|
||
],
|
||
},
|
||
{
|
||
id: 'standard',
|
||
name: 'Standard',
|
||
popular: true,
|
||
price: '$45',
|
||
period: '/month',
|
||
specs: {
|
||
cpu: '4 Core',
|
||
memory: '8GB',
|
||
storage: '80GB SSD',
|
||
bandwidth: '3Mbps',
|
||
traffic: 'Unlimited',
|
||
},
|
||
features: [
|
||
'SME businesses',
|
||
'E-commerce websites',
|
||
'Enterprise applications',
|
||
'Advanced security protection',
|
||
'Load balancing',
|
||
],
|
||
},
|
||
{
|
||
id: 'premium',
|
||
name: 'Premium',
|
||
popular: false,
|
||
price: '$89',
|
||
period: '/month',
|
||
specs: {
|
||
cpu: '8 Core',
|
||
memory: '16GB',
|
||
storage: '160GB SSD',
|
||
bandwidth: '5Mbps',
|
||
traffic: 'Unlimited',
|
||
},
|
||
features: [
|
||
'Large enterprises',
|
||
'High-concurrency applications',
|
||
'Database servers',
|
||
'Enterprise-grade security',
|
||
'Dedicated technical support',
|
||
],
|
||
},
|
||
],
|
||
|
||
advantages: {
|
||
title: 'Why Choose Our Cloud Servers',
|
||
items: [
|
||
{
|
||
title: 'Cost-Effective',
|
||
description:
|
||
'Reduce costs by 30-50% compared to traditional servers, pay-as-you-go is more economical',
|
||
},
|
||
{
|
||
title: 'Fast Deployment',
|
||
description:
|
||
'Complete server creation within 1 minute, quickly respond to business needs',
|
||
},
|
||
{
|
||
title: 'Easy Management',
|
||
description:
|
||
'Visual control panel, one-click operations, reduce operational costs',
|
||
},
|
||
{
|
||
title: 'Technical Support',
|
||
description: '7x24 professional technical support, quickly solve problems',
|
||
},
|
||
],
|
||
},
|
||
},
|
||
};
|
||
|
||
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">
|
||
{t.hero.subtitle}
|
||
</p>
|
||
<p className="text-lg text-yellow-200 max-w-3xl mx-auto">
|
||
{t.hero.description}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Features Section */}
|
||
<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.features.map((feature, index) => {
|
||
const IconComponent = feature.icon;
|
||
return (
|
||
<div
|
||
key={index}
|
||
className="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 border border-amber-200"
|
||
>
|
||
<div className="w-12 h-12 bg-gradient-to-r from-amber-500 to-yellow-500 rounded-lg flex items-center justify-center mb-6">
|
||
<IconComponent className="w-6 h-6 text-white" />
|
||
</div>
|
||
<h3 className="text-xl font-semibold text-amber-900 mb-4">
|
||
{feature.title}
|
||
</h3>
|
||
<p className="text-amber-700 leading-relaxed">
|
||
{feature.description}
|
||
</p>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Pricing Plans */}
|
||
<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">
|
||
{currentLang === 'zh'
|
||
? '选择适合您的配置'
|
||
: currentLang === 'zh-tw'
|
||
? '選擇適合您的配置'
|
||
: 'Choose Your Perfect Plan'}
|
||
</h2>
|
||
<p className="text-xl text-amber-700">
|
||
{currentLang === 'zh'
|
||
? '灵活的配置选择，满足不同业务需求'
|
||
: currentLang === 'zh-tw'
|
||
? '靈活的配置選擇，滿足不同業務需求'
|
||
: 'Flexible configuration options to meet different business needs'}
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||
{t.plans.map((plan) => (
|
||
<div
|
||
key={plan.id}
|
||
className={`relative bg-white rounded-xl shadow-lg border-2 transition-all duration-300 hover:shadow-xl ${
|
||
plan.popular
|
||
? 'border-amber-500 transform scale-105'
|
||
: 'border-amber-200 hover:border-amber-300'
|
||
}`}
|
||
>
|
||
{plan.popular && (
|
||
<div className="absolute -top-4 left-1/2 transform -translate-x-1/2">
|
||
<div className="bg-gradient-to-r from-amber-500 to-yellow-500 text-white px-4 py-2 rounded-full text-sm font-semibold flex items-center space-x-1">
|
||
<Star className="w-4 h-4" />
|
||
<span>
|
||
{currentLang === 'zh'
|
||
? '推荐'
|
||
: currentLang === 'zh-tw'
|
||
? '推薦'
|
||
: 'Popular'}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
<div className="p-8">
|
||
<h3 className="text-2xl font-bold text-amber-900 mb-4">
|
||
{plan.name}
|
||
</h3>
|
||
|
||
<div className="mb-6">
|
||
<span className="text-4xl font-bold text-amber-600">
|
||
{plan.price}
|
||
</span>
|
||
<span className="text-amber-700 ml-2">{plan.period}</span>
|
||
</div>
|
||
|
||
<div className="mb-6 space-y-3">
|
||
<div className="flex justify-between">
|
||
<span className="text-amber-700">CPU:</span>
|
||
<span className="font-semibold text-amber-900">
|
||
{plan.specs.cpu}
|
||
</span>
|
||
</div>
|
||
<div className="flex justify-between">
|
||
<span className="text-amber-700">
|
||
{currentLang === 'zh'
|
||
? '内存:'
|
||
: currentLang === 'zh-tw'
|
||
? '記憶體:'
|
||
: 'Memory:'}
|
||
</span>
|
||
<span className="font-semibold text-amber-900">
|
||
{plan.specs.memory}
|
||
</span>
|
||
</div>
|
||
<div className="flex justify-between">
|
||
<span className="text-amber-700">
|
||
{currentLang === 'zh'
|
||
? '存储:'
|
||
: currentLang === 'zh-tw'
|
||
? '儲存:'
|
||
: 'Storage:'}
|
||
</span>
|
||
<span className="font-semibold text-amber-900">
|
||
{plan.specs.storage}
|
||
</span>
|
||
</div>
|
||
<div className="flex justify-between">
|
||
<span className="text-amber-700">
|
||
{currentLang === 'zh'
|
||
? '带宽:'
|
||
: currentLang === 'zh-tw'
|
||
? '頻寬:'
|
||
: 'Bandwidth:'}
|
||
</span>
|
||
<span className="font-semibold text-amber-900">
|
||
{plan.specs.bandwidth}
|
||
</span>
|
||
</div>
|
||
<div className="flex justify-between">
|
||
<span className="text-amber-700">
|
||
{currentLang === 'zh'
|
||
? '流量:'
|
||
: currentLang === 'zh-tw'
|
||
? '流量:'
|
||
: 'Traffic:'}
|
||
</span>
|
||
<span className="font-semibold text-amber-900">
|
||
{plan.specs.traffic}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mb-8">
|
||
<h4 className="font-semibold text-amber-900 mb-3">
|
||
{currentLang === 'zh'
|
||
? '适用场景:'
|
||
: currentLang === 'zh-tw'
|
||
? '適用場景:'
|
||
: 'Use Cases:'}
|
||
</h4>
|
||
<ul className="space-y-2">
|
||
{plan.features.map((feature, index) => (
|
||
<li
|
||
key={index}
|
||
className="flex items-center text-amber-700"
|
||
>
|
||
<Check className="w-4 h-4 text-green-500 mr-2 flex-shrink-0" />
|
||
|
||
{feature}
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
|
||
<button
|
||
className={`w-full py-3 px-6 rounded-lg font-semibold transition-all duration-200 ${
|
||
plan.popular
|
||
? 'bg-gradient-to-r from-amber-500 to-yellow-500 text-white hover:from-amber-600 hover:to-yellow-600'
|
||
: 'border-2 border-amber-500 text-amber-600 hover:bg-amber-500 hover:text-white'
|
||
}`}
|
||
>
|
||
{currentLang === 'zh'
|
||
? '立即购买'
|
||
: currentLang === 'zh-tw'
|
||
? '立即購買'
|
||
: 'Buy Now'}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Advantages Section */}
|
||
<section className="py-20">
|
||
<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.advantages.title}
|
||
</h2>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||
{t.advantages.items.map((advantage, index) => (
|
||
<div
|
||
key={index}
|
||
className="text-center p-6 bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 border border-amber-200"
|
||
>
|
||
<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">
|
||
<span className="text-2xl font-bold text-white">
|
||
{index + 1}
|
||
</span>
|
||
</div>
|
||
<h3 className="text-xl font-semibold text-amber-900 mb-4">
|
||
{advantage.title}
|
||
</h3>
|
||
<p className="text-amber-700 leading-relaxed">
|
||
{advantage.description}
|
||
</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<Footer currentLang={currentLang} translations={translations} />
|
||
</div>
|
||
);
|
||
}
|