{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "cta-gradient-glow-action",
  "title": "Cta Gradient Glow Action",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/cta-gradient-glow-action/CtaGradientGlowAction.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { ArrowRight, Check, Copy, Terminal } from 'lucide-react'\nimport { Button } from '@/components/ui/button'\nimport { Card } from '@/components/ui/card'\nimport { cn } from '@/lib/utils'\n\ntype PackageManager = 'pnpm' | 'npm' | 'bun' | 'yarn'\n\nexport interface CtaGradientGlowActionProps {\n  className?: string\n}\n\nexport function CtaGradientGlowAction({ className }: CtaGradientGlowActionProps) {\n  const [packageManager, setPackageManager] = React.useState<PackageManager>('pnpm')\n  const [isCopied, setIsCopied] = React.useState(false)\n\n  const cliCommand = React.useMemo(() => {\n    switch (packageManager) {\n      case 'pnpm':\n        return 'pnpm dlx shadcn@latest add https://uipkge.dev/r/react/init.json'\n      case 'npm':\n        return 'npx shadcn@latest add https://uipkge.dev/r/react/init.json'\n      case 'bun':\n        return 'bunx --bun shadcn@latest add https://uipkge.dev/r/react/init.json'\n      case 'yarn':\n        return 'yarn dlx shadcn@latest add https://uipkge.dev/r/react/init.json'\n    }\n  }, [packageManager])\n\n  const copyCommand = () => {\n    navigator.clipboard.writeText(cliCommand)\n    setIsCopied(true)\n    setTimeout(() => setIsCopied(false), 2000)\n  }\n\n  return (\n    <section\n      data-slot=\"cta-gradient-glow-action\"\n      className={cn('bg-background relative overflow-hidden px-4 py-16 sm:px-6 sm:py-24 lg:px-8', className)}\n    >\n      <div className=\"relative mx-auto max-w-5xl\">\n        {/* Ambient Glow Behind CTA Card */}\n        <div className=\"from-primary/30 to-primary/30 pointer-events-none absolute -inset-1 rounded-3xl bg-gradient-to-r opacity-60 blur-2xl\" />\n\n        {/* Main CTA Card */}\n        <Card className=\"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          {/* Floating decorative badge */}\n          <div className=\"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            <Terminal className=\"size-3.5\" />\n            <span>Production Ready &bull; Unbundled Distribution</span>\n          </div>\n\n          {/* Headline & Subtitle */}\n          <div className=\"mx-auto max-w-2xl space-y-3\">\n            <h2 className=\"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 className=\"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 className=\"mx-auto max-w-xl space-y-2\">\n            {/* Package manager selector tabs */}\n            <div className=\"flex items-center justify-between px-2\">\n              <div className=\"flex items-center gap-1\">\n                {(['pnpm', 'npm', 'bun', 'yarn'] as PackageManager[]).map((pm) => (\n                  <button\n                    key={pm}\n                    type=\"button\"\n                    className={cn(\n                      'rounded-md px-2.5 py-0.5 font-mono text-xs uppercase transition-colors',\n                      packageManager === pm\n                        ? 'bg-primary text-primary-foreground font-bold shadow-xs'\n                        : 'text-muted-foreground hover:text-foreground',\n                    )}\n                    onClick={() => setPackageManager(pm)}\n                  >\n                    {pm}\n                  </button>\n                ))}\n              </div>\n              <span className=\"text-muted-foreground font-mono text-xs\">Single Command Init</span>\n            </div>\n\n            {/* Command Display Strip */}\n            <div className=\"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              <div className=\"flex min-w-0 items-center gap-2\">\n                <Terminal className=\"text-primary size-4 shrink-0\" />\n                <span className=\"truncate font-semibold select-all\">{cliCommand}</span>\n              </div>\n\n              <Button\n                size=\"sm\"\n                variant=\"outline\"\n                className=\"h-8 shrink-0 gap-1.5 px-3 font-mono text-xs\"\n                onClick={copyCommand}\n              >\n                {isCopied ? (\n                  <Check className=\"text-success size-3.5\" />\n                ) : (\n                  <Copy className=\"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 className=\"flex flex-wrap items-center justify-center gap-4 pt-2\">\n            <Button size=\"lg\" className=\"h-11 gap-2 px-6 font-mono text-xs shadow-md\">\n              <span>Browse 450+ Component Blocks</span>\n              <ArrowRight className=\"size-4\" />\n            </Button>\n          </div>\n\n          {/* Developer Trust Assurance Badges */}\n          <div className=\"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            <div className=\"flex items-center gap-1.5\">\n              <Check className=\"text-success size-4\" />\n              <span>100% Free &amp; Open Source (MIT)</span>\n            </div>\n            <div className=\"flex items-center gap-1.5\">\n              <Check className=\"text-success size-4\" />\n              <span>Zero Vendor NPM Dependencies</span>\n            </div>\n            <div className=\"flex items-center gap-1.5\">\n              <Check className=\"text-success size-4\" />\n              <span>Dual-Framework AST Parity</span>\n            </div>\n          </div>\n        </Card>\n      </div>\n    </section>\n  )\n}\nexport default CtaGradientGlowAction\n",
      "type": "registry:block",
      "target": "~/components/blocks/CtaGradientGlowAction.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/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"
  ]
}