38 lines
2.0 KiB
TypeScript
38 lines
2.0 KiB
TypeScript
import Link from "next/link";
|
||
|
||
const plans = [
|
||
{ name: "Free", price: "0", desc: "基础下载与公开资源", features: ["基础下载源", "公开更新日志", "每日限量"] },
|
||
{ name: "Pro", price: "29", desc: "适合重度下载与创作者", features: ["高速下载源", "历史版本全集", "优先更新提醒"] },
|
||
{ name: "Ultra", price: "99", desc: "团队与运营场景", features: ["多端授权", "批量下载能力", "运营面板预留接口"] },
|
||
];
|
||
|
||
export default function PricingPage() {
|
||
return (
|
||
<div className="space-y-8 py-8">
|
||
<section className="text-center">
|
||
<h1 className="mt-2 text-4xl font-bold tracking-tight">会员套餐与权益</h1>
|
||
<p className="mx-auto mt-3 max-w-2xl text-sm text-slate-300">按需选择，普通下载免费可用。</p>
|
||
</section>
|
||
<section className="grid gap-4 md:grid-cols-3">
|
||
{plans.map((plan, idx) => (
|
||
<article key={plan.name} className={`card-glass ${idx === 1 ? "border-cyan-300/40" : ""}`}>
|
||
<p className="text-sm text-slate-300">{plan.name}</p>
|
||
<p className="mt-2 text-4xl font-bold">¥{plan.price}<span className="text-base text-slate-400">/月</span></p>
|
||
<p className="mt-2 text-sm text-slate-300">{plan.desc}</p>
|
||
<ul className="mt-4 space-y-2 text-sm text-slate-200">
|
||
{plan.features.map((f) => <li key={f}>- {f}</li>)}
|
||
</ul>
|
||
<Link href={`/checkout?plan=${plan.name.toLowerCase()}&slug=nova-ai-studio`} className={`mt-5 block w-full text-center ${idx === 1 ? "cta-main" : "cta-sub"}`}>
|
||
立即开通
|
||
</Link>
|
||
</article>
|
||
))}
|
||
</section>
|
||
<section className="card-glass flex flex-wrap items-center justify-between gap-3">
|
||
<p className="text-sm text-slate-300">已有解锁码？可直接前往解锁中心。</p>
|
||
<Link href="/unlock" className="cta-sub">去解锁中心</Link>
|
||
</section>
|
||
</div>
|
||
);
|
||
}
|