Global Infrastructure Feature Card

<div class="group relative overflow-hidden transition-all duration-300 hover:shadow-2xl hover:shadow-teal-500/10 bg-gradient-to-br from-teal-900/20 via-slate-900 to-slate-800 border-teal-500/20 border rounded-3xl shadow-lg backdrop-blur max-w-xl">
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
    .font-space-grotesk { font-family: 'Space Grotesk', 'Helvetica Neue', sans-serif !important; }
    .font-inter { font-family: 'Inter', 'Helvetica Neue', sans-serif !important; }
  </style>
  <div class="sm:p-8 pt-6 pr-6 pb-6 pl-6">
    <div class="relative h-56 sm:h-64 ring-1 ring-inset ring-teal-500/20 overflow-hidden bg-gradient-to-br from-teal-950/40 via-slate-900 to-slate-800 rounded-2xl">
      <div class="absolute right-6 top-8 sm:right-10 sm:top-10 w-[78%] rounded-2xl border border-teal-500/30 bg-slate-900/95 shadow-xl backdrop-blur">
        <div class="flex items-center gap-2 px-4 py-3 border-b border-teal-500/20 bg-teal-950/30">
          <span class="h-2.5 w-2.5 rounded-full bg-teal-500/80"></span>
          <span class="h-2.5 w-2.5 rounded-full bg-yellow-500/80"></span>
          <span class="h-2.5 w-2.5 rounded-full bg-red-500/80"></span>
          <div class="ml-3 flex items-center gap-2">
            <span class="text-xs text-teal-400 font-space-grotesk">Global Network</span>
          </div>
        </div>
        <div class="p-4 relative h-32">
          <div class="absolute inset-0 opacity-30">
            <div class="absolute top-4 left-8 w-2 h-2 rounded-full bg-teal-400 animate-pulse"></div>
            <div class="absolute top-6 left-16 w-2 h-2 rounded-full bg-teal-400"></div>
            <div class="absolute top-8 right-12 w-2 h-2 rounded-full bg-teal-400 animate-pulse" style="animation-delay: 0.5s"></div>
            <div class="absolute bottom-8 left-12 w-2 h-2 rounded-full bg-teal-400"></div>
            <div class="absolute bottom-6 right-8 w-2 h-2 rounded-full bg-teal-400 animate-pulse" style="animation-delay: 1s"></div>
            <svg class="absolute inset-0 w-full h-full" viewBox="0 0 100 100">
              <path d="M20 20 L40 25 L70 30 L80 45" stroke="rgb(45 212 191 / 0.3)" stroke-width="0.5" fill="none" stroke-dasharray="2,2"></path>
              <path d="M30 60 L50 30 L80 35" stroke="rgb(45 212 191 / 0.3)" stroke-width="0.5" fill="none" stroke-dasharray="2,2"></path>
            </svg>
          </div>
          <div class="absolute bottom-2 left-2 right-2">
            <div class="grid grid-cols-3 gap-2 text-center">
              <div class="rounded bg-teal-950/50 border border-teal-500/20 p-1">
                <div class="text-xs font-medium text-teal-400 font-space-grotesk">15</div>
                <div class="text-[9px] text-slate-400 font-space-grotesk">Regions</div>
              </div>
              <div class="rounded bg-teal-950/50 border border-teal-500/20 p-1">
                <div class="text-xs font-medium text-teal-400 font-space-grotesk">99.9%</div>
                <div class="text-[9px] text-slate-400 font-space-grotesk">Uptime</div>
              </div>
              <div class="rounded bg-teal-950/50 border border-teal-500/20 p-1">
                <div class="text-xs font-medium text-teal-400 font-space-grotesk">12ms</div>
                <div class="text-[9px] text-slate-400 font-space-grotesk">Latency</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="absolute left-4 bottom-6 w-[35%] h-[45%] rounded-xl bg-slate-950/95 border border-teal-500/20 shadow-lg">
        <div class="px-2 py-1.5 border-b border-teal-500/20">
          <span class="text-[10px] text-teal-400 tracking-wide font-space-grotesk">PERFORMANCE</span>
        </div>
        <div class="p-2 space-y-2">
          <div class="flex items-center justify-between">
            <span class="text-[10px] text-slate-400 font-space-grotesk">CPU</span>
            <div class="flex items-center gap-1">
              <div class="h-1 w-6 rounded-full bg-slate-800">
                <div class="h-1 w-4 rounded-full bg-teal-500"></div>
              </div>
              <span class="text-[9px] text-teal-400 font-space-grotesk">67%</span>
            </div>
          </div>
          <div class="flex items-center justify-between">
            <span class="text-[10px] text-slate-400 font-space-grotesk">Memory</span>
            <div class="flex items-center gap-1">
              <div class="h-1 w-6 rounded-full bg-slate-800">
                <div class="h-1 w-3 rounded-full bg-teal-500"></div>
              </div>
              <span class="text-[9px] text-teal-400 font-space-grotesk">45%</span>
            </div>
          </div>
          <div class="flex items-center justify-between">
            <span class="text-[10px] text-slate-400 font-space-grotesk">Bandwidth</span>
            <div class="flex items-center gap-1">
              <div class="h-1 w-6 rounded-full bg-slate-800">
                <div class="h-1 w-2 rounded-full bg-teal-500"></div>
              </div>
              <span class="text-[9px] text-teal-400 font-space-grotesk">23%</span>
            </div>
          </div>
        </div>
      </div>
      <div class="absolute top-4 left-6 w-20 h-4 rounded bg-teal-500/30 animate-pulse" style="animation-delay: 0.5s"></div>
      <div class="absolute top-16 left-2 w-14 h-3 rounded bg-teal-400/40" style="animation-delay: 1s"></div>
      <div class="absolute bottom-16 right-2 w-16 h-2 rounded bg-teal-300/50"></div>
    </div>
    <div class="mt-6 sm:mt-8">
      <div class="flex items-center gap-3">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5 text-teal-400">
          <circle cx="12" cy="12" r="10"></circle>
          <path d="m4.93 4.93 4.24 4.24"></path>
          <path d="m14.83 9.17 4.24-4.24"></path>
          <path d="m14.83 14.83 4.24 4.24"></path>
          <path d="m9.17 14.83-4.24 4.24"></path>
        </svg>
        <h3 class="sm:text-2xl text-2xl font-bold tracking-tight font-space-grotesk">Global Infrastructure</h3>
      </div>
      <p class="text-sm text-slate-400 font-space-grotesk mt-3">Deploy to 15+ regions worldwide with automatic scaling, load balancing, and 99.9% uptime guarantee.</p>
      <div class="mt-4">
        <a href="#" class="inline-flex items-center gap-2 text-xs font-medium text-teal-400 hover:text-teal-300 font-space-grotesk">
          View infrastructure
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4">
            <path d="M5 12h14"></path>
            <path d="m12 5 7 7-7 7"></path>
          </svg>
        </a>
      </div>
    </div>
  </div>
  <div class="absolute inset-0 bg-gradient-to-t from-teal-900/10 via-transparent to-transparent pointer-events-none rounded-3xl"></div>
</div>