388 lines
16 KiB
TypeScript
388 lines
16 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 PricingPage({ params }: PageProps) {
|
|
const [currentLang, setCurrentLang] = useState(params.locale);
|
|
const [isLoaded, setIsLoaded] = useState(false);
|
|
const [billingCycle, setBillingCycle] = useState<'monthly' | 'yearly'>('monthly');
|
|
const router = useRouter();
|
|
const pathname = usePathname();
|
|
|
|
// Update TDK when language changes
|
|
useTDK(currentLang, 'pricing');
|
|
|
|
const translations = {
|
|
'zh-CN': {
|
|
nav: {
|
|
home: '首页',
|
|
products: '产品',
|
|
pricing: '价格',
|
|
support: '支持',
|
|
contact: '联系我们',
|
|
},
|
|
pricing: {
|
|
title: '选择适合您的方案',
|
|
subtitle: '灵活的价格方案',
|
|
description: '无论您是个人开发者还是大型企业，我们都有适合您的方案',
|
|
monthly: '按月付费',
|
|
yearly: '按年付费',
|
|
yearlyDiscount: '节省20%',
|
|
mostPopular: '最受欢迎',
|
|
getStarted: '开始使用',
|
|
features: '功能特性',
|
|
allFeatures: '查看所有功能',
|
|
},
|
|
footer: {
|
|
copyright: `© ${new Date().getFullYear()} CloudProxy. 版权所有.`,
|
|
},
|
|
},
|
|
'zh-TW': {
|
|
nav: {
|
|
home: '首頁',
|
|
products: '產品',
|
|
pricing: '價格',
|
|
support: '支援',
|
|
contact: '聯絡我們',
|
|
},
|
|
pricing: {
|
|
title: '選擇適合您的方案',
|
|
subtitle: '靈活的價格方案',
|
|
description: '無論您是個人開發者還是大型企業，我們都有適合您的方案',
|
|
monthly: '按月付費',
|
|
yearly: '按年付費',
|
|
yearlyDiscount: '節省20%',
|
|
mostPopular: '最受歡迎',
|
|
getStarted: '開始使用',
|
|
features: '功能特性',
|
|
allFeatures: '查看所有功能',
|
|
},
|
|
footer: {
|
|
copyright: `© ${new Date().getFullYear()} CloudProxy. 版權所有.`,
|
|
},
|
|
},
|
|
en: {
|
|
nav: {
|
|
home: 'Home',
|
|
products: 'Products',
|
|
pricing: 'Pricing',
|
|
support: 'Support',
|
|
contact: 'Contact',
|
|
},
|
|
pricing: {
|
|
title: 'Choose Your Perfect Plan',
|
|
subtitle: 'Flexible Pricing Plans',
|
|
description:
|
|
"Whether you're an individual developer or a large enterprise, we have the right plan for you",
|
|
monthly: 'Monthly',
|
|
yearly: 'Yearly',
|
|
yearlyDiscount: 'Save 20%',
|
|
mostPopular: 'Most Popular',
|
|
getStarted: 'Get Started',
|
|
features: 'Features',
|
|
allFeatures: 'View All Features',
|
|
},
|
|
footer: {
|
|
copyright: `© ${new Date().getFullYear()} CloudProxy. All rights reserved.`,
|
|
},
|
|
},
|
|
ko: {
|
|
nav: {
|
|
home: '홈',
|
|
products: '제품',
|
|
pricing: '가격',
|
|
support: '지원',
|
|
contact: '연락처',
|
|
},
|
|
pricing: {
|
|
title: '완벽한 플랜을 선택하세요',
|
|
subtitle: '유연한 가격 플랜',
|
|
description: '개인 개발자든 대기업이든, 귀하에게 적합한 플랜이 있습니다',
|
|
monthly: '월간',
|
|
yearly: '연간',
|
|
yearlyDiscount: '20% 절약',
|
|
mostPopular: '가장 인기',
|
|
getStarted: '시작하기',
|
|
features: '기능',
|
|
allFeatures: '모든 기능 보기',
|
|
},
|
|
footer: {
|
|
copyright: `© ${new Date().getFullYear()} CloudProxy. 모든 권리 보유.`,
|
|
},
|
|
},
|
|
ja: {
|
|
nav: {
|
|
home: 'ホーム',
|
|
products: '製品',
|
|
pricing: '価格',
|
|
support: 'サポート',
|
|
contact: 'お問い合わせ',
|
|
},
|
|
pricing: {
|
|
title: '最適なプランを選択',
|
|
subtitle: '柔軟な価格プラン',
|
|
description: '個人開発者でも大企業でも、あなたに最適なプランをご用意しています',
|
|
monthly: '月額',
|
|
yearly: '年額',
|
|
yearlyDiscount: '20%節約',
|
|
mostPopular: '最も人気',
|
|
getStarted: '始める',
|
|
features: '機能',
|
|
allFeatures: 'すべての機能を見る',
|
|
},
|
|
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}`);
|
|
};
|
|
|
|
const plans = [
|
|
{
|
|
name: 'Starter',
|
|
monthlyPrice: currentLang.startsWith('zh')
|
|
? '¥99'
|
|
: currentLang === 'ko'
|
|
? '₩18,000'
|
|
: currentLang === 'ja'
|
|
? '¥2,000'
|
|
: '$15',
|
|
yearlyPrice: currentLang.startsWith('zh')
|
|
? '¥79'
|
|
: currentLang === 'ko'
|
|
? '₩14,400'
|
|
: currentLang === 'ja'
|
|
? '¥1,600'
|
|
: '$12',
|
|
features: ['2 CPU Cores', '4GB RAM', '50GB SSD', '1TB Bandwidth'],
|
|
popular: false,
|
|
},
|
|
{
|
|
name: 'Professional',
|
|
monthlyPrice: currentLang.startsWith('zh')
|
|
? '¥299'
|
|
: currentLang === 'ko'
|
|
? '₩54,000'
|
|
: currentLang === 'ja'
|
|
? '¥6,000'
|
|
: '$45',
|
|
yearlyPrice: currentLang.startsWith('zh')
|
|
? '¥239'
|
|
: currentLang === 'ko'
|
|
? '₩43,200'
|
|
: currentLang === 'ja'
|
|
? '¥4,800'
|
|
: '$36',
|
|
features: ['4 CPU Cores', '8GB RAM', '100GB SSD', '3TB Bandwidth', 'SSL Certificate'],
|
|
popular: true,
|
|
},
|
|
{
|
|
name: 'Enterprise',
|
|
monthlyPrice: currentLang.startsWith('zh')
|
|
? '¥999'
|
|
: currentLang === 'ko'
|
|
? '₩179,000'
|
|
: currentLang === 'ja'
|
|
? '¥20,000'
|
|
: '$149',
|
|
yearlyPrice: currentLang.startsWith('zh')
|
|
? '¥799'
|
|
: currentLang === 'ko'
|
|
? '₩143,200'
|
|
: currentLang === 'ja'
|
|
? '¥16,000'
|
|
: '$119',
|
|
features: [
|
|
'8 CPU Cores',
|
|
'16GB RAM',
|
|
'500GB SSD',
|
|
'Unlimited Bandwidth',
|
|
'24/7 Support',
|
|
],
|
|
|
|
popular: false,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-900 text-white overflow-hidden" data-oid="9mszz2a">
|
|
<BackgroundElements data-oid="i52vus3" />
|
|
|
|
<Navigation
|
|
t={t}
|
|
currentLang={currentLang}
|
|
onLanguageChange={handleLanguageChange}
|
|
isLoaded={isLoaded}
|
|
data-oid="og3zodi"
|
|
/>
|
|
|
|
<main className="relative z-10 max-w-7xl mx-auto px-6 py-12" data-oid="nw37xp1">
|
|
{/* 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="4k62m0d"
|
|
>
|
|
<h1 className="text-5xl lg:text-6xl font-bold mb-6" data-oid="9.cr5pu">
|
|
<span
|
|
className="bg-gradient-to-r from-white via-purple-200 to-pink-200 bg-clip-text text-transparent"
|
|
data-oid="7-8eqli"
|
|
>
|
|
{t.pricing.title}
|
|
</span>
|
|
</h1>
|
|
<p className="text-xl text-purple-300 mb-4" data-oid="4ltvzcu">
|
|
{t.pricing.subtitle}
|
|
</p>
|
|
<p className="text-lg text-gray-300 max-w-3xl mx-auto mb-8" data-oid="cdat1b_">
|
|
{t.pricing.description}
|
|
</p>
|
|
|
|
{/* Billing Toggle */}
|
|
<div
|
|
className="inline-flex items-center bg-gray-800/50 backdrop-blur-sm rounded-xl p-2 border border-gray-700"
|
|
data-oid="yok0kup"
|
|
>
|
|
<button
|
|
onClick={() => setBillingCycle('monthly')}
|
|
className={`px-6 py-2 rounded-lg font-medium transition-all duration-300 ${
|
|
billingCycle === 'monthly'
|
|
? 'bg-purple-600 text-white'
|
|
: 'text-gray-400 hover:text-white'
|
|
}`}
|
|
data-oid="n4wb2yf"
|
|
>
|
|
{t.pricing.monthly}
|
|
</button>
|
|
<button
|
|
onClick={() => setBillingCycle('yearly')}
|
|
className={`px-6 py-2 rounded-lg font-medium transition-all duration-300 relative ${
|
|
billingCycle === 'yearly'
|
|
? 'bg-purple-600 text-white'
|
|
: 'text-gray-400 hover:text-white'
|
|
}`}
|
|
data-oid="9_9ibpw"
|
|
>
|
|
{t.pricing.yearly}
|
|
<span
|
|
className="absolute -top-2 -right-2 bg-green-500 text-xs px-2 py-1 rounded-full text-white"
|
|
data-oid="n_bpnjl"
|
|
>
|
|
{t.pricing.yearlyDiscount}
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Pricing Cards */}
|
|
<div
|
|
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
|
|
data-oid="llz9mj4"
|
|
>
|
|
{plans.map((plan, 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=":uv.xuu"
|
|
>
|
|
{plan.popular && (
|
|
<div
|
|
className="absolute -top-4 left-1/2 transform -translate-x-1/2 bg-gradient-to-r from-purple-600 to-pink-600 text-white px-4 py-2 rounded-full text-sm font-medium"
|
|
data-oid="93fy91t"
|
|
>
|
|
{t.pricing.mostPopular}
|
|
</div>
|
|
)}
|
|
|
|
<div
|
|
className={`bg-gray-800/50 backdrop-blur-sm p-8 rounded-2xl border transition-all duration-300 hover:transform hover:scale-105 h-full flex flex-col ${
|
|
plan.popular
|
|
? 'border-purple-500/50 hover:border-purple-400'
|
|
: 'border-gray-700 hover:border-purple-500/50'
|
|
}`}
|
|
data-oid="nmca--."
|
|
>
|
|
<div className="text-center mb-8" data-oid="_v:rtqn">
|
|
<h3
|
|
className="text-2xl font-bold text-white mb-4"
|
|
data-oid="pp:q6.b"
|
|
>
|
|
{plan.name}
|
|
</h3>
|
|
<div
|
|
className="text-5xl font-bold bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent mb-2"
|
|
data-oid="0-70m1h"
|
|
>
|
|
{billingCycle === 'monthly'
|
|
? plan.monthlyPrice
|
|
: plan.yearlyPrice}
|
|
</div>
|
|
<p className="text-gray-400" data-oid="wry4s4i">
|
|
{billingCycle === 'monthly'
|
|
? t.pricing.monthly
|
|
: t.pricing.yearly}
|
|
</p>
|
|
</div>
|
|
|
|
<ul className="space-y-4 mb-8 flex-grow" data-oid="-dx66yw">
|
|
{plan.features.map((feature, featureIndex) => (
|
|
<li
|
|
key={featureIndex}
|
|
className="flex items-center text-gray-300"
|
|
data-oid="i9ysdqw"
|
|
>
|
|
<div
|
|
className="w-2 h-2 bg-purple-500 rounded-full mr-3"
|
|
data-oid="z7vfa54"
|
|
></div>
|
|
{feature}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
<button
|
|
className={`w-full px-6 py-3 rounded-lg font-semibold transition-all duration-300 transform hover:scale-105 mt-auto ${
|
|
plan.popular
|
|
? 'bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white'
|
|
: 'border border-purple-500 text-purple-400 hover:bg-purple-500/10'
|
|
}`}
|
|
data-oid="t4x1qoz"
|
|
>
|
|
{t.pricing.getStarted}
|
|
</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="x._y7ja"
|
|
></div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</main>
|
|
|
|
<Footer t={t} data-oid="p6y5px0" />
|
|
</div>
|
|
);
|
|
}
|