324 lines
14 KiB
TypeScript
324 lines
14 KiB
TypeScript
'use client';
|
||
|
||
import { useState, useEffect } from 'react';
|
||
import Link from 'next/link';
|
||
import Header from '@/app/components/Header';
|
||
import Footer from '@/app/components/Footer';
|
||
|
||
interface ProductsPageClientProps {
|
||
locale: string;
|
||
}
|
||
|
||
export default function ProductsPageClient({ locale }: ProductsPageClientProps) {
|
||
const [language, setLanguage] = useState(
|
||
locale === 'zh' ? 'zh-CN' : locale === 'zh-TW' ? 'zh-TW' : 'en',
|
||
);
|
||
|
||
const languages = {
|
||
'zh-CN': {
|
||
nav: {
|
||
home: '首页',
|
||
products: '产品与服务',
|
||
news: '新闻资讯',
|
||
support: '客户支持',
|
||
about: '关于我们',
|
||
contact: '联系我们',
|
||
},
|
||
title: '产品与服务',
|
||
subtitle: '专业的AWS云服务解决方案',
|
||
categories: [
|
||
{
|
||
title: '云服务器',
|
||
products: [
|
||
{
|
||
name: '轻量云服务器',
|
||
desc: 'AWS 轻量云服务器是针对个人开发者、中小企业以及学生群体的云服务，提供高性价比的云计算资源和服务。',
|
||
price: '¥99/月起',
|
||
features: ['1核1GB', '20GB SSD', '1TB流量', '1Mbps带宽'],
|
||
},
|
||
{
|
||
name: 'EC2服务器',
|
||
desc: '提供弹性 100 Gbps 500Gbps的大宽带服务器，适用于需要大宽带大流量的高性能应用场景。',
|
||
price: '¥299/月起',
|
||
features: ['2核4GB', '40GB SSD', '无限流量', '10Mbps带宽'],
|
||
},
|
||
],
|
||
},
|
||
{
|
||
title: '安全防护',
|
||
products: [
|
||
{
|
||
name: '高防服务器',
|
||
desc: '高防服务器适用于对网络安全要求较高的应用场景，提供强大的DDoS防护能力。',
|
||
price: '¥599/月起',
|
||
features: ['4核8GB', '100GB SSD', 'DDoS防护', '100Mbps带宽'],
|
||
},
|
||
],
|
||
},
|
||
{
|
||
title: '存储服务',
|
||
products: [
|
||
{
|
||
name: 'S3云存储',
|
||
desc: '高可靠、高可用的对象存储服务，支持海量数据存储和访问。',
|
||
price: '¥0.1/GB/月',
|
||
features: ['99.9%可用性', '11个9的持久性', 'RESTful API', '全球CDN'],
|
||
},
|
||
],
|
||
},
|
||
],
|
||
|
||
contact: '立即咨询',
|
||
footer: {
|
||
sections: [
|
||
{
|
||
title: '目录',
|
||
items: ['首页', '产品与服务', '新闻资讯', '客户支持', '关于我们'],
|
||
},
|
||
{
|
||
title: '热门产品',
|
||
items: [
|
||
'轻量云服务器',
|
||
'站群服务器',
|
||
'EC2服务器',
|
||
'高防服务器',
|
||
'S3云存储',
|
||
],
|
||
},
|
||
{ title: '客户支持', items: ['技术支持', '在线客服', '帮助文档', '服务状态'] },
|
||
{ title: '', items: ['新闻资讯', '关于我们', '隐私政策', '站点地图'] },
|
||
],
|
||
},
|
||
},
|
||
'zh-TW': {
|
||
nav: {
|
||
home: '首頁',
|
||
products: '產品與服務',
|
||
news: '新聞資訊',
|
||
support: '客戶支持',
|
||
about: '關於我們',
|
||
contact: '聯繫我們',
|
||
},
|
||
title: '產品與服務',
|
||
subtitle: '專業的AWS雲服務解決方案',
|
||
categories: [
|
||
{
|
||
title: '雲服務器',
|
||
products: [
|
||
{
|
||
name: '輕量雲服務器',
|
||
desc: 'AWS 輕量雲服務器是針對個人開發者、中小企業以及學生群體的雲服務，提供高性價比的雲計算資源和服務。',
|
||
price: '¥99/月起',
|
||
features: ['1核1GB', '20GB SSD', '1TB流量', '1Mbps帶寬'],
|
||
},
|
||
{
|
||
name: 'EC2服務器',
|
||
desc: '提供彈性 100 Gbps 500Gbps的大寬帶服務器，適用於需要大寬帶大流量的高性能應用場景。',
|
||
price: '¥299/月起',
|
||
features: ['2核4GB', '40GB SSD', '無限流量', '10Mbps帶寬'],
|
||
},
|
||
],
|
||
},
|
||
{
|
||
title: '安全防護',
|
||
products: [
|
||
{
|
||
name: '高防服務器',
|
||
desc: '高防服務器適用於對網絡安全要求較高的應用場景，提供強大的DDoS防護能力。',
|
||
price: '¥599/月起',
|
||
features: ['4核8GB', '100GB SSD', 'DDoS防護', '100Mbps帶寬'],
|
||
},
|
||
],
|
||
},
|
||
{
|
||
title: '存儲服務',
|
||
products: [
|
||
{
|
||
name: 'S3雲存儲',
|
||
desc: '高可靠、高可用的對象存儲服務，支持海量數據存儲和訪問。',
|
||
price: '¥0.1/GB/月',
|
||
features: ['99.9%可用性', '11個9的持久性', 'RESTful API', '全球CDN'],
|
||
},
|
||
],
|
||
},
|
||
],
|
||
|
||
contact: '立即諮詢',
|
||
footer: {
|
||
sections: [
|
||
{
|
||
title: '目錄',
|
||
items: ['首頁', '產品與服務', '新聞資訊', '客戶支持', '關於我們'],
|
||
},
|
||
{
|
||
title: '熱門產品',
|
||
items: [
|
||
'輕量雲服務器',
|
||
'站群服務器',
|
||
'EC2服務器',
|
||
'高防服務器',
|
||
'S3雲存儲',
|
||
],
|
||
},
|
||
{ title: '客戶支持', items: ['技術支持', '在線客服', '幫助文檔', '服務狀態'] },
|
||
{ title: '', items: ['新聞資訊', '關於我們', '隱私政策', '站點地圖'] },
|
||
],
|
||
},
|
||
},
|
||
en: {
|
||
nav: {
|
||
home: 'Home',
|
||
products: 'Products & Services',
|
||
news: 'News',
|
||
support: 'Support',
|
||
about: 'About Us',
|
||
contact: 'Contact Us',
|
||
},
|
||
title: 'Products & Services',
|
||
subtitle: 'Professional AWS Cloud Service Solutions',
|
||
categories: [
|
||
{
|
||
title: 'Cloud Servers',
|
||
products: [
|
||
{
|
||
name: 'Lightweight Cloud Server',
|
||
desc: 'AWS lightweight cloud server is a cloud service for individual developers, small and medium enterprises and student groups, providing cost-effective cloud computing resources and services.',
|
||
price: '¥99/month',
|
||
features: ['1 Core 1GB', '20GB SSD', '1TB Traffic', '1Mbps Bandwidth'],
|
||
},
|
||
{
|
||
name: 'EC2 Server',
|
||
desc: 'Provides elastic 100 Gbps 500Gbps high-bandwidth servers, suitable for high-performance application scenarios that require high bandwidth and large traffic.',
|
||
price: '¥299/month',
|
||
features: [
|
||
'2 Core 4GB',
|
||
'40GB SSD',
|
||
'Unlimited Traffic',
|
||
'10Mbps Bandwidth',
|
||
],
|
||
},
|
||
],
|
||
},
|
||
{
|
||
title: 'Security Protection',
|
||
products: [
|
||
{
|
||
name: 'High-Defense Server',
|
||
desc: 'High-defense servers are suitable for application scenarios with high network security requirements, providing powerful DDoS protection capabilities.',
|
||
price: '¥599/month',
|
||
features: [
|
||
'4 Core 8GB',
|
||
'100GB SSD',
|
||
'DDoS Protection',
|
||
'100Mbps Bandwidth',
|
||
],
|
||
},
|
||
],
|
||
},
|
||
{
|
||
title: 'Storage Services',
|
||
products: [
|
||
{
|
||
name: 'S3 Cloud Storage',
|
||
desc: 'Highly reliable and available object storage service that supports massive data storage and access.',
|
||
price: '¥0.1/GB/month',
|
||
features: [
|
||
'99.9% Availability',
|
||
'11 9s Durability',
|
||
'RESTful API',
|
||
'Global CDN',
|
||
],
|
||
},
|
||
],
|
||
},
|
||
],
|
||
|
||
contact: 'Contact Now',
|
||
footer: {
|
||
sections: [
|
||
{
|
||
title: 'Directory',
|
||
items: ['Home', 'Products & Services', 'News', 'Support', 'About Us'],
|
||
},
|
||
{
|
||
title: 'Popular Products',
|
||
items: [
|
||
'Lightweight Cloud Server',
|
||
'Station Group Server',
|
||
'EC2 Server',
|
||
'High-Defense Server',
|
||
'S3 Cloud Storage',
|
||
],
|
||
},
|
||
{ title: 'Customer Support', items: ['Technical Support', 'Online Service', 'Help Documentation', 'Service Status'] },
|
||
{ title: '', items: ['News', 'About Us', 'Privacy Policy', 'Site Map'] },
|
||
],
|
||
},
|
||
},
|
||
};
|
||
|
||
const t = languages[language as keyof typeof languages] || languages['zh-CN'];
|
||
|
||
return (
|
||
<div className="min-h-screen bg-white">
|
||
<Header
|
||
language={language}
|
||
setLanguage={setLanguage}
|
||
translations={t}
|
||
locale={locale}
|
||
/>
|
||
|
||
{/* Hero Section */}
|
||
<section className="bg-blue-600 text-white h-96 flex items-center justify-center">
|
||
<div className="max-w-6xl mx-auto px-4 text-center">
|
||
<h1 className="text-4xl font-bold mb-4">{t.title}</h1>
|
||
<p className="text-xl">{t.subtitle}</p>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Products Section */}
|
||
<section className="py-16">
|
||
<div className="max-w-6xl mx-auto px-4">
|
||
{t.categories.map((category, categoryIndex) => (
|
||
<div key={categoryIndex} className="mb-16">
|
||
<h2 className="text-3xl font-bold text-center mb-12">
|
||
{category.title}
|
||
</h2>
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||
{category.products.map((product, productIndex) => (
|
||
<div
|
||
key={productIndex}
|
||
className="bg-white rounded-lg shadow-lg p-6 border"
|
||
>
|
||
<h3 className="text-xl font-bold mb-3">{product.name}</h3>
|
||
<p className="text-gray-600 mb-4">{product.desc}</p>
|
||
<div className="text-2xl font-bold text-orange-500 mb-4">
|
||
{product.price}
|
||
</div>
|
||
<ul className="space-y-2 mb-6">
|
||
{product.features.map((feature, featureIndex) => (
|
||
<li
|
||
key={featureIndex}
|
||
className="flex items-center"
|
||
>
|
||
<span className="w-2 h-2 bg-blue-600 rounded-full mr-3"></span>
|
||
{feature}
|
||
</li>
|
||
))}
|
||
</ul>
|
||
<button className="w-full bg-orange-500 text-white py-2 rounded hover:bg-orange-600">
|
||
{t.contact}
|
||
</button>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</section>
|
||
|
||
<Footer translations={t} />
|
||
</div>
|
||
);
|
||
}
|