{"$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"}