{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "cta-split-panel",
  "title": "CTA — Split Panel",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/cta-split-panel/CtaSplitPanel.tsx",
      "content": "'use client'\n\nimport { ArrowRight, Headphones, Zap } from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent } from '@/components/ui/card'\nimport { Separator } from '@/components/ui/separator'\n\nconst paths = [\n  {\n    icon: Zap,\n    label: 'Start it yourself',\n    suits: 'One team, an existing warehouse, and someone comfortable opening a pull request.',\n    next: ['Connect a read-only role', 'Publish one certified metric', 'Invite the rest of the team'],\n    cta: 'Start free',\n    variant: 'default' as const,\n    note: 'No card. Cancel from the dashboard.',\n  },\n  {\n    icon: Headphones,\n    label: 'Have us run it',\n    suits: 'Multiple teams, a regulated estate, or a close that cannot slip during migration.',\n    next: ['Scoping call with an engineer', 'Five-week guided rollout', 'Hand-over to your team'],\n    cta: 'Book a scoping call',\n    variant: 'outline' as const,\n    note: 'Median first reply: 3 h 40 m.',\n  },\n]\n\nexport function CtaSplitPanel() {\n  return (\n    <section data-slot=\"cta-split-panel\" className=\"bg-background\">\n      <div className=\"mx-auto max-w-5xl px-6 py-20 lg:py-28\">\n        <div className=\"mx-auto max-w-2xl text-center\">\n          <Badge variant=\"secondary\">Two ways in</Badge>\n          <h2 className=\"mt-4 text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">\n            Pick the one that matches your situation\n          </h2>\n        </div>\n\n        <div className=\"mt-10 grid items-stretch gap-4 md:grid-cols-2\">\n          {paths.map((path) => (\n            <Card key={path.label}>\n              <CardContent className=\"flex h-full flex-col p-6\">\n                <span\n                  className=\"border-border text-muted-foreground flex size-10 items-center justify-center rounded-lg border\"\n                  aria-hidden=\"true\"\n                >\n                  <path.icon className=\"size-4\" />\n                </span>\n\n                <h3 className=\"mt-4 text-lg font-semibold tracking-tight\">{path.label}</h3>\n                <p className=\"text-muted-foreground mt-2 text-sm leading-relaxed\">{path.suits}</p>\n\n                <Separator className=\"my-5\" />\n\n                <p className=\"text-muted-foreground font-mono text-xs tracking-[0.14em] uppercase\">What happens next</p>\n                <ol className=\"mt-3 space-y-2\">\n                  {path.next.map((step, index) => (\n                    <li key={step} className=\"flex items-start gap-2.5 text-sm\">\n                      <span className=\"text-muted-foreground/70 mt-px font-mono text-xs\">{index + 1}</span>\n                      <span>{step}</span>\n                    </li>\n                  ))}\n                </ol>\n\n                <div className=\"mt-auto pt-6\">\n                  <Button variant={path.variant} className=\"w-full\">\n                    {path.cta}\n                    <ArrowRight className=\"ml-2 size-4\" aria-hidden=\"true\" />\n                  </Button>\n                  <p className=\"text-muted-foreground mt-2 text-center text-xs\">{path.note}</p>\n                </div>\n              </CardContent>\n            </Card>\n          ))}\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/CtaSplitPanel.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/card.json",
    "https://uipkge.dev/r/react/separator.json"
  ],
  "description": "Two-path closing section splitting self-serve from sales-assisted, each side stating who it suits and what happens next so the choice is not a guess.",
  "categories": [
    "marketing"
  ]
}