49 lines
2.4 KiB
TypeScript
49 lines
2.4 KiB
TypeScript
import Link from "next/link";
|
|
import type { Plan } from "@/lib/pricing";
|
|
|
|
export default function Pricing({ plans }: { plans: Plan[] }) {
|
|
return (
|
|
<section className="relative py-24 border-t border-neutral-200 dark:border-neutral-800 bg-gradient-to-b from-white via-neutral-50 to-white dark:from-neutral-950 dark:via-neutral-900 dark:to-neutral-950">
|
|
<div className="container mx-auto max-w-6xl px-4 text-center">
|
|
<h2 className="text-3xl font-bold tracking-tight bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
|
|
Simple, flat pricing
|
|
</h2>
|
|
<div className="mt-12 grid gap-8 sm:grid-cols-3">
|
|
{plans.map((p, i) => (
|
|
<div
|
|
key={p.id}
|
|
className={`rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white/70 dark:bg-neutral-900/70 p-8 shadow-sm hover:shadow-lg transition backdrop-blur animate-[fadeInUp_0.6s_ease_forwards]`}
|
|
style={{ animationDelay: `${i * 100}ms` }}
|
|
>
|
|
{p.popular && (
|
|
<div className="mb-3 inline-block rounded-full bg-gradient-to-r from-blue-600 to-purple-600 px-3 py-1 text-xs text-white">
|
|
Most popular
|
|
</div>
|
|
)}
|
|
<div className="text-xl font-semibold">{p.name}</div>
|
|
<div className="mt-3 flex items-baseline justify-center gap-1">
|
|
<div className="text-4xl font-bold text-neutral-900 dark:text-white">{p.price}</div>
|
|
{p.periodicity && (
|
|
<div className="text-sm text-neutral-500 dark:text-neutral-400">{p.periodicity}</div>
|
|
)}
|
|
</div>
|
|
<p className="mt-3 text-sm text-neutral-600 dark:text-neutral-300">{p.description}</p>
|
|
<ul className="mt-5 space-y-2 text-sm text-neutral-700 dark:text-neutral-300 text-left">
|
|
{p.features.map((f, idx) => (
|
|
<li key={idx}>• {f}</li>
|
|
))}
|
|
</ul>
|
|
<Link
|
|
href={p.cta.href}
|
|
className="mt-8 inline-block w-full rounded-lg bg-gradient-to-r from-blue-600 to-purple-600 text-white py-3 text-sm font-medium hover:opacity-90 transition"
|
|
>
|
|
{p.cta.label}
|
|
</Link>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|