Interactive Project Showcase Card

<a href="#" class="group overflow-hidden sm:rounded-2xl transition-all hover:border-white/20 hover:bg-white/[0.05] hover:scale-[1.02] slide-in-up animate-delay-400 bg-gradient-to-br from-white/[0.03] to-white/[0.01] border-white/10 border rounded-xl" style="animation-play-state: running;">
        <div class="relative saturate-0">
          <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/a94f0892-d87e-4173-ba0b-b5a019b0ca3f_800w.jpg" alt="Analytics dashboard" class="h-40 sm:h-48 md:h-56 w-full object-cover">
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
          <div class="absolute inset-0 bg-gradient-to-r from-emerald-600/20 via-transparent to-teal-600/20 mix-blend-overlay"></div>
          <div class="absolute top-3 sm:top-4 left-3 sm:left-4">
            <span class="inline-flex items-center rounded-full border border-white/20 bg-black/40 px-2 sm:px-3 py-1 text-xs text-white backdrop-blur">AI</span>
          </div>
        </div>
        <div class="sm:p-5 pt-4 pr-4 pb-4 pl-4">
          <div class="flex items-center gap-2 text-xs text-white/60 mb-2">
            <span class="">Analytics</span>
            <span class="h-1 w-1 rounded-full bg-white/20"></span>
            <span class="">2024</span>
          </div>
          <h3 class="text-base sm:text-lg font-semibold tracking-tight">Neon Metrics</h3>
          <p class="mt-1 text-xs sm:text-sm text-white/70">LLM-assisted insights for product, growth, and operations teams.</p>
          <div class="flex text-xs font-medium text-[#ffffff] mt-3 items-center">
            <span class="">View project</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="ml-1 h-3 w-3 transition-transform group-hover:translate-x-0.5"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
          </div>
        </div>
      </a>