690 lines
31 KiB
TypeScript
690 lines
31 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 { Database, Shield, Zap, RotateCcw, BarChart3, Settings, Check, Star } from 'lucide-react';
|
|||
|
|
|
|||
|
|
export default function RDSPage() {
|
|||
|
|
const [currentLang, setCurrentLang] = useState<'zh' | 'zh-tw' | 'en'>('zh');
|
|||
|
|
|
|||
|
|
const translations = {
|
|||
|
|
zh: {
|
|||
|
|
title: '云数据库 RDS - 关系型数据库服务 | CloudPro',
|
|||
|
|
description:
|
|||
|
|
'高可用云数据库RDS，支持MySQL、PostgreSQL、SQL Server等多种数据库引擎，提供自动备份、读写分离、监控告警等企业级功能。',
|
|||
|
|
keywords: '云数据库,RDS,MySQL,PostgreSQL,SQL Server,数据库服务',
|
|||
|
|
nav: {
|
|||
|
|
home: '首页',
|
|||
|
|
products: '产品',
|
|||
|
|
solutions: '解决方案',
|
|||
|
|
support: '支持',
|
|||
|
|
contact: '联系我们',
|
|||
|
|
},
|
|||
|
|
hero: {
|
|||
|
|
title: '云数据库 RDS',
|
|||
|
|
subtitle: '关系型数据库服务',
|
|||
|
|
description: '企业级云数据库服务，提供高可用、高性能、易管理的数据库解决方案',
|
|||
|
|
},
|
|||
|
|
features: [
|
|||
|
|
{
|
|||
|
|
icon: Database,
|
|||
|
|
title: '多引擎支持',
|
|||
|
|
description: '支持MySQL、PostgreSQL、SQL Server等主流数据库引擎',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
icon: Shield,
|
|||
|
|
title: '高可用架构',
|
|||
|
|
description: '主从热备、自动故障切换，保证99.95%的服务可用性',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
icon: RotateCcw,
|
|||
|
|
title: '自动备份',
|
|||
|
|
description: '支持自动备份和手动备份，数据安全有保障',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
icon: Zap,
|
|||
|
|
title: '读写分离',
|
|||
|
|
description: '支持读写分离，提升数据库性能和并发能力',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
icon: BarChart3,
|
|||
|
|
title: '监控告警',
|
|||
|
|
description: '实时监控数据库性能，异常情况及时告警',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
icon: Settings,
|
|||
|
|
title: '参数优化',
|
|||
|
|
description: '专业DBA团队优化数据库参数，提升性能',
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
|
|||
|
|
engines: [
|
|||
|
|
{
|
|||
|
|
name: 'MySQL',
|
|||
|
|
version: '5.7 / 8.0',
|
|||
|
|
description: '最流行的开源关系型数据库',
|
|||
|
|
features: ['高性能', '易使用', '社区活跃', '兼容性好'],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 'PostgreSQL',
|
|||
|
|
version: '12 / 13 / 14',
|
|||
|
|
description: '功能强大的开源对象关系型数据库',
|
|||
|
|
features: ['功能丰富', '标准兼容', '扩展性强', '数据完整性'],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 'SQL Server',
|
|||
|
|
version: '2017 / 2019',
|
|||
|
|
description: '微软企业级关系型数据库',
|
|||
|
|
features: ['企业级', '集成度高', '商业支持', 'BI功能'],
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
|
|||
|
|
plans: [
|
|||
|
|
{
|
|||
|
|
id: 'basic',
|
|||
|
|
name: '基础版',
|
|||
|
|
popular: false,
|
|||
|
|
price: '¥199',
|
|||
|
|
period: '/月',
|
|||
|
|
specs: {
|
|||
|
|
cpu: '2核',
|
|||
|
|
memory: '4GB',
|
|||
|
|
storage: '100GB',
|
|||
|
|
connections: '1000',
|
|||
|
|
backup: '7天',
|
|||
|
|
},
|
|||
|
|
features: ['适合小型应用', '基础监控', '自动备份', '技术支持'],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 'standard',
|
|||
|
|
name: '标准版',
|
|||
|
|
popular: true,
|
|||
|
|
price: '¥499',
|
|||
|
|
period: '/月',
|
|||
|
|
specs: {
|
|||
|
|
cpu: '4核',
|
|||
|
|
memory: '8GB',
|
|||
|
|
storage: '200GB',
|
|||
|
|
connections: '2000',
|
|||
|
|
backup: '30天',
|
|||
|
|
},
|
|||
|
|
features: ['适合中型应用', '读写分离', '高级监控', '参数优化', '专属支持'],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 'premium',
|
|||
|
|
name: '企业版',
|
|||
|
|
popular: false,
|
|||
|
|
price: '¥999',
|
|||
|
|
period: '/月',
|
|||
|
|
specs: {
|
|||
|
|
cpu: '8核',
|
|||
|
|
memory: '16GB',
|
|||
|
|
storage: '500GB',
|
|||
|
|
connections: '5000',
|
|||
|
|
backup: '365天',
|
|||
|
|
},
|
|||
|
|
features: ['适合大型应用', '高可用集群', '实时监控', '性能调优', '7x24支持'],
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
'zh-tw': {
|
|||
|
|
title: '雲資料庫 RDS - 關聯式資料庫服務 | CloudPro',
|
|||
|
|
description:
|
|||
|
|
'高可用雲資料庫RDS，支援MySQL、PostgreSQL、SQL Server等多種資料庫引擎，提供自動備份、讀寫分離、監控告警等企業級功能。',
|
|||
|
|
keywords: '雲資料庫,RDS,MySQL,PostgreSQL,SQL Server,資料庫服務',
|
|||
|
|
nav: {
|
|||
|
|
home: '首頁',
|
|||
|
|
products: '產品',
|
|||
|
|
solutions: '解決方案',
|
|||
|
|
support: '支援',
|
|||
|
|
contact: '聯絡我們',
|
|||
|
|
},
|
|||
|
|
hero: {
|
|||
|
|
title: '雲資料庫 RDS',
|
|||
|
|
subtitle: '關聯式資料庫服務',
|
|||
|
|
description: '企業級雲資料庫服務，提供高可用、高效能、易管理的資料庫解決方案',
|
|||
|
|
},
|
|||
|
|
features: [
|
|||
|
|
{
|
|||
|
|
icon: Database,
|
|||
|
|
title: '多引擎支援',
|
|||
|
|
description: '支援MySQL、PostgreSQL、SQL Server等主流資料庫引擎',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
icon: Shield,
|
|||
|
|
title: '高可用架構',
|
|||
|
|
description: '主從熱備、自動故障切換，保證99.95%的服務可用性',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
icon: RotateCcw,
|
|||
|
|
title: '自動備份',
|
|||
|
|
description: '支援自動備份和手動備份，資料安全有保障',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
icon: Zap,
|
|||
|
|
title: '讀寫分離',
|
|||
|
|
description: '支援讀寫分離，提升資料庫效能和併發能力',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
icon: BarChart3,
|
|||
|
|
title: '監控告警',
|
|||
|
|
description: '即時監控資料庫效能，異常情況及時告警',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
icon: Settings,
|
|||
|
|
title: '參數優化',
|
|||
|
|
description: '專業DBA團隊優化資料庫參數，提升效能',
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
|
|||
|
|
engines: [
|
|||
|
|
{
|
|||
|
|
name: 'MySQL',
|
|||
|
|
version: '5.7 / 8.0',
|
|||
|
|
description: '最流行的開源關聯式資料庫',
|
|||
|
|
features: ['高效能', '易使用', '社群活躍', '相容性好'],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 'PostgreSQL',
|
|||
|
|
version: '12 / 13 / 14',
|
|||
|
|
description: '功能強大的開源物件關聯式資料庫',
|
|||
|
|
features: ['功能豐富', '標準相容', '擴展性強', '資料完整性'],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 'SQL Server',
|
|||
|
|
version: '2017 / 2019',
|
|||
|
|
description: '微軟企業級關聯式資料庫',
|
|||
|
|
features: ['企業級', '整合度高', '商業支援', 'BI功能'],
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
|
|||
|
|
plans: [
|
|||
|
|
{
|
|||
|
|
id: 'basic',
|
|||
|
|
name: '基礎版',
|
|||
|
|
popular: false,
|
|||
|
|
price: 'NT$5,990',
|
|||
|
|
period: '/月',
|
|||
|
|
specs: {
|
|||
|
|
cpu: '2核',
|
|||
|
|
memory: '4GB',
|
|||
|
|
storage: '100GB',
|
|||
|
|
connections: '1000',
|
|||
|
|
backup: '7天',
|
|||
|
|
},
|
|||
|
|
features: ['適合小型應用', '基礎監控', '自動備份', '技術支援'],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 'standard',
|
|||
|
|
name: '標準版',
|
|||
|
|
popular: true,
|
|||
|
|
price: 'NT$14,990',
|
|||
|
|
period: '/月',
|
|||
|
|
specs: {
|
|||
|
|
cpu: '4核',
|
|||
|
|
memory: '8GB',
|
|||
|
|
storage: '200GB',
|
|||
|
|
connections: '2000',
|
|||
|
|
backup: '30天',
|
|||
|
|
},
|
|||
|
|
features: ['適合中型應用', '讀寫分離', '高級監控', '參數優化', '專屬支援'],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 'premium',
|
|||
|
|
name: '企業版',
|
|||
|
|
popular: false,
|
|||
|
|
price: 'NT$29,990',
|
|||
|
|
period: '/月',
|
|||
|
|
specs: {
|
|||
|
|
cpu: '8核',
|
|||
|
|
memory: '16GB',
|
|||
|
|
storage: '500GB',
|
|||
|
|
connections: '5000',
|
|||
|
|
backup: '365天',
|
|||
|
|
},
|
|||
|
|
features: ['適合大型應用', '高可用叢集', '即時監控', '效能調優', '7x24支援'],
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
en: {
|
|||
|
|
title: 'Cloud Database RDS - Relational Database Service | CloudPro',
|
|||
|
|
description:
|
|||
|
|
'High-availability Cloud Database RDS supporting MySQL, PostgreSQL, SQL Server and more database engines with enterprise features like auto backup, read-write splitting, monitoring and alerts.',
|
|||
|
|
keywords: 'cloud database,RDS,MySQL,PostgreSQL,SQL Server,database service',
|
|||
|
|
nav: {
|
|||
|
|
home: 'Home',
|
|||
|
|
products: 'Products',
|
|||
|
|
solutions: 'Solutions',
|
|||
|
|
support: 'Support',
|
|||
|
|
contact: 'Contact',
|
|||
|
|
},
|
|||
|
|
hero: {
|
|||
|
|
title: 'Cloud Database RDS',
|
|||
|
|
subtitle: 'Relational Database Service',
|
|||
|
|
description:
|
|||
|
|
'Enterprise-grade cloud database service providing high availability, high performance, and easy-to-manage database solutions',
|
|||
|
|
},
|
|||
|
|
features: [
|
|||
|
|
{
|
|||
|
|
icon: Database,
|
|||
|
|
title: 'Multi-Engine Support',
|
|||
|
|
description:
|
|||
|
|
'Support mainstream database engines like MySQL, PostgreSQL, SQL Server',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
icon: Shield,
|
|||
|
|
title: 'High Availability',
|
|||
|
|
description:
|
|||
|
|
'Master-slave hot backup, automatic failover, ensuring 99.95% service availability',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
icon: RotateCcw,
|
|||
|
|
title: 'Auto Backup',
|
|||
|
|
description: 'Support automatic and manual backup, ensuring data security',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
icon: Zap,
|
|||
|
|
title: 'Read-Write Splitting',
|
|||
|
|
description:
|
|||
|
|
'Support read-write splitting to improve database performance and concurrency',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
icon: BarChart3,
|
|||
|
|
title: 'Monitoring & Alerts',
|
|||
|
|
description:
|
|||
|
|
'Real-time database performance monitoring with timely alerts for anomalies',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
icon: Settings,
|
|||
|
|
title: 'Parameter Optimization',
|
|||
|
|
description:
|
|||
|
|
'Professional DBA team optimizes database parameters for better performance',
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
|
|||
|
|
engines: [
|
|||
|
|
{
|
|||
|
|
name: 'MySQL',
|
|||
|
|
version: '5.7 / 8.0',
|
|||
|
|
description: 'Most popular open-source relational database',
|
|||
|
|
features: [
|
|||
|
|
'High Performance',
|
|||
|
|
'Easy to Use',
|
|||
|
|
'Active Community',
|
|||
|
|
'Good Compatibility',
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 'PostgreSQL',
|
|||
|
|
version: '12 / 13 / 14',
|
|||
|
|
description: 'Powerful open-source object-relational database',
|
|||
|
|
features: [
|
|||
|
|
'Feature Rich',
|
|||
|
|
'Standards Compliant',
|
|||
|
|
'Highly Extensible',
|
|||
|
|
'Data Integrity',
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 'SQL Server',
|
|||
|
|
version: '2017 / 2019',
|
|||
|
|
description: 'Microsoft enterprise-grade relational database',
|
|||
|
|
features: [
|
|||
|
|
'Enterprise Grade',
|
|||
|
|
'High Integration',
|
|||
|
|
'Commercial Support',
|
|||
|
|
'BI Features',
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
|
|||
|
|
plans: [
|
|||
|
|
{
|
|||
|
|
id: 'basic',
|
|||
|
|
name: 'Basic',
|
|||
|
|
popular: false,
|
|||
|
|
price: '$29',
|
|||
|
|
period: '/month',
|
|||
|
|
specs: {
|
|||
|
|
cpu: '2 Core',
|
|||
|
|
memory: '4GB',
|
|||
|
|
storage: '100GB',
|
|||
|
|
connections: '1000',
|
|||
|
|
backup: '7 days',
|
|||
|
|
},
|
|||
|
|
features: [
|
|||
|
|
'Small applications',
|
|||
|
|
'Basic monitoring',
|
|||
|
|
'Auto backup',
|
|||
|
|
'Technical support',
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 'standard',
|
|||
|
|
name: 'Standard',
|
|||
|
|
popular: true,
|
|||
|
|
price: '$75',
|
|||
|
|
period: '/month',
|
|||
|
|
specs: {
|
|||
|
|
cpu: '4 Core',
|
|||
|
|
memory: '8GB',
|
|||
|
|
storage: '200GB',
|
|||
|
|
connections: '2000',
|
|||
|
|
backup: '30 days',
|
|||
|
|
},
|
|||
|
|
features: [
|
|||
|
|
'Medium applications',
|
|||
|
|
'Read-write splitting',
|
|||
|
|
'Advanced monitoring',
|
|||
|
|
'Parameter optimization',
|
|||
|
|
'Dedicated support',
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 'premium',
|
|||
|
|
name: 'Enterprise',
|
|||
|
|
popular: false,
|
|||
|
|
price: '$149',
|
|||
|
|
period: '/month',
|
|||
|
|
specs: {
|
|||
|
|
cpu: '8 Core',
|
|||
|
|
memory: '16GB',
|
|||
|
|
storage: '500GB',
|
|||
|
|
connections: '5000',
|
|||
|
|
backup: '365 days',
|
|||
|
|
},
|
|||
|
|
features: [
|
|||
|
|
'Large applications',
|
|||
|
|
'High availability cluster',
|
|||
|
|
'Real-time monitoring',
|
|||
|
|
'Performance tuning',
|
|||
|
|
'7x24 support',
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
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>
|
|||
|
|
|
|||
|
|
{/* Database Engines */}
|
|||
|
|
<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'
|
|||
|
|
? '支援的資料庫引擎'
|
|||
|
|
: 'Supported Database Engines'}
|
|||
|
|
</h2>
|
|||
|
|
<p className="text-xl text-amber-700">
|
|||
|
|
{currentLang === 'zh'
|
|||
|
|
? '选择最适合您业务的数据库引擎'
|
|||
|
|
: currentLang === 'zh-tw'
|
|||
|
|
? '選擇最適合您業務的資料庫引擎'
|
|||
|
|
: 'Choose the database engine that best fits your business'}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|||
|
|
{t.engines.map((engine, index) => (
|
|||
|
|
<div
|
|||
|
|
key={index}
|
|||
|
|
className="bg-gradient-to-br from-amber-50 to-yellow-50 p-8 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 border border-amber-200"
|
|||
|
|
>
|
|||
|
|
<div className="text-center mb-6">
|
|||
|
|
<h3 className="text-2xl font-bold text-amber-900 mb-2">
|
|||
|
|
{engine.name}
|
|||
|
|
</h3>
|
|||
|
|
<p className="text-amber-600 font-medium">
|
|||
|
|
{currentLang === 'zh'
|
|||
|
|
? '版本: '
|
|||
|
|
: currentLang === 'zh-tw'
|
|||
|
|
? '版本: '
|
|||
|
|
: 'Version: '}
|
|||
|
|
{engine.version}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<p className="text-amber-700 mb-6 text-center">
|
|||
|
|
{engine.description}
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
<div className="space-y-2">
|
|||
|
|
{engine.features.map((feature, featureIndex) => (
|
|||
|
|
<div key={featureIndex} className="flex items-center">
|
|||
|
|
<Check className="w-4 h-4 text-green-500 mr-2 flex-shrink-0" />
|
|||
|
|
|
|||
|
|
<span className="text-amber-700">{feature}</span>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
{/* Pricing Plans */}
|
|||
|
|
<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">
|
|||
|
|
{currentLang === 'zh'
|
|||
|
|
? '选择适合的版本'
|
|||
|
|
: currentLang === 'zh-tw'
|
|||
|
|
? '選擇適合的版本'
|
|||
|
|
: 'Choose Your Plan'}
|
|||
|
|
</h2>
|
|||
|
|
<p className="text-xl text-amber-700">
|
|||
|
|
{currentLang === 'zh'
|
|||
|
|
? '根据业务规模选择合适的数据库配置'
|
|||
|
|
: currentLang === 'zh-tw'
|
|||
|
|
? '根據業務規模選擇合適的資料庫配置'
|
|||
|
|
: 'Select the right database configuration based on your business scale'}
|
|||
|
|
</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'
|
|||
|
|
? '連接數:'
|
|||
|
|
: 'Connections:'}
|
|||
|
|
</span>
|
|||
|
|
<span className="font-semibold text-amber-900">
|
|||
|
|
{plan.specs.connections}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex justify-between">
|
|||
|
|
<span className="text-amber-700">
|
|||
|
|
{currentLang === 'zh'
|
|||
|
|
? '备份:'
|
|||
|
|
: currentLang === 'zh-tw'
|
|||
|
|
? '備份:'
|
|||
|
|
: 'Backup:'}
|
|||
|
|
</span>
|
|||
|
|
<span className="font-semibold text-amber-900">
|
|||
|
|
{plan.specs.backup}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="mb-8">
|
|||
|
|
<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>
|
|||
|
|
|
|||
|
|
<Footer currentLang={currentLang} translations={translations} />
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|