{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "newsletter-signup-5",
  "title": "Newsletter Signup 5 – Inline callout with contained form",
  "description": "A horizontal newsletter signup pattern presented inside a soft container to separate it from surrounding content. The headline and description anchor the left side while the inline form sits to the right, creating a clear scan path and compact footprint. Works well as an embedded callout within long pages and collapses cleanly to a stacked layout on smaller screens.",
  "registryDependencies": ["button", "input", "@shadcncraft/section-heading"],
  "files": [
    {
      "path": "blocks/pro-marketing/newsletter-signup/newsletter-signup-5/index.tsx",
      "content": "\"use client\";\n\nimport { IconPlaceholder } from \"@/registry/icons/icon-placeholder\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport {\n  SectionHeading,\n  SectionHeadingBody,\n  SectionHeadingTitle,\n} from \"@/components/shadcncraft/pro-marketing/section-heading\";\n\nexport function NewsletterSignup5() {\n  return (\n    <section className=\"py-6 lg:py-20\">\n      <div className=\"mx-auto max-w-7xl px-5 lg:px-8\">\n        <div className=\"flex flex-col justify-between gap-16 rounded-xl border bg-muted px-5 py-12 lg:flex-row lg:items-end lg:px-16 lg:py-20\">\n          {/* Section Heading */}\n          <div className=\"flex-1\">\n            <SectionHeading>\n              <SectionHeadingTitle>Stay in the loop</SectionHeadingTitle>\n              <SectionHeadingBody className=\"text-balance\">\n                Get insights, product updates, and productivity tips straight to your\n                inbox.\n              </SectionHeadingBody>\n            </SectionHeading>\n          </div>\n\n          {/* Newsletter Form */}\n          <div className=\"flex max-w-md flex-col gap-2 lg:gap-3\">\n            <form className=\"flex flex-col gap-2 sm:flex-row\">\n              <Input placeholder=\"email@example.com\" className=\"w-full\" />\n              <Button type=\"submit\" aria-label=\"Subscribe to newsletter\">\n                <IconPlaceholder\n                  lucide=\"Mail\"\n                  tabler=\"IconMail\"\n                  hugeicons=\"Mail01Icon\"\n                  phosphor=\"EnvelopeIcon\"\n                  remixicon=\"RiMailLine\"\n                />{\" \"}\n                Subscribe\n              </Button>\n            </form>\n\n            {/* Privacy Policy */}\n            <span\n              className=\"text-center text-sm text-muted-foreground lg:text-right\"\n              role=\"note\"\n            >\n              We respect your privacy.\n            </span>\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/shadcncraft/pro-marketing/newsletter-signup/newsletter-signup-5/index.tsx"
    }
  ],
  "meta": {
    "tier": "free",
    "figmaNodeId": "17936-107882",
    "bundle": "pro-marketing"
  },
  "categories": ["newsletter-signup"],
  "type": "registry:block"
}