{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "cta-split-panel",
  "title": "CTA — Split Panel",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/cta-split-panel/CtaSplitPanel.vue",
      "content": "<script setup lang=\"ts\">\nimport { ArrowRight, Headphones, Zap } from 'lucide-vue-next'\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\n// Each path says who it suits and what happens next. A two-button choice with\n// no stated difference just makes the reader pick the bigger button.\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</script>\n\n<template>\n  <section data-slot=\"cta-split-panel\" class=\"bg-background\">\n    <div class=\"mx-auto max-w-5xl px-6 py-20 lg:py-28\">\n      <div class=\"mx-auto max-w-2xl text-center\">\n        <Badge variant=\"secondary\">Two ways in</Badge>\n        <h2 class=\"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 class=\"mt-10 grid items-stretch gap-4 md:grid-cols-2\">\n        <Card v-for=\"path in paths\" :key=\"path.label\">\n          <CardContent class=\"flex h-full flex-col p-6\">\n            <span\n              class=\"border-border text-muted-foreground flex size-10 items-center justify-center rounded-lg border\"\n              aria-hidden=\"true\"\n            >\n              <component :is=\"path.icon\" class=\"size-4\" />\n            </span>\n\n            <h3 class=\"mt-4 text-lg font-semibold tracking-tight\">{{ path.label }}</h3>\n            <p class=\"text-muted-foreground mt-2 text-sm leading-relaxed\">{{ path.suits }}</p>\n\n            <Separator class=\"my-5\" />\n\n            <p class=\"text-muted-foreground font-mono text-xs tracking-[0.14em] uppercase\">What happens next</p>\n            <ol class=\"mt-3 space-y-2\">\n              <li v-for=\"(step, index) in path.next\" :key=\"step\" class=\"flex items-start gap-2.5 text-sm\">\n                <span class=\"text-muted-foreground/70 mt-px font-mono text-xs\">{{ index + 1 }}</span>\n                <span>{{ step }}</span>\n              </li>\n            </ol>\n\n            <div class=\"mt-auto pt-6\">\n              <Button :variant=\"path.variant\" class=\"w-full\">\n                {{ path.cta }}\n                <ArrowRight class=\"ml-2 size-4\" aria-hidden=\"true\" />\n              </Button>\n              <p class=\"text-muted-foreground mt-2 text-center text-xs\">{{ path.note }}</p>\n            </div>\n          </CardContent>\n        </Card>\n      </div>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/CtaSplitPanel.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json",
    "https://uipkge.dev/r/vue/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"
  ]
}