Bundle Contents Card

<div class="relative w-full max-w-md">
  <div class="rounded-xl border border-white/10
    bg-gradient-to-br from-rose-400/15 via-orange-300/10
    to-amber-300/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-center justify-between">
        <h4 class="text-lg font-semibold tracking-tight text-white">What's inside</h4>
        <div class="inline-flex items-center gap-1 rounded-md bg-white/5 px-2 py-1 text-[11px] 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="M12 6v6l4 2"></path>
            <circle cx="12" cy="12" r="10"></circle>
          </svg>
          <span class="text-neutral-300">3–6 months each</span>
        </div>
      </div>
      <ul class="mt-3 grid grid-cols-2 gap-2 text-sm">
        <li class="flex items-center gap-2 rounded-md bg-white/5 px-3 py-2 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-4 w-4 text-pink-300">
            <path d="M15.707 21.293a1 1 0 0 1-1.414 0l-1.586-1.586a1 1 0 0 1 0-1.414l5.586-5.586a1 1 0 0 1 1.414 0l1.586 1.586a1 1 0 0 1 0 1.414z"></path>
            <path d="m18 13-1.375-6.874a1 1 0 0 0-.746-.776L3.235 2.028a1 1 0 0 0-1.207 1.207L5.35 15.879a1 1 0 0 0 .776.746L13 18"></path>
            <path d="m2.3 2.3 7.286 7.286"></path>
            <circle cx="11" cy="11" r="2"></circle>
          </svg>
          <span class="text-neutral-200">Vector & UI</span>
        </li>
        <li class="flex items-center gap-2 rounded-md bg-white/5 px-3 py-2 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-4 w-4 text-violet-300">
            <path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"></path>
            <path d="M20 2v4"></path>
            <path d="M22 4h-4"></path>
            <circle cx="4" cy="20" r="2"></circle>
          </svg>
          <span class="text-neutral-200">Generators</span>
        </li>
        <li class="flex items-center gap-2 rounded-md bg-white/5 px-3 py-2 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-4 w-4 text-sky-300">
            <rect width="18" height="18" x="3" y="3" rx="2" ry="2"></rect>
            <circle cx="9" cy="9" r="2"></circle>
            <path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"></path>
          </svg>
          <span class="text-neutral-200">Renders</span>
        </li>
        <li class="flex items-center gap-2 rounded-md bg-white/5 px-3 py-2 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-4 w-4 text-emerald-300">
            <circle cx="12" cy="12" r="10"></circle>
            <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"></path>
            <path d="M2 12h20"></path>
          </svg>
          <span class="text-neutral-200">Web Tools</span>
        </li>
      </ul>
      <div class="mt-4 flex items-center justify-between">
        <div class="flex -space-x-2">
          <img class="h-7 w-7 rounded-full ring-2 ring-neutral-900 object-cover" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/9c3d4562-f977-40d3-97d4-6910a521d5fd_320w.jpg" alt="avatar a" />
          <img class="h-7 w-7 rounded-full ring-2 ring-neutral-900 object-cover" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/9f4a71e7-11b4-47c5-89c7-932f22b63060_320w.jpg" alt="avatar b" />
          <img class="h-7 w-7 rounded-full ring-2 ring-neutral-900 object-cover" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/ac4a631c-975f-4482-9cef-2a1f99a48178_320w.jpg" alt="avatar c" />
        </div>
        <a href="#" class="inline-flex items-center gap-1.5 text-sm text-fuchsia-300 hover:text-fuchsia-200 transition-colors">
          <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">
            <path d="M5 12h14"></path>
            <path d="m12 5 7 7-7 7"></path>
          </svg>
        </a>
      </div>
    </div>
  </div>
</div>