Newsletter Banner

<section class="ws-newsletter bg-[var(--ws-newsletter-bg)] py-16">
  <div class="mx-auto flex max-w-7xl flex-col items-center justify-between gap-8 px-6 sm:flex-row sm:py-20">
    <div class="max-w-xl">
      <h2 class="text-2xl font-bold tracking-tight text-[var(--ws-newsletter-text)] sm:text-3xl">Stay ahead of the curve</h2>
      <p class="mt-3 text-base text-[var(--ws-newsletter-text-soft)]">Weekly insights on design systems, UI patterns, and frontend best practices. Join 5,000+ developers.</p>
    </div>
    <form class="flex w-full max-w-md gap-3 sm:w-auto">
      <label for="nl-banner-email" class="sr-only">Email address</label>
      <input type="email" id="nl-banner-email" name="email" autocomplete="email" required
        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)] focus:outline-none focus:ring-2 focus:ring-[var(--ws-newsletter-action-bg)]"
        placeholder="Enter your email">
      <button type="submit" class="flex-shrink-0 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>
  </div>
</section>