StackFoundry Bundle Card

<div class="relative mx-auto w-full max-w-md">
  <div class="relative rounded-xl border border-white/10
    bg-gradient-to-br from-indigo-500/20 via-sky-400/10
    to-purple-500/10 p-3 shadow-2xl backdrop-blur">
    <div class="rounded-lg bg-neutral-900/80 ring-1 ring-white/10 p-4">
      <div class="flex items-start justify-between">
        <div class="">
          <h3 class="text-xl font-semibold tracking-tight text-white">StackFoundry Bundle</h3>
          <p class="mt-1 text-xs text-neutral-400">Play. Explore. Discover your stack.</p>
        </div>
        <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/e7518623-5aeb-4f28-bace-436a99f814d4_320w.jpg" alt="creator" class="h-9 w-9 rounded-full ring-2 ring-white/10 object-cover" />
      </div>
      <div class="mt-4 grid grid-cols-2 gap-3 text-sm">
        <div class="rounded-md bg-white/5 p-3 ring-1 ring-white/10">
          <div class="flex items-center gap-2 text-neutral-200">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 text-sky-300">
              <path d="m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72"></path>
              <path d="m14 7 3 3"></path>
              <path d="M5 6v4"></path>
              <path d="M19 14v4"></path>
              <path d="M10 2v2"></path>
              <path d="M7 8H3"></path>
              <path d="M21 16h-4"></path>
              <path d="M11 3H9"></path>
            </svg>
          </div>
          <p class="mt-1 text-[11px] text-neutral-400">Prompts, automation, copilots.</p>
        </div>
        <div class="rounded-md bg-white/5 p-3 ring-1 ring-white/10">
          <div class="flex items-center gap-2 text-neutral-200">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 text-emerald-300">
              <path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"></path>
              <path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12"></path>
              <path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17"></path>
            </svg>
          </div>
          <p class="mt-1 text-[11px] text-neutral-400">Tokens, libraries, kits.</p>
        </div>
        <div class="rounded-md bg-white/5 p-3 ring-1 ring-white/10">
          <div class="flex items-center gap-2 text-neutral-200">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 text-yellow-300">
              <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
              <circle cx="12" cy="12" r="4"></circle>
            </svg>
          </div>
          <p class="mt-1 text-[11px] text-neutral-400">Micro‑interactions, exports.</p>
        </div>
        <div class="rounded-md bg-white/5 p-3 ring-1 ring-white/10">
          <div class="flex items-center gap-2 text-neutral-200">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 text-indigo-300">
              <path d="m18 16 4-4-4-4"></path>
              <path d="m6 8-4 4 4 4"></path>
              <path d="m14.5 4-5 16"></path>
            </svg>
          </div>
          <p class="mt-1 text-[11px] text-neutral-400">Specs, snippets, previews.</p>
        </div>
      </div>
      <div class="mt-4 flex items-center justify-between">
        <div class="inline-flex items-center gap-2 rounded-md bg-white/5 px-2.5 py-1.5 text-xs ring-1 ring-white/10">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-3.5 w-3.5 text-neutral-300">
            <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
            <path d="M16 3.128a4 4 0 0 1 0 7.744"></path>
            <path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
            <circle cx="9" cy="7" r="4"></circle>
          </svg>
          <span class="text-neutral-300">Max 800</span>
        </div>
        <div class="text-right">
          <div class="text-2xl font-semibold tracking-tight text-white">$129</div>
          <div class="text-[11px] text-neutral-400">Over $5k in value</div>
        </div>
      </div>
    </div>
  </div>
</div>