Network Infrastructure Dashboard Card

<section class="mt-12">
  <div class="overflow-hidden bg-slate-800 rounded-3xl shadow-2xl border border-slate-700">
    <div class="grid grid-cols-1 lg:grid-cols-3 flex-1">
      <div class="relative lg:border-r border-slate-600 flex flex-col min-h-[400px] lg:min-h-auto">
        <div class="p-6 lg:p-8">
          <p class="uppercase text-xs font-semibold tracking-wider text-slate-300 leading-snug max-w-xs">
            Network Infrastructure.
            <span class="normal-case font-normal text-slate-400">Real-time monitoring of nodes, data centers, and edge points across global regions with comprehensive analytics.</span>
          </p>
        </div>
        <div class="flex-1 flex bg-gradient-to-br from-indigo-900/20 to-blue-900/20 p-6 items-center justify-center relative overflow-hidden">
          <div class="absolute inset-0 bg-center opacity-30 bg-cover bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/7be87323-3ef9-4ba2-a522-2b9f432e29ce_800w.jpg)]"></div>
          <div class="relative z-10 text-center">
            <h3 class="text-xl font-semibold text-white mb-2">1,240 Active Nodes</h3>
            <p class="text-slate-300 text-sm">99.8% Uptime • Global Scale</p>
          </div>
        </div>
      </div>
      <div class="relative lg:border-r border-slate-600 flex flex-col min-h-[400px] lg:min-h-auto border-t lg:border-t-0">
        <div class="p-6 lg:p-8">
          <p class="uppercase text-xs font-semibold tracking-wider text-slate-300 leading-snug max-w-xs">
            SmartSync Technology™
            <span class="normal-case font-normal text-slate-400">Intelligent cross-region synchronization keeps your network performance, health metrics, and alerts perfectly coordinated.</span>
          </p>
        </div>
        <div class="flex-1 flex bg-gradient-to-br from-emerald-900/20 to-teal-900/20 p-6 items-center justify-center relative overflow-hidden">
          <div class="absolute inset-0 bg-center opacity-20 bg-cover bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/c971ca15-2f95-49f2-bf48-60b6ba4a00cb_800w.jpg)]"></div>
          <div class="relative z-10 space-y-4">
            <div class="flex items-center gap-3 bg-white/10 backdrop-blur-sm rounded-xl p-4">
              <div class="w-10 h-10 bg-emerald-500 rounded-lg flex items-center justify-center">
                <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="w-5 h-5 text-white">
                  <path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"></path>
                </svg>
              </div>
              <div>
                <p class="text-white font-medium text-sm">Throughput</p>
                <p class="text-slate-400 text-xs">1.8 Gbps average</p>
              </div>
            </div>
            <div class="flex items-center gap-3 bg-white/10 backdrop-blur-sm rounded-xl p-4">
              <div class="w-10 h-10 bg-blue-500 rounded-lg flex items-center justify-center">
                <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="w-5 h-5 text-white">
                  <circle cx="12" cy="12" r="10"></circle>
                  <path d="M12 6v6l4 2"></path>
                </svg>
              </div>
              <div>
                <p class="text-white font-medium text-sm">Latency</p>
                <p class="text-slate-400 text-xs">24ms median</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="flex flex-col relative overflow-hidden bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/2f312e75-9342-40ad-b24f-6aef51ca0cde_800w.jpg)] bg-cover">
        <div class="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full -translate-y-16 translate-x-16"></div>
        <div class="absolute bottom-0 left-0 w-24 h-24 bg-black/10 rounded-full translate-y-12 -translate-x-12"></div>
        <div class="flex items-start justify-between p-6 lg:p-8 relative z-10">
          <div class="flex items-center space-x-2">
            <div class="w-8 h-8 bg-black rounded-lg flex items-center justify-center">
              <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="w-5 h-5 text-white">
                <path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"></path>
                <path d="m9 12 2 2 4-4"></path>
              </svg>
            </div>
            <span class="text-xl font-medium text-gray-900">Network Hub</span>
          </div>
          <div class="flex space-x-3 text-gray-900">
            <div class="p-2 hover:bg-black/10 rounded-lg transition-colors cursor-pointer">
              <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="w-5 h-5">
                <path d="M16 7h6v6"></path>
                <path d="m22 7-8.5 8.5-5-5L2 17"></path>
              </svg>
            </div>
            <div class="p-2 hover:bg-black/10 rounded-lg transition-colors cursor-pointer">
              <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="w-5 h-5">
                <circle cx="12" cy="12" r="3"></circle>
                <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1 1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
              </svg>
            </div>
          </div>
        </div>
        <div class="lg:px-8 relative z-10 pr-6 pl-6">
          <h2 class="md:text-4xl lg:text-5xl leading-tight text-3xl font-medium text-gray-900 tracking-tighter">
            Everything you need
            <span class="text-gray-700">to monitor.</span>
          </h2>
          <p class="lg:mt-6 max-w-sm lg:text-base leading-relaxed text-sm text-gray-800 mt-4">
            Designed for operators, built for scale. Each monitoring suite includes real-time alerts, bandwidth analytics, and advanced performance metrics.
          </p>
        </div>
        <div class="lg:px-8 lg:pb-8 relative z-10 mt-auto pr-6 pb-6 pl-6">
          <div class="h-px bg-gray-900/20 w-full my-6 lg:my-8"></div>
          <div class="flex items-start space-x-4">
            <div class="relative flex-shrink-0">
              <div class="p-3 lg:p-4 bg-gray-900 rounded-2xl shadow-lg">
                <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="w-6 h-6 lg:w-7 lg:h-7 text-white">
                  <rect width="20" height="8" x="2" y="2" rx="2" ry="2"></rect>
                  <rect width="20" height="8" x="2" y="14" rx="2" ry="2"></rect>
                  <line x1="6" x2="6.01" y1="6" y2="6"></line>
                  <line x1="6" x2="6.01" y1="18" y2="18"></line>
                </svg>
              </div>
              <span class="absolute -top-2 -right-2 w-6 h-6 rounded-full bg-green-500 border-2 border-white flex items-center justify-center text-xs font-bold text-white">∞</span>
            </div>
            <div class="min-w-0">
              <h3 class="font-semibold text-gray-900 mb-1">Network Infrastructure Suite</h3>
              <p class="leading-relaxed text-sm text-gray-800">
                Complete visibility into network health, performance analytics, automated scaling, and 87% peak bandwidth utilization monitoring.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="lg:px-8 lg:py-8 bg-slate-900 border-slate-600 border-t pt-6 pr-6 pb-6 pl-6">
      <div class="flex flex-col sm:flex-row sm:items-center max-w-6xl mx-auto items-start justify-between">
        <div class="sm:mb-0 mb-4">
          <p class="uppercase leading-snug text-xs font-semibold text-slate-300 tracking-wider max-w-md">
            Premium Monitoring App.
            <span class="normal-case font-normal text-slate-400">Hand-crafted dashboard experience with intelligent alerts, real-time metrics, and voice notifications keeps your infrastructure always within reach.</span>
          </p>
        </div>
        <div class="flex items-center space-x-2 text-sm text-slate-400">
          <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="w-4 h-4">
            <path d="m9 12 2 2 4-4"></path>
            <circle cx="12" cy="12" r="10"></circle>
          </svg>
          <span>Updated 2m ago</span>
          <span class="text-slate-600">•</span>
          <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="w-4 h-4">
            <path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"></path>
          </svg>
          <span>Live monitoring</span>
        </div>
      </div>
    </div>
  </div>
</section>