Gradient Feature Card with Automation Preview

<article
  class="group overflow-hidden border-gradient before:rounded-2xl transition-all duration-300 hover:shadow-2xl hover:shadow-indigo-500/10 lg:col-span-1 md:p-8 bg-gradient-to-br from-indigo-900/70 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-indigo-500/30"
    style="mask-image: linear-gradient(135deg, white, transparent 60%);"></div>
  <div class="pointer-events-none absolute inset-0 border-indigo-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-indigo-950/40 via-slate-900 to-slate-800 ring-1 ring-inset ring-indigo-500/20">
    <div class="absolute inset-4 rounded-xl border border-indigo-500/20 bg-indigo-950/30 p-4 backdrop-blur">
      <div class="flex items-center justify-between">
        <p class="text-sm text-slate-300 font-sans">Sprint Automations</p>
        <span class="inline-flex items-center gap-1 rounded-md bg-white/10 px-2 py-0.5 text-[11px] text-slate-300 ring-1 ring-white/10 font-sans">
            Every Monday
          </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="bell" class="lucide lucide-bell"><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>
              </span>
            <span class="text-xs">Standup reminder</span>
          </div>
          <span class="text-xs text-sky-300 font-sans">09:00</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-branch" class="lucide lucide-git-branch"><line x1="6" x2="6" y1="3" y2="15" class=""></line><circle cx="18" cy="6" r="3" class=""></circle><circle cx="6" cy="18" r="3" class=""></circle><path d="M18 9a9 9 0 0 1-9 9" class=""></path></svg>
              </span>
            <span class="text-xs">Auto‑create release</span>
          </div>
          <span class="text-xs text-emerald-300 font-sans">v2.13</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="check-circle-2" class="lucide lucide-check-circle-2"><circle cx="12" cy="12" r="10" class=""></circle><path d="m9 12 2 2 4-4" class=""></path></svg>
              </span>
            <span class="text-xs">SLA checks</span>
          </div>
          <span class="text-xs text-amber-300 font-sans">6h</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">Ship Without Silos
      </h3>
    </div>
    <p class="mt-3 text-sm text-slate-400 font-sans relative">Coordinate projects across teams, repos, and time zones.
      Localize workflows and keep everyone in sync.</p>
    <div class="mt-4">
      <a href="#"
        class="inline-flex items-center gap-2 text-xs font-medium text-indigo-400 hover:text-indigo-300 font-sans transition">
        Learn more
        <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-indigo-900/10 via-transparent to-transparent pointer-events-none rounded-2xl">
  </div>
</article>