Community-Forum-Komponente

<div class="min-h-screen bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 p-8 font-sans transition-colors duration-300">
  <div class="max-w-7xl mx-auto">
    <!-- Header -->
    <header class="flex items-center justify-between mb-8 p-6 bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800 rounded-2xl shadow-xl border border-gray-400 dark:border-gray-600 relative overflow-hidden">
      <div class="absolute inset-0 bg-noise opacity-5"></div>
      <h1 class="text-4xl font-extrabold text-gray-800 dark:text-gray-200 text-shadow-md z-10">Community Forum</h1>
      <div class="flex items-center space-x-4 z-10">
        <input type="text" placeholder="Search..." class="px-5 py-3 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 border border-gray-300 dark:border-gray-600 shadow-inner focus:outline-none focus:ring-2 focus:ring-gray-500 dark:focus:ring-gray-300 transition-all duration-200 placeholder-gray-500 dark:placeholder-gray-400 w-64">
        <button class="p-3 bg-gray-500 dark:bg-gray-600 rounded-full shadow-lg border border-gray-600 dark:border-gray-500 hover:bg-gray-600 dark:hover:bg-gray-500 transition-all duration-200 group relative overflow-hidden">
          <span class="block w-6 h-6 bg-center bg-no-repeat bg-contain icon-plus group-hover:rotate-90 transition-transform duration-300"></span>
          <div class="absolute inset-0 bg-noise opacity-10"></div>
        </button>
      </div>
    </header>

    <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
      <!-- Left Sidebar - Categories/Navigation -->
      <aside class="lg:col-span-1 p-6 bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800 rounded-2xl shadow-xl border border-gray-400 dark:border-gray-600 relative overflow-hidden animate-slide-in-left">
        <div class="absolute inset-0 bg-noise opacity-5"></div>
        <h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-gray-200 text-shadow-sm z-10">Categories</h2>
        <ul class="space-y-4 z-10">
          <li class="p-4 bg-gray-200 dark:bg-gray-700 rounded-xl shadow-md border border-gray-300 dark:border-gray-600 hover:bg-gray-300 dark:hover:bg-gray-600 transition-all duration-200 cursor-pointer flex items-center space-x-3 group">
            <span class="w-5 h-5 bg-center bg-no-repeat bg-contain icon-shopping-cart group-hover:scale-110 transition-transform duration-200"></span>
            <span class="text-gray-800 dark:text-gray-200 font-medium group-hover:underline">Product Support</span>
          </li>
          <li class="p-4 bg-gray-200 dark:bg-gray-700 rounded-xl shadow-md border border-gray-300 dark:border-gray-600 hover:bg-gray-300 dark:hover:bg-gray-600 transition-all duration-200 cursor-pointer flex items-center space-x-3 group">
            <span class="w-5 h-5 bg-center bg-no-repeat bg-contain icon-shipping group-hover:scale-110 transition-transform duration-200"></span>
            <span class="text-gray-800 dark:text-gray-200 font-medium group-hover:underline">Order & Shipping</span>
          </li>
          <li class="p-4 bg-gray-200 dark:bg-gray-700 rounded-xl shadow-md border border-gray-300 dark:border-gray-600 hover:bg-gray-300 dark:hover:bg-gray-600 transition-all duration-200 cursor-pointer flex items-center space-x-3 group">
            <span class="w-5 h-5 bg-center bg-no-repeat bg-contain icon-returns group-hover:scale-110 transition-transform duration-200"></span>
            <span class="text-gray-800 dark:text-gray-200 font-medium group-hover:underline">Returns & Refunds</span>
          </li>
          <li class="p-4 bg-gray-200 dark:bg-gray-700 rounded-xl shadow-md border border-gray-300 dark:border-gray-600 hover:bg-gray-300 dark:hover:bg-gray-600 transition-all duration-200 cursor-pointer flex items-center space-x-3 group">
            <span class="w-5 h-5 bg-center bg-no-repeat bg-contain icon-faq group-hover:scale-110 transition-transform duration-200"></span>
            <span class="text-gray-800 dark:text-gray-200 font-medium group-hover:underline">General Inquiries</span>
          </li>
        </ul>

        <div class="mt-8">
          <h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-gray-200 text-shadow-sm z-10">Popular Topics</h2>
          <ul class="space-y-3 z-10">
            <li class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-colors duration-200 cursor-pointer flex items-center space-x-2">
              <span class="w-4 h-4 bg-center bg-no-repeat bg-contain icon-fire"></span>
              <span>Troubleshooting your new gadget</span>
            </li>
            <li class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-colors duration-200 cursor-pointer flex items-center space-x-2">
              <span class="w-4 h-4 bg-center bg-no-repeat bg-contain icon-fire"></span>
              <span>What's the best delivery option?</span>
            </li>
            <li class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-colors duration-200 cursor-pointer flex items-center space-x-2">
              <span class="w-4 h-4 bg-center bg-no-repeat bg-contain icon-fire"></span>
              <span>Extended warranty details</span>
            </li>
          </ul>
        </div>
      </aside>

      <!-- Main Forum Content -->
      <main class="lg:col-span-3 space-y-8">
        <!-- Featured/Pinned Threads -->
        <section class="p-6 bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800 rounded-2xl shadow-xl border border-gray-400 dark:border-gray-600 relative overflow-hidden animate-fade-in-up">
          <div class="absolute inset-0 bg-noise opacity-5"></div>
          <h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-gray-200 text-shadow-sm z-10">Featured Discussions</h2>
          <div class="space-y-4 z-10">
            <div class="flex items-center justify-between p-4 bg-gray-200 dark:bg-gray-700 rounded-xl shadow-md border border-gray-300 dark:border-gray-600 hover:bg-gray-300 dark:hover:bg-gray-600 transition-all duration-200 cursor-pointer group">
              <div class="flex items-center space-x-4">
                <span class="w-6 h-6 bg-center bg-no-repeat bg-contain icon-pin transform group-hover:scale-110 transition-transform duration-200"></span>
                <div>
                  <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 group-hover:underline">Announcement: Holiday Shipping Deadlines 2024</h3>
                  <p class="text-sm text-gray-600 dark:text-gray-400">Posted by Admin on Nov 15, 2024</p>
                </div>
              </div>
              <div class="text-gray-700 dark:text-gray-300 flex items-center space-x-2">
                <span class="w-4 h-4 bg-center bg-no-repeat bg-contain icon-comment"></span>
                <span>120 replies</span>
              </div>
            </div>
            <div class="flex items-center justify-between p-4 bg-gray-200 dark:bg-gray-700 rounded-xl shadow-md border border-gray-300 dark:border-gray-600 hover:bg-gray-300 dark:hover:bg-gray-600 transition-all duration-200 cursor-pointer group">
              <div class="flex items-center space-x-4">
                <span class="w-6 h-6 bg-center bg-no-repeat bg-contain icon-pin transform group-hover:scale-110 transition-transform duration-200"></span>
                <div>
                  <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 group-hover:underline">New Product Line Q1 2025 Sneak Peek!</h3>
                  <p class="text-sm text-gray-600 dark:text-gray-400">Posted by Marketing Team on Dec 1, 2024</p>
                </div>
              </div>
              <div class="text-gray-700 dark:text-gray-300 flex items-center space-x-2">
                <span class="w-4 h-4 bg-center bg-no-repeat bg-contain icon-comment"></span>
                <span>250 replies</span>
              </div>
            </div>
          </div>
        </section>

        <!-- Recent Threads -->
        <section class="p-6 bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800 rounded-2xl shadow-xl border border-gray-400 dark:border-gray-600 relative overflow-hidden animate-fade-in-up delay-100">
          <div class="absolute inset-0 bg-noise opacity-5"></div>
          <h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-gray-200 text-shadow-sm z-10">Recent Activity</h2>
          <div class="space-y-4 z-10">
            <!-- Thread Item 1 -->
            <div class="p-5 bg-gray-200 dark:bg-gray-700 rounded-xl shadow-md border border-gray-300 dark:border-gray-600 hover:bg-gray-300 dark:hover:bg-gray-600 transition-all duration-200 group cursor-pointer flex flex-col sm:flex-row justify-between items-start sm:items-center space-y-4 sm:space-y-0 sm:space-x-4">
              <div class="flex items-start sm:items-center space-x-4">
                <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar" class="w-14 h-14 rounded-full border-2 border-gray-500 dark:border-gray-400 shadow-lg object-cover transform group-hover:scale-105 transition-transform duration-200">
                <div>
                  <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 group-hover:underline">Issue with my recent order - missing item</h3>
                  <p class="text-sm text-gray-600 dark:text-gray-400">by <span class="font-medium text-gray-700 dark:text-gray-300">JaneDoe</span> in <span class="font-medium text-gray-700 dark:text-gray-300">Order & Shipping</span></p>
                </div>
              </div>
              <div class="flex items-center space-x-4 text-gray-700 dark:text-gray-300">
                <div class="flex items-center space-x-1">
                  <span class="w-5 h-5 bg-center bg-no-repeat bg-contain icon-comment"></span>
                  <span>5 replies</span>
                </div>
                <div class="flex items-center space-x-1">
                  <span class="w-5 h-5 bg-center bg-no-repeat bg-contain icon-views"></span>
                  <span>120 views</span>
                </div>
                <span class="text-sm">2 hours ago</span>
              </div>
            </div>

            <!-- Thread Item 2 -->
            <div class="p-5 bg-gray-200 dark:bg-gray-700 rounded-xl shadow-md border border-gray-300 dark:border-gray-600 hover:bg-gray-300 dark:hover:bg-gray-600 transition-all duration-200 group cursor-pointer flex flex-col sm:flex-row justify-between items-start sm:items-center space-y-4 sm:space-y-0 sm:space-x-4">
              <div class="flex items-start sm:items-center space-x-4">
                <img src="https://randomuser.me/api/portraits/men/44.jpg" alt="User Avatar" class="w-14 h-14 rounded-full border-2 border-gray-500 dark:border-gray-400 shadow-lg object-cover transform group-hover:scale-105 transition-transform duration-200">
                <div>
                  <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 group-hover:underline">Question about product compatibility</h3>
                  <p class="text-sm text-gray-600 dark:text-gray-400">by <span class="font-medium text-gray-700 dark:text-gray-300">JohnDoh</span> in <span class="font-medium text-gray-700 dark:text-gray-300">Product Support</span></p>
                </div>
              </div>
              <div class="flex items-center space-x-4 text-gray-700 dark:text-gray-300">
                <div class="flex items-center space-x-1">
                  <span class="w-5 h-5 bg-center bg-no-repeat bg-contain icon-comment"></span>
                  <span>10 replies</span>
                </div>
                <div class="flex items-center space-x-1">
                  <span class="w-5 h-5 bg-center bg-no-repeat bg-contain icon-views"></span>
                  <span>250 views</span>
                </div>
                <span class="text-sm">1 day ago</span>
              </div>
            </div>

            <!-- Thread Item 3 -->
            <div class="p-5 bg-gray-200 dark:bg-gray-700 rounded-xl shadow-md border border-gray-300 dark:border-gray-600 hover:bg-gray-300 dark:hover:bg-gray-600 transition-all duration-200 group cursor-pointer flex flex-col sm:flex-row justify-between items-start sm:items-center space-y-4 sm:space-y-0 sm:space-x-4">
              <div class="flex items-start sm:items-center space-x-4">
                <img src="https://randomuser.me/api/portraits/lego/1.jpg" alt="User Avatar" class="w-14 h-14 rounded-full border-2 border-gray-500 dark:border-gray-400 shadow-lg object-cover transform group-hover:scale-105 transition-transform duration-200">
                <div>
                  <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 group-hover:underline">General feedback on website usability</h3>
                  <p class="text-sm text-gray-600 dark:text-gray-400">by <span class="font-medium text-gray-700 dark:text-gray-300">BotUser</span> in <span class="font-medium text-gray-700 dark:text-gray-300">General Inquiries</span></p>
                </div>
              </div>
              <div class="flex items-center space-x-4 text-gray-700 dark:text-gray-300">
                <div class="flex items-center space-x-1">
                  <span class="w-5 h-5 bg-center bg-no-repeat bg-contain icon-comment"></span>
                  <span>2 replies</span>
                </div>
                <div class="flex items-center space-x-1">
                  <span class="w-5 h-5 bg-center bg-no-repeat bg-contain icon-views"></span>
                  <span>50 views</span>
                </div>
                <span class="text-sm">3 days ago</span>
              </div>
            </div>
          </div>

          <!-- Pagination -->
          <div class="mt-8 flex justify-center space-x-4 z-10">
            <button class="px-6 py-3 bg-gray-400 dark:bg-gray-600 text-gray-900 dark:text-gray-100 rounded-full shadow-lg border border-gray-500 dark:border-gray-500 hover:bg-gray-500 dark:hover:bg-gray-500 transition-all duration-200 group relative overflow-hidden">
              <span class="absolute inset-0 bg-noise opacity-10"></span>
              <span class="z-10 relative">Previous</span>
            </button>
            <button class="px-6 py-3 bg-gray-600 dark:bg-gray-500 text-white dark:text-gray-900 rounded-full shadow-lg border border-gray-700 dark:border-gray-400 hover:bg-gray-700 dark:hover:bg-gray-400 transition-all duration-200 group relative overflow-hidden">
              <span class="absolute inset-0 bg-noise opacity-10"></span>
              <span class="z-10 relative">Next</span>
            </button>
          </div>
        </section>
      </main>
    </div>

    <!-- Footer -->
    <footer class="mt-12 p-6 bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800 rounded-2xl shadow-xl border border-gray-400 dark:border-gray-600 text-center text-gray-700 dark:text-gray-300 relative overflow-hidden animate-fade-in-up delay-200">
      <div class="absolute inset-0 bg-noise opacity-5"></div>
      <p class="z-10 relative">&copy; 2024 E-commerce Community Forum. All rights reserved.</p>
      <div class="flex justify-center space-x-4 mt-4 z-10 relative">
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:underline">Privacy Policy</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:underline">Terms of Service</a>
      </div>
    </footer>
  </div>
</div>

<style>
  /* Base styles for Skeuomorphism - mimic physical depth */
  .shadow-md { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08); }
  .shadow-lg { box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05); }
  .shadow-xl { box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1), 0 8px 10px rgba(0, 0, 0, 0.04); }
  .shadow-inner { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06); }
  .text-shadow-md { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); }
  .text-shadow-sm { text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); }

  /* Custom noise background for texture */
  .bg-noise {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB2aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZmlsdGVyIGlkPSJub2lzZSIgeD1