314 lines
14 KiB
TypeScript
314 lines
14 KiB
TypeScript
'use client';
|
||
|
||
import { useState, useEffect } from 'react';
|
||
import { Navigation } from '../components/Navigation';
|
||
import { HeroBanner } from '../components/Banner';
|
||
import { Footer } from '../components/Footer';
|
||
import { Head } from '../components/Head';
|
||
|
||
export default function Page() {
|
||
const [currentLang, setCurrentLang] = useState<'zh' | 'zh-tw' | 'en'>('zh');
|
||
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
||
|
||
const translations = {
|
||
zh: {
|
||
title: '云服务器代理商 - 专业云计算解决方案',
|
||
description:
|
||
'领先的云服务器代理商，提供阿里云、腾讯云、华为云等顶级云服务商的产品与服务，助力企业数字化转型。专业技术支持，7x24小时服务。',
|
||
keywords:
|
||
'云服务器,云计算,阿里云代理,腾讯云代理,华为云代理,云数据库,负载均衡,CDN加速,企业上云',
|
||
nav: {
|
||
home: '首页',
|
||
products: '产品',
|
||
solutions: '解决方案',
|
||
support: '支持',
|
||
news: '资讯',
|
||
contact: '联系我们',
|
||
},
|
||
hero: {
|
||
title: '专业云服务器解决方案',
|
||
subtitle: '为您的业务提供稳定、高效、安全的云计算服务',
|
||
description:
|
||
'我们是领先的云服务器代理商，提供全球顶级云服务商的产品与服务，助力企业数字化转型',
|
||
cta: '立即咨询',
|
||
demo: '产品演示',
|
||
},
|
||
features: {
|
||
title: '为什么选择我们',
|
||
items: [
|
||
{
|
||
title: '全球覆盖',
|
||
desc: '遍布全球的数据中心，确保低延迟高可用',
|
||
},
|
||
{
|
||
title: '专业服务',
|
||
desc: '7x24小时技术支持，专业团队保障',
|
||
},
|
||
{
|
||
title: '灵活配置',
|
||
desc: '按需配置，弹性扩展，成本可控',
|
||
},
|
||
{
|
||
title: '安全可靠',
|
||
desc: '企业级安全防护，数据安全有保障',
|
||
},
|
||
],
|
||
},
|
||
products: {
|
||
title: '产品服务',
|
||
items: [
|
||
{
|
||
name: '云服务器 ECS',
|
||
desc: '弹性计算服务，支持多种规格配置',
|
||
price: '¥99/月起',
|
||
},
|
||
{
|
||
name: '云数据库 RDS',
|
||
desc: '高可用关系型数据库服务',
|
||
price: '¥199/月起',
|
||
},
|
||
{
|
||
name: '负载均衡 SLB',
|
||
desc: '智能流量分发，提升应用可用性',
|
||
price: '¥299/月起',
|
||
},
|
||
],
|
||
},
|
||
footer: {
|
||
company: '云服务器代理商',
|
||
rights: '版权所有',
|
||
contact: '联系方式: support@cloudreseller.com',
|
||
},
|
||
},
|
||
'zh-tw': {
|
||
title: '雲伺服器代理商 - 專業雲端運算解決方案',
|
||
description:
|
||
'領先的雲伺服器代理商，提供阿里雲、騰訊雲、華為雲等頂級雲服務商的產品與服務，助力企業數位化轉型。專業技術支援，7x24小時服務。',
|
||
keywords:
|
||
'雲伺服器,雲端運算,阿里雲代理,騰訊雲代理,華為雲代理,雲資料庫,負載平衡,CDN加速,企業上雲',
|
||
nav: {
|
||
home: '首頁',
|
||
products: '產品',
|
||
solutions: '解決方案',
|
||
support: '支援',
|
||
news: '資訊',
|
||
contact: '聯絡我們',
|
||
},
|
||
hero: {
|
||
title: '專業雲伺服器解決方案',
|
||
subtitle: '為您的業務提供穩定、高效、安全的雲端運算服務',
|
||
description:
|
||
'我們是領先的雲伺服器代理商，提供全球頂級雲服務商的產品與服務，助力企業數位化轉型',
|
||
cta: '立即諮詢',
|
||
demo: '產品演示',
|
||
},
|
||
features: {
|
||
title: '為什麼選擇我們',
|
||
items: [
|
||
{
|
||
title: '全球覆蓋',
|
||
desc: '遍佈全球的資料中心，確保低延遲高可用',
|
||
},
|
||
{
|
||
title: '專業服務',
|
||
desc: '7x24小時技術支援，專業團隊保障',
|
||
},
|
||
{
|
||
title: '靈活配置',
|
||
desc: '按需配置，彈性擴展，成本可控',
|
||
},
|
||
{
|
||
title: '安全可靠',
|
||
desc: '企業級安全防護，資料安全有保障',
|
||
},
|
||
],
|
||
},
|
||
products: {
|
||
title: '產品服務',
|
||
items: [
|
||
{
|
||
name: '雲伺服器 ECS',
|
||
desc: '彈性運算服務，支援多種規格配置',
|
||
price: 'NT$2,990/月起',
|
||
},
|
||
{
|
||
name: '雲資料庫 RDS',
|
||
desc: '高可用關聯式資料庫服務',
|
||
price: 'NT$5,990/月起',
|
||
},
|
||
{
|
||
name: '負載平衡 SLB',
|
||
desc: '智慧流量分發，提升應用可用性',
|
||
price: 'NT$8,990/月起',
|
||
},
|
||
],
|
||
},
|
||
footer: {
|
||
company: '雲伺服器代理商',
|
||
rights: '版權所有',
|
||
contact: '聯絡方式: support@cloudreseller.com',
|
||
},
|
||
},
|
||
en: {
|
||
title: 'Cloud Server Reseller - Professional Cloud Solutions',
|
||
description:
|
||
'Leading cloud server reseller providing Alibaba Cloud, Tencent Cloud, Huawei Cloud and other top-tier cloud services. Professional technical support with 24/7 service for enterprise digital transformation.',
|
||
keywords:
|
||
'cloud server,cloud computing,alibaba cloud reseller,tencent cloud reseller,huawei cloud reseller,cloud database,load balancer,CDN acceleration,enterprise cloud',
|
||
nav: {
|
||
home: 'Home',
|
||
products: 'Products',
|
||
solutions: 'Solutions',
|
||
support: 'Support',
|
||
news: 'News',
|
||
contact: 'Contact',
|
||
},
|
||
hero: {
|
||
title: 'Professional Cloud Server Solutions',
|
||
subtitle:
|
||
'Stable, Efficient, and Secure Cloud Computing Services for Your Business',
|
||
description:
|
||
'We are a leading cloud server reseller, providing products and services from top global cloud providers to accelerate your digital transformation',
|
||
cta: 'Get Started',
|
||
demo: 'View Demo',
|
||
},
|
||
features: {
|
||
title: 'Why Choose Us',
|
||
items: [
|
||
{
|
||
title: 'Global Coverage',
|
||
desc: 'Worldwide data centers ensuring low latency and high availability',
|
||
},
|
||
{
|
||
title: 'Professional Service',
|
||
desc: '24/7 technical support with professional team guarantee',
|
||
},
|
||
{
|
||
title: 'Flexible Configuration',
|
||
desc: 'On-demand configuration, elastic scaling, cost-effective',
|
||
},
|
||
{
|
||
title: 'Secure & Reliable',
|
||
desc: 'Enterprise-grade security protection, data safety guaranteed',
|
||
},
|
||
],
|
||
},
|
||
products: {
|
||
title: 'Products & Services',
|
||
items: [
|
||
{
|
||
name: 'Cloud Server ECS',
|
||
desc: 'Elastic Compute Service with multiple specifications',
|
||
price: 'From $15/month',
|
||
},
|
||
{
|
||
name: 'Cloud Database RDS',
|
||
desc: 'High-availability relational database service',
|
||
price: 'From $29/month',
|
||
},
|
||
{
|
||
name: 'Load Balancer SLB',
|
||
desc: 'Intelligent traffic distribution for better availability',
|
||
price: 'From $45/month',
|
||
},
|
||
],
|
||
},
|
||
footer: {
|
||
company: 'Cloud Server Reseller',
|
||
rights: 'All Rights Reserved',
|
||
contact: 'Contact: support@cloudreseller.com',
|
||
},
|
||
},
|
||
};
|
||
|
||
const t = translations[currentLang];
|
||
|
||
useEffect(() => {
|
||
// Auto-detect language from browser or URL
|
||
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 - TDK Management */}
|
||
<Head
|
||
title={t.title}
|
||
description={t.description}
|
||
keywords={t.keywords}
|
||
currentLang={currentLang}
|
||
/>
|
||
|
||
{/* Navigation */}
|
||
<Navigation
|
||
currentLang={currentLang}
|
||
onLanguageChange={setCurrentLang}
|
||
translations={translations}
|
||
/>
|
||
|
||
{/* Hero Banner with Carousel */}
|
||
<HeroBanner currentLang={currentLang} translations={translations} />
|
||
|
||
{/* Features Section */}
|
||
<section className="py-20 bg-white">
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<h2 className="text-3xl md:text-4xl font-bold text-center text-amber-900 mb-16">
|
||
{t.features.title}
|
||
</h2>
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||
{t.features.items.map((feature, 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-shadow border border-amber-200"
|
||
>
|
||
<div className="w-12 h-12 bg-gradient-to-r from-yellow-400 to-amber-500 rounded-lg mb-6 flex items-center justify-center">
|
||
<div className="w-6 h-6 bg-white rounded"></div>
|
||
</div>
|
||
<h3 className="text-xl font-semibold text-amber-900 mb-4">
|
||
{feature.title}
|
||
</h3>
|
||
<p className="text-amber-700">{feature.desc}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Products Section */}
|
||
<section className="py-20 bg-gradient-to-br from-amber-900 to-yellow-800">
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<h2 className="text-3xl md:text-4xl font-bold text-center text-yellow-100 mb-16">
|
||
{t.products.title}
|
||
</h2>
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||
{t.products.items.map((product, index) => (
|
||
<div
|
||
key={index}
|
||
className="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition-all transform hover:scale-105"
|
||
>
|
||
<h3 className="text-2xl font-semibold text-amber-900 mb-4">
|
||
{product.name}
|
||
</h3>
|
||
<p className="text-amber-700 mb-6">{product.desc}</p>
|
||
<div className="text-3xl font-bold text-yellow-600 mb-6">
|
||
{product.price}
|
||
</div>
|
||
<button className="w-full bg-gradient-to-r from-yellow-500 to-amber-500 text-white py-3 rounded-lg font-semibold hover:from-yellow-600 hover:to-amber-600 transition-all">
|
||
{currentLang === 'zh' ? '了解更多' : 'Learn More'}
|
||
</button>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Footer */}
|
||
<Footer currentLang={currentLang} translations={translations} />
|
||
</div>
|
||
);
|
||
}
|