Glassmorphic Gradient Feature Card with Automation List

<article
  class="group overflow-hidden border-gradient before:rounded-2xl transition-all duration-300 hover:shadow-2xl hover:shadow-emerald-500/10 lg:col-span-2 md:p-8 bg-gradient-to-br from-emerald-900/50 via-slate-900/50 to-slate-800/70 rounded-2xl pt-6 pr-6 pb-6 pl-6 relative m-8 max-w-3xl mx-auto"
  style="backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px)">
  <div class="pointer-events-none absolute inset-0 rounded-2xl border border-emerald-500/30"
    style="mask-image: linear-gradient(135deg, white, transparent 60%);"></div>
  <div class="pointer-events-none absolute inset-0 border-emerald-500/10 border rounded-2xl"
    style="mask-image: linear-gradient(135deg, transparent 60%, white);"></div>

  <div
    class="relative h-56 sm:h-64 rounded-2xl bg-gradient-to-br from-emerald-950/40 via-slate-900 to-slate-800 ring-1 ring-inset ring-emerald-500/20">
    <div class="absolute inset-4 rounded-xl border border-emerald-500/20 bg-emerald-950/30 p-4 backdrop-blur">
      <div class="flex items-center justify-between">
        <p class="text-sm text-slate-300 font-sans">Arc Automations</p>
        <span class="text-xs text-slate-400 font-sans">10 active</span>
      </div>
      <ul class="mt-3 space-y-2">
        <li class="flex items-center justify-between rounded-md bg-white/5 px-3 py-2">
          <div class="flex items-center gap-2 text-sm text-slate-300 font-sans">
            <span class="inline-flex h-5 w-5 items-center justify-center rounded bg-white/10">
                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="bot" class="lucide lucide-bot"><path d="M12 8V4H8" class=""></path><rect width="16" height="12" x="4" y="8" rx="2" class=""></rect><path d="M2 14h2" class=""></path><path d="M20 14h2" class=""></path><path d="M15 13v2" class=""></path><path d="M9 13v2" class=""></path></svg>
              </span>
            <span class="text-xs">Triage with AI</span>
          </div>
          <span class="text-xs font-sans text-emerald-300">On</span>
        </li>
        <li class="flex items-center justify-between rounded-md bg-white/5 px-3 py-2">
          <div class="flex items-center gap-2 text-sm text-slate-300 font-sans">
            <span class="inline-flex h-5 w-5 items-center justify-center rounded bg-white/10">
                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="git-pull-request" class="lucide lucide-git-pull-request"><circle cx="18" cy="18" r="3" class=""></circle><circle cx="6" cy="6" r="3" class=""></circle><path d="M13 6h3a2 2 0 0 1 2 2v7" class=""></path><line x1="6" x2="6" y1="9" y2="21" class=""></line></svg>
              </span>
            <span class="text-xs">Auto‑assign reviewers</span>
          </div>
          <span class="text-xs font-sans text-emerald-300">On</span>
        </li>
        <li class="flex items-center justify-between rounded-md bg-white/5 px-3 py-2">
          <div class="flex items-center gap-2 text-sm text-slate-300 font-sans">
            <span class="inline-flex h-5 w-5 items-center justify-center rounded bg-white/10">
                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="rotate-ccw" class="lucide lucide-rotate-ccw"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" class=""></path><path d="M3 3v5h5" class=""></path></svg>
              </span>
            <span class="text-xs">Backport on label</span>
          </div>
          <span class="text-xs font-sans text-amber-300">Rules: 3</span>
        </li>
      </ul>
    </div>
  </div>

  <div class="mt-6 sm:mt-8">
    <div class="flex items-center gap-3">

      <h3 class="text-2xl sm:text-3xl font-manrope font-semibold tracking-tight text-white relative">Automate Delivery
        Workflows</h3>
    </div>
    <p class="mt-3 text-sm text-slate-400 font-sans relative">Let the system handle the repetitive work—follow‑ups,
      reviews, and reporting—so your team can focus on impact.</p>
    <div class="mt-4">
      <a href="#"
        class="inline-flex items-center gap-2 text-xs font-medium text-emerald-400 hover:text-emerald-300 font-sans transition">
        Explore automations
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4">
          <path d="M5 12h14" class=""></path>
          <path d="m12 5 7 7-7 7" class=""></path>
        </svg>
      </a>
    </div>
  </div>

  <div
    class="absolute inset-0 bg-gradient-to-t from-emerald-900/10 via-transparent to-transparent pointer-events-none rounded-2xl">
  </div>
</article>