Newsletter Signup 5 – Inline callout with contained form

1"use client";
2 
3import { IconPlaceholder } from "@/registry/icons/icon-placeholder";
4import { Button } from "@/components/ui/button";
5import { Input } from "@/components/ui/input";
6import {
7  SectionHeading,
8  SectionHeadingBody,
9  SectionHeadingTitle,
10} from "@/components/shadcncraft/pro-marketing/section-heading";
11 
12export function NewsletterSignup5() {
13  return (
14    <section className="py-6 lg:py-20">
15      <div className="mx-auto max-w-7xl px-5 lg:px-8">
16        <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">
17          {/* Section Heading */}
18          <div className="flex-1">
19            <SectionHeading>
20              <SectionHeadingTitle>Stay in the loop</SectionHeadingTitle>
21              <SectionHeadingBody className="text-balance">
22                Get insights, product updates, and productivity tips straight to your
23                inbox.
24              </SectionHeadingBody>
25            </SectionHeading>
26          </div>
27 
28          {/* Newsletter Form */}
29          <div className="flex max-w-md flex-col gap-2 lg:gap-3">
30            <form className="flex flex-col gap-2 sm:flex-row">
31              <Input placeholder="email@example.com" className="w-full" />
32              <Button type="submit" aria-label="Subscribe to newsletter">
33                <IconPlaceholder
34                  lucide="Mail"
35                  tabler="IconMail"
36                  hugeicons="Mail01Icon"
37                  phosphor="EnvelopeIcon"
38                  remixicon="RiMailLine"
39                />{" "}
40                Subscribe
41              </Button>
42            </form>
43 
44            {/* Privacy Policy */}
45            <span
46              className="text-center text-sm text-muted-foreground lg:text-right"
47              role="note"
48            >
49              We respect your privacy.
50            </span>
51          </div>
52        </div>
53      </div>
54    </section>
55  );
56}