Agent Profile Card

<div class="relative h-56 w-56 bg-gray-100 rounded-xl overflow-hidden group cursor-pointer hover:scale-105 transition-all duration-300">
  <div class="absolute top-3 left-3 text-[10px] tracking-widest text-gray-700 flex items-center gap-1 z-10 font-geist">
    AGENT SKIN
    <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 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path>
      <circle cx="12" cy="7" r="4"></circle>
    </svg>
  </div>
  <img src="https://cdn.midjourney.com/4ac09c6f-b2a4-42ae-b133-70257fe250fe/0_0.png?w=800&q=80" alt="Agent Skin" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300">
  <div class="absolute inset-0 group-hover:bg-black/30 transition-colors duration-300 bg-black/20"></div>
  <div class="absolute bottom-3 left-3 right-3 z-10">
    <div class="text-xs text-white font-medium font-geist">Marcus Chen</div>
    <div class="text-[10px] text-white/80 font-geist">Customer Success Agent</div>
  </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="absolute top-3 right-3 w-4 h-4 text-white/80 group-hover:text-white transition-colors duration-300 z-10">
    <path d="M7 7h10v10"></path>
    <path d="M7 17 17 7"></path>
  </svg>
</div>