{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing-page",
  "type": "registry:component",
  "title": "Pricing page",
  "description": "A full Tailwind pricing page with a monthly or yearly toggle, animated plan cards, a feature comparison table, pricing FAQs, a glowing CTA and a mega footer.",
  "dependencies": [],
  "registryDependencies": [
    "https://ui.minidev.pro/r/cta-glow.json",
    "https://ui.minidev.pro/r/faq-list.json",
    "https://ui.minidev.pro/r/feature-comparison.json",
    "https://ui.minidev.pro/r/footer-mega.json",
    "https://ui.minidev.pro/r/nav-marketing.json",
    "https://ui.minidev.pro/r/pricing-motion.json",
    "https://ui.minidev.pro/r/pricing-toggle.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/premium/pricing-page.tsx",
      "type": "registry:ui",
      "target": "components/ui/pricing-page.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\nimport { NavMarketing } from \"@/components/ui/nav-marketing\"\nimport { PricingToggle } from \"@/components/ui/pricing-toggle\"\nimport { PricingMotion } from \"@/components/ui/pricing-motion\"\nimport { FeatureComparison } from \"@/components/ui/feature-comparison\"\nimport { FaqList } from \"@/components/ui/faq-list\"\nimport { FooterMega } from \"@/components/ui/footer-mega\"\nimport { CtaGlow } from \"@/components/ui/cta-glow\"\n\nfunction PricingPage({ className }: { className?: string }) {\n  const [cadence, setCadence] = React.useState<\"monthly\" | \"yearly\">(\"yearly\")\n  const premiumPrice = cadence === \"yearly\" ? \"$39\" : \"$49\"\n  return (\n    <div data-slot=\"pricing-page\" data-tier=\"premium\" className={cn(\"bg-bg\", className)}>\n      <NavMarketing />\n      <div className=\"mx-auto max-w-5xl space-y-12 px-6 py-16\">\n        <div className=\"space-y-4 text-center\">\n          <h1 className=\"text-4xl font-medium tracking-[-0.026em] text-fg\">Simple pricing</h1>\n          <p className=\"text-sm text-fg-muted\">Free forever for product UI. Premium for launch moments.</p>\n          <PricingToggle value={cadence} onChange={setCadence} />\n        </div>\n        <PricingMotion\n          plans={[\n            { name: \"Free\", price: \"$0\", blurb: \"MIT kit\", features: [\"All free UI\", \"Blocks\", \"Audit gate\"] },\n            { name: \"Premium\", price: premiumPrice, blurb: cadence === \"yearly\" ? \"billed yearly\" : \"billed monthly\", featured: true, features: [\"Motion heroes\", \"Email templates\", \"Page kits\"] },\n            { name: \"Studio\", price: \"$199\", blurb: \"teams\", features: [\"Seats\", \"Themes\", \"Support\"] },\n          ]}\n        />\n        <FeatureComparison\n          rows={[\n            { feature: \"Primitives\", free: true, premium: true },\n            { feature: \"Motion heroes\", free: false, premium: true },\n            { feature: \"Email templates\", free: false, premium: true },\n            { feature: \"Page kits\", free: false, premium: true },\n          ]}\n        />\n        <FaqList\n          items={[\n            { q: \"Can I stay free?\", a: \"Yes. Free UI never soft-gates.\" },\n            { q: \"What is a page kit?\", a: \"Composable Premium templates for pricing, careers, blog, and sales.\" },\n          ]}\n        />\n        <CtaGlow title=\"Pick the tier that matches the moment\" />\n      </div>\n      <FooterMega\n        columns={[\n          { title: \"Product\", links: [{ label: \"Gallery\", href: \"#\" }, { label: \"Docs\", href: \"#\" }] },\n          { title: \"Company\", links: [{ label: \"Blog\", href: \"#\" }, { label: \"Careers\", href: \"#\" }] },\n          { title: \"Legal\", links: [{ label: \"Privacy\", href: \"#\" }, { label: \"Terms\", href: \"#\" }] },\n        ]}\n      />\n    </div>\n  )\n}\nexport { PricingPage }\n"
    }
  ]
}