Live AI Adoption Counter Card

<div class="z-10 max-w-3xl mt-10 mr-auto ml-auto pr-6 pl-6 relative">
  <!-- Widget Card -->
  <div
    class="relative bg-zinc-900/40 border border-white/10 backdrop-blur-md rounded-2xl overflow-hidden shadow-2xl group"
    style="">
    <!-- Ambient Glow Effect -->
    <div
      class="absolute top-0 left-1/2 -translate-x-1/2 w-3/4 h-1/2 bg-blue-500/10 blur-[80px] -z-10 rounded-full opacity-50 pointer-events-none"
      style=""></div>

    <div class="md:p-10 z-10 overflow-hidden text-center pt-8 pr-8 pb-8 pl-8 relative">
      <!-- Animated Background -->
      <div class="absolute inset-0 w-full h-full -z-10 pointer-events-none select-none">
        <div data-us-project="yWZ2Tbe094Fsjgy9NRnD" class="w-full h-full opacity-60 mix-blend-screen"
          style="width: 100%; height: 100%;"></div>
        <script>
          !function(){if(!window.UnicornStudio){window.UnicornStudio={isInitialized:!1};var i=document.createElement("script");i.src="https://cdn.jsdelivr.net/gh/hiunicornstudio/unicornstudio.js@v1.4.29/dist/unicornStudio.umd.js",i.onload=function(){window.UnicornStudio.isInitialized||(UnicornStudio.init(),window.UnicornStudio.isInitialized=!0)},(document.head || document.body).appendChild(i)}}();
        </script>
        <div class="absolute inset-0 bg-gradient-to-b from-zinc-900/90 via-zinc-900/50 to-zinc-900/90"></div>
        <div class="absolute inset-0 bg-zinc-900/20 backdrop-blur-[1px]"></div>
      </div>

      <div class="relative z-10">
        <!-- Live Indicator Pill -->
        <div
          class="inline-flex gap-2 text-[10px] uppercase font-semibold text-red-300 tracking-wider bg-red-500/10 border-red-500/20 border rounded-full mb-4 px-3 py-1 shadow-[0_0_10px_rgba(239,68,68,0.1)] gap-x-2 gap-y-2 items-center">
          <span class="relative flex h-1.5 w-1.5">
                <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
          <span class="relative inline-flex rounded-full h-1.5 w-1.5 bg-red-500"></span>
          </span>
          Live Adoption Tracker
        </div>

        <h3 class="uppercase text-lg font-medium text-zinc-400 tracking-widest mb-2 group-hover:text-cyan-400">
          Businesses Adopting AI
        </h3>
        <p class="text-zinc-500 text-xs mb-8 font-light" style="">
          Count since you started reading this page
        </p>

        <!-- Counter Display -->
        <div class="flex mb-8 relative gap-x-1 gap-y-1 items-baseline justify-center">
          <div
            class="text-6xl md:text-8xl font-bold text-transparent bg-clip-text bg-gradient-to-b from-white to-zinc-400 tracking-tighter font-geist-mono tabular-nums leading-none"
            id="ai-adoption-counter" style="opacity: 1;">1</div>
          <span class="text-xl md:text-3xl text-zinc-600 font-light translate-y-[-4px]" style="">
                +
              </span>
        </div>

        <!-- Metrics Footer -->
        <div
          class="grid grid-cols-2 gap-px bg-white/5 rounded-lg overflow-hidden border border-white/5 max-w-sm mx-auto backdrop-blur-md">
          <div class="hover:bg-zinc-800/80 transition-colors bg-zinc-900/80 pt-3 pr-3 pb-3 pl-3">
            <div class="text-[10px] text-zinc-500 uppercase tracking-wide mb-1" style="">
              Velocity
            </div>
            <div class="text-sm font-medium text-zinc-200" style="">
              ~1.2 / sec
            </div>
          </div>
          <div class="bg-zinc-900/80 p-3 hover:bg-zinc-800/80 transition-colors">
            <div class="text-[10px] text-zinc-500 uppercase tracking-wide mb-1" style="">
              Market Trend
            </div>
            <div class="text-sm font-medium flex items-center justify-center gap-1">
              <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="lucide lucide-trending-up">
                <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>
              +24%
            </div>
          </div>
        </div>
      </div>

      <script class="">
        (function() {
              const counterEl = document.getElementById('ai-adoption-counter');
              if (!counterEl) return;

              let count = 0;
              const velocity = 1.2; // businesses per second
              const interval = 833; // roughly 1.2 per second (1000ms / 1.2)

              function updateCounter() {
                count++;
                counterEl.textContent = count.toLocaleString();
              }

              // Start the counter
              setInterval(updateCounter, interval);

              // Initial update after a short delay
              setTimeout(updateCounter, 500);
            })();
      </script>
    </div>

    <!-- Bottom Progress Line -->
    <div class="absolute bottom-0 left-0 w-full h-0.5 bg-zinc-800">
      <div class="h-full bg-gradient-to-r from-red-500 via-red-600 to-cyan-400 w-full opacity-50"></div>
    </div>
  </div>
</div>