Animated AI Financial Monitoring Dashboard Card

<section
  class="relative overflow-hidden group hover:border-zinc-700/60 transition-all duration-500 animate-slide-in-2 flex flex-col bg-zinc-900/50 border-zinc-800/50 border rounded-3xl backdrop-blur-sm max-w-2xl">


  <!-- Dashboard Container - matching the left card structure -->
  <div class="p-6 md:p-8 flex-1 flex flex-col">
    <div class="relative rounded-2xl border border-zinc-800/60 bg-zinc-950/80 backdrop-blur-sm flex-1">
      <!-- Dashboard content -->
      <div class="flex-1 flex md:p-8 pt-6 pr-6 pb-6 pl-6 items-center justify-center h-full">
        <div class="relative mx-auto aspect-square w-full max-w-[280px]">
          <!-- Dashboard rings -->
          <div class="absolute inset-0 rounded-full border-2 border-zinc-800/60"></div>
          <div class="absolute inset-[12%] rounded-full border border-zinc-800/40"></div>
          <div class="absolute inset-[24%] rounded-full border border-zinc-800/30"></div>
          <div class="absolute inset-[36%] rounded-full border border-zinc-800/20"></div>

          <!-- AI scanning sweep -->
          <div class="absolute inset-0 rounded-full overflow-hidden">
            <div class="absolute inset-0 rounded-full"
              style="background: conic-gradient(from 0deg, rgba(16,185,129,0.4) 0deg, rgba(16,185,129,0.6) 30deg, rgba(16,185,129,0.2) 45deg, transparent 60deg 360deg); transform-origin: 50% 50%; animation: spin-slow 6s linear infinite;">
            </div>
          </div>

          <!-- Central AI core -->
          <div
            class="absolute inset-[38%] rounded-full bg-gradient-to-br from-emerald-400/20 to-emerald-600/10 border border-emerald-500/30 backdrop-blur-sm">
            <div class="absolute inset-2 rounded-full bg-emerald-400/10 flex items-center justify-center">

            </div>
          </div>

          <!-- Budget data points -->
          <div class="absolute left-[18%] top-[28%] -translate-x-1/2 -translate-y-1/2">
            <div class="relative">
              <div class="h-3 w-3 rounded-full bg-emerald-400 shadow-[0_0_12px_rgba(16,185,129,0.6)]"
                style="animation: pulse-soft 2s infinite;"></div>
              <div
                class="absolute -top-8 left-1/2 -translate-x-1/2 text-xs text-emerald-300 whitespace-nowrap font-geist tracking-tight"
                style="">$2,340</div>
            </div>
          </div>

          <div class="absolute right-[18%] top-[35%] -translate-x-1/2 -translate-y-1/2">
            <div class="relative">
              <div class="h-2.5 w-2.5 rounded-full bg-emerald-400/80 shadow-[0_0_8px_rgba(16,185,129,0.4)]"
                style="animation: pulse-soft 2.5s infinite 0.5s;"></div>
              <div
                class="absolute -top-7 left-1/2 -translate-x-1/2 text-xs text-emerald-300/80 whitespace-nowrap font-geist tracking-tight"
                style="">$890</div>
            </div>
          </div>

          <div class="absolute left-[50%] bottom-[22%] -translate-x-1/2 -translate-y-1/2">
            <div class="relative">
              <div class="h-2 w-2 rounded-full bg-emerald-400/70 shadow-[0_0_6px_rgba(16,185,129,0.3)]"
                style="animation: pulse-soft 3s infinite 1s;"></div>
              <div
                class="absolute -bottom-6 left-1/2 -translate-x-1/2 text-xs text-emerald-300/70 whitespace-nowrap font-geist tracking-tight"
                style="">$1,205</div>
            </div>
          </div>

          <!-- Status indicators -->
          <div
            class="absolute left-3 top-3 flex items-center gap-2 px-3 py-2 rounded-xl border border-zinc-700/50 bg-zinc-900/80 backdrop-blur-sm">
            <div class="h-2 w-2 rounded-full bg-emerald-400" style="animation: pulse-soft 1.5s infinite;"></div>
            <span class="text-xs text-emerald-300 font-geist tracking-tight" style="">AI Active</span>
          </div>

          <div
            class="absolute right-3 top-3 flex items-center gap-2 px-3 py-2 rounded-xl border border-zinc-700/50 bg-zinc-900/80 backdrop-blur-sm">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
              class="text-zinc-400">
              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path>
              <polyline points="17,8 12,3 7,8" class=""></polyline>
              <line x1="12" x2="12" y1="3" y2="15" class=""></line>
            </svg>
            <span class="text-xs text-zinc-400 font-geist tracking-tight" style="">Live</span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Text content - matching left card structure -->
  <div class="px-6 pb-8 md:px-8 md:pb-10">
    <div class="flex items-center gap-3 mb-4">

      <h3 class="text-2xl md:text-3xl text-white font-bricolage font-light tracking-tighter" style="">Real-time
        Monitoring</h3>
    </div>
    <p class="text-zinc-400 leading-relaxed text-lg font-geist tracking-tight" style="">
      Continuous AI-powered surveillance of your financial transactions, automated alerts for unusual spending, and
      intelligent budget adjustments to keep you on track toward your financial objectives.
    </p>
  </div>
</section>