{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "cta-01",
  "title": "Conversion CTA",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-svelte/blocks/cta-01/Cta01.svelte",
      "content": "<script lang=\"ts\" module>\n  export type CtaFramework = 'vue' | 'react' | 'svelte'\n</script>\n\n<script lang=\"ts\">\n  import {\n    ArrowRight,\n    Check,\n    CheckCircle2,\n    Code2,\n    Copy,\n    Download,\n    Globe,\n    Layers,\n    ShieldCheck,\n    Zap,\n  } from '@lucide/svelte'\n  import { cn } from '$lib/utils'\n  import { Badge } from '$lib/components/ui/badge'\n  import { Button } from '$lib/components/ui/button'\n  import { Card } from '$lib/components/ui/card'\n\n  let activeFramework = $state<CtaFramework>('vue')\n  let copied = $state(false)\n  const pingMs = 14\n\n  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    svelte: {\n      command: 'npx shadcn-svelte@latest add https://uipkge.dev/r/svelte/init.json -y',\n      subtitle: 'SvelteKit-ready Svelte 5 runes, SSR-safe, unbundled ownership',\n    },\n  }\n\n  const frameworks: { id: CtaFramework; label: string }[] = [\n    { id: 'vue', label: 'Vue 3.5' },\n    { id: 'react', label: 'React 19' },\n    { id: 'svelte', label: 'Svelte 5' },\n  ]\n\n  function copyCommand() {\n    navigator.clipboard.writeText(installCommands[activeFramework].command)\n    copied = true\n    setTimeout(() => (copied = false), 2000)\n  }\n</script>\n\n<section\n  data-slot=\"cta-01\"\n  class=\"bg-background border-border relative w-full overflow-hidden border-y py-16 lg:py-24\"\n>\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      <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        <Zap class=\"size-3.5\" />\n        Unbundled Registry Distribution\n      </Badge>\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    <Card class=\"mx-auto max-w-2xl overflow-hidden border-zinc-800 bg-zinc-950 text-left text-zinc-100 shadow-sm\">\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          {#each frameworks as fw (fw.id)}\n            <button\n              type=\"button\"\n              class={cn(\n                'rounded px-2 py-0.5 font-mono text-xs transition-colors',\n                activeFramework === fw.id\n                  ? 'bg-zinc-800 font-semibold text-zinc-100 shadow-xs'\n                  : 'text-muted-foreground hover:text-zinc-200',\n              )}\n              onclick={() => (activeFramework = fw.id)}\n            >\n              {fw.label}\n            </button>\n          {/each}\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            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            onclick={copyCommand}\n          >\n            {#if copied}\n              <Check class=\"text-success size-3.5\" />\n            {:else}\n              <Copy class=\"size-3.5\" />\n            {/if}\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    </Card>\n\n    <!-- Primary Action Buttons -->\n    <div class=\"flex flex-wrap items-center justify-center gap-3.5 pt-2\">\n      <Button size=\"lg\" class=\"h-11 gap-2 px-6 font-semibold shadow-sm\" onclick={copyCommand}>\n        <Download class=\"size-4\" />\n        {copied ? 'Command Copied to Clipboard' : 'Install Components'}\n      </Button>\n      <Button size=\"lg\" variant=\"outline\" class=\"h-11 gap-2 px-6 font-semibold\">\n        {#snippet child({ props })}\n          <a href=\"https://github.com/uday-a/uipkge-registry\" target=\"_blank\" rel=\"noreferrer\" {...props}>\n            <Code2 class=\"size-4\" />\n            Explore Source Registry\n            <ArrowRight class=\"size-4\" />\n          </a>\n        {/snippet}\n      </Button>\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        <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        <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        <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        <Globe class=\"text-success mt-0.5 size-4 shrink-0\" />\n        <div>\n          <p class=\"text-foreground text-xs font-semibold\">Triple Framework</p>\n          <p class=\"text-muted-foreground mt-0.5 text-xs\">Strict Vue 3.5, React 19 & Svelte 5 parity</p>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n",
      "type": "registry:block",
      "target": "~/src/lib/components/blocks/cta-01/Cta01.svelte"
    }
  ],
  "dependencies": [
    "@lucide/svelte"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/svelte/badge.json",
    "https://uipkge.dev/r/svelte/button.json",
    "https://uipkge.dev/r/svelte/card.json"
  ],
  "description": "Interactive developer CTA section with live framework switcher, interactive CLI installation terminal, 1-click clipboard copy, and production guarantees.",
  "categories": [
    "marketing"
  ]
}