Newsletter Base

<section class="ws-newsletter bg-[var(--ws-newsletter-bg)] py-16">
  <div class="mx-auto max-w-2xl px-6 text-center">
    <h2 class="text-balance text-2xl font-bold tracking-tight text-[var(--ws-newsletter-text)] sm:text-3xl">Stay in the loop</h2>
    <p class="mt-3 text-base text-[var(--ws-newsletter-text-soft)]">Get notified about new patterns, CSS effects, and registry updates. No spam, unsubscribe anytime.</p>
    <form class="mt-8 flex flex-col gap-3 sm:flex-row sm:justify-center" action="#" method="post">
      <label for="newsletter-email" class="sr-only">Email address</label>
      <input id="newsletter-email" name="email" type="email" required autocomplete="email" placeholder="you@company.com" class="min-w-0 flex-1 rounded-lg border border-[var(--ws-newsletter-input-border)] bg-[var(--ws-newsletter-input-bg)] px-4 py-3 text-sm text-[var(--ws-newsletter-text)] placeholder:text-[var(--ws-newsletter-text-soft)] transition focus:outline-none focus:ring-2 focus:ring-[var(--ws-newsletter-action-bg)] sm:max-w-xs">
      <button type="submit" class="rounded-lg bg-[var(--ws-newsletter-action-bg)] px-5 py-3 text-sm font-semibold text-[var(--ws-newsletter-action-text)] transition hover:opacity-90">Subscribe</button>
    </form>
    <p class="mt-4 text-xs text-[var(--ws-newsletter-text-soft)]">We respect your privacy. Read our <a href="#" class="underline hover:text-[var(--ws-newsletter-text)]">privacy policy</a>.</p>
  </div>
</section>