{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "cta-gradient-glow-action",
  "title": "Cta Gradient Glow Action",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/cta-gradient-glow-action/CtaGradientGlowAction.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { ArrowRight, Check, Copy, Terminal } from 'lucide-vue-next'\nimport { Button } from '@/components/ui/button'\nimport { Card } from '@/components/ui/card'\n\ntype PackageManager = 'pnpm' | 'npm' | 'bun' | 'yarn'\n\nconst packageManager = ref<PackageManager>('pnpm')\nconst isCopied = ref(false)\n\nconst cliCommand = computed(() => {\n  switch (packageManager.value) {\n    case 'pnpm':\n      return 'pnpm dlx shadcn-vue@latest add https://uipkge.dev/r/vue/init.json'\n    case 'npm':\n      return 'npx shadcn-vue@latest add https://uipkge.dev/r/vue/init.json'\n    case 'bun':\n      return 'bunx --bun shadcn-vue@latest add https://uipkge.dev/r/vue/init.json'\n    case 'yarn':\n      return 'yarn dlx shadcn-vue@latest add https://uipkge.dev/r/vue/init.json'\n  }\n})\n\nfunction copyCommand() {\n  navigator.clipboard.writeText(cliCommand.value)\n  isCopied.value = true\n  setTimeout(() => {\n    isCopied.value = false\n  }, 2000)\n}\n</script>\n\n<template>\n  <section\n    data-slot=\"cta-gradient-glow-action\"\n    class=\"bg-background relative overflow-hidden px-4 py-16 sm:px-6 sm:py-24 lg:px-8\"\n  >\n    <div class=\"relative mx-auto max-w-5xl\">\n      <!-- Ambient Glow Behind CTA Card -->\n      <div\n        class=\"from-primary/30 to-primary/30 pointer-events-none absolute -inset-1 rounded-3xl bg-gradient-to-r opacity-60 blur-2xl\"\n      />\n\n      <!-- Main CTA Card -->\n      <Card\n        class=\"border-border bg-card/95 relative space-y-8 overflow-hidden rounded-3xl p-8 text-center shadow-sm backdrop-blur-xl sm:p-14\"\n      >\n        <!-- Floating decorative badge -->\n        <div\n          class=\"border-primary/30 bg-primary/10 text-primary inline-flex items-center gap-1.5 rounded-full border px-3 py-1 font-mono text-xs\"\n        >\n          <Terminal class=\"size-3.5\" />\n          <span>Production Ready &bull; Unbundled Distribution</span>\n        </div>\n\n        <!-- Headline & Subtitle -->\n        <div class=\"mx-auto max-w-2xl space-y-3\">\n          <h2 class=\"text-foreground text-3xl font-bold tracking-tight sm:text-4xl lg:text-5xl\">\n            Start building with unbundled code in 30 seconds.\n          </h2>\n          <p class=\"text-muted-foreground text-base sm:text-lg\">\n            Run the init command below to copy calibrated tokens, utilities, and primitives directly into your\n            repository.\n          </p>\n        </div>\n\n        <!-- CLI Installation Terminal Box -->\n        <div class=\"mx-auto max-w-xl space-y-2\">\n          <!-- Package manager selector tabs -->\n          <div class=\"flex items-center justify-between px-2\">\n            <div class=\"flex items-center gap-1\">\n              <button\n                v-for=\"pm in ['pnpm', 'npm', 'bun', 'yarn'] as PackageManager[]\"\n                :key=\"pm\"\n                type=\"button\"\n                class=\"rounded-md px-2.5 py-0.5 font-mono text-xs uppercase transition-colors\"\n                :class=\"\n                  packageManager === pm\n                    ? 'bg-primary text-primary-foreground font-bold shadow-xs'\n                    : 'text-muted-foreground hover:text-foreground'\n                \"\n                @click=\"packageManager = pm\"\n              >\n                {{ pm }}\n              </button>\n            </div>\n            <span class=\"text-muted-foreground font-mono text-xs\">Single Command Init</span>\n          </div>\n\n          <!-- Command Display Strip -->\n          <div\n            class=\"border-border bg-muted/50 text-foreground flex items-center justify-between gap-3 overflow-hidden rounded-xl border p-3.5 text-left font-mono text-xs shadow-inner sm:p-4\"\n          >\n            <div class=\"flex min-w-0 items-center gap-2\">\n              <Terminal class=\"text-primary size-4 shrink-0\" />\n              <span class=\"truncate font-semibold select-all\">{{ cliCommand }}</span>\n            </div>\n\n            <Button\n              size=\"sm\"\n              variant=\"outline\"\n              class=\"h-8 shrink-0 gap-1.5 px-3 font-mono text-xs\"\n              @click=\"copyCommand\"\n            >\n              <Check v-if=\"isCopied\" class=\"text-success size-3.5\" />\n              <Copy v-else class=\"text-muted-foreground size-3.5\" />\n              <span>{{ isCopied ? 'Copied' : 'Copy' }}</span>\n            </Button>\n          </div>\n        </div>\n\n        <!-- Action Links -->\n        <div class=\"flex flex-wrap items-center justify-center gap-4 pt-2\">\n          <Button size=\"lg\" class=\"h-11 gap-2 px-6 font-mono text-xs shadow-md\">\n            <span>Browse 450+ Component Blocks</span>\n            <ArrowRight class=\"size-4\" />\n          </Button>\n        </div>\n\n        <!-- Developer Trust Assurance Badges -->\n        <div\n          class=\"border-border/60 text-muted-foreground flex flex-wrap items-center justify-center gap-6 border-t pt-6 font-mono text-xs sm:gap-10\"\n        >\n          <div class=\"flex items-center gap-1.5\">\n            <Check class=\"text-success size-4\" />\n            <span>100% Free &amp; Open Source (MIT)</span>\n          </div>\n          <div class=\"flex items-center gap-1.5\">\n            <Check class=\"text-success size-4\" />\n            <span>Zero Vendor NPM Dependencies</span>\n          </div>\n          <div class=\"flex items-center gap-1.5\">\n            <Check class=\"text-success size-4\" />\n            <span>Dual-Framework AST Parity</span>\n          </div>\n        </div>\n      </Card>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/CtaGradientGlowAction.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json"
  ],
  "description": "Conversion call-to-action block with ambient atmospheric radial glow, multi-package manager terminal installation strip, and open source trust assurances.",
  "categories": [
    "marketing"
  ]
}