{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "split-proof-panel",
  "type": "registry:component",
  "title": "Split proof panel",
  "description": "A two column proof section with a badge, pitch copy and checklist on one side, and key facts on gallery, registry and quality gates rising in on the other.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "https://ui.minidev.pro/r/badge.json",
    "https://ui.minidev.pro/r/button.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/premium/split-proof-panel.tsx",
      "type": "registry:ui",
      "target": "components/ui/split-proof-panel.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport Link from \"next/link\"\nimport { motion, useReducedMotion } from \"motion/react\"\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Badge } from \"@/components/ui/badge\"\n\nfunction SplitProofPanel({ className }: { className?: string }) {\n  const reduce = useReducedMotion()\n  const proofs: [string, string][] = [\n    [\"Gallery\", \"53 categorized routes\"],\n    [\"Registry\", \"500+ paste-ready items\"],\n    [\"Gate\", \"build + axe + shots\"],\n  ]\n  return (\n    <section\n      data-slot=\"split-proof-panel\"\n      data-tier=\"premium\"\n      className={cn(\"grid overflow-hidden rounded-2xl border border-border lg:grid-cols-2\", className)}\n    >\n      <div className=\"space-y-4 bg-surface p-5 shadow-highlight sm:p-8\">\n        <Badge variant=\"outline\">Proof</Badge>\n        <h3 className=\"text-xl font-medium tracking-[-0.018em] text-fg sm:text-2xl\">Built to survive a client tab share</h3>\n        <p className=\"text-sm leading-[1.55] text-fg-muted\">\n          Walk a client through the product surface, the component gallery and the docs. Every screen they see is the real, shippable component.\n        </p>\n        <ul className=\"space-y-2 text-sm text-fg\">\n          {[\"Site chrome on every major surface\", \"One token set across every page\", \"Contrast and keyboard checked in both themes\"].map((t) => (\n            <li key={t} className=\"flex gap-2\"><span className=\"text-accent\">▹</span>{t}</li>\n          ))}\n        </ul>\n        <Button size=\"sm\" className=\"w-full sm:w-auto\" render={<Link href=\"/showcase\" />}>Open /showcase</Button>\n      </div>\n      <motion.div\n        initial={reduce ? false : { y: 12 }}\n        whileInView={{ y: 0 }}\n        viewport={{ once: true }}\n        className=\"flex flex-col justify-center gap-3 bg-sunken p-5 sm:p-8\"\n      >\n        {proofs.map(([k, v]) => (\n          <div key={k} className=\"rounded-xl border border-border bg-surface px-4 py-3 shadow-highlight\">\n            <p className=\"text-[11px] uppercase tracking-[0.01em] text-fg-muted\">{k}</p>\n            <p className=\"mt-1 text-sm font-medium text-fg\">{v}</p>\n          </div>\n        ))}\n      </motion.div>\n    </section>\n  )\n}\nexport { SplitProofPanel }\n"
    }
  ]
}