Compact Article Card with Author

<article class="group cursor-pointer">
  <div class="overflow-hidden rounded-2xl bg-neutral-900 border border-neutral-800 hover:border-lime-400/50 transition-all duration-500 h-full flex flex-col hover:transform hover:scale-[1.02] max-w-[500px]">
    <div class="relative">
      <img src="https://images.unsplash.com/photo-1657741146085-c05a4c8122b1?w=1080&q=80" alt="Blockchain Network" class="w-full h-48 sm:h-56 object-cover transition-all duration-500 group-hover:scale-110">
      <div class="absolute top-3 left-3 right-3 flex justify-between items-start">
        <div class="flex flex-wrap gap-2">
          <span class="bg-blue-500/20 backdrop-blur-sm border border-blue-400/30 text-blue-300 text-xs font-medium px-2 py-1 rounded-full">Blockchain</span>
          <span class="bg-purple-500/20 backdrop-blur-sm border border-purple-400/30 text-purple-300 text-xs font-medium px-2 py-1 rounded-full">DeFi</span>
        </div>
        <button class="bg-white/10 backdrop-blur-sm border border-white/20 p-1.5 rounded-full hover:bg-white/20 transition-all hover:scale-110">
          <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="w-3 h-3 text-white">
            <path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"></path>
          </svg>
        </button>
      </div>
    </div>
    <div class="p-5 flex-1 flex flex-col bg-neutral-900">
      <div class="flex items-center gap-3 mb-3">
        <img src="https://images.unsplash.com/photo-1506863530036-1efeddceb993?w=1080&q=80" alt="Marcus Thompson" class="w-8 h-8 object-cover rounded-full">
        <div>
          <p class="font-medium text-sm text-white">Marcus Thompson</p>
          <p class="text-xs text-neutral-400">Blockchain Architect</p>
        </div>
      </div>
      <div class="flex items-center gap-3 mb-3 text-xs text-neutral-400">
        <span>Nov 28, 2024</span>
        <span>•</span>
        <span>6 min read</span>
      </div>
      <h3 class="text-lg sm:text-xl font-semibold leading-tight mb-3 group-hover:text-lime-300 transition-colors flex-1 text-white">Decentralized Finance Evolution: Smart Contracts Redefining Traditional Banking</h3>
      <div class="flex items-center justify-between mt-auto">
        <div class="flex items-center gap-3 text-xs text-neutral-400">
          <span class="flex items-center gap-1 hover:text-lime-400 transition-colors cursor-pointer">
            234
            <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="w-3 h-3">
              <path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path>
            </svg>
          </span>
          <span class="flex items-center gap-1 hover:text-lime-400 transition-colors cursor-pointer">
            45
            <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="w-3 h-3">
              <path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"></path>
            </svg>
          </span>
        </div>
        <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="w-4 h-4 text-neutral-500 group-hover:text-lime-400 transition-all group-hover:translate-x-1 group-hover:-translate-y-1">
          <path d="M7 7h10v10"></path>
          <path d="M7 17 17 7"></path>
        </svg>
      </div>
    </div>
  </div>
</article>