Neon_Glow_Gaming_Layout

<div class="min-h-screen bg-gray-950 text-gray-50 dark:bg-black dark:text-gray-100 font-mono overflow-hidden">

  <!-- Global Glow Background (Pseudo-elements or JS for better control, but using divs for pure HTML/CSS) -->
  <div class="absolute inset-0 z-0 opacity-20">
    <div class="absolute top-1/4 left-1/4 w-96 h-96 bg-gray-700/30 rounded-full mix-blend-screen filter blur-3xl animate-pulse-slow"></div>
    <div class="absolute top-1/2 left-3/4 w-80 h-80 bg-gray-500/30 rounded-full mix-blend-screen filter blur-3xl animate-pulse-slow animation-delay-2000"></div>
    <div class="absolute bottom-1/4 left-1/2 w-72 h-72 bg-gray-600/30 rounded-full mix-blend-screen filter blur-3xl animate-pulse-slow animation-delay-4000"></div>
  </div>

  <!-- Main Content Container with Z-index to be above glows -->
  <div class="relative z-10 container mx-auto px-4 py-8 md:py-12 lg:py-16">

    <!-- Header -->
    <header class="flex flex-col md:flex-row justify-between items-center mb-8 md:mb-12 border-b-2 border-gray-700 pb-4">
      <h1 class="text-4xl lg:text-5xl font-extrabold tracking-in-contract text-gray-100 drop-shadow-lg [text-shadow:_0_0_10px_rgb(255_255_255_/_0.5),_0_0_20px_rgb(255_255_255_/_0.3)] mb-4 md:mb-0">
        NEON NEXUS
      </h1>
      <nav class="flex space-x-6 text-gray-400 text-lg">
        <a href="#" class="relative group hover:text-gray-100 transition-colors duration-300">
          Home
          <span class="absolute bottom-0 left-0 w-full h-0.5 bg-gray-500 dark:bg-gray-400 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left glow-line"></span>
        </a>
        <a href="#" class="relative group hover:text-gray-100 transition-colors duration-300">
          Games
          <span class="absolute bottom-0 left-0 w-full h-0.5 bg-gray-500 dark:bg-gray-400 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left glow-line"></span>
        </a>
        <a href="#" class="relative group hover:text-gray-100 transition-colors duration-300">
          Community
          <span class="absolute bottom-0 left-0 w-full h-0.5 bg-gray-500 dark:bg-gray-400 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left glow-line"></span>
        </a>
        <a href="#" class="relative group hover:text-gray-100 transition-colors duration-300">
          Profile
          <span class="absolute bottom-0 left-0 w-full h-0.5 bg-gray-500 dark:bg-gray-400 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left glow-line"></span>
        </a>
      </nav>
    </header>

    <!-- Main Layout Grid -->
    <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">

      <!-- Left Sidebar (Player Info / Quick Menu) -->
      <aside class="lg:col-span-1 border border-gray-800 rounded-lg p-6 bg-gray-900/50 backdrop-blur-sm glow-border">
        <div class="flex flex-col items-center mb-6">
          <img class="w-24 h-24 rounded-full border-2 border-gray-700 p-1 mb-4 glow-avatar" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Player Avatar">
          <h3 class="text-2xl font-bold text-gray-100 glow-text">GamerTagX</h3>
          <span class="text-sm text-gray-400">Level 99 - Elite</span>
        </div>
        <ul class="space-y-4 text-gray-300">
          <li class="hover:text-gray-100 transition-colors duration-300">
            <a href="#" class="block p-2 rounded-md hover:bg-gray-800/70 glow-item flex items-center">
              <svg class="w-6 h-6 mr-2 glow-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h4l-1-1 1-6M7 10h10a2 2 0 012 2v8a2 2 0 01-2 2H7a2 2 0 01-2-2v-8a2 2 0 012-2z"></path></svg>
              My Library
            </a>
          </li>
          <li class="hover:text-gray-100 transition-colors duration-300">
            <a href="#" class="block p-2 rounded-md hover:bg-gray-800/70 glow-item flex items-center">
              <svg class="w-6 h-6 mr-2 glow-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
              Chat Rooms
            </a>
          </li>
          <li class="hover:text-gray-100 transition-colors duration-300">
            <a href="#" class="block p-2 rounded-md hover:bg-gray-800/70 glow-item flex items-center">
              <svg class="w-6 h-6 mr-2 glow-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
              Settings
            </a>
          </li>
        </ul>
        <button class="mt-8 w-full py-3 border border-gray-700 bg-gray-800/50 text-gray-200 rounded-md hover:bg-gray-700/70 transition-colors duration-300 glow-button">
          Logout
        </button>
      </aside>

      <!-- Main Content Area (Featured Games / News) -->
      <main class="lg:col-span-2 space-y-8">

        <!-- Featured Game Carousel (Simplified) -->
        <section class="border border-gray-800 rounded-lg p-6 bg-gray-900/50 backdrop-blur-sm glow-border">
          <h2 class="text-3xl font-bold mb-6 text-gray-100 glow-text">Featured Warzone</h2>
          <div class="relative w-full h-64 md:h-80 rounded-md overflow-hidden border border-gray-700 glow-inset">
            <img class="w-full h-full object-cover object-center " src="https://picsum.photos/1200/600?random=1" alt="Featured Game 1">
            <div class="absolute inset-0 bg-gradient-to-t from-gray-950 to-transparent flex items-end p-6">
              <h3 class="text-2xl font-bold text-gray-50 glow-text drop-shadow-md">CYBERPUNK ARENA 2077</h3>
              <button class="absolute bottom-6 right-6 px-5 py-2 bg-gray-700/70 border border-gray-600 text-gray-50 rounded-md hover:bg-gray-600/90 transition-all duration-300 glow-button-play">
                Play Now
              </button>
            </div>
          </div>
          <div class="flex justify-center mt-4 space-x-2">
            <span class="block w-3 h-3 rounded-full bg-gray-600 glow-dot-active"></span>
            <span class="block w-3 h-3 rounded-full bg-gray-800 glow-dot"></span>
            <span class="block w-3 h-3 rounded-full bg-gray-800 glow-dot"></span>
          </div>
        </section>

        <!-- Latest News/Updates -->
        <section class="border border-gray-800 rounded-lg p-6 bg-gray-900/50 backdrop-blur-sm glow-border">
          <h2 class="text-3xl font-bold mb-6 text-gray-100 glow-text">Latest Intel & Updates</h2>
          <div class="space-y-6">
            <article class="flex flex-col md:flex-row bg-gray-900/70 p-4 rounded-md border border-gray-800 hover:border-gray-700 glow-card">
              <img class="w-full md:w-32 h-32 object-cover rounded-md mr-4 mb-4 md:mb-0 glow-image-border" src="https://picsum.photos/300/200?random=2" alt="News Item 1">
              <div>
                <h3 class="text-xl font-bold text-gray-100 mb-2 glow-text">Patch 1.0.5 'Phantom Echoes' Released!</h3>
                <p class="text-gray-400 text-sm">Major balance changes for all classes, new map 'The Void', and enhanced anti-cheat measures. Download now!</p>
                <a href="#" class="text-gray-500 hover:text-gray-300 text-sm mt-2 block glow-link">Read More &rarr;</a>
              </div>
            </article>
            <article class="flex flex-col md:flex-row bg-gray-900/70 p-4 rounded-md border border-gray-800 hover:border-gray-700 glow-card">
              <img class="w-full md:w-32 h-32 object-cover rounded-md mr-4 mb-4 md:mb-0 glow-image-border" src="https://picsum.photos/300/200?random=3" alt="News Item 2">
              <div>
                <h3 class="text-xl font-bold text-gray-100 mb-2 glow-text">Community Tournament Sign-ups Open</h3>
                <p class="text-gray-400 text-sm">Compete for glory and exclusive in-game rewards! Register your team before April 30th.</p>
                <a href="#" class="text-gray-500 hover:text-gray-300 text-sm mt-2 block glow-link">Sign Up &rarr;</a>
              </div>
            </article>
          </div>
        </section>

      </main>

      <!-- Right Sidebar (Live Stream / Friends List) -->
      <aside class="lg:col-span-1 space-y-8 flex flex-col">

        <!-- Live Stream Widget -->
        <section class="border border-gray-800 rounded-lg p-6 bg-gray-900/50 backdrop-blur-sm glow-border flex-grow">
          <h2 class="text-2xl font-bold mb-4 text-gray-100 glow-text">Live Missions</h2>
          <div class="relative w-full aspect-video rounded-md overflow-hidden border border-gray-700 mb-4 glow-inset">
            <img class="w-full h-full object-cover" src="https://picsum.photos/400/225?random=4" alt="Live Stream Placeholder">
            <div class="absolute top-2 left-2 bg-red-600 text-gray-50 text-xs px-2 py-1 rounded glow-live">LIVE</div>
            <div class="absolute inset-0 bg-gradient-to-t from-gray-950/70 to-transparent flex items-end p-3">
              <span class="text-xs text-gray-300 drop-shadow-sm">@StreamerProX <span class="text-gray-500">(1.2K Viewers)</span></span>
            </div>
          </div>
          <p class="text-gray-400 text-sm mb-4">'Conquering the Wasteland' - Join me for an epic solo run!</p>
          <button class="w-full py-2 bg-gray-700/70 border border-gray-600 text-gray-50 rounded-md hover:bg-gray-600/90 transition-all duration-300 glow-button">
            Watch Stream
          </button>
        </section>

        <!-- Friends Online List -->
        <section class="border border-gray-800 rounded-lg p-6 bg-gray-900/50 backdrop-blur-sm glow-border">
          <h2 class="text-2xl font-bold mb-4 text-gray-100 glow-text">Squad Online [<span class="text-green-500 drop-shadow-md [text-shadow:_0_0_5px_rgb(34_197_94_/_0.7)]">3</span>]</h2>
          <ul class="space-y-3">
            <li class="flex items-center text-gray-300">
              <img class="w-10 h-10 rounded-full border-2 border-green-500 p-0.5 mr-3 glow-avatar-online" src="https://randomuser.me/api/portraits/women/67.jpg" alt="Friend Avatar">
              <div>
                <span class="font-bold glow-text">Neo_Warrior</span>
                <span class="block text-xs text-gray-500">In-game: Cyberpunk Arena</span>
              </div>
            </li>
            <li class="flex items-center text-gray-300">
              <img class="w-10 h-10 rounded-full border-2 border-green-500 p-0.5 mr-3 glow-avatar-online" src="https://randomuser.me/api/portraits/men/22.jpg" alt="Friend Avatar">
              <div>
                <span class="font-bold glow-text">Byte_Crusher</span>
                <span class="block text-xs text-gray-500">Online, Idle</span>
              </div>
            </li>
            <li class="flex items-center text-gray-300">
              <img class="w-10 h-10 rounded-full border-2 border-green-500 p-0.5 mr-3 glow-avatar-online" src="https://randomuser.me/api/portraits/women/4.jpg" alt="Friend Avatar">
              <div>
                <span class="font-bold glow-text">GhostlyGamer</span>
                <span class="block text-xs text-gray-500">In-game: Warzone Rifts</span>
              </div>
            </li>
            <li class="flex items-center text-gray-500 opacity-70">
              <img class="w-10 h-10 rounded-full border-2 border-gray-700 p-0.5 mr-3" src="https://randomuser.me/api/portraits/men/88.jpg" alt="Friend Avatar">
              <div>
                <span class="font-bold">Offline_Dude</span>
                <span class="block text-xs text-gray-600">Offline</span>
              </div>
            </li>
          </ul>
        </section>

      </aside>

    </div>

    <!-- Footer (simple) -->
    <footer class="mt-12 text-center text-gray-600 text-sm border-t-2 border-gray-800 pt-6">
      <p>&copy; 2077 Neon Nexus. All rights reserved. <span class="text-gray-700">[Powered by Cybernetic Code]</span></p>
    </footer>

  </div>

  <!-- Custom Tailwind CSS (for animations) -->
  <style>
    @keyframes pulse-slow {
      0%, 100% { transform: scale(1); opacity: 0.2; }
      50% { transform: scale(1.1); opacity: 0.35; }
    }

    @keyframes tracking-in-contract {
      0% {
        letter-spacing: 1em;
        opacity: 0;
      }
      40% {
        opacity: 0.6;
      }
      100% {
        letter-spacing: normal;
        opacity: 1;
      }
    }

    .animate-pulse-slow {
      animation: pulse-slow 6s ease-in-out infinite;
    }

    .animation-delay-2000 {
      animation-delay: 2s;
    }
    .animation-delay-4000 {
      animation-delay: 4s;
    }

    .tracking-in-contract {
      animation: tracking-in-contract 1.5s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
    }

    .glow-line {
      box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
    }

    .glow-border {
        box-shadow: 0 0 10px rgba(150, 150, 150, 0.15), 0 0 20px rgba(150, 150, 150, 0.05);
    }
    .dark .glow-border {
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.1), 0 0 20px rgba(255, 255, 255, 0.05);
    }

    .glow-item:hover {
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
        box-shadow: inset 0px 0px 10px rgba(255, 255, 255, 0.05);
    }
    .dark .glow-item:hover {
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
        box-shadow: inset 0px 0px 10px rgba(255, 255, 255, 0.08);
    }

    .glow-text {
      text-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
    }
    .dark .glow-text {
      text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
    }

    .glow-card:hover {
        box-shadow: 0 0 15px rgba(150, 150, 150, 0.2), 0 0 30px rgba(150, 150, 150, 0.1);
        transform: translateY(-2px);
    }
    .dark .glow-card:hover {
        box-shadow: 0 0 15px rgba(255, 255, 255, 0.15), 0 0 30px rgba(255, 255, 255, 0.08);
    }

    .glow-button {
        box-shadow: 0 0 8px rgba(150, 150, 150, 0.1), inset 0 0 5px rgba(255, 255, 255, 0.05);
    }
    .glow-button:hover {
        box-shadow: 0 0 15px rgba(150, 150, 150, 0.2), inset 0 0 10px rgba(255, 255, 255, 0.1);
        transform: translateY(-1px);
    }
    .dark .glow-button {
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.1), inset 0 0 5px rgba(255, 255, 255, 0.08);
    }
    .dark .glow-button:hover {
        box-shadow: 0 0 15px rgba(255, 255, 255, 0.2), inset 0 0 10px rgba(255, 255, 255, 0.15);
    }

    .glow-button-play {
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.0); /* softer initial glow for play button */
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
    .glow-button-play:hover {
        box-shadow: 0 0 15px rgba(255, 255, 255, 0.3), 0 0 30px rgba(255, 255, 255, 0.2);
        border-color: rgba(255, 255, 255, 0.4);
    }

    .glow-live {
        box-shadow: 0 0 8px rgba(255, 0, 0, 0.7);
    }

    .glow-avatar {
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
    }
    .dark .glow-avatar {
        box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
    }

    .glow-avatar-online {
        box-shadow: 0 0 8px rgba(34, 197, 94, 0.7);
    }

    .glow-dot-active {
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.7);
    }
    .dark .glow-dot-active {
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
    }

    .glow-dot {
        box-shadow: 0 0 3px rgba(255, 255, 255, 0.2);
    }
    .dark .glow-dot {
        box-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
    }

    .glow-inset {
        box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.1);
    }
    .dark .glow-inset {
        box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.2);
    }

    .glow-image-border {
        box-shadow: 0 0 5px rgba(255, 255, 255, 0.1);
    }
    .dark .glow-image-border {
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
    }

    .glow-link:hover {
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
    }

  </style>
</div>