Project Info Card with Hover Effects & Image Gallery

<div
  class="grid grid-cols-1 lg:grid-cols-4 gap-4 bg-[#000000] border-slate-50/10 border rounded-3xl mt-10 pt-4 pr-4 pb-4 pl-4">
  <!-- Info card -->
  <div
    class="group relative overflow-hidden sm:p-6 hover:bg-[radial-gradient(circle_at_top,var(--tw-gradient-stops))] hover:from-indigo-400/30 hover:to-indigo-400/0 hover:border-slate-50/20 transition-all duration-300 bg-white/5 border-white/10 border rounded-2xl pt-5 pr-5 pb-5 pl-5">
    <div class="pointer-events-none absolute inset-0 opacity-[0.07]"
      style="background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.9) 1px, transparent 1px); background-size: 14px 14px;">
    </div>
    <div class="flex items-center gap-3">
      <span class="inline-flex items-center justify-center rounded-full bg-white/5 ring-1 ring-white/15 px-2.5 py-1 text-xs text-white/80">2024</span>
      <p class="text-sm text-white/70 font-sans">FluxCommerce</p>
    </div>
    <h3 class="mt-3 text-xl sm:text-2xl font-semibold tracking-tight font-manrope">Smart E-Commerce Platform</h3>
    <ul class="mt-4 grid grid-cols-1 gap-2">
      <li class="inline-flex items-center gap-2 text-sm text-white/80">
        <span class="inline-flex w-5 h-5 items-center justify-center ring-1 ring-indigo-300/20 bg-indigo-500/10 rounded-full">
              <svg xmlns="http://www.w3.org/2000/svg" class="w-[14px] h-[14px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" data-icon-replaced="true" style="width: 14px; height: 14px; color: rgb(165, 180, 252);"><path d="m20 6-11 11-5-5" class=""></path></svg>
            </span>
        AI Product Recommendations
      </li>
      <li class="inline-flex items-center gap-2 text-sm text-white/80">
        <span class="inline-flex w-5 h-5 items-center justify-center ring-1 ring-indigo-300/20 bg-indigo-500/10 rounded-full">
              <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5 text-indigo-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m20 6-11 11-5-5" class=""></path></svg>
            </span>
        Dynamic Pricing
      </li>
      <li class="inline-flex items-center gap-2 text-sm text-white/80">
        <span class="inline-flex w-5 h-5 items-center justify-center ring-1 ring-indigo-300/20 bg-indigo-500/10 rounded-full">
              <svg xmlns="http://www.w3.org/2000/svg" class="w-[14px] h-[14px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" data-icon-replaced="true" style="width: 14px; height: 14px; color: rgb(165, 180, 252);"><path d="m20 6-11 11-5-5" class=""></path></svg>
            </span>
        Predictive Analytics
      </li>
    </ul>
    <div class="mt-4 flex flex-wrap gap-2">
      <span class="inline-flex items-center gap-1 rounded-full bg-white/5 px-2.5 py-1 text-xs text-white/70 ring-1 ring-white/10">Machine Learning</span>
      <span class="inline-flex items-center gap-1 rounded-full bg-white/5 px-2.5 py-1 text-xs text-white/70 ring-1 ring-white/10">E-Commerce</span>
    </div>
  </div>
  <!-- Gallery -->
  <div class="lg:col-span-3 grid grid-cols-2 md:grid-cols-3 gap-4">
    <div class="relative overflow-hidden bg-white/5 border-white/10 border rounded-2xl">
      <img alt="AI Dashboard Analytics" class="w-full h-full opacity-90 hover:opacity-100 transition object-cover grayscale" src="https://cdn.midjourney.com/97f0525e-4b5b-46e1-a1ed-8ceb2043154b/0_0.png?w=800&amp;q=80">
    </div>
    <div class="relative overflow-hidden bg-white/5 border-white/10 border rounded-2xl">
      <img alt="Data Visualization Charts" class="w-full h-full opacity-90 hover:opacity-100 transition object-cover grayscale" src="https://cdn.midjourney.com/35fb956a-cd8d-47f0-bc6e-414eedfef338/0_0.png?w=800&amp;q=80">
    </div>
    <div class="relative overflow-hidden bg-white/5 border-white/10 border rounded-2xl">
      <img alt="Smart Shopping Interface" class="w-full h-full opacity-90 hover:opacity-100 transition object-cover grayscale" src="https://cdn.midjourney.com/700e1a9e-8f1b-4d83-b511-21677612b8a6/0_0.png?w=800&amp;q=80">
    </div>
  </div>
</div>