Animated AI Consulting Service Card

<div
  class="max-w-md overflow-hidden animate-fade-in-up delay-900 bg-black/30 border-white/10 border rounded-2xl pt-6 pr-6 pb-6 pl-6 relative">
  <div class="pointer-events-none absolute inset-px rounded-2xl ring-1 ring-inset ring-white/10"></div>

  <!-- Visual Schema -->
  <div class="border-white/10 border rounded-xl pt-3 pr-3 pb-3 pl-3">
    <div
      class="relative h-56 rounded-lg overflow-hidden bg-gradient-to-b from-[#0b0c10] to-[#0b0c10] border border-white/5">
      <!-- Animated background dots -->
      <div class="absolute left-[18%] top-[55%] h-6 w-6 rounded-full border border-white/5 opacity-70 animate-pulse">
      </div>
      <div class="absolute left-[60%] top-[18%] h-4 w-4 rounded-full border border-white/5 opacity-60 animate-pulse"
        style="animation-delay: 0.5s;"></div>

      <!-- SVG graph with animations -->
      <svg viewBox="0 0 800 400" class="absolute inset-0 w-full h-full" aria-hidden="true">
        <!-- Animated connection line -->
        <line x1="260" y1="170" x2="520" y2="220" stroke="rgba(148,163,184,0.28)" stroke-width="6"
          stroke-linecap="round" stroke-dasharray="300" stroke-dashoffset="300" class="">
          <animate attributeName="stroke-dashoffset" from="300" to="0" dur="2s" fill="freeze" repeatCount="indefinite"
            class=""></animate>
        </line>

        <!-- Pulsing joints on the line -->
        <circle cx="360" cy="190" r="12" fill="#0b0c10" stroke="rgba(148,163,184,0.35)" stroke-width="4" class="">
          <animate attributeName="r" values="12;16;12" dur="2s" repeatCount="indefinite" class=""></animate>
          <animate attributeName="opacity" values="1;0.6;1" dur="2s" repeatCount="indefinite" class=""></animate>
        </circle>
        <circle cx="395" cy="200" r="10" fill="#0b0c10" stroke="rgba(148,163,184,0.35)" stroke-width="3" class="">
          <animate attributeName="r" values="10;14;10" dur="2s" begin="0.3s" repeatCount="indefinite" class="">
          </animate>
          <animate attributeName="opacity" values="1;0.6;1" dur="2s" begin="0.3s" repeatCount="indefinite" class="">
          </animate>
        </circle>

        <!-- Left small node with pulse -->
        <circle cx="200" cy="120" r="70" fill="#0b0c10" stroke="rgba(148,163,184,0.28)" stroke-width="3" class="">
          <animate attributeName="r" values="70;75;70" dur="3s" repeatCount="indefinite" class=""></animate>
        </circle>
        <circle cx="200" cy="120" r="60" fill="none" stroke="rgba(148,163,184,0.12)" stroke-width="1.5" class="">
          <animate attributeName="r" values="60;65;60" dur="3s" repeatCount="indefinite" class=""></animate>
          <animate attributeName="opacity" values="0.3;0.8;0.3" dur="3s" repeatCount="indefinite" class=""></animate>
        </circle>

        <!-- Right large node with pulse -->
        <circle cx="570" cy="260" r="120" fill="#0b0c10" stroke="rgba(148,163,184,0.28)" stroke-width="3" class="">
          <animate attributeName="r" values="120;125;120" dur="3s" begin="0.5s" repeatCount="indefinite" class="">
          </animate>
        </circle>
        <circle cx="570" cy="260" r="105" fill="none" stroke="rgba(148,163,184,0.12)" stroke-width="1.5" class="">
          <animate attributeName="r" values="105;110;105" dur="3s" begin="0.5s" repeatCount="indefinite" class="">
          </animate>
          <animate attributeName="opacity" values="0.3;0.8;0.3" dur="3s" begin="0.5s" repeatCount="indefinite" class="">
          </animate>
        </circle>

        <!-- Data flow particles -->
        <circle r="4" fill="rgba(148,163,184,0.8)" class="">

          <animate attributeName="opacity" values="0;1;1;0" dur="3s" repeatCount="indefinite" class=""></animate>
        </circle>
        <circle r="4" fill="rgba(148,163,184,0.8)" class="">

          <animate attributeName="opacity" values="0;1;1;0" dur="3s" begin="1s" repeatCount="indefinite" class="">
          </animate>
        </circle>
        <circle r="4" fill="rgba(148,163,184,0.8)" class="">

          <animate attributeName="opacity" values="0;1;1;0" dur="3s" begin="2s" repeatCount="indefinite" class="">
          </animate>
        </circle>
      </svg>

      <!-- Icons centered inside circles with hover effect -->
      <div class="transition-transform hover:scale-110 absolute"
        style="left: 25%; top: 35%; transform: translate(-50%, -50%);">
        <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="animate-pulse w-[28px] h-[28px]" data-icon-replaced="true"
          style="color: rgb(212, 212, 216); width: 28px; height: 28px;">
          <path d="M3 3v16a2 2 0 0 0 2 2h16" class=""></path>
          <path d="M18 17V9" class=""></path>
          <path d="M13 17V5" class=""></path>
          <path d="M8 17v-3" class=""></path>
        </svg>
      </div>
      <div class="transition-transform hover:scale-110 absolute"
        style="left: 71.25%; top: 60%; transform: translate(-50%, -50%);">
        <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="animate-pulse w-[40px] h-[40px]"
          style="animation-delay: 0.5s; width: 40px; height: 40px; color: rgb(212, 212, 216);"
          data-icon-replaced="true">
          <path
            d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"
            class=""></path>
          <path d="M20 2v4" class=""></path>
          <path d="M22 4h-4" class=""></path>
          <circle cx="4" cy="20" r="2" class=""></circle>
        </svg>
      </div>
    </div>
  </div>

  <!-- Copy -->
  <div class="mt-5">
    <h3 class="text-2xl tracking-tight font-semibold text-zinc-100">
      AI Strategy Consulting
    </h3>
    <p class="mt-2 text-[13.5px] leading-7 text-zinc-400">
      Get expert guidance to implement AI solutions that drive business growth
    </p>
  </div>
</div>