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>
|
|||
|
|
);
|
|||
|
|
}
|