47 lines
2.6 KiB
JavaScript
47 lines
2.6 KiB
JavaScript
import React from 'react'
|
|
import SeoHead from '../../components/seo/SeoHead'
|
|
|
|
function PlanCard({ plan, paymentsEnabled }) {
|
|
return (
|
|
<article className="rounded-[30px] border border-white/10 bg-white/[0.04] p-6">
|
|
<div className="flex items-center justify-between gap-3">
|
|
<h2 className="text-2xl font-semibold tracking-[-0.04em] text-white">{plan.name}</h2>
|
|
<span className="rounded-full border border-white/10 bg-black/20 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-300">{plan.badge}</span>
|
|
</div>
|
|
<div className="mt-5 flex items-end gap-2">
|
|
<span className="text-4xl font-semibold tracking-[-0.05em] text-white">{plan.price}</span>
|
|
<span className="pb-1 text-sm text-slate-400">{plan.interval}</span>
|
|
</div>
|
|
<div className="mt-6 space-y-3 text-sm text-slate-300">
|
|
{plan.features.map((feature) => (
|
|
<div key={feature} className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3">{feature}</div>
|
|
))}
|
|
</div>
|
|
<button type="button" disabled className="mt-6 w-full rounded-full border border-sky-300/25 bg-sky-300/12 px-5 py-3 text-sm font-semibold text-sky-100 opacity-100">
|
|
{paymentsEnabled ? 'Checkout coming next phase' : 'Payments disabled for this launch'}
|
|
</button>
|
|
</article>
|
|
)
|
|
}
|
|
|
|
export default function AcademyPricing({ seo, plans, paymentsEnabled }) {
|
|
return (
|
|
<main className="min-h-screen bg-[radial-gradient(circle_at_top_left,_rgba(56,189,248,0.16),_transparent_24%),radial-gradient(circle_at_bottom_right,_rgba(251,191,36,0.16),_transparent_24%),linear-gradient(180deg,_#111827_0%,_#0f172a_100%)] px-4 py-8 sm:px-6 lg:px-8">
|
|
<SeoHead seo={seo || {}} title="Skinbase AI Academy Pricing" description={seo?.description} />
|
|
|
|
<div className="mx-auto max-w-[1320px] space-y-8">
|
|
<section className="rounded-[38px] border border-white/10 bg-black/20 p-8 md:p-10">
|
|
<p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-sky-200/80">Plans</p>
|
|
<h1 className="mt-4 text-4xl font-semibold tracking-[-0.05em] text-white md:text-5xl">Choose your AI Academy plan.</h1>
|
|
<p className="mt-4 max-w-3xl text-base leading-8 text-slate-300">Start free, unlock Creator and Pro previews, and keep the billing flow disabled until Stripe and Cashier are introduced in the next phase.</p>
|
|
</section>
|
|
|
|
<section className="grid gap-5 lg:grid-cols-3">
|
|
{plans.map((plan) => (
|
|
<PlanCard key={plan.name} plan={plan} paymentsEnabled={paymentsEnabled} />
|
|
))}
|
|
</section>
|
|
</div>
|
|
</main>
|
|
)
|
|
} |