Cyberpunk Grid Layout 组件

<div class="min-h-screen bg-gray-950 dark:bg-black text-lime-400 dark:text-cyan-400 p-4 sm:p-8 font-mono">

  <!-- Grid Container -->
  <div class="max-w-6xl mx-auto grid md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">

    <!-- Header/Title Section (Spanning Columns) -->
    <div class="md:col-span-2 lg:col-span-3 mb-6">
      <h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-fuchsia-500 dark:text-fuchsia-400 
        tracking-tight leading-tight text-center sm:text-left drop-shadow-[0_0_8px_rgba(236,72,153,0.7)] dark:drop-shadow-[0_0_8px_rgba(236,72,153,0.5)]">
        // NEON NEXUS CONFERENCE <span class="text-lime-400 dark:text-cyan-400">2077</span>
      </h1>
      <p class="text-lg sm:text-xl text-gray-400 dark:text-gray-500 text-center sm:text-left mt-2 
        drop-shadow-[0_0_3px_rgba(163,230,53,0.3)] dark:drop-shadow-[0_0_3px_rgba(45,212,255,0.3)]">
        Unlocking the Future of Cybernetics & AI
      </p>
    </div>

    <!-- Grid Item 1 -->
    <div class="relative bg-gray-900 border border-fuchsia-600 dark:border-fuchsia-700 
      shadow-fuchsia-500/30 dark:shadow-fuchsia-700/20 shadow-lg p-6 rounded-lg overflow-hidden
      before:content-[''] before:absolute before:inset-0 before:blur-sm before:bg-fuchsia-500/10 dark:before:bg-fuchsia-700/10 
      before:animate-pulse before:duration-1000 before:z-0 transition-transform duration-300 hover:scale-[1.02] hover:shadow-2xl hover:shadow-fuchsia-500/50">
      <div class="relative z-10">
        <h2 class="text-2xl font-bold text-fuchsia-500 dark:text-fuchsia-400 mb-2 
          drop-shadow-[0_0_5px_rgba(236,72,153,0.7)] dark:drop-shadow-[0_0_5px_rgba(236,72,153,0.5)]">
          <span class="text-lime-400 dark:text-cyan-400">//</span> REGISTRATION OPEN
        </h2>
        <p class="text-base text-gray-300 dark:text-gray-400 mb-4">Secure your spot for the premier event of the digital age. Limited slots available.</p>
        <a href="#" class="inline-block bg-fuchsia-600 hover:bg-fuchsia-700 text-white font-semibold py-2 px-4 rounded-md 
          transition-colors duration-300 transform scale-100 hover:scale-[1.05] 
          shadow-inner shadow-fuchsia-400/50 dark:shadow-fuchsia-800/50 
          border border-fuchsia-400 dark:border-fuchsia-800">
          REGISTER NOW <span class="ml-1 text-xs">>>></span>
        </a>
      </div>
    </div>

    <!-- Grid Item 2 -->
    <div class="relative bg-gray-900 border border-lime-500 dark:border-cyan-600 
      shadow-lime-500/30 dark:shadow-cyan-700/20 shadow-lg p-6 rounded-lg overflow-hidden
      before:content-[''] before:absolute before:inset-0 before:blur-sm before:bg-lime-500/10 dark:before:bg-cyan-600/10 
      before:animate-pulse before:delay-200 before:duration-1000 before:z-0 transition-transform duration-300 hover:scale-[1.02] hover:shadow-2xl hover:shadow-lime-500/50 dark:hover:shadow-cyan-500/50">
      <div class="relative z-10">
        <h2 class="text-2xl font-bold text-lime-400 dark:text-cyan-400 mb-2 
          drop-shadow-[0_0_5px_rgba(163,230,53,0.7)] dark:drop-shadow-[0_0_5px_rgba(45,212,255,0.5)]">
          <span class="text-fuchsia-500 dark:text-fuchsia-400">//</span> MEET THE SPEAKERS
        </h2>
        <p class="text-base text-gray-300 dark:text-gray-400 mb-4">Visionaries and pioneers from the cutting edge of tech will share their insights.</p>
        <div class="flex -space-x-2 overflow-hidden mb-4">
          <img class="inline-block h-10 w-10 rounded-full ring-2 ring-lime-400 dark:ring-cyan-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Speaker 1">
          <img class="inline-block h-10 w-10 rounded-full ring-2 ring-lime-400 dark:ring-cyan-500" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Speaker 2">
          <img class="inline-block h-10 w-10 rounded-full ring-2 ring-lime-400 dark:ring-cyan-500" src="https://randomuser.me/api/portraits/men/50.jpg" alt="Speaker 3">
        </div>
        <a href="#" class="inline-block bg-lime-600 hover:bg-lime-700 text-gray-900 font-semibold py-2 px-4 rounded-md 
          transition-colors duration-300 transform scale-100 hover:scale-[1.05] 
          shadow-inner shadow-lime-400/50 dark:shadow-cyan-800/50 
          border border-lime-400 dark:border-cyan-800">
          VIEW ALL <span class="ml-1 text-xs">>>></span>
        </a>
      </div>
    </div>

    <!-- Grid Item 3 -->
    <div class="relative bg-gray-900 border border-cyan-500 dark:border-green-600 
      shadow-cyan-500/30 dark:shadow-green-700/20 shadow-lg p-6 rounded-lg overflow-hidden md:col-span-2 lg:col-span-1
      before:content-[''] before:absolute before:inset-0 before:blur-sm before:bg-cyan-500/10 dark:before:bg-green-600/10 
      before:animate-pulse before:delay-400 before:duration-1000 before:z-0 transition-transform duration-300 hover:scale-[1.02] hover:shadow-2xl hover:shadow-cyan-500/50 dark:hover:shadow-green-500/50">
      <div class="relative z-10">
        <h2 class="text-2xl font-bold text-cyan-400 dark:text-green-400 mb-2 
          drop-shadow-[0_0_5px_rgba(45,212,255,0.7)] dark:drop-shadow-[0_0_5px_rgba(74,222,128,0.5)]">
          <span class="text-fuchsia-500 dark:text-fuchsia-400">//</span> EVENT SCHEDULE
        </h2>
        <p class="text-base text-gray-300 dark:text-gray-400 mb-4">Don't miss a single byte! Plan your immersion into the future.</p>
        <ul class="list-none space-y-2 text-gray-200 dark:text-gray-300">
          <li class="flex items-center text-lime-300 dark:text-cyan-300"> <span class="mr-2 text-fuchsia-400 text-lg">&#8227;</span> Day 1: AI & Robotics Summit</li>
          <li class="flex items-center text-lime-300 dark:text-cyan-300"> <span class="mr-2 text-fuchsia-400 text-lg">&#8227;</span> Day 2: Cybernetics & Bio-Augmentation</li>
          <li class="flex items-center text-lime-300 dark:text-cyan-300"> <span class="mr-2 text-fuchsia-400 text-lg">&#8227;</span> Day 3: Future of Digital Society</li>
        </ul>
        <a href="#" class="inline-block mt-4 bg-cyan-600 hover:bg-cyan-700 text-gray-900 font-semibold py-2 px-4 rounded-md 
          transition-colors duration-300 transform scale-100 hover:scale-[1.05] 
          shadow-inner shadow-cyan-400/50 dark:shadow-green-800/50 
          border border-cyan-400 dark:border-green-800">
          FULL SCHEDULE <span class="ml-1 text-xs">>>></span>
        </a>
      </div>
    </div>
    
    <!-- Grid Item 4 (Image Placeholder) -->
    <div class="relative bg-gray-900 border border-fuchsia-600 dark:border-fuchsia-700 
      shadow-fuchsia-500/30 dark:shadow-fuchsia-700/20 shadow-lg rounded-lg overflow-hidden md:col-span-1 lg:col-span-1
      before:content-[''] before:absolute before:inset-0 before:blur-sm before:bg-fuchsia-500/10 dark:before:bg-fuchsia-700/10 
      before:animate-pulse before:delay-600 before:duration-1000 before:z-0 transition-transform duration-300 hover:scale-[1.02] hover:shadow-2xl hover:shadow-fuchsia-500/50">
      <div class="relative z-10">
        <img src="https://picsum.photos/600/400?random=1" alt="Cyberpunk Cityscape" class="w-full h-auto object-cover rounded-md border border-fuchsia-500 dark:border-fuchsia-700 shadow-xl shadow-fuchsia-500/20 dark:shadow-fuchsia-700/10">
        <div class="p-4">
          <p class="text-sm text-gray-400 dark:text-gray-500 text-center">Connect, learn, innovate. #NeonNexus</p>
        </div>
      </div>
    </div>

    <!-- Grid Item 5 (Contact/Location) -->
    <div class="relative bg-gray-900 border border-lime-500 dark:border-cyan-600 
      shadow-lime-500/30 dark:shadow-cyan-700/20 shadow-lg p-6 rounded-lg overflow-hidden md:col-span-1 lg:col-span-2
      before:content-[''] before:absolute before:inset-0 before:blur-sm before:bg-lime-500/10 dark:before:bg-cyan-600/10 
      before:animate-pulse before:delay-800 before:duration-1000 before:z-0 transition-transform duration-300 hover:scale-[1.02] hover:shadow-2xl hover:shadow-lime-500/50 dark:hover:shadow-cyan-500/50">
      <div class="relative z-10">
        <h2 class="text-2xl font-bold text-lime-400 dark:text-cyan-400 mb-2 
          drop-shadow-[0_0_5px_rgba(163,230,53,0.7)] dark:drop-shadow-[0_0_5px_rgba(45,212,255,0.5)]">
          <span class="text-fuchsia-500 dark:text-fuchsia-400">//</span> GHOST CITY LOCALE
        </h2>
        <p class="text-base text-gray-300 dark:text-gray-400 mb-4">Experience the future in the heart of Neo-Tokyo virtual district.</p>
        <ul class="list-none space-y-2 text-gray-200 dark:text-gray-300">
          <li class="flex items-center text-cyan-300 dark:text-green-300"><span class="mr-2 text-fuchsia-400 text-lg">&#8227;</span> Virtual Venue: 'The Glitch' - Sector 7</li>
          <li class="flex items-center text-cyan-300 dark:text-green-300"><span class="mr-2 text-fuchsia-400 text-lg">&#8227;</span> Dates: Nov 20-22, 2077</li>
          <li class="flex items-center text-cyan-300 dark:text-green-300"><span class="mr-2 text-fuchsia-400 text-lg">&#8227;</span> Contact: <a href="mailto:[email protected]" class="underline hover:text-white">[email protected]</a></li>
        </ul>
        <a href="#" class="inline-block mt-4 bg-lime-600 hover:bg-lime-700 text-gray-900 font-semibold py-2 px-4 rounded-md 
        transition-colors duration-300 transform scale-100 hover:scale-[1.05] 
        shadow-inner shadow-lime-400/50 dark:shadow-cyan-800/50 
        border border-lime-400 dark:border-cyan-800">
          GET DIRECTIONS <span class="ml-1 text-xs">>>></span>
        </a>
      </div>
    </div>

  </div>

  <!-- Footer (Optional) -->
  <footer class="mt-12 text-center text-gray-600 dark:text-gray-700 text-sm">
    <p>&copy; 2077 Neon Nexus. All Digital Rights Reserved.</p>
  </footer>

</div>