Newsletter Popup

<div id="newsletter-popup" class="ws-newsletter fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm" role="dialog" aria-modal="true" aria-labelledby="nl-popup-heading">
  <div class="relative mx-4 w-full max-w-md rounded-2xl bg-[var(--ws-newsletter-input-bg)] p-8 shadow-2xl">
    <button type="button" onclick="document.getElementById('newsletter-popup').classList.add('hidden')"
      class="absolute right-4 top-4 rounded-lg p-1 text-[var(--ws-newsletter-text-soft)] transition hover:opacity-70"
      aria-label="Close">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
      </svg>
    </button>
    <div class="text-center">
      <div class="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-[var(--ws-newsletter-bg)]">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-[var(--ws-newsletter-action-bg)]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
        </svg>
      </div>
      <h2 id="nl-popup-heading" class="text-xl font-bold tracking-tight text-[var(--ws-newsletter-text)] sm:text-2xl">Don't miss out</h2>
      <p class="mt-2 text-sm text-[var(--ws-newsletter-text-soft)]">Get weekly insights on design systems, UI patterns, and frontend best practices. Trusted by 5,000+ developers.</p>
    </div>
    <form class="mt-6">
      <label for="nl-popup-email" class="sr-only">Email address</label>
      <div class="flex gap-3">
        <input type="email" id="nl-popup-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-2.5 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="you@example.com">
        <button type="submit"
          class="flex-shrink-0 rounded-lg bg-[var(--ws-newsletter-action-bg)] px-5 py-2.5 text-sm font-semibold text-[var(--ws-newsletter-action-text)] transition hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-[var(--ws-newsletter-action-bg)] focus:ring-offset-2">Subscribe</button>
      </div>
    </form>
    <p class="mt-4 text-center text-xs text-[var(--ws-newsletter-text-soft)]">No spam. Unsubscribe anytime. We respect your privacy.</p>
  </div>
</div>