Componente del Foro de la Comunidad

<div class="p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans">
  <div class="max-w-6xl mx-auto bg-gray-200 dark:bg-gray-800 rounded-3xl shadow-xl border border-gray-300 dark:border-gray-700 p-6 sm:p-8 lg:p-10 transition-colors duration-300">

    <!-- Header -->
    <div class="mb-8 border-b border-gray-300 dark:border-gray-700 pb-4">
      <h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-gray-800 dark:text-gray-100 mb-2 drop-shadow-sm">
        <span class="text-gray-600 dark:text-gray-400">Public Forum</span> Discussion
      </h1>
      <p class="text-base sm:text-lg text-gray-600 dark:text-gray-400 leading-relaxed">
        Engage with your community, share ideas, and find answers.
      </p>
    </div>

    <!-- Main Content Grid -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">

      <!-- Left Sidebar: Forum Categories/Navigation -->
      <aside class="md:col-span-1">
        <div class="bg-gray-300 dark:bg-gray-700 rounded-2xl shadow-inner border border-gray-400 dark:border-gray-600 p-6 mb-8 transform-gpu perspective-1000">
          <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-5 pb-3 border-b border-gray-400 dark:border-gray-600 shadow-text-light dark:shadow-text-dark">
            Categories
          </h3>
          <nav class="space-y-4">
            <a href="#popular" class="flex items-center p-3 rounded-xl bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-700 shadow-md border border-gray-400 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:shadow-lg hover:translate-y-px active:shadow-inner active:translate-y-0 transition-all duration-200 group">
              <svg class="w-6 h-6 mr-3 text-gray-500 dark:text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-200" 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="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H2v-2a3 3 0 015.356-1.857M17 20v-2c0-.653-.16-1.283-.464-1.848m-.482-.696A7.902 7.902 0 0115 12c0-4.418-3.582-8-8-8S-.742 7.582 7 12c.091.247.199.489.317.727m-3.411 2.373a2.502 2.502 0 00-.776 1.761M12 19l4.5-4.5M12 19l-4.5-4.5M12 19v-6"></path></svg>
              <span class="font-medium text-gray-800 dark:text-gray-200">Popular Topics</span>
            </a>
            <a href="#local-issues" class="flex items-center p-3 rounded-xl bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-700 shadow-md border border-gray-400 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:shadow-lg hover:translate-y-px active:shadow-inner active:translate-y-0 transition-all duration-200 group">
              <svg class="w-6 h-6 mr-3 text-gray-500 dark:text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-200" 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="M17.657 16.727A8.999 8.999 0 017.009 6.002H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-1.727a9.001 9.001 0 01-.343-.45zM17 2v2M7 2v2M3 11h18"></path></svg>
              <span class="font-medium text-gray-800 dark:text-gray-200">Local Issues</span>
            </a>
            <a href="#public-services" class="flex items-center p-3 rounded-xl bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-700 shadow-md border border-gray-400 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:shadow-lg hover:translate-y-px active:shadow-inner active:translate-y-0 transition-all duration-200 group">
              <svg class="w-6 h-6 mr-3 text-gray-500 dark:text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M8.707 7.293a1 1 0 00-1.414 1.414L10.586 12H5a1 1 0 000 2h5.586l-3.293 3.293a1 1 0 101.414 1.414l5-5a1 1 0 000-1.414l-5-5z"></path></svg>
              <span class="font-medium text-gray-800 dark:text-gray-200">Public Services</span>
            </a>
            <a href="#feedback" class="flex items-center p-3 rounded-xl bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-700 shadow-md border border-gray-400 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:shadow-lg hover:translate-y-px active:shadow-inner active:translate-y-0 transition-all duration-200 group">
              <svg class="w-6 h-6 mr-3 text-gray-500 dark:text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-200" 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 12h10M7 16h10M4 6h16a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V8a2 2 0 012-2z"></path></svg>
              <span class="font-medium text-gray-800 dark:text-gray-200">Feedback & Suggestions</span>
            </a>
          </nav>
        </div>

        <!-- Search Bar -->
        <div class="bg-gray-300 dark:bg-gray-700 rounded-2xl shadow-inner border border-gray-400 dark:border-gray-600 p-6 transform-gpu perspective-1000">
          <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-5 pb-3 border-b border-gray-400 dark:border-gray-600 shadow-text-light dark:shadow-text-dark">
            Search Forum
          </h3>
          <div class="flex rounded-xl overflow-hidden shadow-md border border-gray-400 dark:border-gray-600">
            <input type="text" placeholder="Search discussions..." class="flex-grow p-3 bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 rounded-l-xl placeholder-gray-500 dark:placeholder-gray-400 transition-colors duration-200">
            <button class="p-3 bg-gradient-to-br from-gray-400 to-gray-500 dark:from-gray-600 dark:to-gray-700 text-white dark:text-gray-200 rounded-r-xl hover:from-gray-500 hover:to-gray-600 dark:hover:from-gray-700 dark:hover:to-gray-800 active:shadow-inner transition-all duration-200">
              <svg class="w-6 h-6" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
            </button>
          </div>
        </div>
      </aside>

      <!-- Right Content: Topic List -->
      <main class="md:col-span-2">
        <div class="bg-gray-300 dark:bg-gray-700 rounded-2xl shadow-inner border border-gray-400 dark:border-gray-600 p-6 transform-gpu perspective-1000">
          <div class="flex flex-col sm:flex-row justify-between items-center mb-5 pb-3 border-b border-gray-400 dark:border-gray-600 shadow-text-light dark:shadow-text-dark">
            <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4 sm:mb-0">Recent Discussions</h3>
            <button class="flex items-center px-5 py-2 rounded-xl bg-gradient-to-br from-blue-400 to-blue-500 dark:from-blue-600 dark:to-blue-700 text-white dark:text-gray-200 shadow-md hover:from-blue-500 hover:to-blue-600 dark:hover:from-blue-700 dark:hover:to-blue-800 active:shadow-inner active:translate-y-px transition-all duration-200">
              <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 Topic
            </button>
          </div>

          <div class="space-y-6">

            <!-- Topic Item 1 -->
            <article class="bg-gray-200 dark:bg-gray-800 rounded-xl shadow-md border border-gray-300 dark:border-gray-700 p-5 transition-transform duration-200 hover:scale-[1.01] transform-gpu perspective-1000 transform active:shadow-inner active:translate-y-0">
              <div class="flex items-start mb-3">
                <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-400 dark:border-gray-600 shadow-sm mr-4 flex-shrink-0">
                <div>
                  <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-100 leading-tight mb-1">
                    <a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">Proposal for New Community Garden Project</a>
                  </h4>
                  <p class="text-sm text-gray-600 dark:text-gray-400">
                    Posted by <span class="font-medium text-gray-700 dark:text-gray-300">Jane Doe</span> in <span class="text-blue-500 dark:text-blue-400">Local Issues</span> • 2 hours ago
                  </p>
                </div>
              </div>
              <p class="text-gray-700 dark:text-gray-300 mb-4 leading-relaxed line-clamp-2">
                We are proposing to create a new community garden on the vacant lot at 123 Main Street. This initiative aims to foster community spirit, enhance local biodiversity, and provide fresh produce for residents. We need your feedback and support to make this happen.
              </p>
              <div class="flex justify-between items-center text-sm text-gray-600 dark:text-gray-400">
                <div class="flex items-center space-x-4">
                  <span class="flex items-center"><svg class="w-4 h-4 mr-1 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4.746-1.391 12.025 12.025 0 005.139 1.488s1.651.52 3.607 0c.939-.244 1.761-.692 2.456-1.282A7.986 7.986 0 0018 10zm-11.414-.586a1 1 0 00-1.414 1.414L7.586 13 4.293 9.707a1 1 0 00-1.414 1.414l4 4a1 1 0 001.414 0l6-6a1 1 0 00-1.414-1.414L10 11.586l-2.586-2.586z" clip-rule="evenodd"></path></svg> 24 replies</span>
                  <span class="flex items-center"><svg class="w-4 h-4 mr-1 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7 4a3 3 0 016 0v1a3 3 0 11-6 0V4zm0 6a3 3 0 016 0v5a3 3 0 11-6 0v-5zm0 9a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd"></path></svg> 120 views</span>
                </div>
                <a href="#" class="text-blue-500 dark:text-blue-400 font-medium hover:underline">Read More</a>
              </div>
            </article>

            <!-- Topic Item 2 -->
            <article class="bg-gray-200 dark:bg-gray-800 rounded-xl shadow-md border border-gray-300 dark:border-gray-700 p-5 transition-transform duration-200 hover:scale-[1.01] transform-gpu perspective-1000 transform active:shadow-inner active:translate-y-0">
              <div class="flex items-start mb-3">
                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-400 dark:border-gray-600 shadow-sm mr-4 flex-shrink-0">
                <div>
                  <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-100 leading-tight mb-1">
                    <a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">Questions about new recycling program guidelines</a>
                  </h4>
                  <p class="text-sm text-gray-600 dark:text-gray-400">
                    Posted by <span class="font-medium text-gray-700 dark:text-gray-300">John Smith</span> in <span class="text-blue-500 dark:text-blue-400">Public Services</span> • 1 day ago
                  </p>
                </div>
              </div>
              <p class="text-gray-700 dark:text-gray-300 mb-4 leading-relaxed line-clamp-2">
                I'm having trouble understanding the new guidelines for the residential recycling program. Specifically, what can and cannot be placed in the blue bin regarding plastic containers? Is rinsing still required, and are plastic bags now accepted?
              </p>
              <div class="flex justify-between items-center text-sm text-gray-600 dark:text-gray-400">
                <div class="flex items-center space-x-4">
                  <span class="flex items-center"><svg class="w-4 h-4 mr-1 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4.746-1.391 12.025 12.025 0 005.139 1.488s1.651.52 3.607 0c.939-.244 1.761-.692 2.456-1.282A7.986 7.986 0 0018 10zm-11.414-.586a1 1 0 00-1.414 1.414L7.586 13 4.293 9.707a1 1 0 00-1.414 1.414l4 4a1 1 0 001.414 0l6-6a1 1 0 00-1.414-1.414L10 11.586l-2.586-2.586z" clip-rule="evenodd"></path></svg> 48 replies</span>
                  <span class="flex items-center"><svg class="w-4 h-4 mr-1 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7 4a3 3 0 016 0v1a3 3 0 11-6 0V4zm0 6a3 3 0 016 0v5a3 3 0 11-6 0v-5zm0 9a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd"></path></svg> 250 views</span>
                </div>
                <a href="#" class="text-blue-500 dark:text-blue-400 font-medium hover:underline">Read More</a>
              </div>
            </article>

            <!-- Topic Item 3 -->
            <article class="bg-gray-200 dark:bg-gray-800 rounded-xl shadow-md border border-gray-300 dark:border-gray-700 p-5 transition-transform duration-200 hover:scale-[1.01] transform-gpu perspective-1000 transform active:shadow-inner active:translate-y-0">
              <div class="flex items-start mb-3">
                <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-400 dark:border-gray-600 shadow-sm mr-4 flex-shrink-0">
                <div>
                  <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-100 leading-tight mb-1">
                    <a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">Feedback on City Park Renovation Plans</a>
                  </h4>
                  <p class="text-sm text-gray-600 dark:text-gray-400">
                    Posted by <span class="font-medium text-gray-700 dark:text-gray-300">Emily White</span> in <span class="text-blue-500 dark:text-blue-400">Feedback & Suggestions</span> • 3 days ago
                  </p>
                </div>
              </div>
              <p class="text-gray-700 dark:text-gray-300 mb-4 leading-relaxed line-clamp-2">
                I'd like to provide some feedback on the proposed city park renovation plans. While I appreciate the new playground, I'm concerned about the removal of natural green spaces. Could there be a balance to maintain some natural elements?
              </p>
              <div class="flex justify-between items-center text-sm text-gray-600 dark:text-gray-400">
                <div class="flex items-center space-x-4">
                  <span class="flex items-center"><svg class="w-4 h-4 mr-1 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4.746-1.391 12.025 12.025 0 005.139 1.488s1.651.52 3.607 0c.939-.244 1.761-.692 2.456-1.282A7.986 7.986 0 0018 10zm-11.414-.586a1 1 0 00-1.414 1.414L7.586 13 4.293 9.707a1 1 0 00-1.414 1.414l4 4a1 1 0 001.414 0l6-6a1 1 0 00-1.414-1.414L10 11.586l-2.586-2.586z" clip-rule="evenodd"></path></svg> 18 replies</span>
                  <span class="flex items-center"><svg class="w-4 h-4 mr-1 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7 4a3 3 0 016 0v1a3 3 0 11-6 0V4zm0 6a3 3 0 016 0v5a3 3 0 11-6 0v-5zm0 9a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd"></path></svg> 98 views</span>
                </div>
                <a href="#" class="text-blue-500 dark:text-blue-400 font-medium hover:underline">Read More</a>
              </div>
            </article>

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

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