Initial commit: PodcastYes — AI podcast platform

2026-06-07 03:58:32 -04:00
commit 155507f21a
151 changed files with 19826 additions and 0 deletions
@@ -0,0 +1,76 @@
+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>
+  );
+}