{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "cta-split-demo-request-modal",
  "title": "Cta Split Demo Request Modal",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/cta-split-demo-request-modal/CtaSplitDemoRequestModal.vue",
      "content": "<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { ArrowRight, Calendar, CheckCircle2, Lock, Mail, Palette, ShieldCheck, Zap } from 'lucide-vue-next'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card } from '@/components/ui/card'\nimport { Input } from '@/components/ui/input'\n\nconst email = ref('')\nconst teamSize = ref('11-50')\nconst frameworkFocus = ref('Dual-Framework Monorepo')\nconst isSubmitted = ref(false)\n\nfunction submitDemoRequest() {\n  if (!email.value) return\n  isSubmitted.value = true\n}\n</script>\n\n<template>\n  <section\n    data-slot=\"cta-split-demo-request-modal\"\n    class=\"bg-background relative overflow-hidden px-4 py-16 sm:px-6 sm:py-24 lg:px-8\"\n  >\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        <Badge variant=\"secondary\" class=\"gap-1.5 px-3 py-1 font-mono text-xs shadow-xs\">\n          <Calendar class=\"text-primary size-3.5\" />\n          Enterprise Design System Strategy\n        </Badge>\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        <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                  <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                  <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 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                  <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              <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        </Card>\n\n        <!-- Right Column: Interactive Scheduling Form (6 Cols) -->\n        <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          <div v-if=\"!isSubmitted\" 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                <Mail class=\"text-muted-foreground absolute top-1/2 left-3.5 size-4 -translate-y-1/2\" />\n                <Input\n                  v-model=\"email\"\n                  type=\"email\"\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                <button\n                  v-for=\"size in ['1-10', '11-50', '50-200', '200+']\"\n                  :key=\"size\"\n                  type=\"button\"\n                  class=\"rounded-lg border py-1.5 text-center font-mono text-xs transition-colors\"\n                  :class=\"\n                    teamSize === size\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                  @click=\"teamSize = size\"\n                >\n                  {{ size }}\n                </button>\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                <button\n                  v-for=\"fw in ['Vue / Nuxt', 'React / Next', 'Dual-Framework']\"\n                  :key=\"fw\"\n                  type=\"button\"\n                  class=\"rounded-lg border py-1.5 text-center font-mono text-xs transition-colors\"\n                  :class=\"\n                    frameworkFocus === fw\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                  @click=\"frameworkFocus = fw\"\n                >\n                  {{ fw }}\n                </button>\n              </div>\n            </div>\n\n            <Button class=\"mt-2 h-10 w-full gap-1.5 font-mono text-xs shadow-md\" @click=\"submitDemoRequest\">\n              <span>Confirm &amp; Pick Time Slot</span>\n              <ArrowRight class=\"size-3.5\" />\n            </Button>\n          </div>\n\n          <!-- Submitted confirmation state -->\n          <div v-else 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              <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 <span class=\"text-foreground font-mono font-semibold\">{{ email }}</span\n                >. Check your inbox to select a time.\n              </p>\n            </div>\n            <Button size=\"sm\" variant=\"outline\" class=\"font-mono text-xs\" @click=\"isSubmitted = false\">\n              Submit Another Request\n            </Button>\n          </div>\n        </Card>\n      </div>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/CtaSplitDemoRequestModal.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/input.json"
  ],
  "description": "Split-pane enterprise demo request workbench with benefit highlights, team size selectors, framework focus filters, and interactive submission feedback.",
  "categories": [
    "marketing"
  ]
}