Action-Oriented Workflow Card with Status Steps

<div class="group overflow-hidden hover:border-white/20 transition-colors duration-500 md:p-8 flex flex-col h-full border-white/10 border rounded-3xl pt-6 pr-6 pb-6 pl-6 relative">
        <div class="absolute inset-0 bg-gradient-to-br from-indigo-500/10 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none"></div>
        
        <!-- Visual -->
        <div class="relative w-full h-48 mb-8 rounded-2xl bg-black/40 border border-white/5 overflow-hidden flex flex-col p-4 gap-3">
          <!-- Flow Items -->
          <div class="flex items-center gap-3 p-3 rounded-lg bg-zinc-900/80 border border-white/5 border-l-2 border-l-emerald-500 transform translate-x-0 transition-transform">
            <div class="w-5 h-5 rounded-full bg-emerald-500/20 flex items-center justify-center text-emerald-400">
              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class=""><path d="M20 6 9 17l-5-5" class=""></path></svg>
            </div>
            <span class="text-xs text-zinc-300 font-medium" style="">Candidate Screened</span>
            <span class="ml-auto text-[10px] text-zinc-600" style="">Now</span>
          </div>
          
          <div class="flex items-center gap-3 p-3 rounded-lg bg-indigo-500/10 border border-indigo-500/20 border-l-2 border-l-indigo-500 shadow-[0_0_15px_rgba(99,102,241,0.1)] animate-float">
            <div class="w-5 h-5 rounded-full bg-indigo-500 flex items-center justify-center text-white animate-pulse">
              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class=""><path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z" class=""></path><path d="m12 8 4 4-4 4" class=""></path><path d="M8 12h8" class=""></path></svg>
            </div>
            <div class="flex flex-col">
              <span class="text-xs text-white font-semibold" style="">Suggested Action</span>
              <span class="text-[10px] text-indigo-300" style="">Schedule Interview</span>
            </div>
            <button class="ml-auto px-2 py-1 bg-indigo-500 text-white rounded text-[10px] font-medium hover:bg-indigo-600 transition-colors" style="">Apply</button>
          </div>

          <div class="flex items-center gap-3 p-3 rounded-lg bg-zinc-900/50 border border-white/5 opacity-50">
            <div class="w-5 h-5 rounded-full bg-zinc-800 border border-white/10"></div>
            <span class="text-xs text-zinc-500" style="">Background Check</span>
          </div>
        </div>

        <h3 class="text-xl font-medium text-white mb-3 flex items-center gap-2" style="">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-indigo-400"><path d="M22 12h-4l-3 9L9 3l-3 9H2" class=""></path></svg>
          Action-Oriented Workflows
        </h3>
        <p class="text-zinc-400 font-light leading-relaxed text-sm" style="">
          Seamless collaboration between human recruiters and AI Agents, guiding them with AI-generated next-best actions to optimize every stage of the driver recruitment process.
        </p>
      </div>