すべてのコンポーネント

                <footer class="bg-gradient-to-r from-blue-900 to-blue-700 text-white py-12 dark:from-gray-950 dark:to-gray-800">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex flex-col md:flex-row items-center justify-between space-y-8 md:space-y-0">
      <!-- Logo / Brand Name -->
      <div class="flex-shrink-0">
        <a href="#" class="text-3xl font-bold tracking-tight text-white dark:text-blue-300 font-serif">
          Crypto<span class="text-blue-300 dark:text-blue-500">Ledger</span>
        </a>
      </div>

      <!-- Navigation Links -->
      <nav class="flex flex-wrap justify-center gap-x-8 gap-y-4 text-lg font-medium">
        <a href="#" class="hover:text-blue-200 transition-colors duration-300 dark:hover:text-blue-400">Home</a>
        <a href="#" class="hover:text-blue-200 transition-colors duration-300 dark:hover:text-blue-400">Products</a>
        <a href="#" class="hover:text-blue-200 transition-colors duration-300 dark:hover:text-blue-400">About Us</a>
        <a href="#" class="hover:text-blue-200 transition-colors duration-300 dark:hover:text-blue-400">Contact</a>
      </nav>

      <!-- Social Media Icons (simplified for a simple design) -->
      <div class="flex space-x-6">
        <a href="#" class="text-white hover:text-blue-200 transition-colors duration-300 dark:hover:text-blue-400">
          <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.502 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22C17.388 21.125 22 16.592 22 12z" clip-rule="evenodd" />
          </svg>
        </a>
        <a href="#" class="text-white hover:text-blue-200 transition-colors duration-300 dark:hover:text-blue-400">
          <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M8.29 20.31c9 0 13.92-7.46 13.92-13.97 0-.21-.01-.42-.01-.63A10.02 10.02 0 0024 4.31a9.91 9.91 0 01-2.88.79 4.96 4.96 0 002.16-2.77 9.87 9.87 0 01-3.13 1.19A4.95 4.95 0 0012.06 6.3c-4.99 0-9.05 4.06-9.05 9.06 0 .71.07 1.4.21 2.06A14.07 14.07 0 001.3 6.94a4.95 4.95 0 001.54 6.57A4.9 4.9 0 011.83 12v.06a4.96 4.96 0 003.97 4.86 4.92 4.92 0 01-1.78.07 4.96 4.96 0 004.62 3.44c-3.79 2.98-8.54 4.54-13.79 4.54-1.12 0-2.22-.07-3.29-.18C3.06 22.13 7.82 20.31 8.29 20.31z"/>
          </svg>
        </a>
      </div>
    </div>

    <div class="mt-8 pt-8 border-t border-blue-600 dark:border-gray-700 text-center text-sm text-blue-100 dark:text-gray-400">
      &copy; 2023 CryptoLedger. All rights reserved.
    </div>
  </div>
</footer>
              

                <div class="relative bg-gradient-to-br from-gray-900 to-black p-4 sm:p-8 md:p-12 min-h-screen flex items-center justify-center font-sans dark:from-zinc-950 dark:to-black">
  <div class="absolute inset-0 z-0 opacity-10 dark:opacity-5" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMTIwMCAxMjAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPGZpbHRlciBpZD0icGVyc2lzdGVudC1ub2lzZSI+CiAgICAgIDxmZXR1cmJ1bGVuY2UgdHlwZT0icGVyc2lzdGVudE5vaXNlIiBiYXNlRnJlcXVlbmNjeT0iLjgiIG51bU9jdGF2ZXM9IjMiIHNlZWQ9IjAiIHN0aXRjaFRpbGVzPSJub2lzdVBhZGRpbmciLz4KICAgICAgPGZlYXR1cmJ1bGVuY2UgdHlwZT0icGVyc2lzdGVudE5vaXNlIiBiYXNlRnJlcXVlbmNjeT0iLjE1IiBudW1PY3RhdmVzPSIxIiBzZWVkPSIxIiBzdGl0Y2hUaWxlcz0ibm9pc3VBZGRpbmciLz4KICAgICAgPGZlYXR1cmJ1bGVuY2UgdHlwZT0icGVyc2lzdGVudE5vaXNlIiBiYXNlRnJlcXVlbmNjeT0iLjA1IiBudW1PY3RhdmVzPSIxIiBzZWVkPSIzIiBzdGl0Y2hUaWxlcz0ibm9pc3VBZGRpbmciLz4KICAgIDwvZmlsdGVyPgogICAgPHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0icHVycGxlIiBmaWx0ZXI9InVybCgjcGVyc2lzdGVudC1ub2lzZSkiLz4KPC9zdmc+'); background-size: cover; background-repeat: no-repeat; mask-image: radial-gradient(circle at center, black 0%, transparent 70%);"></div>
  <div class="relative z-10 w-full max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-3 gap-8">

    <!-- Left Controls Panel (3D Effect) -->
    <div class="col-span-1 rounded-2xl p-6 lg:p-8 shadow-2xl flex flex-col gap-6
                bg-gradient-to-br from-[#1a1a2e] to-[#0f0f1d] border-b-2 border-l-2 border-[#8A2BE2] transform perspective-1000 rotate-x-6 rotate-y-2 translate-z-10
                hover:rotate-x-0 hover:rotate-y-0 hover:translate-z-0 transition-all duration-500 ease-in-out
                dark:from-[#08081a] dark:to-[#02020a] dark:border-[#FF1493]">

      <!-- Header -->
      <div class="flex items-center justify-between pb-4 border-b-2 border-dotted border-[#6A0DAD] dark:border-[#FF69B4]">
        <h2 class="text-2xl sm:text-3xl font-extrabold text-[#7FFFD4] dark:text-[#00FFFF] drop-shadow-lg [text-shadow:0_0_8px_#00FFFF]">GRID LOCATIONS</h2>
        <button class="p-2 rounded-full bg-[#39FF14] text-gray-900 shadow-lg glow-md hover:scale-110 active:scale-95 transition-all duration-300">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"></path></svg>
        </button>
      </div>

      <!-- Search Bar -->
      <div class="relative">
        <input type="text" placeholder="Search locations..." class="w-full p-3 pl-10 rounded-xl bg-[#0f0f1d] border border-[#39FF14] text-[#7FFFD4] placeholder-[#00FFFF] text-lg outline-none focus:ring-2 focus:ring-[#39FF14] transition-all duration-300 shadow-inner glow-sm-input
                  dark:bg-[#02020a] dark:border-[#FF69B4] dark:text-[#FF1493] dark:placeholder-[#FF1493]">
        <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-[#39FF14] dark:text-[#FF69B4]" fill="currentColor" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path></svg>
      </div>

      <!-- Location List -->
      <div class="overflow-y-auto flex-grow scrollbar-hide space-y-4 pr-1">

        <!-- Location Item -->
        <div class="p-4 rounded-xl bg-gradient-to-tr from-[#0f0f1d] to-[#1a1a2e] border-l-4 border-[#00FFFF] shadow-lg glow-sm transition-all duration-300 hover:scale-[1.02] cursor-pointer
                    dark:from-[#02020a] dark:to-[#08081a] dark:border-[#FF1493]">
          <h3 class="text-xl font-bold text-[#7FFFD4] dark:text-[#FFF] mb-1 drop-shadow-md">Cyber City Outpost</h3>
          <p class="text-sm text-[#AAAAAA] dark:text-[#CCC] opacity-80 mb-2">42 Neo-Tokyo St., Sector 7G</p>
          <div class="flex justify-between items-center">
            <span class="text-xs font-semibold text-[#39FF14] dark:text-[#FF69B4] glow-text">ONLINE</span>
            <div class="flex -space-x-1 overflow-hidden pointer-events-none">
              <img class="inline-block h-6 w-6 rounded-full ring-2 ring-[#00FFFF] dark:ring-[#FF1493] glow-sm-avatar" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
              <img class="inline-block h-6 w-6 rounded-full ring-2 ring-[#00FFFF] dark:ring-[#FF1493] glow-sm-avatar" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
              <img class="inline-block h-6 w-6 rounded-full ring-2 ring-[#00FFFF] dark:ring-[#FF1493] glow-sm-avatar" src="https://randomuser.me/api/portraits/men/21.jpg" alt="Avatar">
            </div>
          </div>
        </div>

        <div class="p-4 rounded-xl bg-gradient-to-tr from-[#0f0f1d] to-[#1a1a2e] border-l-4 border-[#8A2BE2] shadow-lg glow-sm transition-all duration-300 hover:scale-[1.02] cursor-pointer
                    dark:from-[#02020a] dark:to-[#08081a] dark:border-[#00FFFF]">
          <h3 class="text-xl font-bold text-[#7FFFD4] dark:text-[#FFF] mb-1 drop-shadow-md">Arcade Nebula Zone</h3>
          <p class="text-sm text-[#AAAAAA] dark:text-[#CCC] opacity-80 mb-2">Level 99, Metaverse Plaza</p>
          <div class="flex justify-between items-center">
            <span class="text-xs font-semibold text-[#FF1493] glow-text">OFFLINE</span>
            <div class="flex -space-x-1 overflow-hidden pointer-events-none">
              <img class="inline-block h-6 w-6 rounded-full ring-2 ring-[#8A2BE2] dark:ring-[#00FFFF] glow-sm-avatar" src="https://randomuser.me/api/portraits/women/5.jpg" alt="Avatar">
              <img class="inline-block h-6 w-6 rounded-full ring-2 ring-[#8A2BE2] dark:ring-[#00FFFF] glow-sm-avatar" src="https://randomuser.me/api/portraits/men/18.jpg" alt="Avatar">
            </div>
          </div>
        </div>

        <div class="p-4 rounded-xl bg-gradient-to-tr from-[#0f0f1d] to-[#1a1a2e] border-l-4 border-[#39FF14] shadow-lg glow-sm transition-all duration-300 hover:scale-[1.02] cursor-pointer
                    dark:from-[#02020a] dark:to-[#08081a] dark:border-[#FF69B4]">
          <h3 class="text-xl font-bold text-[#7FFFD4] dark:text-[#FFF] mb-1 drop-shadow-md">Quantum Data Hub</h3>
          <p class="text-sm text-[#AAAAAA] dark:text-[#CCC] opacity-80 mb-2">Cloud Layer Alpha-7</p>
          <div class="flex justify-between items-center">
            <span class="text-xs font-semibold text-[#7FFFD4] dark:text-[#FF1493] glow-text">ONLINE</span>
            <div class="flex -space-x-1 overflow-hidden pointer-events-none">
              <img class="inline-block h-6 w-6 rounded-full ring-2 ring-[#39FF14] dark:ring-[#FF69B4] glow-sm-avatar" src="https://randomuser.me/api/portraits/women/11.jpg" alt="Avatar">
              <img class="inline-block h-6 w-6 rounded-full ring-2 ring-[#39FF14] dark:ring-[#FF69B4] glow-sm-avatar" src="https://randomuser.me/api/portraits/men/9.jpg" alt="Avatar">
              <img class="inline-block h-6 w-6 rounded-full ring-2 ring-[#39FF14] dark:ring-[#FF69B4] glow-sm-avatar" src="https://randomuser.me/api/portraits/women/27.jpg" alt="Avatar">
              <img class="inline-block h-6 w-6 rounded-full ring-2 ring-[#39FF14] dark:ring-[#FF69B4] glow-sm-avatar" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
            </div>
          </div>
        </div>

      </div>

      <!-- Filters/Actions -->
      <div class="pt-4 border-t-2 border-dotted border-[#6A0DAD] dark:border-[#FF69B4]">
        <div class="flex justify-around items-center text-sm font-semibold text-[#7FFFD4] dark:text-[#00FFFF]">
          <button class="flex flex-col items-center p-2 rounded-lg hover:bg-[#1a1a2e] dark:hover:bg-[#08081a] glow-sm-btn transition-all duration-200">
            <svg class="w-6 h-6 mb-1 text-[#39FF14] dark:text-[#FF69B4]" fill="currentColor" viewBox="0 0 24 24"><path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"></path></svg>
            Filters
          </button>
          <button class="flex flex-col items-center p-2 rounded-lg hover:bg-[#1a1a2e] dark:hover:bg-[#08081a] glow-sm-btn transition-all duration-200">
            <svg class="w-6 h-6 mb-1 text-[#00FFFF] dark:text-[#FF1493]" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 14H9V8h2v8zm4 0h-2V8h2v8z"></path></svg>
            Status
          </button>
          <button class="flex flex-col items-center p-2 rounded-lg hover:bg-[#1a1a2e] dark:hover:bg-[#08081a] glow-sm-btn transition-all duration-200">
            <svg class="w-6 h-6 mb-1 text-[#8A2BE2] dark:text-[#00FFFF]" fill="currentColor" viewBox="0 0 24 24"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"></path></svg>
            Export
          </button>
        </div>
      </div>

    </div>

    <!-- Main Map (3D Effect) -->
    <div class="col-span-1 lg:col-span-2 rounded-2xl p-4 lg:p-6 shadow-2xl relative overflow-hidden flex items-center justify-center
                bg-gradient-to-br from-[#1a1a2e] to-[#0f0f1d] border-t-2 border-r-2 border-[#39FF14] transform perspective-1000 rotate-x-3 rotate-y-[-2deg] translate-z-10
                hover:rotate-x-0 hover:rotate-y-0 hover:translate-z-0 transition-all duration-500 ease-in-out
                dark:from-[#08081a] dark:to-[#02020a] dark:border-[#00FFFF]">
      <div class="absolute inset-0 bg-black opacity-30 dark:opacity-50 blur-lg pointer-events-none"></div>
      <div class="w-full h-full relative z-10 flex items-center justify-center p-2">
        <img src="https://picsum.photos/1200/800?random=1" alt="Placeholder Map" class="object-cover w-full h-full rounded-xl opacity-70 transform scale-10 hover:scale-105 transition-all duration-500 ease-out shadow-neon-map dark:shadow-neon-map-dark">

        <!-- Interactive Map Markers (Example) -->
        <div class="absolute top-1/4 left-1/4 transform -translate-x-1/2 -translate-y-1/2 flex items-center justify-center w-8 h-8 rounded-full bg-[#00FFFF] border-2 border-white glow-marker cursor-pointer hover:scale-125 transition-transform duration-300">
          <span class="text-xs font-bold text-gray-900">A</span>
        </div>
        <div class="absolute top-3/4 left-1/2 transform -translate-x-1/2 -translate-y-1/2 flex items-center justify-center w-8 h-8 rounded-full bg-[#39FF14] border-2 border-white glow-marker cursor-pointer hover:scale-125 transition-transform duration-300">
          <span class="text-xs font-bold text-gray-900">B</span>
        </div>
        <div class="absolute top-1/2 right-1/4 transform -translate-x-1/2 -translate-y-1/2 flex items-center justify-center w-8 h-8 rounded-full bg-[#FF1493] border-2 border-white glow-marker cursor-pointer hover:scale-125 transition-transform duration-300">
          <span class="text-xs font-bold text-gray-900">C</span>
        </div>

        <!-- Overlay grid for 3D effect -->
        <div class="absolute inset-0 pointer-events-none opacity-20" style="background-image: linear-gradient(0deg, transparent 24%, rgba(57, 255, 20, 0.1) 25%, rgba(57, 255, 20, 0.1) 26%, transparent 27%, transparent 74%, rgba(57, 255, 20, 0.1) 75%, rgba(57, 255, 20, 0.1) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(57, 255, 20, 0.1) 25%, rgba(57, 255, 20, 0.1) 26%, transparent 27%, transparent 74%, rgba(57, 255, 20, 0.1) 75%, rgba(57, 255, 20, 0.1) 76%, transparent 77%, transparent); background-size: 50px 50px;"></div>

      </div>

      <!-- Map Controls -->
      <div class="absolute bottom-4 right-4 flex flex-col gap-2 p-2 rounded-xl bg-gradient-to-t from-[#0f0f1d] to-[#1a1a2e] border border-[#00FFFF] shadow-xl glow-md
                  dark:from-[#02020a] dark:to-[#08081a] dark:border-[#FF1493]">
        <button class="flex items-center justify-center w-10 h-10 rounded-full bg-[#39FF14] text-gray-900 shadow-lg glow-md hover:scale-110 active:scale-95 transition-all duration-300">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path></svg>
        </button>
        <button class="flex items-center justify-center w-10 h-10 rounded-full bg-[#FF1493] text-gray-900 shadow-lg glow-md hover:scale-110 active:scale-95 transition-all duration-300">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M5 13h14v-2H5v2z"></path></svg>
        </button>
      </div>

      <!-- Animated Pulse effect (CSS only) -->
      <div class="absolute inset-0 pointer-events-none rounded-2xl" style="box-shadow: 0 0 100px 30px rgba(0,255,255,0.3) inset; opacity: 0.1; animation: pulse-glow-border 3s infinite alternate;"></div>
    </div>

  </div>
</div>

<!-- Custom Styles for 3D and Neon Effects (embed in <style> or a CSS file) -->
<style>
  /* Scrolbar hide */
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
  .scrollbar-hide { /* For IE, Edge and Firefox */
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  /* 3D Perspective + Rotation for Panels */
  .perspective-1000 {
    perspective: 1000px;
  }
  .rotate-x-6 {
    transform: rotateX(6deg);
  }
  .rotate-y-2 {
    transform: rotateY(2deg);
  }
  .rotate-y-\[-2deg\] {
    transform: rotateY(-2deg);
  }
  .translate-z-10 {
    transform: translateZ(10px);
  }

  /* Neon Glow Effects */
  .glow-md {
    box-shadow: 0 0 10px rgba(57, 255, 20, 0.7), 0 0 20px rgba(57, 255, 20, 0.5);
  }
  .dark .glow-md {
    box-shadow: 0 0 10px rgba(255, 20, 147, 0.7), 0 0 20px rgba(255, 20, 147, 0.5);
  }

  .glow-sm {
    box-shadow: 0 0 5px rgba(0, 255, 255, 0.8), 0 0 10px rgba(138, 43, 226, 0.6);
  }
  .dark .glow-sm {
    box-shadow: 0 0 5px rgba(255, 20, 147, 0.8), 0 0 10px rgba(0, 255, 255, 0.6);
  }

  .glow-sm-input {
    box-shadow: 0 0 8px rgba(57, 255, 20, 0.5);
  }
  .dark .glow-sm-input {
    box-shadow: 0 0 8px rgba(255, 105, 180, 0.5);
  }

  .glow-sm-btn {
    box-shadow: 0 0 5px rgba(0, 255, 255, 0.3);
  }
  .dark .glow-sm-btn {
    box-shadow: 0 0 5px rgba(255, 20, 147, 0.3);
  }

  .glow-sm-avatar {
    box-shadow: 0 0 8px rgba(0, 255, 255, 0.8);
  }
  .dark .glow-sm-avatar {
    box-shadow: 0 0 8px rgba(255, 20, 147, 0.8);
  }

  .glow-text {
    text-shadow: 0 0 5px rgba(57, 255, 20, 0.8), 0 0 10px rgba(57, 255, 20, 0.6);
  }
  .dark .glow-text {
    text-shadow: 0 0 5px rgba(255, 105, 180, 0.8), 0 0 10px rgba(255, 105, 180, 0.6);
  }

  /* Map specific glow */
  .shadow-neon-map {
    filter: drop-shadow(0 0 15px rgba(0, 255, 255, 0.7)) drop-shadow(0 0 30px rgba(138, 43, 226, 0.5));
  }
  .dark .shadow-neon-map-dark {
    filter: drop-shadow(0 0 15px rgba(255, 20, 147, 0.7)) drop-shadow(0 0 30px rgba(0, 255, 255, 0.5));
  }

  .glow-marker {
    box-shadow: 0 0 10px rgba(0, 255, 255, 1), 0 0 20px rgba(0, 255, 255, 0.8);
  }
  .glow-marker:nth-child(2) { /* Example different marker color */
    box-shadow: 0 0 10px rgba(57, 255, 20, 1), 0 0 20px rgba(57, 255, 20, 0.8);
  }
  .glow-marker:nth-child(3) { /* Example different marker color */
    box-shadow: 0 0 10px rgba(255, 20, 147, 1), 0 0 20px rgba(255, 20, 147, 0.8);
  }

  /* Pulse animation for the map border glow */
  @keyframes pulse-glow-border {
    0% { box-shadow: 0 0 100px 30px rgba(0,255,255,0.3) inset; opacity: 0.1; }
    50% { box-shadow: 0 0 120px 40px rgba(0,255,255,0.5) inset; opacity: 0.2; }
    100% { box-shadow: 0 0 100px 30px rgba(0,255,255,0.3) inset; opacity: 0.1; }
  }
  .dark @keyframes pulse-glow-border {
    0% { box-shadow: 0 0 100px 30px rgba(255,20,147,0.3) inset; opacity: 0.1; }
    50% { box-shadow: 0 0 120px 40px rgba(255,20,147,0.5) inset; opacity: 0.2; }
    100% { box-shadow: 0 0 100px 30px rgba(255,20,147,0.3) inset; opacity: 0.1; }
  }




  /* For responsiveness, adjust 3D transforms on smaller screens if needed */
  @media (max-width: 1023px) {
    .lg\:rotate-x-0 {
      transform: rotateX(0) !important;
    }
    .lg\:rotate-y-0 {
      transform: rotateY(0) !important;
    }
    .lg\:translate-z-0 {
      transform: translateZ(0) !important;
    }
    .lg\:col-span-2 {
      grid-column: span 1 / span 1 !important;
    }
  }
</style>
              

                <div class="font-sans p-4 sm:p-6 md:p-8 bg-blue-100 text-blue-900 dark:bg-blue-900 dark:text-blue-100 min-h-screen">
  <div class="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8 lg:gap-10">

    <!-- Media Card 1: Article/News -->
    <div class="bg-white dark:bg-blue-800 shadow-lg rounded-lg overflow-hidden border-b-4 border-l-4 border-yellow-500 dark:border-yellow-600 transition-all duration-300 hover:shadow-xl hover:scale-[1.01] flex flex-col">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/600/400?random=1" alt="Image of a modern building">
      <div class="p-5 flex-grow flex flex-col">
        <div class="uppercase text-xs font-semibold text-blue-600 dark:text-blue-300 mb-1 tracking-wider">Public Announcement</div>
        <h3 class="text-xl font-bold text-blue-900 dark:text-blue-100 mb-3">New Urban Development Project Initiated</h3>
        <p class="text-sm text-blue-700 dark:text-blue-200 leading-relaxed mb-4 flex-grow">
          Details on the city's latest initiative to enhance public spaces and infrastructure, focusing on sustainability and community engagement. Learn more about the planned phases and expected impacts.
        </p>
        <div class="flex items-center justify-between text-xs text-blue-500 dark:text-blue-300">
          <div class="flex items-center">
            <img class="w-8 h-8 rounded-full mr-2 border border-blue-400 dark:border-blue-600" src="https://randomuser.me/api/portraits/men/5.jpg" alt="Author Avatar">
            <span class="font-medium">John Doe</span>
          </div>
          <span>Oct 26, 2023</span>
        </div>
      </div>
      <div class="bg-blue-500 dark:bg-blue-700 p-4 border-t border-blue-400 dark:border-blue-600 flex justify-between items-center">
        <a href="#" class="text-white dark:text-blue-100 text-sm font-semibold uppercase hover:underline flex items-center">
          Read More
          <svg class="ml-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
        </a>
        <span class="text-yellow-200 dark:text-yellow-300 text-xs font-bold">GOV-INFO</span>
      </div>
    </div>

    <!-- Media Card 2: Video/Multimedia -->
    <div class="bg-white dark:bg-blue-800 shadow-lg rounded-lg overflow-hidden border-t-4 border-r-4 border-red-500 dark:border-red-600 transition-all duration-300 hover:shadow-xl hover:scale-[1.01] flex flex-col">
      <div class="relative w-full h-48 bg-gray-200 dark:bg-gray-700 flex items-center justify-center">
        <img class="absolute inset-0 w-full h-full object-cover" src="https://picsum.photos/600/400?random=2" alt="Thumbnail for a video presentation">
        <button class="absolute z-10 p-3 rounded-full bg-red-600 text-white dark:bg-red-700 transition-transform duration-200 hover:scale-110 focus:outline-none focus:ring-2 focus:ring-opacity-75 focus:ring-red-400">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
        </button>
        <div class="absolute bottom-2 right-2 bg-black bg-opacity-70 text-white text-xs px-2 py-1 rounded">3:45</div>
      </div>
      <div class="p-5 flex-grow flex flex-col">
        <div class="uppercase text-xs font-semibold text-blue-600 dark:text-blue-300 mb-1 tracking-wider">Video Report</div>
        <h3 class="text-xl font-bold text-blue-900 dark:text-blue-100 mb-3">Annual Public Service Review 2023</h3>
        <p class="text-sm text-blue-700 dark:text-blue-200 leading-relaxed mb-4 flex-grow">
          Watch the comprehensive review of public services over the past year, highlighting achievements, challenges, and future strategies. Includes interviews with key government officials.
        </p>
        <div class="flex items-center justify-between text-xs text-blue-500 dark:text-blue-300">
          <div class="flex items-center">
            <img class="w-8 h-8 rounded-full mr-2 border border-blue-400 dark:border-blue-600" src="https://randomuser.me/api/portraits/women/7.jpg" alt="Presenter Avatar">
            <span class="font-medium">Jane Smith</span>
          </div>
          <span>Nov 15, 2023</span>
        </div>
      </div>
      <div class="bg-red-500 dark:bg-red-700 p-4 border-t border-red-400 dark:border-red-600 flex justify-between items-center">
        <a href="#" class="text-white dark:text-red-100 text-sm font-semibold uppercase hover:underline flex items-center">
          Watch Now
          <svg class="ml-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
        </a>
        <span class="text-red-200 dark:text-red-300 text-xs font-bold">Official-Vid</span>
      </div>
    </div>

    <!-- Media Card 3: Document/Download -->
    <div class="bg-white dark:bg-blue-800 shadow-lg rounded-lg overflow-hidden border-b-4 border-r-4 border-green-500 dark:border-green-600 transition-all duration-300 hover:shadow-xl hover:scale-[1.01] flex flex-col">
      <div class="relative w-full h-48 bg-gray-100 dark:bg-gray-700 flex items-center justify-center p-4">
        <img class="w-32 h-32 object-contain filter grayscale invert dark:invert-0 brightness-150 dark:brightness-100" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/87/PDF_file_icon.svg/1200px-PDF_file_icon.svg.png" alt="PDF Document Icon">
        <div class="absolute bottom-2 right-2 bg-black bg-opacity-70 text-white text-xs px-2 py-1 rounded">1.2 MB</div>
      </div>
      <div class="p-5 flex-grow flex flex-col">
        <div class="uppercase text-xs font-semibold text-blue-600 dark:text-blue-300 mb-1 tracking-wider">Official Document</div>
        <h3 class="text-xl font-bold text-blue-900 dark:text-blue-100 mb-3">Public Safety Guidelines and Protocols</h3>
        <p class="text-sm text-blue-700 dark:text-blue-200 leading-relaxed mb-4 flex-grow">
          Download the latest official guidelines for public safety, emergency preparedness, and community response protocols. Essential information for all citizens.
        </p>
        <div class="flex items-center justify-between text-xs text-blue-500 dark:text-blue-300">
          <div class="flex items-center">
            <img class="w-8 h-8 rounded-full mr-2 border border-blue-400 dark:border-blue-600" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Department Lead Avatar">
            <span class="font-medium">Dept. of Safety</span>
          </div>
          <span>Oct 01, 2023</span>
        </div>
      </div>
      <div class="bg-green-500 dark:bg-green-700 p-4 border-t border-green-400 dark:border-green-600 flex justify-between items-center">
        <a href="#" class="text-white dark:text-green-100 text-sm font-semibold uppercase hover:underline flex items-center">
          Download PDF
          <svg class="ml-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L10 11.586l1.293-1.293a1 1 0 111.414 1.414l-2 2a1 1 0 01-1.414 0l-2-2a1 1 0 010-1.414zM10 3a1 1 0 011 1v7a1 1 0 11-2 0V4a1 1 0 011-1z" clip-rule="evenodd"></path></svg>
        </a>
        <span class="text-green-200 dark:text-green-300 text-xs font-bold">PDF-FORM</span>
      </div>
    </div>

  </div>
</div>
              

                <div class="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-purple-400 via-pink-500 to-red-500 dark:from-gray-900 dark:via-blue-900 dark:to-purple-900 transition-all duration-500 ease-in-out">
  <div class="w-full max-w-2xl bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden transform transition-all duration-700 ease-in-out hover:scale-[1.01] hover:shadow-3xl border-2 border-transparent dark:border-gray-700
              bg-gradient-to-br from-white via-white to-white
              dark:from-gray-800 dark:via-gray-800 dark:to-gray-800
              sm:hover:border-purple-300 sm:dark:hover:border-blue-500">

    <div class="relative p-8 md:p-12 text-center text-white
                bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500
                dark:from-gray-700 dark:via-gray-800 dark:to-gray-900
                transition-all duration-700 ease-in-out">
      <div class="absolute inset-0 bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600 opacity-20 dark:from-gray-600 dark:via-gray-700 dark:to-gray-800 transition-opacity duration-700 ease-in-out"></div>
      <h2 class="relative text-3xl md:text-4xl font-extrabold mb-2 leading-tight tracking-tight drop-shadow-lg">Sign Up for Our Service</h2>
      <p class="relative text-lg md:text-xl font-medium opacity-90">Unlock a world of possibilities.</p>
      <div class="absolute -bottom-4 left-1/2 transform -translate-x-1/2 w-24 h-2 rounded-full
                  bg-gradient-to-r from-yellow-300 via-green-400 to-blue-500
                  dark:from-cyan-400 dark:via-sky-500 dark:to-indigo-600 transition-all duration-700 ease-in-out"></div>
    </div>

    <form class="p-6 md:p-10 space-y-6 md:space-y-8">
      <!-- Full Name Field -->
      <div>
        <label for="full-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 transition-colors duration-300">Full Name</label>
        <input type="text" id="full-name" name="full-name" placeholder="John Doe"
               class="w-full px-4 py-3 rounded-lg border-2 border-gray-300 dark:border-gray-600
                      focus:outline-none focus:ring-4 focus:ring-opacity-50
                      focus:border-purple-500 focus:ring-purple-200
                      dark:bg-gray-700 dark:text-gray-200 dark:focus:border-blue-500 dark:focus:ring-blue-800
                      transition-all duration-300 ease-in-out placeholder-gray-400 dark:placeholder-gray-500">
      </div>

      <!-- Email Field -->
      <div>
        <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 transition-colors duration-300">Email Address</label>
        <input type="email" id="email" name="email" placeholder="[email protected]"
               class="w-full px-4 py-3 rounded-lg border-2 border-gray-300 dark:border-gray-600
                      focus:outline-none focus:ring-4 focus:ring-opacity-50
                      focus:border-pink-500 focus:ring-pink-200
                      dark:bg-gray-700 dark:text-gray-200 dark:focus:border-cyan-500 dark:focus:ring-cyan-800
                      transition-all duration-300 ease-in-out placeholder-gray-400 dark:placeholder-gray-500">
      </div>

      <!-- Password Field -->
      <div>
        <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 transition-colors duration-300">Password</label>
        <input type="password" id="password" name="password" placeholder="Minimum 8 characters"
               class="w-full px-4 py-3 rounded-lg border-2 border-gray-300 dark:border-gray-600
                      focus:outline-none focus:ring-4 focus:ring-opacity-50
                      focus:border-yellow-500 focus:ring-yellow-200
                      dark:bg-gray-700 dark:text-gray-200 dark:focus:border-green-500 dark:focus:ring-green-800
                      transition-all duration-300 ease-in-out placeholder-gray-400 dark:placeholder-gray-500">
      </div>

      <!-- Service Tier Selection (Radio Buttons) -->
      <div>
        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3 transition-colors duration-300">Choose Your Tier</label>
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <label class="flex items-center p-4 rounded-lg border-2 border-gray-300 dark:border-gray-600
                        cursor-pointer hover:border-blue-500 dark:hover:border-purple-500
                        transition-all duration-300 ease-in-out
                        has-[:checked]:bg-blue-50 has-[:checked]:border-blue-500 has-[:checked]:ring-1 has-[:checked]:ring-blue-500
                        dark:has-[:checked]:bg-gray-700 dark:has-[:checked]:border-purple-500 dark:has-[:checked]:ring-1 dark:has-[:checked]:ring-purple-500">
            <input type="radio" name="service-tier" value="basic" class="h-5 w-5 text-blue-600 dark:text-purple-600 border-gray-300 dark:border-gray-600 focus:ring-blue-500 dark:focus:ring-purple-500 transition-colors duration-300">
            <div class="ml-3">
              <span class="block text-sm font-medium text-gray-800 dark:text-gray-200">Basic</span>
              <span class="block text-xs text-gray-500 dark:text-gray-400">Essential features for new users.</span>
            </div>
          </label>
          <label class="flex items-center p-4 rounded-lg border-2 border-gray-300 dark:border-gray-600
                        cursor-pointer hover:border-teal-500 dark:hover:border-pink-500
                        transition-all duration-300 ease-in-out
                        has-[:checked]:bg-teal-50 has-[:checked]:border-teal-500 has-[:checked]:ring-1 has-[:checked]:ring-teal-500
                        dark:has-[:checked]:bg-gray-700 dark:has-[:checked]:border-pink-500 dark:has-[:checked]:ring-1 dark:has-[:checked]:ring-pink-500">
            <input type="radio" name="service-tier" value="premium" class="h-5 w-5 text-teal-600 dark:text-pink-600 border-gray-300 dark:border-gray-600 focus:ring-teal-500 dark:focus:ring-pink-500 transition-colors duration-300">
            <div class="ml-3">
              <span class="block text-sm font-medium text-gray-800 dark:text-gray-200">Premium</span>
              <span class="block text-xs text-gray-500 dark:text-gray-400">Advanced tools for growing teams.</span>
            </div>
          </label>
        </div>
      </div>

      <!-- Terms and Conditions Checkbox -->
      <div class="flex items-center">
        <input id="terms" name="terms" type="checkbox"
               class="h-5 w-5 rounded border-gray-300 text-purple-600 focus:ring-purple-500
                      dark:border-gray-600 dark:bg-gray-700 dark:text-indigo-600 dark:focus:ring-indigo-500
                      transition-colors duration-300">
        <label for="terms" class="ml-3 block text-sm text-gray-900 dark:text-gray-300 transition-colors duration-300">
          I agree to the
          <a href="#" class="font-medium text-purple-600 hover:text-purple-700 dark:text-indigo-500 dark:hover:text-indigo-600 transition-colors duration-300">Terms of Service</a>
          and
          <a href="#" class="font-medium text-purple-600 hover:text-purple-700 dark:text-indigo-500 dark:hover:text-indigo-600 transition-colors duration-300">Privacy Policy</a>.
        </label>
      </div>

      <!-- Submit Button -->
      <button type="submit"
              class="w-full flex justify-center py-3 px-6 rounded-lg
                     text-white font-semibold text-lg
                     bg-gradient-to-r from-green-500 via-blue-500 to-indigo-600
                     hover:from-green-600 hover:via-blue-600 hover:to-indigo-700
                     dark:from-cyan-600 dark:via-blue-600 dark:to-purple-700
                     dark:hover:from-cyan-700 dark:hover:via-blue-700 dark:hover:to-purple-800
                     focus:outline-none focus:ring-4 focus:ring-offset-2
                     focus:ring-green-300 dark:focus:ring-cyan-500
                     transform transition-all duration-300 ease-in-out hover:scale-105 active:scale-95 shadow-lg drop-shadow-md">
        Create Account
      </button>

      <!-- Login Link -->
      <p class="mt-6 text-center text-gray-600 dark:text-gray-400 transition-colors duration-300">
        Already have an account?
        <a href="#" class="font-medium text-blue-600 hover:text-blue-700 dark:text-sky-500 dark:hover:text-sky-600 transition-colors duration-300">Sign In</a>
      </p>
    </form>
  </div>
</div>
              

                <div class="p-4 sm:p-6 lg:p-8 bg-amber-100 dark:bg-zinc-900 border-4 border-amber-900 dark:border-lime-400 font-mono overflow-hidden">
  <div class="max-w-xs mx-auto bg-amber-50 dark:bg-stone-800 border-4 border-amber-900 dark:border-lime-400 shadow-lg dark:shadow-md dark:shadow-lime-600/50 transition-all duration-300 hover:shadow-xl dark:hover:shadow-lime-600/70 focus-within:ring-4 focus-within:ring-lime-600 focus-within:ring-offset-4 focus-within:ring-offset-amber-100 dark:focus-within:ring-offset-zinc-900 overflow-hidden">
    <div class="relative overflow-hidden aspect-w-16 aspect-h-9 sm:aspect-w-4 sm:aspect-h-3">
      <img src="https://picsum.photos/seed/agriculture/400/300" alt="Agricultural Product" class="w-full h-full object-cover object-center border-b-4 border-amber-900 dark:border-lime-400 group-hover:scale-105 transition-transform duration-300 ease-in-out">
      <div class="absolute top-0 right-0 p-2 bg-amber-900 dark:bg-lime-400 text-amber-50 dark:text-zinc-900 text-xs sm:text-sm font-bold border-l-4 border-b-4 border-amber-900 dark:border-lime-400 transform -translate-y-px translate-x-px">
        NEW
      </div>
    </div>
    <div class="p-4 sm:p-6 border-t-4 border-amber-900 dark:border-lime-400">
      <a href="#" class="block mt-2 mb-4 text-amber-900 dark:text-lime-400 text-xl sm:text-2xl font-extrabold uppercase leading-tight hover:underline focus:outline-none focus:ring-2 focus:ring-amber-900 dark:focus:ring-lime-400 focus:ring-offset-2 focus:ring-offset-amber-50 dark:focus:ring-offset-stone-800">
        Heirloom Seed Pack
      </a>
      <p class="text-stone-700 dark:text-stone-300 text-sm sm:text-base mb-4 line-clamp-2">
        Premium quality heirloom seeds for robust yields and sustainable farming.
      </p>
      <div class="flex items-baseline justify-between mb-6">
        <span class="text-2xl sm:text-3xl font-extrabold text-amber-900 dark:text-lime-400">
          $19.99
        </span>
        <span class="text-sm text-stone-500 dark:text-stone-400 line-through">
          $24.99
        </span>
      </div>
      <button class="w-full py-3 px-4 bg-amber-900 dark:bg-lime-400 text-amber-50 dark:text-zinc-900 text-lg sm:text-xl font-extrabold uppercase border-4 border-amber-900 dark:border-lime-400 whitespace-nowrap overflow-hidden text-ellipsis shadow-md dark:shadow-lg dark:shadow-lime-600/50 transition-colors duration-200 hover:bg-amber-800 dark:hover:bg-lime-500 focus:outline-none focus:ring-4 focus:ring-amber-900 dark:focus:ring-lime-400 focus:ring-offset-2 focus:ring-offset-amber-50 dark:focus:ring-offset-stone-800 active:border-amber-700 dark:active:border-lime-600">
        Add to Cart
      </button>
    </div>
  </div>
</div>
              

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <button class="relative overflow-hidden w-64 h-16 rounded-full shadow-lg backdrop-filter backdrop-blur-lg bg-white bg-opacity-20 border border-t-white border-l-white border-opacity-30 
                 dark:bg-gray-800 dark:bg-opacity-20 dark:border-white dark:border-opacity-10 
                 group transition-all duration-300 ease-in-out 
                 hover:shadow-xl hover:bg-opacity-30 hover:border-opacity-40 
                 dark:hover:bg-opacity-30 dark:hover:border-opacity-20">
    
    <span class="absolute inset-0 bg-gradient-to-br from-green-700 to-green-900 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out rounded-full"></span>
    
    <span class="relative z-10 flex items-center justify-center text-lg font-semibold text-gray-800 dark:text-gray-200 transition-colors duration-300 ease-in-out group-hover:text-white">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
      </svg>
      Add to Cart
    </span>
  </button>
</div>
              

                <div class="p-4 sm:p-6 md:p-8 bg-amber-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 min-h-screen font-sans">
  <div class="max-w-7xl mx-auto">
    <!-- Header -->
    <div class="flex flex-col sm:flex-row justify-between items-center mb-6 sm:mb-8 bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md">
      <h1 class="text-2xl sm:text-3xl font-bold text-amber-800 dark:text-amber-300 mb-2 sm:mb-0">Community Discussions</h1>
      <div class="flex items-center space-x-2">
        <button class="px-4 py-2 bg-amber-700 hover:bg-amber-800 dark:bg-amber-600 dark:hover:bg-amber-700 text-white rounded-md shadow-sm transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block mr-1" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd" />
          </svg>
          New Topic
        </button>
        <select class="border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-amber-500">
          <option>Sort by: Latest</option>
          <option>Sort by: Popular</option>
          <option>Sort by: Unanswered</option>
        </select>
      </div>
    </div>

    <!-- Main Content Grid -->
    <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">
      <!-- Categories/Topics Sidebar (md:col-span-1 for desktop) -->
      <aside class="md:col-span-1">
        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md mb-6">
          <h2 class="text-lg font-semibold text-amber-700 dark:text-amber-400 mb-4">Categories</h2>
          <ul class="space-y-2 text-gray-700 dark:text-gray-300">
            <li><a href="#" class="block px-3 py-2 rounded-md hover:bg-amber-100 dark:hover:bg-gray-700 transition duration-200">General Discussion</a></li>
            <li><a href="#" class="block px-3 py-2 rounded-md hover:bg-amber-100 dark:hover:bg-gray-700 transition duration-200">Course Q&A</a></li>
            <li><a href="#" class="block px-3 py-2 rounded-md hover:bg-amber-100 dark:hover:bg-gray-700 transition duration-200">Project Showcases</a></li>
            <li><a href="#" class="block px-3 py-2 rounded-md hover:bg-amber-100 dark:hover:bg-gray-700 transition duration-200">Study Groups</a></li>
            <li><a href="#" class="block px-3 py-2 rounded-md hover:bg-amber-100 dark:hover:bg-gray-700 transition duration-200">Announcements</a></li>
          </ul>
        </div>

        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md">
          <h2 class="text-lg font-semibold text-amber-700 dark:text-amber-400 mb-4">Popular Tags</h2>
          <div class="flex flex-wrap gap-2">
            <a href="#" class="inline-block bg-amber-100 dark:bg-gray-700 text-amber-800 dark:text-amber-300 text-xs px-3 py-1 rounded-full hover:bg-amber-200 dark:hover:bg-gray-600 transition">#Python</a>
            <a href="#" class="inline-block bg-amber-100 dark:bg-gray-700 text-amber-800 dark:text-amber-300 text-xs px-3 py-1 rounded-full hover:bg-amber-200 dark:hover:bg-gray-600 transition">#WebDev</a>
            <a href="#" class="inline-block bg-amber-100 dark:bg-gray-700 text-amber-800 dark:text-amber-300 text-xs px-3 py-1 rounded-full hover:bg-amber-200 dark:hover:bg-gray-600 transition">#DataScience</a>
            <a href="#" class="inline-block bg-amber-100 dark:bg-gray-700 text-amber-800 dark:text-amber-300 text-xs px-3 py-1 rounded-full hover:bg-amber-200 dark:hover:bg-gray-600 transition">#MachineLearning</a>
            <a href="#" class="inline-block bg-amber-100 dark:bg-gray-700 text-amber-800 dark:text-amber-300 text-xs px-3 py-1 rounded-full hover:bg-amber-200 dark:hover:bg-gray-600 transition">#Algorithms</a>
          </div>
        </div>
      </aside>

      <!-- Discussion Topics List (md:col-span-2 or 3 for desktop) -->
      <section class="md:col-span-2 lg:col-span-3 space-y-4">
        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md transition duration-300 hover:shadow-lg">
          <div class="flex items-center mb-2">
            <img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
            <div>
              <p class="text-sm font-medium text-gray-800 dark:text-gray-200">John Doe</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">Posted 2 hours ago in <span class="text-amber-700 dark:text-amber-400">Course Q&A</span></p>
            </div>
          </div>
          <h3 class="text-lg font-semibold text-amber-800 dark:text-amber-300 mb-2">Understanding Recursion in Python</h3>
          <p class="text-sm text-gray-700 dark:text-gray-300 mb-3 line-clamp-2">I'm struggling to grasp the concept of recursion. Can someone explain it with a simple example? Especially how the call stack works...</p>
          <div class="flex items-center justify-between text-xs text-gray-600 dark:text-gray-400">
            <div class="flex items-center space-x-3">
              <span class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" /></svg>15 Replies</span>
              <span class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" /></svg>230 Views</span>
            </div>
            <a href="#" class="text-amber-700 dark:text-amber-400 hover:underline">Read More</a>
          </div>
        </div>

        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md transition duration-300 hover:shadow-lg">
          <div class="flex items-center mb-2">
            <img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
            <div>
              <p class="text-sm font-medium text-gray-800 dark:text-gray-200">Jane Smith</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">Posted 5 hours ago in <span class="text-amber-700 dark:text-amber-400">Project Showcases</span></p>
            </div>
          </div>
          <h3 class="text-lg font-semibold text-amber-800 dark:text-amber-300 mb-2">My First Machine Learning Project: Predicting House Prices</h3>
          <p class="text-sm text-gray-700 dark:text-gray-300 mb-3 line-clamp-2">I just finished my first end-to-end ML project and wanted to share it with the community! Any feedback or suggestions would be greatly appreciated...</p>
          <div class="flex items-center justify-between text-xs text-gray-600 dark:text-gray-400">
            <div class="flex items-center space-x-3">
              <span class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" /></svg>28 Replies</span>
              <span class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" /></svg>480 Views</span>
            </div>
            <a href="#" class="text-amber-700 dark:text-amber-400 hover:underline">Read More</a>
          </div>
        </div>

        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md transition duration-300 hover:shadow-lg">
          <div class="flex items-center mb-2">
            <img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/21.jpg" alt="User Avatar">
            <div>
              <p class="text-sm font-medium text-gray-800 dark:text-gray-200">Emily White</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">Posted 1 day ago in <span class="text-amber-700 dark:text-amber-400">Study Groups</span></p>
            </div>
          </div>
          <h3 class="text-lg font-semibold text-amber-800 dark:text-amber-300 mb-2">Looking for Study Group for Advanced Algorithms</h3>
          <p class="text-sm text-gray-700 dark:text-gray-300 mb-3 line-clamp-2">Hi everyone, I'm taking the Advanced Algorithms course and would love to form a study group to go over concepts and practice problems...</p>
          <div class="flex items-center justify-between text-xs text-gray-600 dark:text-gray-400">
            <div class="flex items-center space-x-3">
              <span class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" /></svg>8 Replies</span>
              <span class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" /></svg>190 Views</span>
            </div>
            <a href="#" class="text-amber-700 dark:text-amber-400 hover:underline">Read More</a>
          </div>
        </div>

        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md transition duration-300 hover:shadow-lg">
          <div class="flex items-center mb-2">
            <img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
            <div>
              <p class="text-sm font-medium text-gray-800 dark:text-gray-200">Michael Brown</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">Posted 2 days ago in <span class="text-amber-700 dark:text-amber-400">General Discussion</span></p>
            </div>
          </div>
          <h3 class="text-lg font-semibold text-amber-800 dark:text-amber-300 mb-2">Best Resources for Learning React Hooks?</h3>
          <p class="text-sm text-gray-700 dark:text-gray-300 mb-3 line-clamp-2">I'm looking for recommendations on the best online resources, tutorials, or courses to learn React Hooks effectively. Any suggestions?</p>
          <div class="flex items-center justify-between text-xs text-gray-600 dark:text-gray-400">
            <div class="flex items-center space-x-3">
              <span class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" /></svg>20 Replies</span>
              <span class="flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" /></svg>350 Views</span>
            </div>
            <a href="#" class="text-amber-700 dark:text-amber-400 hover:underline">Read More</a>
          </div>
        </div>
      </section>
    </div>
  </div>
</div>
              

                <div class="fixed inset-0 z-50 flex items-center justify-center p-4">
  <!-- Backdrop -->
  <div class="fixed inset-0 bg-gray-900 bg-opacity-75 backdrop-blur-sm transition-opacity duration-300 ease-in-out dark:bg-black dark:bg-opacity-85"></div>

  <!-- Modal Content -->
  <div class="relative w-full max-w-xl md:max-w-3xl lg:max-w-4xl xl:max-w-5xl overflow-hidden rounded-2xl bg-gray-100 dark:bg-gray-900 shadow-xl border-2 border-transparent 
              bg-gradient-to-br from-purple-500/10 via-pink-500/10 to-blue-500/10
              dark:from-purple-800/20 dark:via-pink-800/20 dark:to-blue-800/20
              transform transition-all duration-300 ease-out sm:scale-100 sm:opacity-100
              ring-2 ring-offset-2 ring-offset-gray-100 ring-purple-500
              dark:ring-offset-gray-900 dark:ring-purple-700
              ">

    <div class="absolute inset-0 block md:hidden lg:block filter blur-3xl opacity-30 pointer-events-none">
        <div class="absolute top-0 left-1/4 h-24 w-24 rounded-full bg-pink-500 animate-pulse"></div>
        <div class="absolute bottom-0 right-1/4 h-24 w-24 rounded-full bg-blue-500 animate-pulse animation-delay-200"></div>
        <div class="absolute top-1/2 left-1/2 h-24 w-24 rounded-full bg-purple-500 animate-pulse animation-delay-400"></div>
    </div>

    <div class="relative flex flex-col p-6 sm:p-8 md:p-10 z-10">

      <!-- Modal Header -->
      <div class="flex items-start justify-between pb-4 sm:pb-6 border-b border-purple-500/30 dark:border-purple-700/30 mb-6">
        <div>
          <h2 class="text-2xl sm:text-3xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-pink-500 to-blue-500 dark:from-pink-400 dark:to-blue-400 leading-tight">
            Welcome to Our Platform
          </h2>
          <p class="mt-2 text-base text-gray-700 dark:text-gray-300 max-w-md">
            Unlock your potential with our cutting-edge business solutions. Join us today!
          </p>
        </div>
        <button type="button" class="p-2 rounded-full text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 focus:outline-none focus:ring-2 focus:ring-purple-500 transition-colors duration-200">
          <span class="sr-only">Close modal</span>
          <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>

      <!-- Modal Body - Grid Layout for content -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8">
        <div class="flex flex-col gap-4">
          <!-- Feature 1 -->
          <div class="p-4 rounded-xl shadow-inner bg-gradient-to-br from-purple-500/5 to-pink-500/5 dark:from-purple-800/10 dark:to-pink-800/10 border border-purple-500/10 dark:border-purple-700/10">
            <h3 class="text-lg font-semibold text-transparent bg-clip-text bg-gradient-to-r from-pink-400 to-yellow-400 dark:from-pink-300 dark:to-yellow-300 mb-2">Advanced Analytics</h3>
            <p class="text-gray-600 dark:text-gray-400 text-sm">Gain deep insights with our powerful, real-time data analysis tools.</p>
          </div>

          <!-- Feature 2 -->
          <div class="p-4 rounded-xl shadow-inner bg-gradient-to-br from-blue-500/5 to-green-500/5 dark:from-blue-800/10 dark:to-green-800/10 border border-blue-500/10 dark:border-blue-700/10">
            <h3 class="text-lg font-semibold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-green-400 dark:from-blue-300 dark:to-green-300 mb-2">Seamless Collaboration</h3>
            <p class="text-gray-600 dark:text-gray-400 text-sm">Connect and collaborate effortlessly with your team, anywhere, anytime.</p>
          </div>

          <!-- Testimonial/Quote -->
          <figure class="mt-4 p-4 rounded-xl shadow-lg bg-gradient-to-br from-gray-200/50 to-gray-50/50 dark:from-gray-800/50 dark:to-gray-900/50 border border-gray-300/30 dark:border-gray-700/30 relative overflow-hidden">
              <blockquote class="text-gray-700 dark:text-gray-300 italic relative z-10">
                  "This platform has revolutionized our workflow. The support and features are unparalleled!"
              </blockquote>
              <figcaption class="mt-4 flex items-center gap-3 relative z-10">
                  <img class="h-10 w-10 rounded-full object-cover ring-2 ring-pink-500/50 hover:ring-pink-400 transition-all duration-200" src="https://randomuser.me/api/portraits/women/6.jpg" alt="Customer Avatar">
                  <div>
                      <div class="font-semibold text-gray-800 dark:text-gray-200">Jane Doe</div>
                      <div class="text-sm text-gray-500 dark:text-gray-400">CEO, Tech Innovations</div>
                  </div>
              </figcaption>
              <div class="absolute inset-0 bg-gradient-to-br from-indigo-500/5 via-fuchsia-500/5 to-cyan-500/5 dark:from-indigo-800/5 dark:via-fuchsia-800/5 dark:to-cyan-800/5 blur-xl pointer-events-none"></div>
          </figure>

        </div>

        <!-- Contact Form / CTA Section -->
        <div class="flex flex-col gap-4">
          <form class="p-6 rounded-xl shadow-lg bg-gradient-to-br from-blue-500/5 to-purple-500/5 dark:from-blue-800/10 dark:to-purple-800/10 border border-blue-500/10 dark:border-blue-700/10">
            <h3 class="text-xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-400 dark:from-blue-300 dark:to-purple-300 mb-4">Request a Demo</h3>
            <div class="mb-4">
              <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Full Name</label>
              <input type="text" id="name" class="w-full p-3 rounded-lg border border-gray-300 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-200 dark:placeholder-gray-400 transition-all duration-200" placeholder="Your Name">
            </div>
            <div class="mb-4">
              <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Work Email</label>
              <input type="email" id="email" class="w-full p-3 rounded-lg border border-gray-300 focus:border-pink-500 focus:ring-1 focus:ring-pink-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-200 dark:placeholder-gray-400 transition-all duration-200" placeholder="[email protected]">
            </div>
            <div class="mb-6">
              <label for="message" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Message (Optional)</label>
              <textarea id="message" rows="3" class="w-full p-3 rounded-lg border border-gray-300 focus:border-green-500 focus:ring-1 focus:ring-green-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-200 dark:placeholder-gray-400 transition-all duration-200" placeholder="Tell us about your needs..."></textarea>
            </div>
            <button type="submit" class="w-full py-3 px-6 rounded-xl font-bold text-lg text-white 
                            bg-gradient-to-r from-pink-500 to-blue-500 hover:from-pink-600 hover:to-blue-600 
                            dark:from-pink-600 dark:to-blue-600 dark:hover:from-pink-700 dark:hover:to-blue-700 
                            shadow-lg transform hover:scale-105 transition-all duration-300 ease-out 
                            focus:outline-none focus:ring-4 focus:ring-pink-500/50 dark:focus:ring-pink-700/50">
              Submit Request
            </button>
          </form>

          <!-- Small image gallery/showcase -->
          <div class="mt-4 grid grid-cols-2 gap-4">
              <img src="https://picsum.photos/400/300?random=1" alt="Placeholder Image 1" class="rounded-lg shadow-md object-cover w-full h-32 hover:scale-105 transition-transform duration-200 border-2 border-purple-500/20 dark:border-purple-700/20">
              <img src="https://picsum.photos/400/300?random=2" alt="Placeholder Image 2" class="rounded-lg shadow-md object-cover w-full h-32 hover:scale-105 transition-transform duration-200 border-2 border-blue-500/20 dark:border-blue-700/20">
          </div>

        </div>
      </div>

      <!-- Modal Footer -->
      <div class="mt-8 flex justify-end pt-6 border-t border-blue-500/30 dark:border-blue-700/30">
        <button type="button" class="py-2 px-5 rounded-lg font-semibold text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100 
                        border border-transparent hover:border-gray-300 dark:hover:border-gray-700 
                        focus:outline-none focus:ring-2 focus:ring-purple-500 transition-all duration-200">
          Learn More
        </button>
        <button type="button" class="ml-4 py-2 px-5 rounded-lg font-semibold text-white 
                        bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 
                        dark:from-purple-600 dark:to-pink-600 dark:hover:from-purple-700 dark:hover:to-pink-700 
                        shadow-md transform hover:scale-105 transition-all duration-300 ease-out 
                        focus:outline-none focus:ring-4 focus:ring-purple-500/50 dark:focus:ring-purple-700/50">
          Get Started Now
        </button>
      </div>

    </div>
  </div>
</div>

<style>
/* Define keyframes for subtle pulsating gradient blobs */
@keyframes pulse {
  0% { transform: scale(1); opacity: 0.3; }
  50% { transform: scale(1.1); opacity: 0.5; }
  100% { transform: scale(1); opacity: 0.3; }
}

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

.animation-delay-200 {
    animation-delay: 0.2s;
}
.animation-delay-400 {
    animation-delay: 0.4s;
}
</style>
              

                <div class="flex flex-col h-full w-full max-w-lg mx-auto bg-warm-gray-900 border border-warm-gray-700 rounded-lg shadow-lg overflow-hidden dark:bg-zinc-900 dark:border-zinc-700 md:max-w-xl lg:max-w-2xl font-mono">

  <!-- Chat Header -->
  <div class="flex items-center justify-between p-4 bg-warm-gray-800 border-b border-warm-gray-600 dark:bg-zinc-800 dark:border-zinc-600">
    <div class="flex items-center space-x-3">
      <div class="w-3 h-3 rounded-full bg-lime-500 animate-pulse"></div>
      <h2 class="text-lg font-bold text-lime-400">System Chat</h2>
    </div>
    <div class="flex space-x-2">
      <button class="p-1 text-warm-gray-400 hover:text-lime-400 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-lime-600 rounded-md">
        <svg class="w-5 h-5" 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="M6 18L18 6M6 6l12 12"></path></svg>
      </button>
    </div>
  </div>

  <!-- Chat Messages Area -->
  <div class="flex-1 p-4 overflow-y-auto space-y-4 text-sm scrollbar-thin scrollbar-thumb-lime-600 scrollbar-track-warm-gray-700 dark:scrollbar-thumb-lime-700 dark:scrollbar-track-zinc-800">

    <!-- Incoming Message -->
    <div class="flex items-start">
      <img class="w-8 h-8 rounded-full border-2 border-lime-500 flex-shrink-0 mr-3" src="https://randomuser.me/api/portraits/men/7.jpg" alt="User Avatar">
      <div>
        <div class="flex items-baseline space-x-2 mb-1">
          <span class="font-semibold text-lime-400">Neo_Matrix</span>
          <span class="text-xs text-warm-gray-500">10:30 AM</span>
        </div>
        <div class="p-3 bg-warm-gray-700 text-warm-gray-200 rounded-br-lg rounded-tl-lg rounded-tr-lg shadow-md dark:bg-zinc-700 dark:text-zinc-200">
          Hey, anyone online for a quick data-stream?
        </div>
      </div>
    </div>

    <!-- Outgoing Message -->
    <div class="flex items-start justify-end">
      <div>
        <div class="flex items-baseline justify-end space-x-2 mb-1">
          <span class="text-xs text-warm-gray-500">10:31 AM</span>
          <span class="font-semibold text-lime-400">You</span>
        </div>
        <div class="p-3 bg-lime-700 text-white rounded-bl-lg rounded-tl-lg rounded-tr-lg shadow-md dark:bg-lime-800">
          Affirmative. Ready to link up.
        </div>
      </div>
      <img class="w-8 h-8 rounded-full border-2 border-lime-500 flex-shrink-0 ml-3" src="https://randomuser.me/api/portraits/women/12.jpg" alt="Your Avatar">
    </div>

    <!-- Incoming Message with Image -->
    <div class="flex items-start">
      <img class="w-8 h-8 rounded-full border-2 border-lime-500 flex-shrink-0 mr-3" src="https://randomuser.me/api/portraits/men/7.jpg" alt="User Avatar">
      <div>
        <div class="flex items-baseline space-x-2 mb-1">
          <span class="font-semibold text-lime-400">Neo_Matrix</span>
          <span class="text-xs text-warm-gray-500">10:35 AM</span>
        </div>
        <div class="p-3 bg-warm-gray-700 text-warm-gray-200 rounded-br-lg rounded-tl-lg rounded-tr-lg shadow-md dark:bg-zinc-700 dark:text-zinc-200">
          Check out this new system schematic.
          <img src="https://picsum.photos/400/250" alt="System Schematic" class="mt-2 w-full max-w-sm rounded-md border border-lime-600 object-cover">
        </div>
      </div>
    </div>

    <!-- Outgoing Message with longer text -->
    <div class="flex items-start justify-end">
        <div>
            <div class="flex items-baseline justify-end space-x-2 mb-1">
                <span class="text-xs text-warm-gray-500">10:40 AM</span>
                <span class="font-semibold text-lime-400">You</span>
            </div>
            <div class="p-3 bg-lime-700 text-white rounded-bl-lg rounded-tl-lg rounded-tr-lg shadow-md dark:bg-lime-800 max-w-xs md:max-w-sm">
                Intriguing. The flow seems optimized for neural processing. What's the projected efficiency gain on this version?
            </div>
        </div>
        <img class="w-8 h-8 rounded-full border-2 border-lime-500 flex-shrink-0 ml-3" src="https://randomuser.me/api/portraits/women/12.jpg" alt="Your Avatar">
    </div>

  </div>

  <!-- Chat Input Area -->
  <div class="flex items-center p-4 bg-warm-gray-800 border-t border-warm-gray-600 dark:bg-zinc-800 dark:border-zinc-600">
    <input type="text" placeholder="Type your message..." class="flex-1 p-3 bg-warm-gray-900 border border-warm-gray-600 rounded-lg text-warm-gray-100 placeholder-warm-gray-400 focus:outline-none focus:ring-2 focus:ring-lime-600 dark:bg-zinc-900 dark:border-zinc-600 dark:text-zinc-100 dark:placeholder-zinc-400">
    <button class="ml-3 p-3 bg-lime-600 text-white rounded-lg hover:bg-lime-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-lime-600 focus:ring-offset-2 focus:ring-offset-warm-gray-800 dark:focus:ring-offset-zinc-800">
      <svg class="w-5 h-5 -rotate-45" 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="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path></svg>
    </button>
  </div>
</div>

<style>
/* Custom scrollbar for better visual integration with Cyberpunk theme */
.scrollbar-thin {
  scrollbar-width: thin;
  scrollbar-color: var(--tw-lime-600) var(--tw-warm-gray-700);
}

.scrollbar-thin::-webkit-scrollbar {
  width: 8px;
}

.scrollbar-thin::-webkit-scrollbar-track {
  background: var(--tw-warm-gray-700);
  border-radius: 4px;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
  background-color: var(--tw-lime-600);
  border-radius: 4px;
  border: 2px solid var(--tw-warm-gray-700);
}

/* Dark mode adjustments for scrollbar */
.dark .scrollbar-thin {
  scrollbar-color: var(--tw-lime-700) var(--tw-zinc-800);
}

.dark .scrollbar-thin::-webkit-scrollbar-track {
  background: var(--tw-zinc-800);
}

.dark .scrollbar-thin::-webkit-scrollbar-thumb {
  background-color: var(--tw-lime-700);
  border: 2px solid var(--tw-zinc-800);
}

/* Define custom colors for better theming (optional, could be in tailwind config) */
:root {
  --tw-warm-gray-900: #1a1a1a;
  --tw-warm-gray-800: #262626;
  --tw-warm-gray-700: #3f3f3f;
  --tw-warm-gray-600: #525252;
  --tw-warm-gray-500: #737373;
  --tw-warm-gray-400: #a3a3a3;
  --tw-warm-gray-200: #e5e5e5;
  --tw-warm-gray-100: #f5f5f5;
  --tw-lime-500: #84cc16;
  --tw-lime-600: #65a30d;
  --tw-lime-700: #4d7c0f;
  --tw-lime-400: #a3e635;
}

/* Tailwind JIT or custom config can define these */
/* Example for dark mode zinc colors */
.dark {
  --tw-zinc-900: #18181b;
  --tw-zinc-800: #27272a;
  --tw-zinc-700: #3f3f46;
  --tw-zinc-600: #52525b;
  --tw-zinc-500: #71717a;
  --tw-zinc-400: #a1a1aa;
  --tw-zinc-200: #e4e4e7;
  --tw-zinc-100: #f4f4f5;
  --tw-lime-800: #3f6212;
  --tw-lime-700: #4d7c0f; /* Reusing for dark scrollbar thumb */
}

</style>
              

                <div class="min-h-screen bg-gray-50 flex items-center justify-center p-4 dark:bg-gray-950 font-sans">
  <div class="relative w-full max-w-md mx-auto bg-white rounded-xl shadow-2xl overflow-hidden transform transition-all duration-500 ease-in-out hover:scale-105
              dark:bg-gray-800 dark:shadow-purple-500/50 dark:hover:shadow-purple-400/70
              border border-transparent dark:border-purple-600/50">

    <!-- Glowing Border Effect (Simulated) -->
    <div class="absolute inset-0 rounded-xl pointer-events-none
                bg-gradient-to-br from-purple-400 via-pink-500 to-red-500 opacity-20 blur-xl dark:opacity-30">
    </div>
    <div class="absolute inset-0 rounded-xl pointer-events-none
                bg-gradient-to-br from-purple-500 via-pink-600 to-red-600 opacity-10 blur-lg dark:opacity-20">
    </div>

    <div class="relative p-6 sm:p-8 z-10">
      <div class="text-center mb-6">
        <h2 class="text-3xl sm:text-4xl font-extrabold text-gray-900 mb-2
                   dark:text-white dark:drop-shadow-[0_0_5px_rgba(255,0,255,0.7)]">
          Taste the Future
        </h2>
        <p class="text-sm sm:text-base text-gray-600 dark:text-gray-300 dark:drop-shadow-[0_0_2px_rgba(0,255,255,0.5)]">
          Your next favorite meal is just a click away.
        </p>
      </div>

      <div class="relative w-full h-48 sm:h-56 mb-6 rounded-lg overflow-hidden shadow-lg
                  border-2 border-violet-400 dark:border-pink-500
                  transform transition-all duration-300 ease-in-out hover:scale-[1.02]">
        <img src="https://picsum.photos/600/400?random=1" alt="Delicious Food" class="w-full h-full object-cover">
        <div class="absolute inset-0 bg-gradient-to-t from-gray-900/70 to-transparent flex items-end p-4">
          <p class="text-white text-lg font-bold drop-shadow-[0_0_5px_rgba(0,255,255,0.9)]">Today's Special</p>
        </div>
      </div>

      <p class="text-gray-700 leading-relaxed text-center mb-6 dark:text-gray-300">
        Explore a vibrant selection of dishes, crafted with passion and precision. From local delights to international cuisines, we bring the best to your doorstep.
      </p>

      <div class="flex flex-col sm:flex-row gap-4">
        <button class="flex-1 py-3 px-6 rounded-full text-lg font-semibold
                       bg-gradient-to-r from-purple-600 to-pink-600 text-white
                       shadow-lg hover:shadow-xl transition-all duration-300 ease-in-out transform hover:-translate-y-0.5
                       focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-pink-500/70
                       dark:from-purple-700 dark:to-pink-700 dark:shadow-purple-500/40 dark:hover:shadow-purple-400/60
                       relative overflow-hidden group">
          <span class="relative z-10">Order Now</span>
          <span class="absolute top-0 left-0 w-full h-full rounded-full bg-white opacity-0 blur group-hover:opacity-20 group-hover:animate-ping-slow"></span>
        </button>
        <button class="flex-1 py-3 px-6 rounded-full text-lg font-semibold
                       border-2 border-purple-500 text-purple-600
                       dark:border-pink-500 dark:text-pink-400
                       hover:bg-purple-50 hover:border-purple-600
                       dark:hover:bg-gray-700 dark:hover:border-pink-600
                       transition-all duration-300 ease-in-out transform hover:-translate-y-0.5
                       focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-pink-500/70">
          View Menu
        </button>
      </div>
    </div>
  </div>
</div>