Gradient Automation Feature Card with Hover Effects

<article
  class="lg:col-span-1 group overflow-hidden border-gradient before:rounded-2xl md:p-8 transition-all duration-300 hover:shadow-2xl hover:shadow-purple-500/10 bg-gradient-to-br from-purple-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-purple-500/30"
    style="mask-image: linear-gradient(135deg, white, transparent 60%);"></div>
  <div class="pointer-events-none absolute inset-0 border-purple-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-purple-950/40 via-slate-900 to-slate-800 ring-1 ring-inset ring-purple-500/20">
    <div class="absolute inset-4 rounded-xl border border-purple-500/20 bg-purple-950/30 p-4 backdrop-blur">
      <div class="flex items-center justify-between">
        <p class="text-sm text-slate-300 font-sans">Works with your tools</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">
            14 integrations
          </span>
      </div>
      <div class="mt-3 grid grid-cols-6 gap-2">
        <div class="bg-white/5 h-10 rounded-md ring-white/10 ring-1"></div>
        <div class="h-10 rounded-md bg-white/5 ring-1 ring-white/10"></div>
        <div class="h-10 rounded-md bg-white/5 ring-1 ring-white/10"></div>
        <div class="h-10 rounded-md bg-white/5 ring-1 ring-white/10"></div>
        <div class="h-10 rounded-md bg-white/5 ring-1 ring-white/10"></div>
        <div class="h-10 rounded-md bg-white/5 ring-1 ring-white/10"></div>
      </div>
      <div class="mt-3 flex items-center gap-2">
        <span class="inline-flex items-center gap-1.5 rounded-md bg-slate-400/10 px-2.5 py-1 text-xs font-medium text-slate-300 ring-1 ring-white/10 font-sans">
            <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="plug" class="lucide lucide-plug h-3.5 w-3.5"><path d="M12 22v-5" class=""></path><path d="M9 8V2" class=""></path><path d="M15 8V2" class=""></path><path d="M18 8v5a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V8Z" class=""></path></svg>
            Webhooks
          </span>
        <span class="inline-flex items-center gap-1.5 rounded-md bg-slate-400/10 px-2.5 py-1 text-xs font-medium text-slate-300 ring-1 ring-white/10 font-sans">
            <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="code-2" class="lucide lucide-code-2 h-3.5 w-3.5"><path d="m18 16 4-4-4-4" class=""></path><path d="m6 8-4 4 4 4" class=""></path><path d="m14.5 4-5 16" class=""></path></svg>
            GraphQL
          </span>
      </div>
    </div>
  </div>

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

      <h3 class="text-2xl sm:text-3xl font-manrope font-semibold tracking-tight text-white relative">Collaborate
        Seamlessly</h3>
    </div>
    <p class="mt-3 text-sm text-slate-400 font-sans relative">Keep design, code, and product in one flow. Connect source
      control, chat, docs, and CI with zero friction.</p>
    <div class="mt-4">
      <a href="#"
        class="inline-flex items-center gap-2 text-xs font-medium text-purple-400 hover:text-purple-300 font-sans transition">
        View integrations
        <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-purple-900/10 via-transparent to-transparent pointer-events-none rounded-2xl">
  </div>
</article>