AI Feature Grid with Animated Benefit Cards

<div class="grid grid-cols-1 md:grid-cols-2 lg:gap-8 gap-x-6 gap-y-6">

  <!-- Card 1: Always-On Intelligence -->
  <div
    class="group relative overflow-hidden rounded-3xl bg-white/[0.02] border border-white/10 hover:border-white/20 transition-colors duration-500 p-6 md:p-8 flex flex-col h-full">
    <div
      class="absolute inset-0 bg-gradient-to-br from-sky-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 items-center justify-center">
      <div
        class="absolute inset-0 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-sky-500/10 via-transparent to-transparent animate-pulse">
      </div>
      <!-- Radar Effect -->
      <div class="absolute w-64 h-64 border border-sky-500/20 rounded-full flex items-center justify-center">
        <div class="w-48 h-48 border border-sky-500/20 rounded-full flex items-center justify-center">
          <div class="w-32 h-32 border border-sky-500/20 rounded-full flex items-center justify-center">
            <div class="w-2 h-2 bg-sky-400 rounded-full shadow-[0_0_10px_rgba(56,189,248,1)]"></div>
          </div>
        </div>
        <!-- Scanner -->
        <div
          class="absolute inset-0 bg-gradient-to-r from-transparent via-sky-500/10 to-transparent w-full h-full rounded-full animate-[spin_4s_linear_infinite]"
          style="mask-image: conic-gradient(transparent 270deg, black 360deg);"></div>
      </div>
      <!-- Floating Dots -->
      <div class="absolute top-10 right-10 w-1.5 h-1.5 bg-sky-400 rounded-full animate-ping [animation-duration:3s]">
      </div>
      <div
        class="absolute bottom-12 left-12 w-1.5 h-1.5 bg-indigo-400 rounded-full animate-ping [animation-duration:4s]">
      </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-sky-400">
        <path d="M12 2v4" class=""></path>
        <path d="m16.2 7.8 2.9-2.9" class=""></path>
        <path d="M18 12h4" class=""></path>
        <path d="m16.2 16.2 2.9 2.9" class=""></path>
        <path d="M12 18v4" class=""></path>
        <path d="m4.9 19.1 2.9-2.9" class=""></path>
        <path d="M2 12h4" class=""></path>
        <path d="m4.9 4.9 2.9 2.9" class=""></path>
      </svg>
      Always-On Intelligence
    </h3>
    <p class="text-zinc-400 font-light leading-relaxed text-sm" style="">
      AI operates continuously, automating tasks like driver sourcing and providing up-to-date context in real-time.
      Your recruiters can focus on building relationships while AI handles the data.
    </p>
  </div>

  <!-- Card 2: Action-Oriented Workflows -->
  <div
    class="group relative overflow-hidden rounded-3xl bg-white/[0.02] border border-white/10 hover:border-white/20 transition-colors duration-500 p-6 md:p-8 flex flex-col h-full">
    <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>

  <!-- Card 3: Multi-Modality -->
  <div
    class="group relative overflow-hidden rounded-3xl bg-white/[0.02] border border-white/10 hover:border-white/20 transition-colors duration-500 p-6 md:p-8 flex flex-col h-full">
    <div
      class="absolute inset-0 bg-gradient-to-br from-purple-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 items-center justify-center">
      <!-- Center Hub -->
      <div
        class="absolute w-16 h-16 bg-zinc-900 rounded-xl border border-white/10 flex items-center justify-center z-10 shadow-2xl">
        <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="text-white">
          <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" class=""></path>
          <circle cx="9" cy="7" r="4" class=""></circle>
          <path d="M22 21v-2a4 4 0 0 0-3-3.87" class=""></path>
          <path d="M16 3.13a4 4 0 0 1 0 7.75" class=""></path>
        </svg>
      </div>

      <!-- Orbiting Nodes -->
      <div class="absolute w-32 h-32 animate-[spin_10s_linear_infinite]">
        <!-- Node 1: Resume -->
        <div
          class="absolute -top-3 left-1/2 -translate-x-1/2 w-8 h-8 bg-zinc-800 rounded-lg border border-white/10 flex items-center justify-center animate-[spin_10s_linear_infinite_reverse]">
          <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
            class="text-purple-300">
            <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" class=""></path>
            <polyline points="14 2 14 8 20 8" class=""></polyline>
            <path d="M16 13H8" class=""></path>
            <path d="M16 17H8" class=""></path>
            <path d="M10 9H8" class=""></path>
          </svg>
        </div>
        <!-- Node 2: Audio -->
        <div
          class="absolute bottom-2 right-0 w-8 h-8 bg-zinc-800 rounded-lg border border-white/10 flex items-center justify-center animate-[spin_10s_linear_infinite_reverse]">
          <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-pink-300">
            <path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z" class=""></path>
            <path d="M19 10v2a7 7 0 0 1-14 0v-2" class=""></path>
            <line x1="12" x2="12" y1="19" y2="22" class=""></line>
          </svg>
        </div>
        <!-- Node 3: Chat -->
        <div
          class="absolute bottom-2 left-0 w-8 h-8 bg-zinc-800 rounded-lg border border-white/10 flex items-center justify-center animate-[spin_10s_linear_infinite_reverse]">
          <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-sky-300">
            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" class=""></path>
          </svg>
        </div>
      </div>

      <!-- Connecting Lines -->
      <svg class="absolute inset-0 w-full h-full pointer-events-none opacity-20">
        <circle cx="50%" cy="50%" r="64" fill="none" stroke="white" stroke-width="1" stroke-dasharray="4 4" class="">
        </circle>
      </svg>
    </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-purple-400">
        <path
          d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"
          class=""></path>
        <polyline points="7.5 4.21 12 6.81 16.5 4.21" class=""></polyline>
        <polyline points="7.5 19.79 7.5 14.6 3 12" class=""></polyline>
        <polyline points="21 12 16.5 14.6 16.5 19.79" class=""></polyline>
        <polyline points="3.27 6.96 12 12.01 20.73 6.96" class=""></polyline>
        <line x1="12" x2="12" y1="22.08" y2="12" class=""></line>
      </svg>
      Multi-Modality
    </h3>
    <p class="text-zinc-400 font-light leading-relaxed text-sm" style="">
      Our system understands unstructured and multimodal data—resumes, recordings, job descriptions, and logs—providing
      a comprehensive view of every candidate.
    </p>
  </div>

  <!-- Card 4: Hyper-Personalization -->
  <div
    class="group relative overflow-hidden rounded-3xl bg-white/[0.02] border border-white/10 hover:border-white/20 transition-colors duration-500 p-6 md:p-8 flex flex-col h-full">
    <div
      class="absolute inset-0 bg-gradient-to-br from-pink-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 items-center justify-center p-6">
      <div class="w-full max-w-[240px] bg-zinc-900 border border-white/10 rounded-lg p-4 shadow-xl relative">
        <div class="flex items-center gap-2 mb-3">
          <div class="w-2 h-2 rounded-full bg-red-500/50"></div>
          <div class="w-2 h-2 rounded-full bg-yellow-500/50"></div>
          <div class="w-2 h-2 rounded-full bg-green-500/50"></div>
        </div>
        <div class="space-y-2">
          <div class="h-2 w-1/3 bg-zinc-800 rounded"></div>
          <div class="text-[10px] text-zinc-400 font-mono leading-relaxed" style="">
            Hello <span class="text-pink-400 bg-pink-500/10 px-1 rounded animate-pulse" style="">{{driver_name}}</span>,
            based on your <span class="text-pink-400 bg-pink-500/10 px-1 rounded" style="">Class A</span> license, we
            have a route in <span class="text-pink-400 bg-pink-500/10 px-1 rounded" style="">Texas</span>...
          </div>
        </div>
        <!-- Cursor -->
        <div class="absolute bottom-4 right-4 w-2 h-4 bg-pink-500/50 animate-pulse"></div>
      </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-pink-400">
        <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"
          class=""></path>
      </svg>
      Hyper-Personalization
    </h3>
    <p class="text-zinc-400 font-light leading-relaxed text-sm" style="">
      Empower your team to create tailored experiences for every driver interaction, from personalized outreach to
      customized onboarding paths.
    </p>
  </div>

  <!-- Card 5: Unified Data -->
  <div
    class="group relative overflow-hidden rounded-3xl bg-white/[0.02] border border-white/10 hover:border-white/20 transition-colors duration-500 p-6 md:p-8 flex flex-col h-full">
    <div
      class="absolute inset-0 bg-gradient-to-br from-emerald-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 items-end justify-center p-6 gap-2">
      <!-- Charts -->
      <div class="w-8 bg-zinc-800 rounded-t-sm h-12 group-hover:h-20 transition-all duration-700 ease-out relative">
      </div>
      <div
        class="w-8 bg-zinc-800 rounded-t-sm h-20 group-hover:h-32 transition-all duration-700 ease-out delay-100 relative">
      </div>
      <div
        class="w-8 bg-emerald-600 rounded-t-sm h-32 group-hover:h-40 transition-all duration-700 ease-out delay-200 relative shadow-[0_0_20px_rgba(5,150,105,0.4)]">
      </div>
      <div
        class="w-8 bg-zinc-800 rounded-t-sm h-24 group-hover:h-28 transition-all duration-700 ease-out delay-300 relative">
      </div>
      <div
        class="w-8 bg-zinc-800 rounded-t-sm h-16 group-hover:h-20 transition-all duration-700 ease-out delay-400 relative">
      </div>

      <!-- Data Overlay -->
      <div class="absolute top-4 left-4 right-4 flex justify-between items-start">
        <div class="flex flex-col">
          <span class="text-[10px] uppercase tracking-wider text-zinc-500" style="">Holistic Score</span>
          <span class="text-2xl font-mono text-white" style="">98.2<span class="text-emerald-400 text-sm" style="">%</span></span>
        </div>
        <div class="w-6 h-6 rounded-full bg-emerald-500/20 flex items-center justify-center">
          <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
            class="text-emerald-400">
            <polyline points="22 7 13.5 15.5 8.5 10.5 2 17" class=""></polyline>
            <polyline points="16 7 22 7 22 13" class=""></polyline>
          </svg>
        </div>
      </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-emerald-400">
        <ellipse cx="12" cy="5" rx="9" ry="3" class=""></ellipse>
        <path d="M3 5V19A9 3 0 0 0 21 19V5" class=""></path>
        <path d="M3 12A9 3 0 0 0 21 12" class=""></path>
      </svg>
      Unified &amp; Actionable Data
    </h3>
    <p class="text-zinc-400 font-light leading-relaxed text-sm" style="">
      Achieve a holistic view of every driver by integrating diverse data sources. AI delivers personalized insights and
      detailed profiles to enhance sourcing.
    </p>
  </div>

  <!-- Card 6: Conversational UX -->
  <div
    class="group relative overflow-hidden rounded-3xl bg-white/[0.02] border border-white/10 hover:border-white/20 transition-colors duration-500 p-6 md:p-8 flex flex-col h-full">
    <div
      class="absolute inset-0 bg-gradient-to-br from-amber-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 justify-center p-6 space-y-3">
      <!-- Chat Bubbles -->
      <div
        class="flex justify-end transform translate-y-2 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-500 ease-out">
        <div class="bg-blue-600 text-white text-[10px] px-3 py-2 rounded-2xl rounded-tr-none shadow-lg max-w-[80%]"
          style="">
          Find drivers with Hazmat endorsements in Ohio.
        </div>
      </div>
      <div
        class="flex justify-start transform translate-y-2 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-500 delay-300 ease-out">
        <div
          class="bg-zinc-800 text-zinc-300 text-[10px] px-3 py-2 rounded-2xl rounded-tl-none border border-white/10 shadow-lg max-w-[80%] flex items-center gap-2"
          style="">
          <span class="w-1.5 h-1.5 rounded-full bg-amber-400 animate-pulse"></span>
          I found 42 candidates matching your criteria.
        </div>
      </div>
      <div
        class="flex justify-start transform translate-y-2 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-500 delay-700 ease-out">
        <div
          class="bg-zinc-800 text-zinc-300 text-[10px] px-3 py-2 rounded-2xl rounded-tl-none border border-white/10 shadow-lg max-w-[80%]"
          style="">
          Would you like to start an email campaign?
        </div>
      </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-amber-400">
        <path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" class=""></path>
      </svg>
      Conversational Experience
    </h3>
    <p class="text-zinc-400 font-light leading-relaxed text-sm" style="">
      Interact intuitively with your data. Facilitate natural, insightful conversations with drivers based on a deep
      understanding of their profiles and needs.
    </p>
  </div>
</div>