Glassmorphic Feature Card Grid

<section class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
  <div
    class="ring-1 ring-white/15 bg-white/10 backdrop-blur-xl bg-cover rounded-2xl pt-5 pr-5 pb-5 pl-5 shadow-sm bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/c9ea68df-7f4e-4ebe-a09a-0acd862bd8a8_800w.jpg)] bg-center"
    style="animation: fadeUp .6s ease-out both; animation-delay: .05s;">
    <div class="flex items-center justify-between">
      <div class="text-xs text-gray-400 font-geist">001</div>
      <span class="inline-flex items-center justify-center h-8 w-8 rounded-lg bg-white/10 ring-1 ring-white/15 backdrop-blur">
      <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" data-lucide="sliders-horizontal" style="width:18px;height:18px;stroke-width:1.5;" class="lucide lucide-sliders-horizontal text-gray-200"><line x1="21" x2="14" y1="4" y2="4" class=""></line><line x1="10" x2="3" y1="4" y2="4" class=""></line><line x1="21" x2="12" y1="12" y2="12" class=""></line><line x1="8" x2="3" y1="12" y2="12" class=""></line><line x1="21" x2="16" y1="20" y2="20" class=""></line><line x1="12" x2="3" y1="20" y2="20" class=""></line><line x1="14" x2="14" y1="2" y2="6" class=""></line><line x1="8" x2="8" y1="10" y2="14" class=""></line><line x1="16" x2="16" y1="18" y2="22" class=""></line></svg>
    </span>
    </div>
    <div class="mt-2 text-sm font-semibold tracking-tight text-gray-100 font-geist">Configure workspace</div>
    <p class="mt-2 text-xs text-gray-300 font-geist">Invite teammates, set roles, and tailor permissions for each
      project.</p>
    <div class="mt-4 h-1.5 w-full bg-white/10 rounded-full overflow-hidden">
      <div class="h-full bg-white/70 rounded-full" style="width: 62%;"></div>
    </div>
    <div class="mt-1.5 text-[11px] text-gray-400 font-geist">Setup progress 62%</div>
  </div>

  <div class="bg-white/10 backdrop-blur-xl rounded-2xl p-5 shadow-sm ring-1 ring-white/15"
    style="animation: fadeUp .6s ease-out both; animation-delay: .12s;">
    <div class="flex items-center justify-between">
      <div class="text-xs text-gray-400 font-geist">002</div>
      <span class="inline-flex items-center justify-center h-8 w-8 rounded-lg bg-white/10 ring-1 ring-white/15 backdrop-blur">
            <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" data-lucide="wallet" style="width:18px;height:18px;stroke-width:1.5;" class="lucide lucide-wallet text-gray-200"><path d="M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1" class=""></path><path d="M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4" class=""></path></svg>
          </span>
    </div>
    <div class="mt-2 text-sm font-semibold tracking-tight font-geist text-gray-100">Track spend</div>
    <p class="text-xs text-gray-300 mt-2 font-geist">Get alerts on overages and seasonality spikes to act early.</p>
    <div class="mt-3 flex items-center gap-2">
      <span class="inline-flex items-center gap-1 text-[11px] ring-1 ring-red-500/20 text-red-300 bg-red-500/10 rounded-full pt-0.5 pr-2 pb-0.5 pl-2 font-geist">
            <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" data-lucide="trending-up" style="width:14px;height:14px;stroke-width:1.5;" class="lucide lucide-trending-up"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17" class=""></polyline><polyline points="16 7 22 7 22 13" class=""></polyline></svg> +12.8%
          </span>
      <span class="text-[11px] text-gray-400 font-geist">vs last month</span>
    </div>
  </div>

  <div class="bg-white/10 backdrop-blur-xl rounded-2xl p-5 shadow-sm ring-1 ring-white/15"
    style="animation: fadeUp .6s ease-out both; animation-delay: .19s;">
    <div class="flex items-center justify-between">
      <div class="text-xs text-gray-400 font-geist">003</div>
      <span class="inline-flex items-center justify-center h-8 w-8 rounded-lg bg-white/10 ring-1 ring-white/15 backdrop-blur">
            <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" data-lucide="target" style="width:18px;height:18px;stroke-width:1.5;" class="lucide lucide-target text-gray-200"><circle cx="12" cy="12" r="10" class=""></circle><circle cx="12" cy="12" r="6" class=""></circle><circle cx="12" cy="12" r="2" class=""></circle></svg>
          </span>
    </div>
    <div class="mt-2 text-sm font-semibold tracking-tight font-geist text-gray-100">Smart budgets</div>
    <p class="mt-2 text-xs text-gray-300 font-geist">Allocate by ROI and automatically rebalance when trends shift.</p>
    <div class="mt-3 flex items-center gap-2">
      <span class="inline-flex items-center gap-1 text-[11px] px-2 py-0.5 rounded-full bg-pink-500/10 text-pink-300 ring-1 ring-pink-500/20 font-geist">
            <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" data-lucide="flag" style="width:14px;height:14px;stroke-width:1.5;" class="lucide lucide-flag"><path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z" class=""></path><line x1="4" x2="4" y1="22" y2="15" class=""></line></svg> 8 goals
          </span>
      <span class="text-[11px] text-gray-400 font-geist">active</span>
    </div>
  </div>

  <div class="bg-white/10 backdrop-blur-xl rounded-2xl p-5 shadow-sm ring-1 ring-white/15"
    style="animation: fadeUp .6s ease-out both; animation-delay: .26s;">
    <div class="flex items-center justify-between">
      <div class="text-xs text-gray-400 font-geist">004</div>
      <span class="inline-flex items-center justify-center h-8 w-8 rounded-lg bg-white/10 ring-1 ring-white/15 backdrop-blur">
            <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" data-lucide="boxes" style="width:18px;height:18px;stroke-width:1.5;" class="lucide lucide-boxes text-gray-200"><path d="M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z" class=""></path><path d="m7 16.5-4.74-2.85" class=""></path><path d="m7 16.5 5-3" class=""></path><path d="M7 16.5v5.17" class=""></path><path d="M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z" class=""></path><path d="m17 16.5-5-3" class=""></path><path d="m17 16.5 4.74-2.85" class=""></path><path d="M17 16.5v5.17" class=""></path><path d="M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0l-3 1.8Z" class=""></path><path d="M12 8 7.26 5.15" class=""></path><path d="m12 8 4.74-2.85" class=""></path><path d="M12 13.5V8" class=""></path></svg>
          </span>
    </div>
    <div class="mt-2 text-sm font-semibold tracking-tight font-geist text-gray-100">Open components</div>
    <p class="mt-2 text-xs text-gray-300 font-geist">Composable primitives with audits, changelogs, and strong docs.</p>
    <div class="mt-3 flex items-center gap-2">
      <span class="inline-flex items-center gap-1 text-[11px] px-2 py-0.5 rounded-full bg-white/10 text-gray-200 ring-1 ring-white/15 backdrop-blur font-geist">
            <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" data-lucide="git-merge" style="width:14px;height:14px;stroke-width:1.5;" class="lucide lucide-git-merge"><circle cx="18" cy="18" r="3" class=""></circle><circle cx="6" cy="6" r="3" class=""></circle><path d="M6 21V9a9 9 0 0 0 9 9" class=""></path></svg> 147 PRs
          </span>
      <span class="text-[11px] text-gray-400 font-geist">last 90d</span>
    </div>
  </div>
</section>