93 lines
2.8 KiB
TypeScript
93 lines
2.8 KiB
TypeScript
import { AppShell } from "../../../components/app-shell";
|
|
|
|
const plans = [
|
|
{
|
|
name: "Free",
|
|
price: "$0",
|
|
cadence: "forever",
|
|
highlight: "Connect up to 2 accounts",
|
|
features: [
|
|
"2 connected accounts",
|
|
"30-day transaction history",
|
|
"Basic exports",
|
|
"Email support"
|
|
]
|
|
},
|
|
{
|
|
name: "Pro Monthly",
|
|
price: "$9",
|
|
cadence: "per month",
|
|
highlight: "Unlimited connected accounts",
|
|
features: [
|
|
"Unlimited accounts",
|
|
"12-month history",
|
|
"Advanced exports + rules",
|
|
"Priority support"
|
|
]
|
|
},
|
|
{
|
|
name: "Pro Annual",
|
|
price: "$90",
|
|
cadence: "per year",
|
|
highlight: "Two months free",
|
|
features: [
|
|
"Unlimited accounts",
|
|
"12-month history",
|
|
"Advanced exports + rules",
|
|
"Priority support"
|
|
]
|
|
}
|
|
];
|
|
|
|
export default function SubscriptionPage() {
|
|
return (
|
|
<AppShell title="Subscription" subtitle="Choose a plan that fits your team.">
|
|
<div className="app-card p-6">
|
|
<div className="flex flex-wrap items-center justify-between gap-4">
|
|
<div>
|
|
<p className="text-xs uppercase tracking-[0.3em] text-muted">Current plan</p>
|
|
<h2 className="mt-2 text-2xl font-semibold">Free Plan</h2>
|
|
<p className="mt-2 text-sm text-muted">
|
|
Free includes up to two connected accounts. Upgrade any time to unlock
|
|
unlimited accounts and advanced automation.
|
|
</p>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
className="app-button rounded-full px-5 py-2 text-xs font-semibold"
|
|
>
|
|
Start free trial
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-6 grid gap-4 lg:grid-cols-3">
|
|
{plans.map((plan) => (
|
|
<div key={plan.name} className="app-card p-6">
|
|
<p className="text-xs uppercase tracking-[0.3em] text-muted">{plan.name}</p>
|
|
<div className="mt-3 flex items-baseline gap-2">
|
|
<span className="text-3xl font-semibold">{plan.price}</span>
|
|
<span className="text-xs text-muted">{plan.cadence}</span>
|
|
</div>
|
|
<p className="mt-2 text-sm text-muted">{plan.highlight}</p>
|
|
<ul className="mt-4 space-y-2 text-xs text-muted">
|
|
{plan.features.map((feature) => (
|
|
<li key={feature} className="flex items-center gap-2">
|
|
<span className="h-2 w-2 rounded-full bg-emerald-400" />
|
|
{feature}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<button
|
|
type="button"
|
|
className="mt-6 w-full rounded-full border border-ink/10 bg-white/5 px-4 py-2 text-xs font-semibold text-ink"
|
|
>
|
|
{plan.name === "Free" ? "Current plan" : "Upgrade"}
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</AppShell>
|
|
);
|
|
}
|