157 lines
8.0 KiB
TypeScript
157 lines
8.0 KiB
TypeScript
'use client';
|
||
|
||
import Navigation from '../../../components/Navigation';
|
||
import Footer from '../../../components/Footer';
|
||
import { useLanguage } from '../../../hooks/useLanguage';
|
||
|
||
interface PricingPageProps {
|
||
params: {
|
||
lang: string;
|
||
};
|
||
}
|
||
|
||
export default function PricingPage({ params }: PricingPageProps) {
|
||
const { currentLang, setCurrentLang, currentContent, createLocalizedPath } = useLanguage(
|
||
params.lang,
|
||
);
|
||
|
||
return (
|
||
<div className="min-h-screen bg-gray-900 text-white">
|
||
<Navigation
|
||
currentLang={currentLang}
|
||
setCurrentLang={setCurrentLang}
|
||
content={currentContent}
|
||
createLocalizedPath={createLocalizedPath}
|
||
/>
|
||
|
||
{/* Hero Section */}
|
||
<section className="relative z-10 px-6 py-20">
|
||
<div className="max-w-7xl mx-auto text-center">
|
||
<h1 className="text-4xl md:text-6xl font-bold mb-8 bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent">
|
||
{currentContent.pricing.title}
|
||
</h1>
|
||
<p className="text-xl text-gray-300 mb-12 max-w-3xl mx-auto">
|
||
{currentContent.pricing.subtitle}
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Pricing Cards */}
|
||
<section className="relative z-10 px-6 py-20">
|
||
<div className="max-w-7xl mx-auto">
|
||
<div className="grid md:grid-cols-3 gap-8">
|
||
{currentContent.pricing.plans.map((plan, index) => (
|
||
<div
|
||
key={index}
|
||
className={`relative bg-gray-800/50 backdrop-blur-sm rounded-xl p-8 border transition-all duration-300 ${
|
||
plan.popular
|
||
? 'border-cyan-400 scale-105 shadow-2xl shadow-cyan-500/20'
|
||
: 'border-cyan-500/20 hover:border-cyan-400/50'
|
||
}`}
|
||
>
|
||
{plan.popular && (
|
||
<div className="absolute -top-4 left-1/2 transform -translate-x-1/2">
|
||
<span className="bg-gradient-to-r from-cyan-400 to-blue-500 text-white px-4 py-1 rounded-full text-sm font-semibold">
|
||
推荐
|
||
</span>
|
||
</div>
|
||
)}
|
||
|
||
<div className="text-center mb-8">
|
||
<h3 className="text-2xl font-bold mb-2 text-cyan-400">
|
||
{plan.name}
|
||
</h3>
|
||
<div className="mb-4">
|
||
<span className="text-4xl font-bold">{plan.price}</span>
|
||
<span className="text-gray-400">{plan.period}</span>
|
||
</div>
|
||
<p className="text-gray-300">{plan.description}</p>
|
||
</div>
|
||
|
||
<ul className="space-y-4 mb-8">
|
||
{plan.features.map((feature, featureIndex) => (
|
||
<li
|
||
key={featureIndex}
|
||
className="flex items-center text-gray-300"
|
||
>
|
||
<svg
|
||
className="w-5 h-5 text-cyan-400 mr-3 flex-shrink-0"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
viewBox="0 0 24 24"
|
||
>
|
||
<path
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
strokeWidth={2}
|
||
d="M5 13l4 4L19 7"
|
||
/>
|
||
</svg>
|
||
{feature}
|
||
</li>
|
||
))}
|
||
</ul>
|
||
|
||
<button
|
||
className={`w-full py-4 rounded-lg font-semibold transition-all duration-300 ${
|
||
plan.popular
|
||
? 'bg-gradient-to-r from-cyan-500 to-blue-600 hover:from-cyan-400 hover:to-blue-500 text-white'
|
||
: 'border border-cyan-500 text-cyan-400 hover:bg-cyan-500/10'
|
||
}`}
|
||
>
|
||
选择方案
|
||
</button>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* FAQ Section */}
|
||
<section className="relative z-10 px-6 py-20 bg-gray-800/30">
|
||
<div className="max-w-4xl mx-auto">
|
||
<div className="text-center mb-16">
|
||
<h2 className="text-3xl md:text-4xl font-bold mb-6 bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent">
|
||
常见问题
|
||
</h2>
|
||
<p className="text-xl text-gray-300">解答您关心的问题</p>
|
||
</div>
|
||
|
||
<div className="space-y-6">
|
||
{[
|
||
{
|
||
question: '如何选择适合的方案？',
|
||
answer: '我们建议根据您的业务规模、预期流量和技术需求来选择。我们的专业团队可以为您提供免费咨询，帮助您选择最适合的方案。',
|
||
},
|
||
{
|
||
question: '是否支持方案升级？',
|
||
answer: '是的，您可以随时升级到更高级的方案。升级过程无缝衔接，不会影响您的业务运行。',
|
||
},
|
||
{
|
||
question: '技术支持包含哪些内容？',
|
||
answer: '我们提供7x24小时技术支持，包括系统监控、故障排除、性能优化、安全更新等全方位服务。',
|
||
},
|
||
{
|
||
question: '数据安全如何保障？',
|
||
answer: '我们采用AWS企业级安全标准，包括数据加密、访问控制、定期备份、灾难恢复等多重安全保障措施。',
|
||
},
|
||
].map((faq: { question: string; answer: string }, index: number) => (
|
||
<div
|
||
key={index}
|
||
className="bg-gray-800/50 rounded-lg p-6 border border-cyan-500/20"
|
||
>
|
||
<h3 className="text-xl font-bold mb-3 text-cyan-400">
|
||
{faq.question}
|
||
</h3>
|
||
<p className="text-gray-300 leading-relaxed">{faq.answer}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<Footer content={currentContent} createLocalizedPath={createLocalizedPath} />
|
||
</div>
|
||
);
|
||
}
|