Interactive Hover Card with Image and CTA

<div
  class="scroll-reveal stagger-3 group sm:p-8 cursor-pointer transition-all duration-500 hover:scale-105 hover:bg-zinc-800/80 hover:shadow-xl revealed bg-zinc-900 border-zinc-800 border rounded-3xl mt-8 pt-6 pr-6 pb-6 pl-6">
  <div
    class="sm:p-6 md:p-8 bg-white/5 border-white/10 border rounded-2xl pt-5 pr-5 pb-5 pl-5 transition-all duration-300 group-hover:bg-white/10 group-hover:border-white/20">
    <h3 class="text-xl font-medium text-white mb-3">Lightning Performance</h3>
    <p class="leading-relaxed text-gray-400">Experience sub-200ms response times with our optimized AI processing
      engines and edge computing infrastructure worldwide.</p>
    <div
      class="mt-4 rounded-lg overflow-hidden border border-white/10 transition-all duration-300 group-hover:border-white/20">
      <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/562ccd5e-2c33-4a35-9897-6bc64b012fca_800w.jpg" alt="Private dining room" class="aspect-video w-full object-cover transition-transform duration-500 group-hover:scale-110">
    </div>
  </div>

  <div class="flex text-sm text-[#ffffff] mt-6 items-center">
    <span class="">Learn more</span>
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
      stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
      class="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform">
      <path d="M5 12h14" class=""></path>
      <path d="m12 5 7 7-7 7" class=""></path>
    </svg>
  </div>
</div>