Operations Console UI Showcase Section

<section class="bg-black text-brand-light font-sans antialiased overflow-x-hidden selection:bg-brand-red selection:text-white">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&amp;display=swap" rel="stylesheet">

<main class="relative min-h-screen flex flex-col justify-between pt-12 bg-black">
    <div class="relative z-10 px-8 md:px-16 flex flex-col md:flex-row justify-between items-start gap-8">
      <h1 class="text-4xl md:text-6xl font-normal tracking-tight text-brand-red uppercase leading-none max-w-md">
        Command<br>The Network.
      </h1>
      <p class="text-sm md:text-base font-normal text-brand-red max-w-xs text-right md:text-left">
        A real-time operations console for monitoring and managing modern digital infrastructure.
      </p>
    </div>

    <div class="relative z-10 w-full mt-24">
      <div class="absolute inset-0 flex items-end px-8 md:px-16 pb-4 md:pb-8 pointer-events-none z-20">
        <h2 class="text-7xl md:text-9xl font-semibold tracking-tight text-white uppercase drop-shadow-md">
          Nexus<span class="text-4xl md:text-6xl align-top">©</span>
        </h2>
      </div>

      <div class="flex flex-col h-48 md:h-64 w-full group">
        <div class="flex-1 bg-brand-purple transition-all duration-700 ease-in-out group-hover:flex-[1.5]"></div>
        <div class="flex-1 bg-brand-pink transition-all duration-700 ease-in-out group-hover:flex-[1.5]"></div>
        <div class="flex-1 bg-brand-red transition-all duration-700 ease-in-out group-hover:flex-[1.5]"></div>
        <div class="flex-1 bg-brand-orange transition-all duration-700 ease-in-out group-hover:flex-[1.5]"></div>
        <div class="flex-1 bg-brand-yellow transition-all duration-700 ease-in-out group-hover:flex-[1.5]"></div>
      </div>
    </div>
  </main>

<section class="relative bg-black text-brand-light py-24 px-8 md:px-16 overflow-hidden" style="background-image: radial-gradient(rgba(255,255,255,0.10) 1px, transparent 1px); background-size: 24px 24px;">
    <div class="max-w-7xl mx-auto relative z-10">
      <div class="flex flex-col md:flex-row justify-between items-end mb-16 border-b border-white/10 pb-8">
        <div>
          <h3 class="text-2xl font-normal tracking-tight text-brand-red uppercase mb-2">System Elements</h3>
          <p class="text-sm text-white/60 max-w-sm">Core modules for continuous deployment and active monitoring.</p>
        </div>
        <div class="flex gap-4 mt-6 md:mt-0">
          <button class="text-xs uppercase tracking-widest font-normal text-brand-light hover:text-brand-yellow transition-colors flex items-center gap-2">
            <iconify-icon icon="solar:play-linear" width="1.5em" height="1.5em" style="--iconify-stroke-width:1.5;"></iconify-icon>
            Start Sequence
          </button>
        </div>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
        <!-- Card 1 -->
        <article class="relative rounded-2xl group" style="position:relative;">
          <div class="absolute inset-0 rounded-2xl pointer-events-none" style="padding:1px;background:linear-gradient(135deg, rgba(159,31,129,0.9), rgba(229,79,34,0.75), rgba(0,0,0,0)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;"></div>
          <div class="bg-black/80 rounded-2xl p-8 h-full flex flex-col justify-between ring-1 ring-white/5">
            <div>
              <iconify-icon icon="solar:radar-linear" width="2em" height="2em" class="text-brand-pink mb-6" style="--iconify-stroke-width:1.5;"></iconify-icon>
              <h4 class="text-xl font-normal tracking-tight mb-3">Live Telemetry</h4>
              <p class="text-sm text-white/60 leading-relaxed">Monitor APIs, servers, and webhooks in real-time. Track uptime and latency from one dashboard.</p>
            </div>
            <div class="mt-8 pt-4 border-t border-white/10 flex justify-between items-center">
              <span class="text-xs font-normal text-brand-purple uppercase tracking-widest">Active</span>
              <div class="w-2 h-2 rounded-full bg-brand-purple animate-pulse"></div>
            </div>
          </div>
        </article>

        <!-- Card 2 -->
        <article class="relative rounded-2xl group">
          <div class="absolute inset-0 rounded-2xl pointer-events-none" style="padding:1px;background:linear-gradient(135deg, rgba(229,79,34,0.9), rgba(229,131,28,0.75), rgba(0,0,0,0)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;"></div>
          <div class="bg-black/80 rounded-2xl p-8 h-full flex flex-col justify-between ring-1 ring-white/5">
            <div>
              <iconify-icon icon="solar:shield-network-linear" width="2em" height="2em" class="text-brand-orange mb-6" style="--iconify-stroke-width:1.5;"></iconify-icon>
              <h4 class="text-xl font-normal tracking-tight mb-3">Auth Protocols</h4>
              <p class="text-sm text-white/60 leading-relaxed">Secure access management with automated role assignments and audit logging.</p>
            </div>
            <div class="mt-8 pt-4 border-t border-white/10 flex justify-between items-center">
              <span class="text-xs font-normal text-brand-orange uppercase tracking-widest">Secured</span>
              <iconify-icon icon="solar:lock-keyhole-linear" class="text-brand-orange" width="1.5em" height="1.5em" style="--iconify-stroke-width:1.5;"></iconify-icon>
            </div>
          </div>
        </article>

        <!-- Card 3 -->
        <article class="relative rounded-2xl group">
          <div class="absolute inset-0 rounded-2xl pointer-events-none" style="padding:1px;background:linear-gradient(135deg, rgba(229,131,28,0.9), rgba(223,175,21,0.75), rgba(0,0,0,0)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;"></div>
          <div class="bg-black/80 rounded-2xl p-8 h-full flex flex-col justify-between ring-1 ring-white/5">
            <div>
              <iconify-icon icon="solar:server-square-linear" width="2em" height="2em" class="text-brand-yellow mb-6" style="--iconify-stroke-width:1.5;"></iconify-icon>
              <h4 class="text-xl font-normal tracking-tight mb-3">Grid Control</h4>
              <p class="text-sm text-white/60 leading-relaxed">Distribute workloads across nodes automatically based on real-time traffic analysis.</p>
            </div>
            <div class="mt-8 pt-4 border-t border-white/10 flex justify-between items-center">
              <span class="text-xs font-normal text-brand-yellow uppercase tracking-widest">Optimized</span>
              <div class="flex gap-1">
                <div class="w-1 h-3 bg-brand-yellow rounded-sm"></div>
                <div class="w-1 h-4 bg-brand-yellow rounded-sm"></div>
                <div class="w-1 h-2 bg-brand-yellow rounded-sm"></div>
              </div>
            </div>
          </div>
        </article>
      </div>
    </div>
  </section>

<section class="bg-black py-16 px-8 md:px-16 flex justify-center">
    <div class="max-w-5xl w-full flex flex-col md:flex-row rounded-xl overflow-hidden shadow-2xl ring-1 ring-white/10">
      <div class="bg-black p-8 md:p-12 w-full md:w-1/3 flex flex-col justify-between">
        <h3 class="text-3xl font-normal tracking-tight text-white uppercase">Colors</h3>
        <p class="text-xs text-brand-purple mt-12 max-w-[200px]">A real-time operations console for monitoring and managing modern digital systems.</p>
      </div>

      <div class="w-full md:w-2/3 flex h-64 md:h-auto">
        <div class="flex-1 bg-brand-purple relative group cursor-crosshair">
          <span class="absolute bottom-4 left-1/2 -translate-x-1/2 -rotate-90 text-xs font-normal text-white tracking-widest opacity-0 group-hover:opacity-100 transition-opacity">#9F1F81</span>
        </div>
        <div class="flex-1 bg-brand-pink relative group cursor-crosshair">
          <span class="absolute bottom-4 left-1/2 -translate-x-1/2 -rotate-90 text-xs font-normal text-white tracking-widest opacity-0 group-hover:opacity-100 transition-opacity">#CD1C58</span>
        </div>
        <div class="flex-1 bg-brand-red relative group cursor-crosshair">
          <span class="absolute bottom-4 left-1/2 -translate-x-1/2 -rotate-90 text-xs font-normal text-white tracking-widest opacity-0 group-hover:opacity-100 transition-opacity">#E54F22</span>
        </div>
        <div class="flex-1 bg-brand-orange relative group cursor-crosshair">
          <span class="absolute bottom-4 left-1/2 -translate-x-1/2 -rotate-90 text-xs font-normal text-white tracking-widest opacity-0 group-hover:opacity-100 transition-opacity">#E5831C</span>
        </div>
        <div class="flex-1 bg-brand-yellow relative group cursor-crosshair">
          <span class="absolute bottom-4 left-1/2 -translate-x-1/2 -rotate-90 text-xs font-normal text-black tracking-widest opacity-0 group-hover:opacity-100 transition-opacity">#DFAF15</span>
        </div>
        <div class="flex-1 bg-brand-gray relative group cursor-crosshair">
          <span class="absolute bottom-4 left-1/2 -translate-x-1/2 -rotate-90 text-xs font-normal text-white tracking-widest opacity-0 group-hover:opacity-100 transition-opacity">#373737</span>
        </div>
      </div>
    </div>
  </section>

<script src="https://cdn.tailwindcss.com"></script>
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
<script>
    tailwind.config = {
      theme: {
        extend: {
          fontFamily: { sans: ['Inter', 'sans-serif'] },
          colors: {
            brand: {
              purple: '#9F1F81',
              pink: '#CD1C58',
              red: '#E54F22',
              orange: '#E5831C',
              yellow: '#DFAF15',
              dark: '#0A0A0A',
              light: '#F5F5F0',
              gray: '#373737'
            }
          }
        }
      }
    }
  </script>
</section>