Onboarding Step Card with Hover Blur Background

<article
  class="sm:p-6 flex flex-col min-h-[420px] group transition-all duration-300 bg-white/10 bg-[url(https://cdn.midjourney.com/8349e121-2f5a-4f6b-8038-f3a61ac3fa80/0_0.png?w=800&amp;q=80)] bg-cover ring-white/15 ring-1 rounded-2xl pt-5 pr-5 pb-5 pl-5 backdrop-blur grayscale justify-between"
  style="">
  <div
    class="absolute inset-0 transition-all duration-300 group-hover:blur-sm bg-[url(https://cdn.midjourney.com/62f25bc3-52b3-449a-b951-d6fe4fb3f4d2/0_0.png?w=800&amp;q=80)] bg-cover rounded-2xl grayscale"
    style="z-index: -1;"></div>
  <div class="space-y-5 relative z-10">
    <div class="flex gap-3 items-center">

      <div class="">
        <h3 class="text-lg font-semibold text-white tracking-tight font-geist">01. Discover</h3>
        <p class="uppercase text-xs text-white/60 tracking-wider font-geist">Style Profile</p>
      </div>
    </div>
    <p class="text-sm text-white/80 font-geist">Tell us your vibe, fits, and colors you live in. ModaIQ learns your
      essentials and statement pieces.</p>
    <div class="flex gap-2 items-center">
      <div class="flex -space-x-1">

        <div class="h-6 w-6 ring-2 ring-white/20 flex bg-white/20 rounded-full items-center justify-center">
          <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="clock"
            class="lucide lucide-clock lucide-calendar w-[12px] h-[12px]" data-icon-replaced="true"
            style="width: 12px; height: 12px; color: rgb(255, 255, 255);">
            <path d="M12 6v6l4 2" class=""></path>
            <circle cx="12" cy="12" r="10" class=""></circle>
          </svg>
        </div>

      </div>
      <span class="text-xs text-white/60 font-geist">2-3 minutes</span>
    </div>
  </div>
  <div class="h-1.5 overflow-hidden relative z-10 bg-white/10 rounded-full mt-4">
    <div class="h-full bg-white/40 rounded-full" style="width: 50%;"></div>
  </div>
</article>