654 lines
30 KiB
TypeScript
654 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 { Shield, Zap, BarChart3, Globe, Settings, Activity, Check, Star } from 'lucide-react';
|
||
|
||
export default function SLBPage() {
|
||
const [currentLang, setCurrentLang] = useState<'zh' | 'zh-tw' | 'en'>('zh');
|
||
|
||
const translations = {
|
||
zh: {
|
||
title: '负载均衡 SLB - 智能流量分发服务 | CloudPro',
|
||
description:
|
||
'高性能负载均衡SLB，智能分发访问流量到多台服务器，提升应用可用性和性能，支持HTTP/HTTPS、TCP/UDP协议。',
|
||
keywords: '负载均衡,SLB,流量分发,高可用,负载均衡器',
|
||
nav: {
|
||
home: '首页',
|
||
products: '产品',
|
||
solutions: '解决方案',
|
||
support: '支持',
|
||
contact: '联系我们',
|
||
},
|
||
hero: {
|
||
title: '负载均衡 SLB',
|
||
subtitle: '智能流量分发服务',
|
||
description: '将访问流量智能分发到多台云服务器，提升应用系统的可用性、扩展性和性能',
|
||
},
|
||
features: [
|
||
{
|
||
icon: Shield,
|
||
title: '高可用保障',
|
||
description: '多可用区部署，自动故障切换，保证99.99%服务可用性',
|
||
},
|
||
{
|
||
icon: Zap,
|
||
title: '智能调度',
|
||
description: '支持多种负载均衡算法，智能分发流量，优化性能',
|
||
},
|
||
{
|
||
icon: BarChart3,
|
||
title: '健康检查',
|
||
description: '实时监控后端服务器健康状态，自动剔除异常节点',
|
||
},
|
||
{
|
||
icon: Globe,
|
||
title: '多协议支持',
|
||
description: '支持HTTP/HTTPS、TCP/UDP等多种协议',
|
||
},
|
||
{
|
||
icon: Settings,
|
||
title: 'SSL卸载',
|
||
description: '支持SSL证书管理和SSL卸载，减轻后端服务器负担',
|
||
},
|
||
{
|
||
icon: Activity,
|
||
title: '会话保持',
|
||
description: '支持会话保持功能，确保用户请求的连续性',
|
||
},
|
||
],
|
||
|
||
algorithms: [
|
||
{
|
||
name: '轮询',
|
||
description: '按顺序将请求分发到各个服务器',
|
||
useCase: '适合服务器性能相近的场景',
|
||
},
|
||
{
|
||
name: '加权轮询',
|
||
description: '根据服务器权重分发请求',
|
||
useCase: '适合服务器性能不同的场景',
|
||
},
|
||
{
|
||
name: '最少连接',
|
||
description: '将请求分发到连接数最少的服务器',
|
||
useCase: '适合长连接应用',
|
||
},
|
||
{
|
||
name: 'IP哈希',
|
||
description: '根据客户端IP进行哈希分发',
|
||
useCase: '适合需要会话保持的应用',
|
||
},
|
||
],
|
||
|
||
plans: [
|
||
{
|
||
id: 'basic',
|
||
name: '基础版',
|
||
popular: false,
|
||
price: '¥299',
|
||
period: '/月',
|
||
specs: {
|
||
bandwidth: '10Mbps',
|
||
connections: '5万',
|
||
servers: '10台',
|
||
protocols: 'HTTP/HTTPS',
|
||
},
|
||
features: ['基础负载均衡', '健康检查', '基础监控', '技术支持'],
|
||
},
|
||
{
|
||
id: 'standard',
|
||
name: '标准版',
|
||
popular: true,
|
||
price: '¥599',
|
||
period: '/月',
|
||
specs: {
|
||
bandwidth: '50Mbps',
|
||
connections: '20万',
|
||
servers: '50台',
|
||
protocols: 'HTTP/HTTPS/TCP/UDP',
|
||
},
|
||
features: ['高级负载均衡', 'SSL卸载', '会话保持', '高级监控', '专属支持'],
|
||
},
|
||
{
|
||
id: 'premium',
|
||
name: '企业版',
|
||
popular: false,
|
||
price: '¥1299',
|
||
period: '/月',
|
||
specs: {
|
||
bandwidth: '200Mbps',
|
||
connections: '100万',
|
||
servers: '200台',
|
||
protocols: '全协议支持',
|
||
},
|
||
features: [
|
||
'企业级负载均衡',
|
||
'高级SSL功能',
|
||
'自定义规则',
|
||
'实时监控',
|
||
'7x24支持',
|
||
],
|
||
},
|
||
],
|
||
},
|
||
'zh-tw': {
|
||
title: '負載平衡 SLB - 智慧流量分發服務 | CloudPro',
|
||
description:
|
||
'高效能負載平衡SLB，智慧分發存取流量到多台伺服器，提升應用可用性和效能，支援HTTP/HTTPS、TCP/UDP協定。',
|
||
keywords: '負載平衡,SLB,流量分發,高可用,負載平衡器',
|
||
nav: {
|
||
home: '首頁',
|
||
products: '產品',
|
||
solutions: '解決方案',
|
||
support: '支援',
|
||
contact: '聯絡我們',
|
||
},
|
||
hero: {
|
||
title: '負載平衡 SLB',
|
||
subtitle: '智慧流量分發服務',
|
||
description: '將存取流量智慧分發到多台雲伺服器，提升應用系統的可用性、擴展性和效能',
|
||
},
|
||
features: [
|
||
{
|
||
icon: Shield,
|
||
title: '高可用保障',
|
||
description: '多可用區部署，自動故障切換，保證99.99%服務可用性',
|
||
},
|
||
{
|
||
icon: Zap,
|
||
title: '智慧調度',
|
||
description: '支援多種負載平衡演算法，智慧分發流量，優化效能',
|
||
},
|
||
{
|
||
icon: BarChart3,
|
||
title: '健康檢查',
|
||
description: '即時監控後端伺服器健康狀態，自動剔除異常節點',
|
||
},
|
||
{
|
||
icon: Globe,
|
||
title: '多協定支援',
|
||
description: '支援HTTP/HTTPS、TCP/UDP等多種協定',
|
||
},
|
||
{
|
||
icon: Settings,
|
||
title: 'SSL卸載',
|
||
description: '支援SSL憑證管理和SSL卸載，減輕後端伺服器負擔',
|
||
},
|
||
{
|
||
icon: Activity,
|
||
title: '會話保持',
|
||
description: '支援會話保持功能，確保用戶請求的連續性',
|
||
},
|
||
],
|
||
|
||
algorithms: [
|
||
{
|
||
name: '輪詢',
|
||
description: '按順序將請求分發到各個伺服器',
|
||
useCase: '適合伺服器效能相近的場景',
|
||
},
|
||
{
|
||
name: '加權輪詢',
|
||
description: '根據伺服器權重分發請求',
|
||
useCase: '適合伺服器效能不同的場景',
|
||
},
|
||
{
|
||
name: '最少連接',
|
||
description: '將請求分發到連接數最少的伺服器',
|
||
useCase: '適合長連接應用',
|
||
},
|
||
{
|
||
name: 'IP雜湊',
|
||
description: '根據客戶端IP進行雜湊分發',
|
||
useCase: '適合需要會話保持的應用',
|
||
},
|
||
],
|
||
|
||
plans: [
|
||
{
|
||
id: 'basic',
|
||
name: '基礎版',
|
||
popular: false,
|
||
price: 'NT$8,990',
|
||
period: '/月',
|
||
specs: {
|
||
bandwidth: '10Mbps',
|
||
connections: '5萬',
|
||
servers: '10台',
|
||
protocols: 'HTTP/HTTPS',
|
||
},
|
||
features: ['基礎負載平衡', '健康檢查', '基礎監控', '技術支援'],
|
||
},
|
||
{
|
||
id: 'standard',
|
||
name: '標準版',
|
||
popular: true,
|
||
price: 'NT$17,990',
|
||
period: '/月',
|
||
specs: {
|
||
bandwidth: '50Mbps',
|
||
connections: '20萬',
|
||
servers: '50台',
|
||
protocols: 'HTTP/HTTPS/TCP/UDP',
|
||
},
|
||
features: ['高級負載平衡', 'SSL卸載', '會話保持', '高級監控', '專屬支援'],
|
||
},
|
||
{
|
||
id: 'premium',
|
||
name: '企業版',
|
||
popular: false,
|
||
price: 'NT$38,990',
|
||
period: '/月',
|
||
specs: {
|
||
bandwidth: '200Mbps',
|
||
connections: '100萬',
|
||
servers: '200台',
|
||
protocols: '全協定支援',
|
||
},
|
||
features: ['企業級負載平衡', '高級SSL功能', '自訂規則', '即時監控', '7x24支援'],
|
||
},
|
||
],
|
||
},
|
||
en: {
|
||
title: 'Load Balancer SLB - Intelligent Traffic Distribution | CloudPro',
|
||
description:
|
||
'High-performance Load Balancer SLB intelligently distributes traffic across multiple servers, improving application availability and performance with HTTP/HTTPS, TCP/UDP protocol support.',
|
||
keywords: 'load balancer,SLB,traffic distribution,high availability,load balancing',
|
||
nav: {
|
||
home: 'Home',
|
||
products: 'Products',
|
||
solutions: 'Solutions',
|
||
support: 'Support',
|
||
contact: 'Contact',
|
||
},
|
||
hero: {
|
||
title: 'Load Balancer SLB',
|
||
subtitle: 'Intelligent Traffic Distribution Service',
|
||
description:
|
||
'Intelligently distribute access traffic across multiple cloud servers to improve application availability, scalability, and performance',
|
||
},
|
||
features: [
|
||
{
|
||
icon: Shield,
|
||
title: 'High Availability',
|
||
description:
|
||
'Multi-AZ deployment with automatic failover, ensuring 99.99% service availability',
|
||
},
|
||
{
|
||
icon: Zap,
|
||
title: 'Smart Scheduling',
|
||
description:
|
||
'Support multiple load balancing algorithms for intelligent traffic distribution and performance optimization',
|
||
},
|
||
{
|
||
icon: BarChart3,
|
||
title: 'Health Check',
|
||
description:
|
||
'Real-time monitoring of backend server health, automatic removal of unhealthy nodes',
|
||
},
|
||
{
|
||
icon: Globe,
|
||
title: 'Multi-Protocol Support',
|
||
description: 'Support HTTP/HTTPS, TCP/UDP and other protocols',
|
||
},
|
||
{
|
||
icon: Settings,
|
||
title: 'SSL Offloading',
|
||
description:
|
||
'Support SSL certificate management and SSL offloading to reduce backend server load',
|
||
},
|
||
{
|
||
icon: Activity,
|
||
title: 'Session Persistence',
|
||
description:
|
||
'Support session persistence to ensure continuity of user requests',
|
||
},
|
||
],
|
||
|
||
algorithms: [
|
||
{
|
||
name: 'Round Robin',
|
||
description: 'Distribute requests to servers in sequence',
|
||
useCase: 'Suitable for scenarios with similar server performance',
|
||
},
|
||
{
|
||
name: 'Weighted Round Robin',
|
||
description: 'Distribute requests based on server weights',
|
||
useCase: 'Suitable for scenarios with different server performance',
|
||
},
|
||
{
|
||
name: 'Least Connections',
|
||
description: 'Distribute requests to server with fewest connections',
|
||
useCase: 'Suitable for long connection applications',
|
||
},
|
||
{
|
||
name: 'IP Hash',
|
||
description: 'Hash distribution based on client IP',
|
||
useCase: 'Suitable for applications requiring session persistence',
|
||
},
|
||
],
|
||
|
||
plans: [
|
||
{
|
||
id: 'basic',
|
||
name: 'Basic',
|
||
popular: false,
|
||
price: '$45',
|
||
period: '/month',
|
||
specs: {
|
||
bandwidth: '10Mbps',
|
||
connections: '50K',
|
||
servers: '10',
|
||
protocols: 'HTTP/HTTPS',
|
||
},
|
||
features: [
|
||
'Basic load balancing',
|
||
'Health check',
|
||
'Basic monitoring',
|
||
'Technical support',
|
||
],
|
||
},
|
||
{
|
||
id: 'standard',
|
||
name: 'Standard',
|
||
popular: true,
|
||
price: '$89',
|
||
period: '/month',
|
||
specs: {
|
||
bandwidth: '50Mbps',
|
||
connections: '200K',
|
||
servers: '50',
|
||
protocols: 'HTTP/HTTPS/TCP/UDP',
|
||
},
|
||
features: [
|
||
'Advanced load balancing',
|
||
'SSL offloading',
|
||
'Session persistence',
|
||
'Advanced monitoring',
|
||
'Dedicated support',
|
||
],
|
||
},
|
||
{
|
||
id: 'premium',
|
||
name: 'Enterprise',
|
||
popular: false,
|
||
price: '$195',
|
||
period: '/month',
|
||
specs: {
|
||
bandwidth: '200Mbps',
|
||
connections: '1M',
|
||
servers: '200',
|
||
protocols: 'All protocols',
|
||
},
|
||
features: [
|
||
'Enterprise load balancing',
|
||
'Advanced SSL features',
|
||
'Custom rules',
|
||
'Real-time monitoring',
|
||
'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>
|
||
|
||
{/* Load Balancing Algorithms */}
|
||
<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'
|
||
? '負載平衡演算法'
|
||
: 'Load Balancing Algorithms'}
|
||
</h2>
|
||
<p className="text-xl text-amber-700">
|
||
{currentLang === 'zh'
|
||
? '多种算法满足不同应用场景需求'
|
||
: currentLang === 'zh-tw'
|
||
? '多種演算法滿足不同應用場景需求'
|
||
: 'Multiple algorithms to meet different application scenarios'}
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||
{t.algorithms.map((algorithm, 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"
|
||
>
|
||
<h3 className="text-xl font-bold text-amber-900 mb-4">
|
||
{algorithm.name}
|
||
</h3>
|
||
<p className="text-amber-700 mb-4">{algorithm.description}</p>
|
||
<div className="bg-amber-100 p-3 rounded-lg">
|
||
<p className="text-amber-800 text-sm font-medium">
|
||
{algorithm.useCase}
|
||
</p>
|
||
</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 load balancer configuration based on your traffic'}
|
||
</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">
|
||
{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'
|
||
? '併發連接:'
|
||
: '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'
|
||
? '後端伺服器:'
|
||
: 'Backend Servers:'}
|
||
</span>
|
||
<span className="font-semibold text-amber-900">
|
||
{plan.specs.servers}
|
||
</span>
|
||
</div>
|
||
<div className="flex justify-between">
|
||
<span className="text-amber-700">
|
||
{currentLang === 'zh'
|
||
? '协议支持:'
|
||
: currentLang === 'zh-tw'
|
||
? '協定支援:'
|
||
: 'Protocols:'}
|
||
</span>
|
||
<span className="font-semibold text-amber-900">
|
||
{plan.specs.protocols}
|
||
</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>
|
||
);
|
||
}
|