Hero Portfolio Card

<article class="relative col-span-1 row-span-2 overflow-hidden md:col-span-2 group rounded-2xl hover:shadow-xl transition-all duration-300 hover:-translate-y-1 max-w-3xl">
  <img src="https://cdn.midjourney.com/9e1f49aa-35a6-40f5-81ef-5785d6e3b791/0_0.png?w=800&q=80" alt="Creative workspace with 3D elements" class="h-full w-full transition-transform duration-700 group-hover:scale-105 object-cover">
  <div class="absolute inset-0 bg-gradient-to-b from-black/10 via-black/30 to-black/70 group-hover:from-black/20 group-hover:via-black/40 group-hover:to-black/80 transition-all duration-300"></div>
  <div class="absolute inset-0 flex flex-col md:p-10 pt-6 pr-6 pb-6 pl-6 justify-between">
    <div class="flex items-start justify-between">
      <h1 class="max-w-sm leading-tight md:text-4xl lg:text-5xl text-3xl text-white tracking-tight group-hover:text-indigo-100 transition-colors duration-300">
        PixelForge Studio —
        <span class="text-indigo-300 group-hover:text-indigo-200 transition-colors duration-300">Creative Excellence</span>
      </h1>
      <div class="flex items-center gap-2 rounded-full bg-white/10 backdrop-blur-md px-3 py-1 text-xs font-medium text-white group-hover:bg-white/20 transition-all duration-300">
        Available for projects
        <div class="h-2 w-2 rounded-full bg-emerald-400 group-hover:bg-emerald-300 transition-colors duration-300"></div>
      </div>
    </div>
    <div class="flex items-end justify-between">
      <div>
        <p class="max-w-xs text-white/90 text-lg font-light group-hover:text-white transition-colors duration-300">Crafting digital experiences that inspire and engage audiences worldwide</p>
        <div class="mt-4 flex items-center gap-4">
          <div class="flex items-center gap-1 text-white/80 group-hover:text-white/90 transition-colors duration-300">
            <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 fill-current text-yellow-400">
              <path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path>
            </svg>
            <span class="text-sm font-medium">4.9 Rating</span>
          </div>
          <div class="flex items-center gap-1 text-white/80 group-hover:text-white/90 transition-colors duration-300">
            <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="m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526"></path>
              <circle cx="12" cy="8" r="6"></circle>
            </svg>
            <span class="text-sm font-medium">15+ Awards</span>
          </div>
        </div>
      </div>
      <button class="flex h-12 w-12 items-center justify-center rounded-full bg-white/90 backdrop-blur-md hover:bg-white transition-all duration-200 hover:scale-110 group-hover:shadow-lg">
        <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-5 w-5 text-gray-900">
          <path d="M7 7h10v10"></path>
          <path d="M7 17 17 7"></path>
        </svg>
      </button>
    </div>
  </div>
</article>