Newsletter Minimal

<section class="ws-newsletter bg-[var(--ws-newsletter-bg)] py-20">
  <div class="mx-auto max-w-xl px-6 text-center">
    <h2 class="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 the latest updates delivered straight to your inbox. No spam, ever.</p>
    <form class="mt-8 flex flex-col gap-3 sm:flex-row">
      <label for="nl-min-email" class="sr-only">Email address</label>
      <input type="email" id="nl-min-email" name="email" autocomplete="email" required
        class="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)] focus:outline-none focus:ring-2 focus:ring-[var(--ws-newsletter-action-bg)]"
        placeholder="Enter your email">
      <button type="submit" class="rounded-lg bg-[var(--ws-newsletter-action-bg)] px-6 py-3 text-sm font-semibold text-[var(--ws-newsletter-action-text)] transition hover:opacity-90">Subscribe</button>
    </form>
    <p class="mt-3 text-xs text-[var(--ws-newsletter-text-soft)]">We respect your privacy. Unsubscribe at any time.</p>
  </div>
</section>