39 lines
1.6 KiB
TypeScript
39 lines
1.6 KiB
TypeScript
export default function Pricing() {
|
|
const plans = [
|
|
{ name: '基础版', price: '¥100/月', features: ['全球节点接入', '社区支持'], recommended: false },
|
|
{ name: '专业版', price: '¥300/月', features: ['智能路由', '高级面板', '邮件支持'], recommended: true },
|
|
{ name: '企业版', price: '¥800/月', features: ['专属线路', '24/7 支持', '定制 SLA'], recommended: false },
|
|
];
|
|
return (
|
|
<section className="px-6 py-section bg-background">
|
|
<div className="max-w-screen-lg mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
{plans.map(plan => (
|
|
<div
|
|
key={plan.name}
|
|
className={`border p-6 rounded-lg flex flex-col justify-between ${
|
|
plan.recommended ? 'border-accent shadow-lg' : 'border-gray-200'
|
|
}`}
|
|
>
|
|
<div>
|
|
<h3 className="text-2xl font-medium mb-2">{plan.name}</h3>
|
|
<p className="text-3xl font-semibold mb-4">{plan.price}</p>
|
|
<ul className="list-disc list-inside space-y-2 text-sm">
|
|
{plan.features.map(f => <li key={f}>{f}</li>)}
|
|
</ul>
|
|
</div>
|
|
<a
|
|
href="/contact"
|
|
className={`mt-6 px-4 py-2 rounded-lg text-center font-medium transition ${
|
|
plan.recommended
|
|
? 'bg-accent text-white hover:opacity-90'
|
|
: 'bg-transparent border border-primary hover:bg-primary hover:text-white'
|
|
}`}
|
|
>
|
|
{plan.recommended ? '推荐' : '选择'}
|
|
</a>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
} |