{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "newsletter-2",
  "title": "Horizontal Newsletter Band",
  "description": "Full-width newsletter section band on a muted panel, with branding label and copy on the left and an inline email subscribe form on the right.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "button",
    "checkbox",
    "input",
    "sonner"
  ],
  "files": [
    {
      "path": "registry/blocks/newsletter/2/newsletter-block.tsx",
      "content": "\"use client\"\nimport { toast } from \"sonner\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Checkbox } from \"@/components/ui/checkbox\"\nimport { Input } from \"@/components/ui/input\"\nimport { Toaster } from \"@/components/ui/sonner\"\nimport { IconPlaceholder } from \"@/components/icons/icon-placeholder\"\n\nexport default function NewsletterBlock() {\n  return (\n    <section className=\"flex w-full items-center justify-center bg-background px-6 py-12 text-foreground\">\n      <Toaster />\n      <div className=\"w-full max-w-5xl rounded-xl bg-muted px-8 py-10 sm:px-12 sm:py-12\">\n        <div className=\"flex flex-col gap-8 md:flex-row md:items-center md:justify-between md:gap-16\">\n          <div className=\"flex flex-col gap-3 md:max-w-sm\">\n            <p className=\"text-xs font-semibold tracking-widest text-muted-foreground uppercase\">\n              Acme Weekly\n            </p>\n            <h2 className=\"font-heading text-2xl leading-tight font-bold tracking-tight sm:text-3xl\">\n              Insights that move your work forward\n            </h2>\n            <p className=\"text-sm text-muted-foreground\">\n              Product deep-dives, industry trends, and practical guides from the\n              Acme team, landing in your inbox every Tuesday morning.\n            </p>\n          </div>\n\n          <div className=\"flex flex-col gap-3 md:max-w-md md:min-w-0 md:flex-1\">\n            <form\n              className=\"flex flex-col gap-3\"\n              onSubmit={(e) => {\n                e.preventDefault()\n                toast.success(\"You're subscribed. See you Tuesday!\")\n              }}\n            >\n              <div className=\"flex flex-col gap-2 sm:flex-row\">\n                <Input\n                  type=\"email\"\n                  placeholder=\"work@company.com\"\n                  aria-label=\"Email address\"\n                  className=\"flex-1 border-border bg-background\"\n                />\n                <Button type=\"submit\" className=\"shrink-0\">\n                  Subscribe\n                  <IconPlaceholder\n                    lucide=\"ArrowRight\"\n                    tabler=\"IconArrowRight\"\n                    hugeicons=\"ArrowRightIcon\"\n                    phosphor=\"ArrowRight\"\n                    remixicon=\"RiArrowRightLine\"\n                    data-icon=\"inline-end\"\n                    aria-hidden=\"true\"\n                  />\n                </Button>\n              </div>\n              <div className=\"flex items-center gap-2\">\n                <Checkbox id=\"newsletter-consent\" name=\"consent\" />\n                <label\n                  htmlFor=\"newsletter-consent\"\n                  className=\"text-sm font-normal text-muted-foreground\"\n                >\n                  I agree to receive the Acme Weekly newsletter.\n                </label>\n              </div>\n            </form>\n            <p className=\"flex items-center gap-1.5 text-xs text-muted-foreground\">\n              <IconPlaceholder\n                lucide=\"Lock\"\n                tabler=\"IconLock\"\n                hugeicons=\"LockIcon\"\n                phosphor=\"Lock\"\n                remixicon=\"RiLockLine\"\n                aria-hidden=\"true\"\n                className=\"shrink-0\"\n                size={12}\n              />\n              Your data stays private. Unsubscribe any time, no questions asked.\n            </p>\n          </div>\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/blocks/newsletter-2.tsx"
    }
  ],
  "meta": {
    "height": "375px",
    "tier": "free"
  },
  "categories": [
    "newsletter"
  ],
  "type": "registry:block"
}