{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "cta-03",
  "title": "CTA 03",
  "description": "Newsletter subscription CTA with an email input and a submit button. Use it to capture leads directly within your content by embedding a low-friction email signup anywhere on the page.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "input"
  ],
  "files": [
    {
      "path": "src/registry/blocks/cta-03/cta.tsx",
      "content": "\"use client\";\n\nimport { useEffect, useRef, useState } from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\n\nconst GRID = 80;\n\nconst GridBackground = () => {\n  const ref = useRef<HTMLDivElement>(null);\n  const [grid, setGrid] = useState({ cols: 0, rows: 0, cellW: 0, cellH: 0 });\n\n  useEffect(() => {\n    const update = () => {\n      if (!ref.current) return;\n      const { width, height } = ref.current.getBoundingClientRect();\n      const cols = Math.max(1, Math.round(width / GRID));\n      const rows = Math.max(1, Math.round(height / GRID));\n      setGrid({ cols, rows, cellW: width / cols, cellH: height / rows });\n    };\n    update();\n    window.addEventListener(\"resize\", update);\n    return () => window.removeEventListener(\"resize\", update);\n  }, []);\n\n  const { cols, rows, cellW, cellH } = grid;\n  const total = cols * rows;\n\n  return (\n    <div ref={ref} className=\"absolute inset-0 overflow-hidden\">\n      {total > 0 && (\n        <div\n          className=\"h-full w-full\"\n          style={{\n            display: \"grid\",\n            gridTemplateColumns: `repeat(${cols}, ${cellW}px)`,\n            gridTemplateRows: `repeat(${rows}, ${cellH}px)`,\n          }}\n        >\n          {Array.from({ length: total }).map((_, i) => (\n            <div key={i} className=\"border-r border-b border-white/6\" />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n};\n\ninterface Cta03Props {\n  title?: string;\n  description?: string;\n  placeholder?: string;\n  submitText?: string;\n  className?: string;\n}\n\nconst Cta03 = ({\n  title = \"Stay Updated\",\n  description = \"Subscribe to get the latest blocks, updates, and tips directly in your inbox.\",\n  placeholder = \"Enter your email\",\n  submitText = \"Subscribe\",\n  className,\n}: Cta03Props) => (\n  <section className={cn(\"container mx-auto px-8 py-12 md:py-24\", className)}>\n    <div className=\"relative overflow-hidden rounded-md bg-zinc-950 p-8 text-white md:p-12\">\n      <GridBackground />\n      <div className=\"relative z-10 grid items-center gap-8 lg:grid-cols-2\">\n        <div className=\"flex flex-col gap-4\">\n          <h2 className=\"text-4xl leading-tight font-medium tracking-tight md:text-5xl\">\n            {title}\n          </h2>\n          <p className=\"text-white/50 md:text-lg\">{description}</p>\n        </div>\n        <div className=\"flex flex-col gap-4\">\n          <div className=\"flex flex-col gap-4 lg:flex-row\">\n            <Input\n              type=\"email\"\n              placeholder={placeholder}\n              className=\"min-h-10 flex-1 border-white/20 bg-white/10 placeholder:text-white/40 focus-visible:ring-white/30\"\n            />\n            <Button variant=\"secondary\" size=\"lg\">\n              {submitText}\n            </Button>\n          </div>\n          <p className=\"text-sm text-white/40\">\n            By subscribing you agree to our{\" \"}\n            <a href=\"#\" className=\"underline\">\n              Privacy Policy\n            </a>\n          </p>\n        </div>\n      </div>\n    </div>\n  </section>\n);\n\nexport default Cta03;\n",
      "type": "registry:component",
      "target": "components/cta-03.tsx"
    }
  ],
  "meta": {
    "image": "/r/previews/cta-03.webp",
    "imageDark": "/r/previews/cta-03-dark.webp",
    "prose": {
      "about": "CTA 03 is a newsletter or lead capture section with a short headline, a supporting description, an email input field, and a submit button. Built with shadcn/ui Input and Button components, it handles the form layout client-side and can be wired to any email marketing API or Supabase table. The layout is centered and compact, designed to sit inline within content pages rather than as a full-width section.",
      "whenToUse": [
        "Blog posts and documentation pages where capturing the reader's email at the end converts well",
        "Coming-soon pages that need a lightweight waitlist form without a full waitlist section",
        "Product newsletters where embedding a signup form in the footer of content pages grows the list passively",
        "Any page where the primary goal is email capture rather than a direct product conversion"
      ],
      "notes": "Add a brief privacy note below the input ('No spam. Unsubscribe anytime.') to reduce friction. Connect the form to Resend, Loops, or a Supabase table to store and process submissions."
    }
  },
  "categories": [
    "cta"
  ],
  "type": "registry:block"
}