385 lines
15 KiB
TypeScript
385 lines
15 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import { useTDK } from '../../../lib/useTDK';
|
|
import { useRouter, usePathname } from 'next/navigation';
|
|
import Navigation from '../../../components/Navigation';
|
|
import Footer from '../../../components/Footer';
|
|
import BackgroundElements from '../../../components/BackgroundElements';
|
|
|
|
interface PageProps {
|
|
params: { locale: string };
|
|
}
|
|
|
|
export default function ProductsPage({ params }: PageProps) {
|
|
const [currentLang, setCurrentLang] = useState(params.locale);
|
|
const [isLoaded, setIsLoaded] = useState(false);
|
|
const router = useRouter();
|
|
const pathname = usePathname();
|
|
|
|
// Update TDK when language changes
|
|
useTDK(currentLang, 'products');
|
|
|
|
const translations = {
|
|
'zh-CN': {
|
|
nav: {
|
|
home: '首页',
|
|
products: '产品',
|
|
pricing: '价格',
|
|
support: '支持',
|
|
contact: '联系我们',
|
|
},
|
|
products: {
|
|
title: '我们的产品',
|
|
subtitle: '全面的云服务器解决方案',
|
|
description: '从基础云服务器到企业级解决方案，满足您的所有需求',
|
|
basic: {
|
|
title: '基础版',
|
|
price: '¥99/月',
|
|
features: ['2核CPU', '4GB内存', '50GB SSD', '1TB流量', '基础支持'],
|
|
},
|
|
pro: {
|
|
title: '专业版',
|
|
price: '¥299/月',
|
|
features: ['4核CPU', '8GB内存', '100GB SSD', '3TB流量', '优先支持', 'SSL证书'],
|
|
},
|
|
enterprise: {
|
|
title: '企业版',
|
|
price: '¥999/月',
|
|
features: [
|
|
'8核CPU',
|
|
'16GB内存',
|
|
'500GB SSD',
|
|
'无限流量',
|
|
'24/7专属支持',
|
|
'DDoS防护',
|
|
'备份服务',
|
|
],
|
|
},
|
|
cta: '立即购买',
|
|
},
|
|
footer: {
|
|
copyright: `© ${new Date().getFullYear()} CloudProxy. 版权所有.`,
|
|
},
|
|
},
|
|
'zh-TW': {
|
|
nav: {
|
|
home: '首頁',
|
|
products: '產品',
|
|
pricing: '價格',
|
|
support: '支援',
|
|
contact: '聯絡我們',
|
|
},
|
|
products: {
|
|
title: '我們的產品',
|
|
subtitle: '全面的雲端伺服器解決方案',
|
|
description: '從基礎雲端伺服器到企業級解決方案，滿足您的所有需求',
|
|
basic: {
|
|
title: '基礎版',
|
|
price: 'NT$399/月',
|
|
features: ['2核CPU', '4GB記憶體', '50GB SSD', '1TB流量', '基礎支援'],
|
|
},
|
|
pro: {
|
|
title: '專業版',
|
|
price: 'NT$1199/月',
|
|
features: [
|
|
'4核CPU',
|
|
'8GB記憶體',
|
|
'100GB SSD',
|
|
'3TB流量',
|
|
'優先支援',
|
|
'SSL憑證',
|
|
],
|
|
},
|
|
enterprise: {
|
|
title: '企業版',
|
|
price: 'NT$3999/月',
|
|
features: [
|
|
'8核CPU',
|
|
'16GB記憶體',
|
|
'500GB SSD',
|
|
'無限流量',
|
|
'24/7專屬支援',
|
|
'DDoS防護',
|
|
'備份服務',
|
|
],
|
|
},
|
|
cta: '立即購買',
|
|
},
|
|
footer: {
|
|
copyright: `© ${new Date().getFullYear()} CloudProxy. 版權所有.`,
|
|
},
|
|
},
|
|
en: {
|
|
nav: {
|
|
home: 'Home',
|
|
products: 'Products',
|
|
pricing: 'Pricing',
|
|
support: 'Support',
|
|
contact: 'Contact',
|
|
},
|
|
products: {
|
|
title: 'Our Products',
|
|
subtitle: 'Comprehensive Cloud Server Solutions',
|
|
description:
|
|
'From basic cloud servers to enterprise solutions, we meet all your needs',
|
|
basic: {
|
|
title: 'Basic',
|
|
price: '$15/month',
|
|
features: [
|
|
'2 CPU Cores',
|
|
'4GB RAM',
|
|
'50GB SSD',
|
|
'1TB Bandwidth',
|
|
'Basic Support',
|
|
],
|
|
},
|
|
pro: {
|
|
title: 'Professional',
|
|
price: '$45/month',
|
|
features: [
|
|
'4 CPU Cores',
|
|
'8GB RAM',
|
|
'100GB SSD',
|
|
'3TB Bandwidth',
|
|
'Priority Support',
|
|
'SSL Certificate',
|
|
],
|
|
},
|
|
enterprise: {
|
|
title: 'Enterprise',
|
|
price: '$149/month',
|
|
features: [
|
|
'8 CPU Cores',
|
|
'16GB RAM',
|
|
'500GB SSD',
|
|
'Unlimited Bandwidth',
|
|
'24/7 Dedicated Support',
|
|
'DDoS Protection',
|
|
'Backup Service',
|
|
],
|
|
},
|
|
cta: 'Buy Now',
|
|
},
|
|
footer: {
|
|
copyright: `© ${new Date().getFullYear()} CloudProxy. All rights reserved.`,
|
|
},
|
|
},
|
|
ko: {
|
|
nav: {
|
|
home: '홈',
|
|
products: '제품',
|
|
pricing: '가격',
|
|
support: '지원',
|
|
contact: '연락처',
|
|
},
|
|
products: {
|
|
title: '우리의 제품',
|
|
subtitle: '포괄적인 클라우드 서버 솔루션',
|
|
description:
|
|
'기본 클라우드 서버부터 엔터프라이즈 솔루션까지, 모든 요구사항을 충족합니다',
|
|
basic: {
|
|
title: '베이직',
|
|
price: '₩18,000/월',
|
|
features: ['2코어 CPU', '4GB RAM', '50GB SSD', '1TB 대역폭', '기본 지원'],
|
|
},
|
|
pro: {
|
|
title: '프로페셔널',
|
|
price: '₩54,000/월',
|
|
features: [
|
|
'4코어 CPU',
|
|
'8GB RAM',
|
|
'100GB SSD',
|
|
'3TB 대역폭',
|
|
'우선 지원',
|
|
'SSL 인증서',
|
|
],
|
|
},
|
|
enterprise: {
|
|
title: '엔터프라이즈',
|
|
price: '₩179,000/월',
|
|
features: [
|
|
'8코어 CPU',
|
|
'16GB RAM',
|
|
'500GB SSD',
|
|
'무제한 대역폭',
|
|
'24/7 전용 지원',
|
|
'DDoS 보호',
|
|
'백업 서비스',
|
|
],
|
|
},
|
|
cta: '지금 구매',
|
|
},
|
|
footer: {
|
|
copyright: `© ${new Date().getFullYear()} CloudProxy. 모든 권리 보유.`,
|
|
},
|
|
},
|
|
ja: {
|
|
nav: {
|
|
home: 'ホーム',
|
|
products: '製品',
|
|
pricing: '価格',
|
|
support: 'サポート',
|
|
contact: 'お問い合わせ',
|
|
},
|
|
products: {
|
|
title: '私たちの製品',
|
|
subtitle: '包括的なクラウドサーバーソリューション',
|
|
description:
|
|
'基本的なクラウドサーバーからエンタープライズソリューションまで、すべてのニーズにお応えします',
|
|
basic: {
|
|
title: 'ベーシック',
|
|
price: '¥2,000/月',
|
|
features: ['2コアCPU', '4GB RAM', '50GB SSD', '1TB帯域幅', '基本サポート'],
|
|
},
|
|
pro: {
|
|
title: 'プロフェッショナル',
|
|
price: '¥6,000/月',
|
|
features: [
|
|
'4コアCPU',
|
|
'8GB RAM',
|
|
'100GB SSD',
|
|
'3TB帯域幅',
|
|
'優先サポート',
|
|
'SSL証明書',
|
|
],
|
|
},
|
|
enterprise: {
|
|
title: 'エンタープライズ',
|
|
price: '¥20,000/月',
|
|
features: [
|
|
'8コアCPU',
|
|
'16GB RAM',
|
|
'500GB SSD',
|
|
'無制限帯域幅',
|
|
'24/7専用サポート',
|
|
'DDoS保護',
|
|
'バックアップサービス',
|
|
],
|
|
},
|
|
cta: '今すぐ購入',
|
|
},
|
|
footer: {
|
|
copyright: `© ${new Date().getFullYear()} CloudProxy. 全著作権所有.`,
|
|
},
|
|
},
|
|
};
|
|
|
|
const t = translations[currentLang as keyof typeof translations] || translations['zh-CN'];
|
|
|
|
useEffect(() => {
|
|
setIsLoaded(true);
|
|
setCurrentLang(params.locale);
|
|
}, [params.locale]);
|
|
|
|
const handleLanguageChange = (newLang: string) => {
|
|
const currentPath = pathname.replace(`/${currentLang}`, '');
|
|
router.push(`/${newLang}${currentPath}`);
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-900 text-white overflow-hidden" data-oid="gvokikz">
|
|
<BackgroundElements data-oid="2aoqylo" />
|
|
|
|
<Navigation
|
|
t={t}
|
|
currentLang={currentLang}
|
|
onLanguageChange={handleLanguageChange}
|
|
isLoaded={isLoaded}
|
|
data-oid="ogm-ejc"
|
|
/>
|
|
|
|
{/* Products Content */}
|
|
<main className="relative z-10 max-w-7xl mx-auto px-6 py-12" data-oid="wy6:ecu">
|
|
{/* Header */}
|
|
<div
|
|
className={`text-center mb-16 transition-all duration-1000 delay-300 ${isLoaded ? 'translate-y-0 opacity-100' : 'translate-y-20 opacity-0'}`}
|
|
data-oid="vf0n.e8"
|
|
>
|
|
<h1 className="text-5xl lg:text-6xl font-bold mb-6" data-oid="-og2dp_">
|
|
<span
|
|
className="bg-gradient-to-r from-white via-purple-200 to-pink-200 bg-clip-text text-transparent"
|
|
data-oid="t07m0fd"
|
|
>
|
|
{t.products.title}
|
|
</span>
|
|
</h1>
|
|
<p className="text-xl text-purple-300 mb-4" data-oid="_wgog53">
|
|
{t.products.subtitle}
|
|
</p>
|
|
<p className="text-lg text-gray-300 max-w-3xl mx-auto" data-oid="rw5z17i">
|
|
{t.products.description}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Product Cards */}
|
|
<div
|
|
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
|
|
data-oid="g7la5aa"
|
|
>
|
|
{[t.products.basic, t.products.pro, t.products.enterprise].map(
|
|
(product, index) => (
|
|
<div
|
|
key={index}
|
|
className={`group relative transition-all duration-1000 delay-${500 + index * 200} ${isLoaded ? 'translate-y-0 opacity-100' : 'translate-y-20 opacity-0'}`}
|
|
data-oid="1v2c_8-"
|
|
>
|
|
<div
|
|
className="bg-gray-800/50 backdrop-blur-sm p-8 rounded-2xl border border-gray-700 hover:border-purple-500/50 transition-all duration-300 hover:transform hover:scale-105 h-full flex flex-col"
|
|
data-oid="n7b.e72"
|
|
>
|
|
<div className="text-center mb-8" data-oid="p:upmr9">
|
|
<h3
|
|
className="text-2xl font-bold text-white mb-4"
|
|
data-oid="ax7p7wz"
|
|
>
|
|
{product.title}
|
|
</h3>
|
|
<div
|
|
className="text-4xl font-bold bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent mb-6"
|
|
data-oid="j3qsrxb"
|
|
>
|
|
{product.price}
|
|
</div>
|
|
</div>
|
|
|
|
<ul className="space-y-4 mb-8 flex-grow" data-oid="o92ug3l">
|
|
{product.features.map((feature, featureIndex) => (
|
|
<li
|
|
key={featureIndex}
|
|
className="flex items-center text-gray-300"
|
|
data-oid="q33ccbd"
|
|
>
|
|
<div
|
|
className="w-2 h-2 bg-purple-500 rounded-full mr-3"
|
|
data-oid="16rsuht"
|
|
></div>
|
|
{feature}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
<button
|
|
className="w-full px-6 py-3 bg-gradient-to-r from-purple-600 to-pink-600 rounded-lg font-semibold hover:from-purple-700 hover:to-pink-700 transition-all duration-300 transform hover:scale-105 mt-auto"
|
|
data-oid="tqnhyno"
|
|
>
|
|
{t.products.cta}
|
|
</button>
|
|
</div>
|
|
|
|
{/* Hover effect */}
|
|
<div
|
|
className="absolute inset-0 bg-gradient-to-r from-purple-500/10 to-pink-500/10 opacity-0 group-hover:opacity-100 rounded-2xl transition-opacity duration-300"
|
|
data-oid="a1.p4b1"
|
|
></div>
|
|
</div>
|
|
),
|
|
)}
|
|
</div>
|
|
</main>
|
|
|
|
<Footer t={t} data-oid="n8k_dlk" />
|
|
</div>
|
|
);
|
|
}
|