77 lines
3.2 KiB
TypeScript
77 lines
3.2 KiB
TypeScript
|
import type { Metadata } from "next";
|
||
|
|
import Link from "next/link";
|
||
|
|
import { Check } from "lucide-react";
|
||
|
|
import { Button } from "@/components/ui/button";
|
||
|
|
import { Badge } from "@/components/ui/badge";
|
||
|
|
import { Card, CardContent } from "@/components/ui/card";
|
||
|
|
import { PLAN_ORDER, PLANS } from "@/lib/billing/plans";
|
||
|
|
import { formatPrice } from "@/lib/utils";
|
||
|
|
|
||
|
|
export const metadata: Metadata = {
|
||
|
|
title: "Pricing",
|
||
|
|
description: "Simple plans for every podcaster — start free and upgrade as you grow.",
|
||
|
|
};
|
||
|
|
|
||
|
|
export default function PricingPage() {
|
||
|
|
return (
|
||
|
|
<div className="bg-hero-wash">
|
||
|
|
<div className="container py-24 md:py-28">
|
||
|
|
<div className="mx-auto max-w-2xl text-center">
|
||
|
|
<p className="text-[13px] font-semibold uppercase tracking-[0.04em] text-brand">Pricing</p>
|
||
|
|
<h1 className="mt-3 font-display text-5xl font-extrabold tracking-tight md:text-6xl">
|
||
|
|
Start free, scale anytime
|
||
|
|
</h1>
|
||
|
|
<p className="mt-4 text-lg text-muted-foreground">
|
||
|
|
Upgrade for higher limits and more features. Cancel anytime. Pay with Stripe
|
||
|
|
or PayPal.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="mt-16 grid gap-6 lg:grid-cols-4">
|
||
|
|
{PLAN_ORDER.map((key) => {
|
||
|
|
const plan = PLANS[key];
|
||
|
|
return (
|
||
|
|
<Card
|
||
|
|
key={key}
|
||
|
|
className={plan.highlight ? "relative ring-2 ring-brand shadow-lg" : "relative"}
|
||
|
|
>
|
||
|
|
{plan.highlight && (
|
||
|
|
<Badge className="absolute -top-3 left-1/2 -translate-x-1/2 bg-brand text-brand-foreground shadow-sm">
|
||
|
|
Most popular
|
||
|
|
</Badge>
|
||
|
|
)}
|
||
|
|
<CardContent className="flex h-full flex-col gap-6 p-7">
|
||
|
|
<div>
|
||
|
|
<h3 className="font-display text-lg font-bold tracking-tight">{plan.name}</h3>
|
||
|
|
<p className="mt-1 text-sm text-muted-foreground">{plan.tagline}</p>
|
||
|
|
</div>
|
||
|
|
<div className="flex items-baseline gap-1">
|
||
|
|
<span className="font-display text-5xl font-extrabold tracking-tight">{formatPrice(plan.priceMonthly)}</span>
|
||
|
|
<span className="text-sm text-muted-foreground">/mo</span>
|
||
|
|
</div>
|
||
|
|
<Button asChild className="w-full" variant={plan.highlight ? "default" : "outline"}>
|
||
|
|
<Link href="/sign-up">{key === "free" ? "Start free" : `Choose ${plan.name}`}</Link>
|
||
|
|
</Button>
|
||
|
|
<ul className="space-y-2.5 text-sm">
|
||
|
|
{plan.bullets.map((b) => (
|
||
|
|
<li key={b} className="flex gap-2.5">
|
||
|
|
<Check className="mt-0.5 h-4 w-4 shrink-0 text-brand" />
|
||
|
|
<span className="text-muted-foreground">{b}</span>
|
||
|
|
</li>
|
||
|
|
))}
|
||
|
|
</ul>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p className="mx-auto mt-12 max-w-2xl text-center text-xs text-muted-foreground">
|
||
|
|
Prices in USD. Annual billing saves roughly two months. Usage limits reset on the first of
|
||
|
|
each month.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|