"use client" import { useState } from "react" import Link from "next/link" import { ArrowRight, Check } from "lucide-react" /** * Edit CONTENT / TIERS to match your pricing. Monthly/yearly toggle with * aria-pressed, one highlighted tier. Self-contained — prices are plain * spans (no sibling ui imports). * After install this file lives in your repo. */ const CONTENT = { stamp: "Pricing", headlineBefore: "Simple plans,", headlineAccent: "cancel anytime", headlineAfter: ".", lede: "Start free, upgrade when it pays for itself. Prices in USD.", toggleMonthly: "Monthly", toggleYearly: "Yearly", yearlyNote: "2 months free", } type Billing = "monthly" | "yearly" const TIERS = [ { name: "Starter", blurb: "For side projects finding shape.", monthly: "$12", yearly: "$10", per: "/mo", billed: { monthly: "Billed monthly", yearly: "Billed yearly" }, cta: { label: "Start free", href: "/signup?plan=starter" }, features: ["3 projects", "Community support", "Basic analytics"], highlight: false, }, { name: "Pro", blurb: "For teams shipping every week.", monthly: "$29", yearly: "$24", per: "/mo", billed: { monthly: "Billed monthly", yearly: "Billed yearly" }, cta: { label: "Start 14-day trial", href: "/signup?plan=pro" }, features: [ "Unlimited projects", "Priority support", "Advanced analytics", "Custom domains", ], highlight: true, badge: "Most popular", }, { name: "Scale", blurb: "For products with real traffic.", monthly: "$79", yearly: "$66", per: "/mo", billed: { monthly: "Billed monthly", yearly: "Billed yearly" }, cta: { label: "Talk to us", href: "/contact?plan=scale" }, features: ["Everything in Pro", "SSO & audit logs", "Dedicated manager"], highlight: false, }, ] export function PricingTiers() { const [billing, setBilling] = useState("monthly") return (

{CONTENT.stamp}

{CONTENT.headlineBefore}{" "} {CONTENT.headlineAccent} {CONTENT.headlineAfter}

{CONTENT.lede}

{(["monthly", "yearly"] as const).map((period) => ( ))}

{billing === "yearly" ? (

{CONTENT.yearlyNote}

) : null}

{tier.highlight && "badge" in tier && tier.badge ? (
{tier.badge}
) : null}
{tier.name}

{tier.blurb}

{billing === "monthly" ? tier.monthly : tier.yearly} {tier.per}

{billing === "monthly" ? tier.billed.monthly : tier.billed.yearly}
- {feature}
{tier.cta.label}

) }

{CONTENT.headlineBefore}{" "} {CONTENT.headlineAccent} {CONTENT.headlineAfter}

{tier.name}