{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "cta-01",
  "title": "Conversion CTA",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-angular/blocks/cta-01/cta-01.component.ts",
      "content": "// Interactive developer CTA: eyebrow pill with edge latency, headline narrative,\n// framework-switching install terminal with clipboard copy, primary actions, and\n// a guarantees grid. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, DestroyRef, Input, inject, signal } from '@angular/core'\nimport {\n  ArrowRight,\n  Check,\n  CheckCircle2,\n  Code2,\n  Copy,\n  Download,\n  Globe,\n  Layers,\n  LucideAngularModule,\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'\n\nexport type CtaFramework = 'vue' | 'react' | 'nuxt'\n\nexport const installCommands: Record<CtaFramework, { command: string; subtitle: string }> = {\n  vue: {\n    command: 'npx shadcn-vue@latest add https://uipkge.dev/r/vue/init.json -y',\n    subtitle: 'Zero-config Vue 3.5 + Tailwind v4 + Reka UI primitives',\n  },\n  react: {\n    command: 'npx shadcn@latest add https://uipkge.dev/r/react/init.json -y',\n    subtitle: 'Production-ready React 19 + Radix primitives + CVA variants',\n  },\n  nuxt: {\n    command: 'npx shadcn-vue@latest add https://uipkge.dev/r/vue/init.json -y',\n    subtitle: 'Nuxt 4 auto-imports, SSR hydration-safe, unbundled ownership',\n  },\n}\n\nconst frameworks: { id: CtaFramework; label: string }[] = [\n  { id: 'vue', label: 'Vue 3.5' },\n  { id: 'react', label: 'React 19' },\n  { id: 'nuxt', label: 'Nuxt 4' },\n]\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-cta-01, [ui-cta-01]',\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],\n  template: `\n    <section data-slot=\"cta-01\" [class]=\"rootClass\">\n      <div class=\"mx-auto max-w-5xl space-y-10 px-4 text-center sm:px-6 lg:px-8\">\n        <!-- Eyebrow Pill -->\n        <div class=\"inline-flex items-center gap-2\">\n          <span\n            ui-badge\n            variant=\"outline\"\n            class=\"border-primary/30 text-primary bg-primary/5 gap-1.5 px-3 py-1 font-mono text-xs tracking-wide uppercase\"\n          >\n            <lucide-icon [img]=\"Zap\" class=\"size-3.5\" />\n            Unbundled Registry Distribution\n          </span>\n          <div class=\"text-muted-foreground flex items-center gap-1.5 font-mono text-xs\">\n            <span class=\"bg-success size-2 rounded-full\"></span>\n            <span>CDN Edge: {{ pingMs() }}ms P99</span>\n          </div>\n        </div>\n\n        <!-- Main Headline & Narrative -->\n        <div class=\"mx-auto max-w-3xl space-y-4\">\n          <h2 class=\"text-foreground text-3xl leading-[1.15] font-bold tracking-tight sm:text-5xl\">\n            Own Your UI. No Semver Lock-in. Zero Bloat.\n          </h2>\n          <p class=\"text-muted-foreground text-base leading-relaxed sm:text-lg\">\n            The components are the product. Source files are copied directly into your workspace. Modify, compose, and\n            refactor without fighting external package boundaries.\n          </p>\n        </div>\n\n        <!-- Interactive Developer Terminal Box -->\n        <div\n          ui-card\n          class=\"mx-auto max-w-2xl overflow-hidden border-zinc-800 bg-zinc-950 text-left text-zinc-100 shadow-sm\"\n        >\n          <!-- Terminal Titlebar -->\n          <div class=\"flex items-center justify-between border-b border-zinc-800 bg-zinc-900/70 px-4 py-3\">\n            <div class=\"flex items-center gap-2\">\n              <div class=\"flex gap-1.5\">\n                <div class=\"bg-destructive/80 size-3 rounded-full\"></div>\n                <div class=\"bg-warning/80 size-3 rounded-full\"></div>\n                <div class=\"bg-success/80 size-3 rounded-full\"></div>\n              </div>\n              <span class=\"text-muted-foreground ml-2 font-mono text-xs\">terminal — bootstrap workspace</span>\n            </div>\n\n            <!-- Framework selector tabs -->\n            <div class=\"flex items-center gap-1 rounded-md border border-zinc-800 bg-zinc-950 p-0.5\">\n              @for (fw of frameworks; track fw.id) {\n                <button type=\"button\" [class]=\"frameworkTabClass(fw.id)\" (click)=\"activeFramework.set(fw.id)\">\n                  {{ fw.label }}\n                </button>\n              }\n            </div>\n          </div>\n\n          <!-- Terminal Command Runner Body -->\n          <div class=\"space-y-3 p-4 font-mono text-xs sm:p-5\">\n            <div class=\"flex items-center justify-between gap-3 rounded-lg border border-zinc-800 bg-zinc-900/90 p-3\">\n              <div class=\"text-success flex items-center gap-2.5 overflow-x-auto select-all\">\n                <span class=\"text-muted-foreground shrink-0\">$</span>\n                <span class=\"whitespace-nowrap\">{{ installCommands[activeFramework()].command }}</span>\n              </div>\n              <button\n                ui-button\n                size=\"sm\"\n                variant=\"outline\"\n                class=\"h-7 shrink-0 gap-1.5 border-zinc-700 bg-zinc-800 px-2.5 font-mono text-xs text-zinc-200 hover:bg-zinc-700\"\n                (click)=\"copyCommand()\"\n              >\n                @if (copied()) {\n                  <lucide-icon [img]=\"Check\" class=\"text-success size-3.5\" />\n                } @else {\n                  <lucide-icon [img]=\"Copy\" class=\"size-3.5\" />\n                }\n                <span>{{ copied() ? 'Copied' : 'Copy' }}</span>\n              </button>\n            </div>\n\n            <p class=\"text-muted-foreground flex items-center gap-1.5 text-xs\">\n              <span>{{ installCommands[activeFramework()].subtitle }}</span>\n            </p>\n          </div>\n        </div>\n\n        <!-- Primary Action Buttons -->\n        <div class=\"flex flex-wrap items-center justify-center gap-3.5 pt-2\">\n          <button ui-button size=\"lg\" class=\"h-11 gap-2 px-6 font-semibold shadow-sm\" (click)=\"copyCommand()\">\n            <lucide-icon [img]=\"Download\" class=\"size-4\" />\n            {{ copied() ? 'Command Copied to Clipboard' : 'Install Components' }}\n          </button>\n          <a\n            ui-button\n            size=\"lg\"\n            variant=\"outline\"\n            class=\"h-11 gap-2 px-6 font-semibold\"\n            href=\"https://github.com/uday-a/uipkge-registry\"\n            target=\"_blank\"\n            rel=\"noreferrer\"\n          >\n            <lucide-icon [img]=\"Code2\" class=\"size-4\" />\n            Explore Source Registry\n            <lucide-icon [img]=\"ArrowRight\" class=\"size-4\" />\n          </a>\n        </div>\n\n        <!-- Trust Badges & Guarantees Grid -->\n        <div class=\"border-border grid grid-cols-2 gap-4 border-t pt-8 text-left sm:grid-cols-4\">\n          <div class=\"flex items-start gap-2.5\">\n            <lucide-icon [img]=\"CheckCircle2\" class=\"text-success mt-0.5 size-4 shrink-0\" />\n            <div>\n              <p class=\"text-foreground text-xs font-semibold\">100% Code Ownership</p>\n              <p class=\"text-muted-foreground mt-0.5 text-xs\">Files live in your repository</p>\n            </div>\n          </div>\n          <div class=\"flex items-start gap-2.5\">\n            <lucide-icon [img]=\"ShieldCheck\" class=\"text-success mt-0.5 size-4 shrink-0\" />\n            <div>\n              <p class=\"text-foreground text-xs font-semibold\">Zero Runtime Bloat</p>\n              <p class=\"text-muted-foreground mt-0.5 text-xs\">No opaque wrapper dependencies</p>\n            </div>\n          </div>\n          <div class=\"flex items-start gap-2.5\">\n            <lucide-icon [img]=\"Layers\" class=\"text-success mt-0.5 size-4 shrink-0\" />\n            <div>\n              <p class=\"text-foreground text-xs font-semibold\">Tailwind CSS v4</p>\n              <p class=\"text-muted-foreground mt-0.5 text-xs\">OKLCH color system & tokens</p>\n            </div>\n          </div>\n          <div class=\"flex items-start gap-2.5\">\n            <lucide-icon [img]=\"Globe\" class=\"text-success mt-0.5 size-4 shrink-0\" />\n            <div>\n              <p class=\"text-foreground text-xs font-semibold\">Dual Framework</p>\n              <p class=\"text-muted-foreground mt-0.5 text-xs\">Strict Vue 3.5 & React 19 parity</p>\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n  `,\n})\nexport class UiCta01Component {\n  protected readonly ArrowRight = ArrowRight\n  protected readonly Check = Check\n  protected readonly CheckCircle2 = CheckCircle2\n  protected readonly Code2 = Code2\n  protected readonly Copy = Copy\n  protected readonly Download = Download\n  protected readonly Globe = Globe\n  protected readonly Layers = Layers\n  protected readonly ShieldCheck = ShieldCheck\n  protected readonly Zap = Zap\n\n  protected readonly frameworks = frameworks\n  protected readonly installCommands = installCommands\n\n  @Input('class') className?: string\n\n  readonly activeFramework = signal<CtaFramework>('vue')\n  readonly copied = signal(false)\n  readonly pingMs = signal(14)\n\n  private copyTimer: ReturnType<typeof setTimeout> | undefined\n\n  constructor() {\n    inject(DestroyRef).onDestroy(() => clearTimeout(this.copyTimer))\n  }\n\n  get rootClass(): string {\n    return cn('bg-background border-border relative w-full overflow-hidden border-y py-16 lg:py-24', this.className)\n  }\n\n  frameworkTabClass(id: CtaFramework): string {\n    return cn(\n      'rounded px-2 py-0.5 font-mono text-xs transition-colors',\n      this.activeFramework() === id\n        ? 'bg-zinc-800 font-semibold text-zinc-100 shadow-xs'\n        : 'text-muted-foreground hover:text-zinc-200',\n    )\n  }\n\n  async copyCommand(): Promise<void> {\n    try {\n      await navigator.clipboard.writeText(installCommands[this.activeFramework()].command)\n    } catch {\n      // Clipboard fallback\n    }\n    this.copied.set(true)\n    clearTimeout(this.copyTimer)\n    this.copyTimer = setTimeout(() => this.copied.set(false), 2000)\n  }\n}\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/cta-01/cta-01.component.ts"
    },
    {
      "path": "packages/registry-angular/blocks/cta-01/index.ts",
      "content": "export { UiCta01Component, installCommands, type CtaFramework } from './cta-01.component'\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/cta-01/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"
  ],
  "description": "Interactive developer CTA section with live framework switcher, interactive CLI installation terminal, 1-click clipboard copy, and production guarantees.",
  "categories": [
    "marketing"
  ]
}