Componente del Foro de la Comunidad

<div class="font-sans bg-gray-950 text-gray-100 dark:bg-black p-4 sm:p-6 lg:p-8 rounded-lg shadow-lg border border-purple-800 dark:border-pink-700 max-w-4xl mx-auto neon-shadow">
  <h2 class="text-2xl sm:text-3xl font-bold text-teal-400 dark:text-lime-400 mb-6 text-center tracking-wide uppercase leading-tight">
    <span class="block">CYBERPUNK CONCLAVE</span>
    <span class="block text-lg text-purple-400 dark:text-pink-400">// REAL ESTATE MATRIX //</span>
  </h2>

  <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
    <div class="bg-opacity-20 bg-blue-700 dark:bg-purple-700 p-4 rounded-md border border-b-2 border-blue-500 dark:border-purple-500 hover:border-blue-300 dark:hover:border-purple-300 transition-colors duration-300">
      <h3 class="text-xl font-semibold text-blue-300 dark:text-purple-300 mb-2 ">Discussion Channels</h3>
      <ul class="space-y-2 text-sm">
        <li class="flex items-center text-gray-200 hover:text-teal-400 dark:hover:text-lime-400 transition-colors duration-200">
          <svg class="w-4 h-4 mr-2 text-cyan-400 dark:text-fuchsia-400" 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="M7 8h10M7 12h4m1.293 7.707A9 9 0 0110 21h4a9 9 0 00-9.707-16.707A9 9 0 007 8z"></path></svg>
          General Property Chatter
        </li>
        <li class="flex items-center text-gray-200 hover:text-teal-400 dark:hover:text-lime-400 transition-colors duration-200">
          <svg class="w-4 h-4 mr-2 text-cyan-400 dark:text-fuchsia-400" 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="M7 8h10M7 12h4m1.293 7.707A9 9 0 0110 21h4a9 9 0 00-9.707-16.707A9 9 0 007 8z"></path></svg>
          Investment Strategies
        </li>
        <li class="flex items-center text-gray-200 hover:text-teal-400 dark:hover:text-lime-400 transition-colors duration-200">
          <svg class="w-4 h-4 mr-2 text-cyan-400 dark:text-fuchsia-400" 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="M7 8h10M7 12h4m1.293 7.707A9 9 0 0110 21h4a9 9 0 00-9.707-16.707A9 9 0 007 8z"></path></svg>
          Market Trends & Predictions
        </li>
        <li class="flex items-center text-gray-200 hover:text-teal-400 dark:hover:text-lime-400 transition-colors duration-200">
          <svg class="w-4 h-4 mr-2 text-cyan-400 dark:text-fuchsia-400" 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="M7 8h10M7 12h4m1.293 7.707A9 9 0 0110 21h4a9 9 0 00-9.707-16.707A9 9 0 007 8z"></path></svg>
          Legal & Compliance
        </li>
      </ul>
    </div>

    <div class="bg-opacity-20 bg-purple-700 dark:bg-blue-700 p-4 rounded-md border border-b-2 border-purple-500 dark:border-blue-500 hover:border-purple-300 dark:hover:border-blue-300 transition-colors duration-300">
      <h3 class="text-xl font-semibold text-purple-300 dark:text-blue-300 mb-2">Featured Threads</h3>
      <ul class="space-y-3 text-sm">
        <li class="flex items-center text-gray-200">
          <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar" class="w-6 h-6 rounded-full mr-3 border border-pink-400 dark:border-lime-400">
          <a href="#" class="text-gray-100 hover:text-pink-400 dark:hover:text-lime-400 transition-colors duration-200">
            "Optimized Smart Homes of 2077" <span class="text-xs text-gray-400">by DataGhost</span>
          </a>
        </li>
        <li class="flex items-center text-gray-200">
          <img src="https://randomuser.me/api/portraits/women/62.jpg" alt="User Avatar" class="w-6 h-6 rounded-full mr-3 border border-pink-400 dark:border-lime-400">
          <a href="#" class="text-gray-100 hover:text-pink-400 dark:hover:text-lime-400 transition-colors duration-200">
            "Neo-Tokyo District Price Forecast" <span class="text-xs text-gray-400">by Synthia_X</span>
          </a>
        </li>
        <li class="flex items-center text-gray-200">
          <img src="https://randomuser.me/api/portraits/men/12.jpg" alt="User Avatar" class="w-6 h-6 rounded-full mr-3 border border-pink-400 dark:border-lime-400">
          <a href="#" class="text-gray-100 hover:text-pink-400 dark:hover:text-lime-400 transition-colors duration-200">
            "AI-Powered Property Management" <span class="text-xs text-gray-400">by CyberBroker</span>
          </a>
        </li>
      </ul>
    </div>
  </div>

  <div class="flex flex-col sm:flex-row justify-between items-center bg-opacity-20 bg-gray-700 dark:bg-gray-800 p-4 rounded-md border border-gray-600 dark:border-gray-700">
    <p class="mb-4 sm:mb-0 text-sm text-gray-300 dark:text-gray-400">
      <span class="text-teal-400 dark:text-lime-400">1,245 Members Active</span> // 42 New Posts Today
    </p>
    <button class="flex items-center px-6 py-2 bg-gradient-to-r from-blue-600 to-purple-600 dark:from-pink-600 dark:to-fuchsia-600 text-white rounded-full font-semibold 
                   shadow-lg hover:shadow-cyan-500/50 dark:hover:shadow-lime-500/50 transition-all duration-300 
                   transform hover:-translate-y-0.5 glow-button">
      <svg class="w-5 h-5 mr-2" 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 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
      NEW THREAD
    </button>
  </div>

  <style>
    /* This is for the 'neon-shadow' and 'glow-button' effects */
    .neon-shadow {
      box-shadow: 
        0 0 5px rgba(59, 130, 246, 0.7),
        0 0 10px rgba(168, 85, 247, 0.7),
        0 0 15px rgba(59, 130, 246, 0.5),
        0 0 20px rgba(168, 85, 247, 0.5);
    }

    .dark .neon-shadow {
      box-shadow: 
        0 0 5px rgba(236, 72, 153, 0.7),
        0 0 10px rgba(139, 92, 246, 0.7),
        0 0 15px rgba(236, 72, 153, 0.5),
        0 0 20px rgba(139, 92, 246, 0.5);
    }

    .glow-button {
      position: relative;
      overflow: hidden;
      z-index: 1;
    }

    .glow-button:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(45deg, rgba(59, 130, 246, 0.6) 0%, rgba(168, 85, 247, 0.6) 100%);
      mix-blend-mode: overlay;
      opacity: 0;
      transition: opacity 0.3s ease;
      z-index: -1;
    }

    .dark .glow-button:before {
      background: linear-gradient(45deg, rgba(236, 72, 153, 0.6) 0%, rgba(139, 92, 246, 0.6) 100%);
    }

    .glow-button:hover:before {
      opacity: 1;
    }

    .glow-button:active {
      transform: scale(0.98);
      box-shadow: none;
    }
  </style>
</div>