{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "cta-split-demo-request-modal",
  "title": "Cta Split Demo Request Modal",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-angular/blocks/cta-split-demo-request-modal/cta-split-demo-request-modal.component.ts",
      "content": "// Split-pane enterprise demo request workbench with benefit highlights, team size\n// selectors, framework focus filters, and interactive submission feedback.\n// Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, signal } from '@angular/core'\nimport {\n  ArrowRight,\n  Calendar,\n  CheckCircle2,\n  Lock,\n  LucideAngularModule,\n  Mail,\n  Palette,\n  ShieldCheck,\n  Zap,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiCardComponent } from '@/ui/card/card.component'\nimport { UiInputComponent } from '@/ui/input/input.component'\n\nconst teamSizes = ['1-10', '11-50', '50-200', '200+']\nconst frameworkOptions = ['Vue / Nuxt', 'React / Next', 'Dual-Framework']\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-cta-split-demo-request-modal, [ui-cta-split-demo-request-modal]',\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: [LucideAngularModule, UiBadgeComponent, UiButtonComponent, UiCardComponent, UiInputComponent],\n  template: `\n    <section data-slot=\"cta-split-demo-request-modal\" [class]=\"rootClass\">\n      <div class=\"mx-auto max-w-6xl space-y-12\">\n        <!-- Section Header -->\n        <div class=\"mx-auto max-w-3xl space-y-4 text-center\">\n          <span ui-badge variant=\"secondary\" class=\"gap-1.5 px-3 py-1 font-mono text-xs shadow-xs\">\n            <lucide-icon [img]=\"Calendar\" class=\"text-primary size-3.5\" />\n            Enterprise Design System Strategy\n          </span>\n          <h2 class=\"text-foreground text-3xl font-bold tracking-tight sm:text-4xl\">\n            Schedule an architectural walkthrough.\n          </h2>\n          <p class=\"text-muted-foreground text-base\">\n            See how unbundled registries and dual-framework tokens accelerate enterprise frontend velocity.\n          </p>\n        </div>\n\n        <!-- Split Workbench Container -->\n        <div class=\"grid grid-cols-1 items-stretch gap-8 lg:grid-cols-12\">\n          <!-- Left Column: Enterprise Benefits (6 Cols) -->\n          <div\n            ui-card\n            class=\"border-border bg-card/95 flex flex-col justify-between space-y-6 rounded-2xl p-6 text-left shadow-xl sm:p-8 lg:col-span-6\"\n          >\n            <div class=\"space-y-6\">\n              <h3 class=\"text-foreground font-mono text-xl font-bold\">What you'll discover on the call:</h3>\n\n              <div class=\"space-y-4\">\n                <div class=\"flex items-start gap-3\">\n                  <div class=\"bg-primary/10 border-primary/20 text-primary shrink-0 rounded-lg border p-2\">\n                    <lucide-icon [img]=\"Zap\" class=\"size-4\" />\n                  </div>\n                  <div>\n                    <h4 class=\"text-foreground font-mono text-xs font-bold\">Eliminating NPM Semver Bottlenecks</h4>\n                    <p class=\"text-muted-foreground mt-0.5 text-xs\">\n                      How code ownership prevents breaking upgrades and unblocks feature teams.\n                    </p>\n                  </div>\n                </div>\n\n                <div class=\"flex items-start gap-3\">\n                  <div class=\"bg-primary/10 border-primary/20 text-primary shrink-0 rounded-lg border p-2\">\n                    <lucide-icon [img]=\"ShieldCheck\" class=\"size-4\" />\n                  </div>\n                  <div>\n                    <h4 class=\"text-foreground font-mono text-xs font-bold\">\n                      Private Registry Mirroring &amp; Air-Gapping\n                    </h4>\n                    <p class=\"text-muted-foreground mt-0.5 text-xs\">\n                      Host internal organizational registries behind your enterprise firewall with custom security\n                      audits.\n                    </p>\n                  </div>\n                </div>\n\n                <div class=\"flex items-start gap-3\">\n                  <div class=\"bg-primary/10 border-primary/20 text-primary shrink-0 rounded-lg border p-2\">\n                    <lucide-icon [img]=\"Palette\" class=\"size-4\" />\n                  </div>\n                  <div>\n                    <h4 class=\"text-foreground font-mono text-xs font-bold\">Tailwind CSS v4 Token Architecture</h4>\n                    <p class=\"text-muted-foreground mt-0.5 text-xs\">\n                      100% mathematical token sync across Vue 3.5 SFCs and React 19 TSX islands.\n                    </p>\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            <!-- Trust footer -->\n            <div\n              class=\"border-border text-muted-foreground flex items-center justify-between border-t pt-4 font-mono text-xs\"\n            >\n              <span class=\"flex items-center gap-1.5\">\n                <lucide-icon [img]=\"Lock\" class=\"text-primary size-3.5\" /> NDA Protected &bull; No Obligation\n              </span>\n              <span class=\"text-success font-semibold\">&check; 30-Min Fast Track</span>\n            </div>\n          </div>\n\n          <!-- Right Column: Interactive Scheduling Form (6 Cols) -->\n          <div\n            ui-card\n            class=\"border-border bg-card/95 flex flex-col justify-between space-y-6 rounded-2xl p-6 text-left shadow-sm sm:p-8 lg:col-span-6\"\n          >\n            @if (!isSubmitted()) {\n              <div class=\"space-y-5\">\n                <div class=\"space-y-1\">\n                  <h3 class=\"text-foreground font-mono text-lg font-bold\">Request Your Custom Demo</h3>\n                  <p class=\"text-muted-foreground text-xs\">\n                    Fill in your team details to receive an instant calendar invite.\n                  </p>\n                </div>\n\n                <!-- Email Field -->\n                <div class=\"space-y-1.5\">\n                  <label class=\"text-muted-foreground font-mono text-xs\">Work Email Address</label>\n                  <div class=\"relative\">\n                    <lucide-icon\n                      [img]=\"Mail\"\n                      class=\"text-muted-foreground absolute top-1/2 left-3.5 size-4 -translate-y-1/2\"\n                    />\n                    <ui-input\n                      type=\"email\"\n                      [value]=\"email()\"\n                      (valueChange)=\"email.set($event)\"\n                      placeholder=\"alex@company.com\"\n                      class=\"bg-card border-border h-10 rounded-xl pl-10 font-mono text-xs shadow-xs\"\n                    />\n                  </div>\n                </div>\n\n                <!-- Team Size Picker -->\n                <div class=\"space-y-1.5\">\n                  <label class=\"text-muted-foreground font-mono text-xs\">Engineering Team Size</label>\n                  <div class=\"grid grid-cols-4 gap-1.5\">\n                    @for (size of teamSizes; track size) {\n                      <button type=\"button\" [class]=\"optionClass(teamSize() === size)\" (click)=\"teamSize.set(size)\">\n                        {{ size }}\n                      </button>\n                    }\n                  </div>\n                </div>\n\n                <!-- Framework Focus -->\n                <div class=\"space-y-1.5\">\n                  <label class=\"text-muted-foreground font-mono text-xs\">Primary Architecture Focus</label>\n                  <div class=\"grid grid-cols-3 gap-1.5\">\n                    @for (fw of frameworkOptions; track fw) {\n                      <button\n                        type=\"button\"\n                        [class]=\"optionClass(frameworkFocus() === fw)\"\n                        (click)=\"frameworkFocus.set(fw)\"\n                      >\n                        {{ fw }}\n                      </button>\n                    }\n                  </div>\n                </div>\n\n                <button\n                  ui-button\n                  class=\"mt-2 h-10 w-full gap-1.5 font-mono text-xs shadow-md\"\n                  (click)=\"submitDemoRequest()\"\n                >\n                  <span>Confirm &amp; Pick Time Slot</span>\n                  <lucide-icon [img]=\"ArrowRight\" class=\"size-3.5\" />\n                </button>\n              </div>\n            } @else {\n              <div class=\"space-y-4 py-12 text-center\">\n                <div\n                  class=\"border-success/20 bg-success/10 text-success mx-auto flex size-12 items-center justify-center rounded-full border\"\n                >\n                  <lucide-icon [img]=\"CheckCircle2\" class=\"size-6\" />\n                </div>\n                <div class=\"space-y-1\">\n                  <h4 class=\"text-foreground font-mono text-base font-bold\">Demo Request Received</h4>\n                  <p class=\"text-muted-foreground mx-auto max-w-xs text-xs\">\n                    We've sent calendar access to\n                    <span class=\"text-foreground font-mono font-semibold\">{{ email() }}</span\n                    >. Check your inbox to select a time.\n                  </p>\n                </div>\n                <button\n                  ui-button\n                  size=\"sm\"\n                  variant=\"outline\"\n                  class=\"font-mono text-xs\"\n                  (click)=\"isSubmitted.set(false)\"\n                >\n                  Submit Another Request\n                </button>\n              </div>\n            }\n          </div>\n        </div>\n      </div>\n    </section>\n  `,\n})\nexport class UiCtaSplitDemoRequestModalComponent {\n  protected readonly ArrowRight = ArrowRight\n  protected readonly Calendar = Calendar\n  protected readonly CheckCircle2 = CheckCircle2\n  protected readonly Lock = Lock\n  protected readonly Mail = Mail\n  protected readonly Palette = Palette\n  protected readonly ShieldCheck = ShieldCheck\n  protected readonly Zap = Zap\n\n  protected readonly teamSizes = teamSizes\n  protected readonly frameworkOptions = frameworkOptions\n\n  @Input('class') className?: string\n\n  readonly email = signal('')\n  readonly teamSize = signal('11-50')\n  readonly frameworkFocus = signal('Dual-Framework Monorepo')\n  readonly isSubmitted = signal(false)\n\n  get rootClass(): string {\n    return cn('bg-background relative overflow-hidden px-4 py-16 sm:px-6 sm:py-24 lg:px-8', this.className)\n  }\n\n  optionClass(selected: boolean): string {\n    return cn(\n      'rounded-lg border py-1.5 text-center font-mono text-xs transition-colors',\n      selected\n        ? 'border-primary bg-primary text-primary-foreground font-semibold shadow-xs'\n        : 'border-border bg-card text-muted-foreground hover:text-foreground',\n    )\n  }\n\n  submitDemoRequest(): void {\n    if (!this.email()) return\n    this.isSubmitted.set(true)\n  }\n}\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/cta-split-demo-request-modal/cta-split-demo-request-modal.component.ts"
    },
    {
      "path": "packages/registry-angular/blocks/cta-split-demo-request-modal/index.ts",
      "content": "export { UiCtaSplitDemoRequestModalComponent } from './cta-split-demo-request-modal.component'\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/cta-split-demo-request-modal/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/input.json"
  ],
  "description": "Split-pane enterprise demo request workbench with benefit highlights, team size selectors, framework focus filters, and interactive submission feedback.",
  "categories": [
    "marketing"
  ]
}