375 lines
17 KiB
TypeScript
375 lines
17 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, Database, Shield, Zap, Globe, HardDrive } from 'lucide-react';
|
|||
|
|
|
|||
|
|
export default function ProductsPage() {
|
|||
|
|
const [currentLang, setCurrentLang] = useState<'zh' | 'zh-tw' | 'en'>('zh');
|
|||
|
|
|
|||
|
|
const translations = {
|
|||
|
|
zh: {
|
|||
|
|
title: '产品服务 - CloudPro 云服务器代理商',
|
|||
|
|
description:
|
|||
|
|
'提供全面的云计算产品服务，包括云服务器ECS、云数据库RDS、负载均衡SLB、对象存储OSS等企业级解决方案。',
|
|||
|
|
keywords: '云服务器,云数据库,负载均衡,对象存储,CDN加速,云计算产品',
|
|||
|
|
nav: {
|
|||
|
|
home: '首页',
|
|||
|
|
products: '产品',
|
|||
|
|
solutions: '解决方案',
|
|||
|
|
support: '支持',
|
|||
|
|
contact: '联系我们',
|
|||
|
|
},
|
|||
|
|
hero: {
|
|||
|
|
title: '全面的云计算产品服务',
|
|||
|
|
subtitle: '为企业提供稳定、高效、安全的云基础设施',
|
|||
|
|
description:
|
|||
|
|
'从计算、存储到网络，我们提供完整的云服务产品线，满足不同规模企业的需求',
|
|||
|
|
},
|
|||
|
|
products: [
|
|||
|
|
{
|
|||
|
|
id: 'ecs',
|
|||
|
|
name: '云服务器 ECS',
|
|||
|
|
description: '弹性计算服务，提供安全可靠的弹性计算服务',
|
|||
|
|
features: ['多种实例规格', '弹性扩缩容', '高可用保障', '安全防护'],
|
|||
|
|
price: '¥99/月起',
|
|||
|
|
icon: Server,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 'rds',
|
|||
|
|
name: '云数据库 RDS',
|
|||
|
|
description: '关系型数据库服务，支持MySQL、PostgreSQL等',
|
|||
|
|
features: ['自动备份', '读写分离', '监控告警', '高可用架构'],
|
|||
|
|
price: '¥199/月起',
|
|||
|
|
icon: Database,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 'slb',
|
|||
|
|
name: '负载均衡 SLB',
|
|||
|
|
description: '将访问流量分发到多台云服务器，提升应用可用性',
|
|||
|
|
features: ['智能调度', '健康检查', 'SSL卸载', '会话保持'],
|
|||
|
|
price: '¥299/月起',
|
|||
|
|
icon: Shield,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 'oss',
|
|||
|
|
name: '对象存储 OSS',
|
|||
|
|
description: '海量、安全、低成本、高可靠的云存储服务',
|
|||
|
|
features: ['无限容量', '多重备份', 'CDN加速', 'API接口'],
|
|||
|
|
price: '¥0.12/GB/月起',
|
|||
|
|
icon: HardDrive,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 'cdn',
|
|||
|
|
name: 'CDN 加速',
|
|||
|
|
description: '内容分发网络，提升网站访问速度',
|
|||
|
|
features: ['全球节点', '智能缓存', '防护功能', '实时监控'],
|
|||
|
|
price: '¥0.24/GB起',
|
|||
|
|
icon: Zap,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 'dns',
|
|||
|
|
name: '云解析 DNS',
|
|||
|
|
description: '高可用、高扩展的权威DNS服务和DNS管理服务',
|
|||
|
|
features: ['智能解析', '负载均衡', '故障切换', '统计分析'],
|
|||
|
|
price: '¥20/月起',
|
|||
|
|
icon: Globe,
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
'zh-tw': {
|
|||
|
|
title: '產品服務 - CloudPro 雲伺服器代理商',
|
|||
|
|
description:
|
|||
|
|
'提供全面的雲端運算產品服務，包括雲伺服器ECS、雲資料庫RDS、負載平衡SLB、物件儲存OSS等企業級解決方案。',
|
|||
|
|
keywords: '雲伺服器,雲資料庫,負載平衡,物件儲存,CDN加速,雲端運算產品',
|
|||
|
|
nav: {
|
|||
|
|
home: '首頁',
|
|||
|
|
products: '產品',
|
|||
|
|
solutions: '解決方案',
|
|||
|
|
support: '支援',
|
|||
|
|
contact: '聯絡我們',
|
|||
|
|
},
|
|||
|
|
hero: {
|
|||
|
|
title: '全面的雲端運算產品服務',
|
|||
|
|
subtitle: '為企業提供穩定、高效、安全的雲基礎設施',
|
|||
|
|
description:
|
|||
|
|
'從運算、儲存到網路，我們提供完整的雲服務產品線，滿足不同規模企業的需求',
|
|||
|
|
},
|
|||
|
|
products: [
|
|||
|
|
{
|
|||
|
|
id: 'ecs',
|
|||
|
|
name: '雲伺服器 ECS',
|
|||
|
|
description: '彈性運算服務，提供安全可靠的彈性運算服務',
|
|||
|
|
features: ['多種實例規格', '彈性擴縮容', '高可用保障', '安全防護'],
|
|||
|
|
price: 'NT$2,990/月起',
|
|||
|
|
icon: Server,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 'rds',
|
|||
|
|
name: '雲資料庫 RDS',
|
|||
|
|
description: '關聯式資料庫服務，支援MySQL、PostgreSQL等',
|
|||
|
|
features: ['自動備份', '讀寫分離', '監控告警', '高可用架構'],
|
|||
|
|
price: 'NT$5,990/月起',
|
|||
|
|
icon: Database,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 'slb',
|
|||
|
|
name: '負載平衡 SLB',
|
|||
|
|
description: '將存取流量分發到多台雲伺服器，提升應用可用性',
|
|||
|
|
features: ['智慧調度', '健康檢查', 'SSL卸載', '會話保持'],
|
|||
|
|
price: 'NT$8,990/月起',
|
|||
|
|
icon: Shield,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 'oss',
|
|||
|
|
name: '物件儲存 OSS',
|
|||
|
|
description: '海量、安全、低成本、高可靠的雲儲存服務',
|
|||
|
|
features: ['無限容量', '多重備份', 'CDN加速', 'API介面'],
|
|||
|
|
price: 'NT$3.6/GB/月起',
|
|||
|
|
icon: HardDrive,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 'cdn',
|
|||
|
|
name: 'CDN 加速',
|
|||
|
|
description: '內容分發網路，提升網站存取速度',
|
|||
|
|
features: ['全球節點', '智慧快取', '防護功能', '即時監控'],
|
|||
|
|
price: 'NT$7.2/GB起',
|
|||
|
|
icon: Zap,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 'dns',
|
|||
|
|
name: '雲解析 DNS',
|
|||
|
|
description: '高可用、高擴展的權威DNS服務和DNS管理服務',
|
|||
|
|
features: ['智慧解析', '負載平衡', '故障切換', '統計分析'],
|
|||
|
|
price: 'NT$600/月起',
|
|||
|
|
icon: Globe,
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
en: {
|
|||
|
|
title: 'Products & Services - CloudPro Cloud Server Reseller',
|
|||
|
|
description:
|
|||
|
|
'Comprehensive cloud computing products including Cloud Server ECS, Cloud Database RDS, Load Balancer SLB, Object Storage OSS and more enterprise solutions.',
|
|||
|
|
keywords:
|
|||
|
|
'cloud server,cloud database,load balancer,object storage,CDN acceleration,cloud computing products',
|
|||
|
|
nav: {
|
|||
|
|
home: 'Home',
|
|||
|
|
products: 'Products',
|
|||
|
|
solutions: 'Solutions',
|
|||
|
|
support: 'Support',
|
|||
|
|
contact: 'Contact',
|
|||
|
|
},
|
|||
|
|
hero: {
|
|||
|
|
title: 'Comprehensive Cloud Computing Products',
|
|||
|
|
subtitle: 'Stable, Efficient, and Secure Cloud Infrastructure for Enterprises',
|
|||
|
|
description:
|
|||
|
|
'From computing and storage to networking, we provide a complete cloud service product line to meet the needs of enterprises of all sizes',
|
|||
|
|
},
|
|||
|
|
products: [
|
|||
|
|
{
|
|||
|
|
id: 'ecs',
|
|||
|
|
name: 'Cloud Server ECS',
|
|||
|
|
description:
|
|||
|
|
'Elastic Compute Service providing secure and reliable elastic computing',
|
|||
|
|
features: [
|
|||
|
|
'Multiple Instance Types',
|
|||
|
|
'Auto Scaling',
|
|||
|
|
'High Availability',
|
|||
|
|
'Security Protection',
|
|||
|
|
],
|
|||
|
|
|
|||
|
|
price: 'From $15/month',
|
|||
|
|
icon: Server,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 'rds',
|
|||
|
|
name: 'Cloud Database RDS',
|
|||
|
|
description:
|
|||
|
|
'Relational Database Service supporting MySQL, PostgreSQL and more',
|
|||
|
|
features: [
|
|||
|
|
'Auto Backup',
|
|||
|
|
'Read-Write Splitting',
|
|||
|
|
'Monitoring & Alerts',
|
|||
|
|
'High Availability',
|
|||
|
|
],
|
|||
|
|
|
|||
|
|
price: 'From $29/month',
|
|||
|
|
icon: Database,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 'slb',
|
|||
|
|
name: 'Load Balancer SLB',
|
|||
|
|
description:
|
|||
|
|
'Distribute traffic across multiple cloud servers for better availability',
|
|||
|
|
features: [
|
|||
|
|
'Smart Scheduling',
|
|||
|
|
'Health Check',
|
|||
|
|
'SSL Offloading',
|
|||
|
|
'Session Persistence',
|
|||
|
|
],
|
|||
|
|
|
|||
|
|
price: 'From $45/month',
|
|||
|
|
icon: Shield,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 'oss',
|
|||
|
|
name: 'Object Storage OSS',
|
|||
|
|
description:
|
|||
|
|
'Massive, secure, low-cost, and highly reliable cloud storage service',
|
|||
|
|
features: [
|
|||
|
|
'Unlimited Capacity',
|
|||
|
|
'Multiple Backups',
|
|||
|
|
'CDN Acceleration',
|
|||
|
|
'API Interface',
|
|||
|
|
],
|
|||
|
|
|
|||
|
|
price: 'From $0.02/GB/month',
|
|||
|
|
icon: HardDrive,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 'cdn',
|
|||
|
|
name: 'CDN Acceleration',
|
|||
|
|
description: 'Content Delivery Network to improve website access speed',
|
|||
|
|
features: [
|
|||
|
|
'Global Nodes',
|
|||
|
|
'Smart Caching',
|
|||
|
|
'Protection Features',
|
|||
|
|
'Real-time Monitoring',
|
|||
|
|
],
|
|||
|
|
|
|||
|
|
price: 'From $0.04/GB',
|
|||
|
|
icon: Zap,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 'dns',
|
|||
|
|
name: 'Cloud DNS',
|
|||
|
|
description: 'Highly available and scalable authoritative DNS service',
|
|||
|
|
features: [
|
|||
|
|
'Smart Resolution',
|
|||
|
|
'Load Balancing',
|
|||
|
|
'Failover',
|
|||
|
|
'Statistics Analysis',
|
|||
|
|
],
|
|||
|
|
|
|||
|
|
price: 'From $3/month',
|
|||
|
|
icon: Globe,
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
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>
|
|||
|
|
|
|||
|
|
{/* Products 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 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|||
|
|
{t.products.map((product) => {
|
|||
|
|
const IconComponent = product.icon;
|
|||
|
|
return (
|
|||
|
|
<div
|
|||
|
|
key={product.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">
|
|||
|
|
{product.name}
|
|||
|
|
</h3>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<p className="text-amber-700 mb-6 leading-relaxed">
|
|||
|
|
{product.description}
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
<div className="mb-6">
|
|||
|
|
<h4 className="font-semibold text-amber-900 mb-3">
|
|||
|
|
{currentLang === 'zh'
|
|||
|
|
? '主要特性:'
|
|||
|
|
: currentLang === 'zh-tw'
|
|||
|
|
? '主要特性:'
|
|||
|
|
: 'Key Features:'}
|
|||
|
|
</h4>
|
|||
|
|
<ul className="space-y-2">
|
|||
|
|
{product.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>
|
|||
|
|
|
|||
|
|
<div className="flex items-center justify-between">
|
|||
|
|
<div className="text-2xl font-bold text-amber-600">
|
|||
|
|
{product.price}
|
|||
|
|
</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">
|
|||
|
|
{currentLang === 'zh'
|
|||
|
|
? '了解更多'
|
|||
|
|
: currentLang === 'zh-tw'
|
|||
|
|
? '了解更多'
|
|||
|
|
: 'Learn More'}
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
})}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<Footer currentLang={currentLang} translations={translations} />
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|