{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "free-premium-compare",
  "type": "registry:component",
  "title": "Free premium compare",
  "description": "A two column tier comparison with free and premium cards, feature checklists, price blurbs and CTAs, with the featured tier outlined in the accent color.",
  "dependencies": [
    "lucide-react",
    "motion"
  ],
  "registryDependencies": [
    "https://ui.minidev.pro/r/button.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/premium/free-premium-compare.tsx",
      "type": "registry:ui",
      "target": "components/ui/free-premium-compare.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { motion, useReducedMotion } from \"motion/react\"\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { CheckIcon } from \"lucide-react\"\n\nconst FREE = [\"MIT product primitives\", \"Forms · tables · AI chat\", \"Billing & admin surfaces\", \"Gallery + docs + playground\", \"DESIGN.md as law\"]\nconst PREM = [\"Kinetic heroes & sticky stories\", \"Launch / investor / pricing kits\", \"Magnetic CTAs & wipe compares\", \"Client pitch showcase\", \"Same tokens — zero theme drift\"]\n\nfunction FreePremiumCompare({ className }: { className?: string }) {\n  const reduce = useReducedMotion()\n  return (\n    <section\n      data-slot=\"free-premium-compare\"\n      data-tier=\"premium\"\n      className={cn(\"grid gap-4 lg:grid-cols-2\", className)}\n    >\n      {[\n        { tier: \"Free\", price: \"$0\", blurb: \"Forever MIT for product teams.\", items: FREE, cta: \"Browse free UI\", href: \"/gallery\", featured: false },\n        { tier: \"Premium\", price: \"Soft-gate\", blurb: \"The moments that win clients.\", items: PREM, cta: \"See Premium motion\", href: \"/gallery/premium-motion\", featured: true },\n      ].map((col, i) => (\n        <motion.div\n          key={col.tier}\n          initial={reduce ? false : { y: 16 }}\n          whileInView={{ y: 0 }}\n          viewport={{ once: true }}\n          transition={{ delay: i * 0.08, duration: 0.3 }}\n          className={cn(\n            \"rounded-2xl border bg-surface p-6 shadow-highlight sm:p-8\",\n            col.featured ? \"border-accent shadow-[inset_0_0_0_1px_var(--accent)]\" : \"border-border\"\n          )}\n        >\n          <p className=\"text-xs font-medium uppercase tracking-[0.01em] text-fg-muted\">{col.tier}</p>\n          <p className=\"mt-2 text-3xl font-medium tracking-[-0.022em] text-fg\">{col.price}</p>\n          <p className=\"mt-2 text-sm text-fg-muted\">{col.blurb}</p>\n          <ul className=\"mt-6 space-y-2.5\">\n            {col.items.map((item) => (\n              <li key={item} className=\"flex items-start gap-2 text-sm text-fg\">\n                <CheckIcon className=\"mt-0.5 size-4 shrink-0 text-accent\" aria-hidden />\n                {item}\n              </li>\n            ))}\n          </ul>\n          <Button className=\"mt-8 w-full\" variant={col.featured ? \"default\" : \"outline\"} render={<a href={col.href} />}>\n            {col.cta}\n          </Button>\n        </motion.div>\n      ))}\n    </section>\n  )\n}\nexport { FreePremiumCompare }\n"
    }
  ]
}