{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing-page",
  "title": "Pricing page",
  "description": "Three plans with a monthly and yearly switch, a comparison table, FAQ and a closing call to action.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/manniche/pricing-page/pricing-page.tsx",
      "content": "// A pricing page for a software product. The monthly/yearly switch is two radio buttons and a :has() selector,\n// so it works without JavaScript and the same markup can ship as a static page. Colours come from the theme tokens.\nimport { ArrowRight, Check, Minus, Sparkles } from 'lucide-react'\nimport { cn } from '@/lib/utils'\n\ntype Plan = { name: string; blurb: string; monthly: number; yearly: number; cta: string; featured?: boolean; features: string[] }\n\nconst plans: Plan[] = [\n  {\n    name: 'Starter',\n    blurb: 'For a first shop and the first hundred orders.',\n    monthly: 19,\n    yearly: 15,\n    cta: 'Start free trial',\n    features: ['1 shop', 'Up to 200 products', 'Card and wallet payments', 'Email receipts', 'Basic reports'],\n  },\n  {\n    name: 'Growth',\n    blurb: 'For shops that sell every day and ship every week.',\n    monthly: 49,\n    yearly: 39,\n    cta: 'Start free trial',\n    featured: true,\n    features: ['Everything in Starter', 'Unlimited products', 'Discount codes and gift cards', 'Abandoned cart emails', 'Shipping labels', '3 staff accounts'],\n  },\n  {\n    name: 'Scale',\n    blurb: 'For several shops, warehouses and a team.',\n    monthly: 129,\n    yearly: 99,\n    cta: 'Talk to us',\n    features: ['Everything in Growth', 'Up to 5 shops', 'Stock across warehouses', 'Custom reports', 'Priority support', 'Unlimited staff'],\n  },\n]\n\ntype Cell = boolean | string\nconst compare: { group: string; rows: [string, Cell, Cell, Cell][] }[] = [\n  {\n    group: 'Selling',\n    rows: [\n      ['Products', '200', 'Unlimited', 'Unlimited'],\n      ['Shops', '1', '1', '5'],\n      ['Discount codes', false, true, true],\n      ['Gift cards', false, true, true],\n    ],\n  },\n  {\n    group: 'Running the shop',\n    rows: [\n      ['Shipping labels', false, true, true],\n      ['Stock across warehouses', false, false, true],\n      ['Staff accounts', '1', '3', 'Unlimited'],\n      ['Reports', 'Basic', 'Standard', 'Custom'],\n    ],\n  },\n  {\n    group: 'Support',\n    rows: [\n      ['Help centre and email', true, true, true],\n      ['Chat', false, true, true],\n      ['Named contact', false, false, true],\n    ],\n  },\n]\n\nconst faq = [\n  ['Is there a free trial?', 'Yes. Every plan starts with 14 days free and no card. You only pay when you decide to keep it.'],\n  ['Can I change plan later?', 'Any time. Moving up takes effect at once, and moving down applies from the next billing period.'],\n  ['Do you take a cut of my sales?', 'No. You pay the plan and the card fee from your payment provider. Nothing more.'],\n  ['What happens to my shop if I cancel?', 'You can export products, orders and customers as CSV for 90 days after you cancel.'],\n]\n\nconst logos = ['Northfield', 'Oak & Ore', 'Halden', 'Saltwork', 'Pebble Co.', 'Marlow']\n\nfunction Logo() {\n  return (\n    <a href=\"#top\" className=\"flex items-center gap-2 font-semibold tracking-tight\">\n      <svg viewBox=\"0 0 24 24\" className=\"size-7\" aria-hidden>\n        <rect width=\"24\" height=\"24\" rx=\"7\" className=\"fill-primary\" />\n        <path d=\"M6 15c3-2 9-2 12 0M6 10.5c3-2 9-2 12 0\" fill=\"none\" strokeWidth=\"2\" strokeLinecap=\"round\" className=\"stroke-primary-foreground\" />\n      </svg>\n      Quayside\n    </a>\n  )\n}\n\nfunction Price({ plan }: { plan: Plan }) {\n  return (\n    <p className=\"mt-6 flex items-baseline gap-1\">\n      <span className=\"text-4xl font-semibold tracking-tight tabular-nums\">\n        <span className=\"group-has-[[value=yearly]:checked]/pricing:hidden\">€{plan.monthly}</span>\n        <span className=\"hidden group-has-[[value=yearly]:checked]/pricing:inline\">€{plan.yearly}</span>\n      </span>\n      <span className={cn('text-sm', plan.featured ? 'text-primary-foreground/75' : 'text-muted-foreground')}>\n        / month\n        <span className=\"hidden group-has-[[value=yearly]:checked]/pricing:inline\">, billed yearly</span>\n      </span>\n    </p>\n  )\n}\n\nfunction Mark({ value, featured }: { value: Cell; featured?: boolean }) {\n  if (value === true) return <Check className={cn('mx-auto size-4', featured ? 'text-primary' : 'text-foreground')} aria-label=\"Included\" />\n  if (value === false) return <Minus className=\"mx-auto size-4 text-muted-foreground/50\" aria-label=\"Not included\" />\n  return <span className=\"text-sm\">{value}</span>\n}\n\n/** Pricing page: plans with a monthly/yearly switch, a comparison table, FAQ and a closing call to action. */\nexport function PricingPage() {\n  return (\n    <div id=\"top\" className=\"group/pricing min-h-dvh bg-background font-sans text-foreground antialiased\">\n      <header className=\"border-b\">\n        <div className=\"mx-auto flex h-16 max-w-6xl items-center gap-6 px-4 sm:px-6\">\n          <Logo />\n          <nav aria-label=\"Main\" className=\"hidden sm:block\">\n            <ul className=\"flex gap-6 text-sm text-muted-foreground\">\n              {['Product', 'Pricing', 'Customers', 'Docs'].map((n) => (\n                <li key={n}>\n                  <a\n                    href={`#${n.toLowerCase()}`}\n                    aria-current={n === 'Pricing' ? 'page' : undefined}\n                    className=\"transition-colors duration-150 hover:text-foreground aria-[current=page]:text-foreground\"\n                  >\n                    {n}\n                  </a>\n                </li>\n              ))}\n            </ul>\n          </nav>\n          <div className=\"ml-auto flex items-center gap-2\">\n            <a href=\"#signin\" className=\"hidden rounded-full px-3 py-2 text-sm text-muted-foreground transition-colors hover:text-foreground sm:block\">\n              Sign in\n            </a>\n            <a\n              href=\"#trial\"\n              className=\"rounded-full bg-foreground px-4 py-2 text-sm font-medium text-background transition-transform duration-150 ease-out active:scale-[0.97]\"\n            >\n              Try it free\n            </a>\n          </div>\n        </div>\n      </header>\n\n      <main>\n        <section className=\"relative overflow-hidden\">\n          <div aria-hidden className=\"pointer-events-none absolute inset-x-0 -top-40 mx-auto h-80 max-w-3xl rounded-full bg-primary/15 blur-3xl\" />\n          <div className=\"relative mx-auto max-w-3xl px-4 pt-16 pb-10 text-center sm:px-6 sm:pt-24\">\n            <p className=\"inline-flex items-center gap-1.5 rounded-full border bg-card px-3 py-1 text-xs font-medium text-muted-foreground\">\n              <Sparkles className=\"size-3.5 text-primary\" aria-hidden />\n              14 days free on every plan\n            </p>\n            <h1 className=\"mt-5 text-4xl font-semibold tracking-tight text-balance sm:text-6xl\">Pricing that grows when your shop does</h1>\n            <p className=\"mx-auto mt-4 max-w-xl text-lg text-pretty text-muted-foreground\">\n              One flat monthly price. No cut of your sales, no setup fee, and you can change plan whenever you like.\n            </p>\n\n            <fieldset className=\"mt-8 inline-flex rounded-full border bg-muted p-1 text-sm font-medium\">\n              <legend className=\"sr-only\">Billing period</legend>\n              {[\n                ['monthly', 'Monthly'],\n                ['yearly', 'Yearly'],\n              ].map(([value, label]) => (\n                <label\n                  key={value}\n                  className=\"relative flex cursor-pointer items-center gap-2 rounded-full px-4 py-2 text-muted-foreground transition-colors duration-200 has-checked:bg-background has-checked:text-foreground has-checked:shadow-sm has-focus-visible:ring-2 has-focus-visible:ring-ring\"\n                >\n                  <input type=\"radio\" name=\"billing\" value={value} defaultChecked={value === 'monthly'} className=\"sr-only\" />\n                  {label}\n                  {value === 'yearly' && <span className=\"rounded-full bg-primary/15 px-2 py-0.5 text-xs text-primary\">−20%</span>}\n                </label>\n              ))}\n            </fieldset>\n          </div>\n        </section>\n\n        <section aria-label=\"Plans\" className=\"mx-auto max-w-6xl px-4 pb-20 sm:px-6\">\n          <ul className=\"grid gap-4 lg:grid-cols-3 lg:items-stretch\">\n            {plans.map((plan) => (\n              <li\n                key={plan.name}\n                className={cn(\n                  'relative flex flex-col rounded-3xl border p-7 transition-[translate,box-shadow] duration-300 ease-out-quint starting:translate-y-3 starting:opacity-0',\n                  plan.featured\n                    ? 'border-transparent bg-primary text-primary-foreground shadow-xl shadow-primary/20 lg:-my-3 lg:py-10'\n                    : 'bg-card hover:shadow-lg',\n                )}\n              >\n                <div className=\"flex items-center justify-between gap-2\">\n                  <h2 className=\"text-lg font-semibold\">{plan.name}</h2>\n                  {plan.featured && <span className=\"rounded-full bg-primary-foreground/15 px-2.5 py-1 text-xs font-medium\">Most chosen</span>}\n                </div>\n                <p className={cn('mt-2 text-sm', plan.featured ? 'text-primary-foreground/80' : 'text-muted-foreground')}>{plan.blurb}</p>\n                <Price plan={plan} />\n                <a\n                  href=\"#trial\"\n                  className={cn(\n                    'group/cta mt-6 inline-flex items-center justify-center gap-2 rounded-full px-5 py-3 text-sm font-medium transition-transform duration-150 ease-out active:scale-[0.97]',\n                    plan.featured ? 'bg-primary-foreground text-primary' : 'bg-foreground text-background',\n                  )}\n                >\n                  {plan.cta}\n                  <ArrowRight className=\"size-4 transition-transform duration-200 group-hover/cta:translate-x-0.5\" aria-hidden />\n                </a>\n                <ul className={cn('mt-8 space-y-3 border-t pt-6 text-sm', plan.featured && 'border-primary-foreground/20')}>\n                  {plan.features.map((f) => (\n                    <li key={f} className=\"flex gap-3\">\n                      <Check className={cn('mt-0.5 size-4 shrink-0', plan.featured ? 'text-primary-foreground' : 'text-primary')} aria-hidden />\n                      {f}\n                    </li>\n                  ))}\n                </ul>\n              </li>\n            ))}\n          </ul>\n\n          <div className=\"mt-14 text-center\">\n            <p className=\"text-sm text-muted-foreground\">Trusted by 4,000 independent shops</p>\n            <ul className=\"mt-5 flex flex-wrap justify-center gap-x-10 gap-y-3 text-lg font-semibold tracking-tight text-muted-foreground/70\">\n              {logos.map((l) => (\n                <li key={l}>{l}</li>\n              ))}\n            </ul>\n          </div>\n        </section>\n\n        <section aria-labelledby=\"compare\" className=\"border-t bg-muted/40\">\n          <div className=\"mx-auto max-w-5xl px-4 py-20 sm:px-6\">\n            <h2 id=\"compare\" className=\"text-center text-3xl font-semibold tracking-tight\">\n              Compare plans\n            </h2>\n            <div className=\"mt-10 overflow-x-auto rounded-2xl border bg-card\">\n              <table className=\"w-full min-w-136 text-left text-sm\">\n                <thead>\n                  <tr className=\"border-b\">\n                    <th scope=\"col\" className=\"w-2/5 p-4 font-medium text-muted-foreground\">\n                      Feature\n                    </th>\n                    {plans.map((p) => (\n                      <th key={p.name} scope=\"col\" className={cn('p-4 text-center font-semibold', p.featured && 'bg-accent text-accent-foreground')}>\n                        {p.name}\n                      </th>\n                    ))}\n                  </tr>\n                </thead>\n                {compare.map((g) => (\n                  <tbody key={g.group}>\n                    <tr>\n                      <th colSpan={4} scope=\"colgroup\" className=\"bg-muted/60 px-4 py-2 text-xs font-semibold tracking-wide text-muted-foreground uppercase\">\n                        {g.group}\n                      </th>\n                    </tr>\n                    {g.rows.map(([label, ...cells]) => (\n                      <tr key={label} className=\"border-t transition-colors duration-150 hover:bg-muted/40\">\n                        <th scope=\"row\" className=\"p-4 font-normal\">\n                          {label}\n                        </th>\n                        {cells.map((c, i) => (\n                          <td key={i} className={cn('p-4 text-center', plans[i].featured && 'bg-accent/50')}>\n                            <Mark value={c} featured={plans[i].featured} />\n                          </td>\n                        ))}\n                      </tr>\n                    ))}\n                  </tbody>\n                ))}\n              </table>\n            </div>\n          </div>\n        </section>\n\n        <section aria-labelledby=\"faq\" className=\"mx-auto grid max-w-5xl gap-10 px-4 py-20 sm:px-6 md:grid-cols-[1fr_1.4fr]\">\n          <div>\n            <h2 id=\"faq\" className=\"text-3xl font-semibold tracking-tight\">\n              Questions\n            </h2>\n            <p className=\"mt-3 text-muted-foreground\">\n              Can’t find it here?{' '}\n              <a href=\"mailto:hello@example.com\" className=\"font-medium text-foreground underline underline-offset-4\">\n                Write to us\n              </a>\n              .\n            </p>\n          </div>\n          <div className=\"divide-y rounded-2xl border bg-card\">\n            {faq.map(([q, a]) => (\n              <details key={q} className=\"group/faq px-5\">\n                <summary className=\"flex cursor-pointer list-none items-center justify-between gap-4 py-4 font-medium [&::-webkit-details-marker]:hidden\">\n                  {q}\n                  <span className=\"grid size-6 shrink-0 place-items-center rounded-full border text-muted-foreground transition-transform duration-200 group-open/faq:rotate-45\">\n                    +\n                  </span>\n                </summary>\n                <p className=\"pb-5 text-sm text-muted-foreground\">{a}</p>\n              </details>\n            ))}\n          </div>\n        </section>\n\n        <section id=\"trial\" className=\"px-4 pb-20 sm:px-6\">\n          <div className=\"relative mx-auto max-w-6xl overflow-hidden rounded-3xl bg-foreground px-6 py-14 text-center text-background sm:py-20\">\n            <div aria-hidden className=\"pointer-events-none absolute -bottom-32 left-1/2 h-64 w-[36rem] -translate-x-1/2 rounded-full bg-primary/40 blur-3xl\" />\n            <h2 className=\"relative text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">Open your shop this afternoon</h2>\n            <p className=\"relative mx-auto mt-3 max-w-md text-background/70\">14 days free. No card, no setup fee, and your products stay yours.</p>\n            <div className=\"relative mt-8 flex flex-wrap justify-center gap-3\">\n              <a\n                href=\"#trial\"\n                className=\"rounded-full bg-primary px-6 py-3 text-sm font-medium text-primary-foreground transition-transform duration-150 ease-out active:scale-[0.97]\"\n              >\n                Start free trial\n              </a>\n              <a\n                href=\"#demo\"\n                className=\"rounded-full border border-background/25 px-6 py-3 text-sm font-medium transition-colors duration-150 hover:bg-background/10\"\n              >\n                Book a demo\n              </a>\n            </div>\n          </div>\n        </section>\n      </main>\n\n      <footer className=\"border-t\">\n        <div className=\"mx-auto flex max-w-6xl flex-wrap items-center gap-4 px-4 py-8 text-sm text-muted-foreground sm:px-6\">\n          <Logo />\n          <p className=\"ml-auto\">© 2026 Quayside. A template from Manniche UI.</p>\n        </div>\n      </footer>\n    </div>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "cssVars": {
    "theme": {
      "color-success": "var(--success)",
      "ease-out-quint": "cubic-bezier(0.23, 1, 0.32, 1)"
    },
    "light": {
      "success": "oklch(0.55 0.13 155)"
    },
    "dark": {
      "success": "oklch(0.72 0.13 155)"
    }
  },
  "categories": [
    "templates"
  ],
  "type": "registry:block"
}