{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "cta-gradient-glow-action",
  "title": "Cta Gradient Glow Action",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-angular/blocks/cta-gradient-glow-action/cta-gradient-glow-action.component.ts",
      "content": "// Conversion call-to-action with ambient glow, multi-package-manager terminal\n// installation strip, and open source trust assurances. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, DestroyRef, Input, computed, inject, signal } from '@angular/core'\nimport { ArrowRight, Check, Copy, LucideAngularModule, Terminal } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiCardComponent } from '@/ui/card/card.component'\n\nexport type GlowPackageManager = 'pnpm' | 'npm' | 'bun' | 'yarn'\n\nexport const glowCliCommands: Record<GlowPackageManager, string> = {\n  pnpm: 'pnpm dlx shadcn@latest add https://uipkge.dev/r/react/init.json',\n  npm: 'npx shadcn@latest add https://uipkge.dev/r/react/init.json',\n  bun: 'bunx --bun shadcn@latest add https://uipkge.dev/r/react/init.json',\n  yarn: 'yarn dlx shadcn@latest add https://uipkge.dev/r/react/init.json',\n}\n\nconst packageManagers: GlowPackageManager[] = ['pnpm', 'npm', 'bun', 'yarn']\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-cta-gradient-glow-action, [ui-cta-gradient-glow-action]',\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, UiButtonComponent, UiCardComponent],\n  template: `\n    <section data-slot=\"cta-gradient-glow-action\" [class]=\"rootClass\">\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        ></div>\n\n        <!-- Main CTA Card -->\n        <div\n          ui-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            <lucide-icon [img]=\"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                @for (pm of packageManagers; track pm) {\n                  <button type=\"button\" [class]=\"pmTabClass(pm)\" (click)=\"packageManager.set(pm)\">\n                    {{ pm }}\n                  </button>\n                }\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                <lucide-icon [img]=\"Terminal\" class=\"text-primary size-4 shrink-0\" />\n                <span class=\"truncate font-semibold select-all\">{{ cliCommand() }}</span>\n              </div>\n\n              <button\n                ui-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                @if (isCopied()) {\n                  <lucide-icon [img]=\"Check\" class=\"text-success size-3.5\" />\n                } @else {\n                  <lucide-icon [img]=\"Copy\" class=\"text-muted-foreground size-3.5\" />\n                }\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 ui-button size=\"lg\" class=\"h-11 gap-2 px-6 font-mono text-xs shadow-md\">\n              <span>Browse 450+ Component Blocks</span>\n              <lucide-icon [img]=\"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              <lucide-icon [img]=\"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              <lucide-icon [img]=\"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              <lucide-icon [img]=\"Check\" class=\"text-success size-4\" />\n              <span>Dual-Framework AST Parity</span>\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n  `,\n})\nexport class UiCtaGradientGlowActionComponent {\n  protected readonly ArrowRight = ArrowRight\n  protected readonly Check = Check\n  protected readonly Copy = Copy\n  protected readonly Terminal = Terminal\n\n  protected readonly packageManagers = packageManagers\n\n  @Input('class') className?: string\n\n  readonly packageManager = signal<GlowPackageManager>('pnpm')\n  readonly isCopied = signal(false)\n\n  private copyTimer: ReturnType<typeof setTimeout> | undefined\n\n  constructor() {\n    inject(DestroyRef).onDestroy(() => clearTimeout(this.copyTimer))\n  }\n\n  readonly cliCommand = computed(() => glowCliCommands[this.packageManager()])\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  pmTabClass(pm: GlowPackageManager): string {\n    return cn(\n      'rounded-md px-2.5 py-0.5 font-mono text-xs uppercase transition-colors',\n      this.packageManager() === pm\n        ? 'bg-primary text-primary-foreground font-bold shadow-xs'\n        : 'text-muted-foreground hover:text-foreground',\n    )\n  }\n\n  async copyCommand(): Promise<void> {\n    try {\n      await navigator.clipboard.writeText(this.cliCommand())\n    } catch {\n      // Clipboard fallback\n    }\n    this.isCopied.set(true)\n    clearTimeout(this.copyTimer)\n    this.copyTimer = setTimeout(() => this.isCopied.set(false), 2000)\n  }\n}\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/cta-gradient-glow-action/cta-gradient-glow-action.component.ts"
    },
    {
      "path": "packages/registry-angular/blocks/cta-gradient-glow-action/index.ts",
      "content": "export {\n  UiCtaGradientGlowActionComponent,\n  glowCliCommands,\n  type GlowPackageManager,\n} from './cta-gradient-glow-action.component'\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/cta-gradient-glow-action/index.ts"
    }
  ],
  "dependencies": [
    "lucide-angular"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/angular/button.json",
    "https://uipkge.dev/r/angular/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"
  ]
}