Gradient Newsletter Subscription CTA Section

<section class="relative z-10 sm:px-6 lg:px-8 max-w-7xl mr-auto ml-auto pr-4 py-16 pl-4">
  <div
    class="relative overflow-hidden rounded-3xl ring-1 ring-white/10 bg-gradient-to-br from-neutral-900 via-neutral-900 to-neutral-800 p-6 sm:p-10">
    <div
      class="absolute -left-16 -bottom-16 h-72 w-72 bg-gradient-to-tr from-emerald-400/15 to-cyan-300/10 rounded-full blur-3xl">
    </div>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center relative">
      <div class="">
        <span class="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-3 py-1.5 text-[11px] text-neutral-200">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="bell" class="lucide lucide-bell w-3.5 h-3.5" style="stroke-width:1.5"><path d="M10.268 21a2 2 0 0 0 3.464 0" class=""></path><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326" class=""></path></svg>
            Stay in the loop
          </span>
        <h3 class="mt-3 text-2xl sm:text-3xl md:text-4xl tracking-tighter text-white">Get drops &amp; deals in your
          inbox</h3>
        <p class="mt-2 text-neutral-300">No spam. Only the good stuff: new releases, exclusive bundles, and member
          perks.</p>
      </div>
      <form class="w-full flex flex-col sm:flex-row gap-3"
        onsubmit="event.preventDefault(); this.reset(); this.querySelector('button').innerText='Subscribed ✓'; setTimeout(()=&gt;this.querySelector('button').innerText='Subscribe', 2000);">
        <label for="email" class="sr-only">Email address</label>
        <input id="email" type="email" required="" placeholder="you@player.gg" class="flex-1 h-12 rounded-full bg-white/5 ring-1 ring-white/10 px-4 text-sm placeholder:text-neutral-500 outline-none focus:ring-emerald-400/40 focus:bg-white/10">
        <button class="h-12 px-6 rounded-full bg-emerald-600 hover:bg-emerald-600/90 text-white text-sm ring-1 ring-emerald-400/30">Subscribe</button>
      </form>
    </div>
  </div>
</section>