{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "cta-split-panel",
  "title": "CTA — Split Panel",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-angular/blocks/cta-split-panel/cta-split-panel.component.ts",
      "content": "// Two-path closing section splitting self-serve from sales-assisted, each side stating\n// who it suits and what happens next so the choice is not a guess.\n// Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input } from '@angular/core'\nimport { ArrowRight, Headphones, LucideAngularModule, Zap, type LucideIconData } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiCardComponent, UiCardContentComponent } from '@/ui/card/card.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\n\ninterface CtaPath {\n  icon: LucideIconData\n  label: string\n  suits: string\n  next: string[]\n  cta: string\n  variant: 'default' | 'outline'\n  note: string\n}\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: CtaPath[] = [\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',\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',\n    note: 'Median first reply: 3 h 40 m.',\n  },\n]\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-cta-split-panel, [ui-cta-split-panel]',\n  standalone: true,\n  // React renders the root <section> itself: the host stays out of layout and `class` goes to the root.\n  host: { '[attr.class]': '\"contents\"' },\n  imports: [\n    LucideAngularModule,\n    UiBadgeComponent,\n    UiButtonComponent,\n    UiCardComponent,\n    UiCardContentComponent,\n    UiSeparatorComponent,\n  ],\n  template: `\n    <section data-slot=\"cta-split-panel\" [class]=\"rootClass\">\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          <span ui-badge variant=\"secondary\">Two ways in</span>\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          @for (path of paths; track path.label) {\n            <div ui-card>\n              <div ui-card-content 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                  <lucide-icon [img]=\"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                <ui-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                  @for (step of path.next; track step; let i = $index) {\n                    <li class=\"flex items-start gap-2.5 text-sm\">\n                      <span class=\"text-muted-foreground/70 mt-px font-mono text-xs\">{{ i + 1 }}</span>\n                      <span>{{ step }}</span>\n                    </li>\n                  }\n                </ol>\n\n                <div class=\"mt-auto pt-6\">\n                  <button ui-button [variant]=\"path.variant\" class=\"w-full\">\n                    {{ path.cta }}\n                    <lucide-icon [img]=\"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              </div>\n            </div>\n          }\n        </div>\n      </div>\n    </section>\n  `,\n})\nexport class UiCtaSplitPanelComponent {\n  protected readonly ArrowRight = ArrowRight\n  protected readonly paths = paths\n\n  @Input('class') className?: string\n\n  get rootClass(): string {\n    return cn('bg-background', this.className)\n  }\n}\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/cta-split-panel/cta-split-panel.component.ts"
    },
    {
      "path": "packages/registry-angular/blocks/cta-split-panel/index.ts",
      "content": "export { UiCtaSplitPanelComponent } from './cta-split-panel.component'\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/cta-split-panel/index.ts"
    }
  ],
  "dependencies": [
    "lucide-angular"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/angular/badge.json",
    "https://uipkge.dev/r/angular/button.json",
    "https://uipkge.dev/r/angular/card.json",
    "https://uipkge.dev/r/angular/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"
  ]
}