Community-Forum-Komponente

<div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-pink-100 via-purple-100 to-green-100 dark:from-gray-900 dark:via-purple-950 dark:to-teal-950 min-h-screen font-sans">
  <div class="max-w-7xl mx-auto bg-white dark:bg-gray-800 rounded-xl shadow-xl overflow-hidden">
    <header class="p-4 sm:p-6 bg-gradient-to-r from-pink-400 to-purple-500 dark:from-gray-900 dark:to-purple-900 text-white rounded-t-xl shadow-md">
      <h1 class="text-2xl sm:text-3xl font-extrabold tracking-tight mb-1">Finance Community Forum</h1>
      <p class="text-sm opacity-90">Connect, share, and learn about financial insights.</p>
    </header>

    <div class="flex flex-col md:flex-row gap-4 p-4 sm:p-6">
      <!-- Left Sidebar: Categories/Navigation -->
      <aside class="w-full md:w-1/4 bg-purple-50 dark:bg-gray-700 rounded-lg p-4 shadow-sm">
        <h2 class="text-lg sm:text-xl font-semibold text-purple-700 dark:text-purple-300 mb-4">Categories</h2>
        <nav>
          <ul class="space-y-3">
            <li>
              <a href="#" class="flex items-center gap-2 p-2 rounded-md hover:bg-purple-200 dark:hover:bg-gray-600 text-purple-800 dark:text-purple-200 font-medium transition-colors">
                <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="M9.75 17L9 20l-1 1h8l-1-1-1.25-3M15.75 17H18a2 2 0 002-2V7a2 2 0 00-2-2H6a2 2 0 00-2 2v8a2 2 0 002 2h2.25"/></svg>
                Investing Strategies
              </a>
            </li>
            <li>
              <a href="#" class="flex items-center gap-2 p-2 rounded-md bg-purple-200 dark:bg-purple-800 text-purple-900 dark:text-white font-semibold transition-colors">
                <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="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.592 1L21 9m-4.475-1.256l-6.223 3.597m-4.047 5.086c.863-.092 1.63-.33 2.274-.692m0 0a2.003 2.003 0 01-1.422-4.242M10.88 16c-.021-.051 0-.107.017-.16A5.5 5.5 0 0012 5.5a5.5 5.5 0 00-5.5 5.5c0 1.01 0 2.02-.017 3.03M12 21.01c-.021-.051 0-.107.017-.16A5.5 5.5 0 0012 12.5a5.5 5.5 0 00-5.5 5.5c0 1.01 0 2.02-.017 3.03M12 21c-.021-.051 0-.107.017-.16A5.5 5.5 0 0012 12.5a5.5 5.5 0 00-5.5 5.5c0 1.01 0 2.02-.017 3.03"/></svg>
                Personal Finance
              </a>
            </li>
            <li>
              <a href="#" class="flex items-center gap-2 p-2 rounded-md hover:bg-purple-200 dark:hover:bg-gray-600 text-purple-800 dark:text-purple-200 font-medium transition-colors">
                <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="M10 20l4-16m4 4l4 4-4 4M6 4l-4 4 4 4"/></svg>
                Market Analysis
              </a>
            </li>
            <li>
              <a href="#" class="flex items-center gap-2 p-2 rounded-md hover:bg-purple-200 dark:hover:bg-gray-600 text-purple-800 dark:text-purple-200 font-medium transition-colors">
                <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="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
                Banking & Loans
              </a>
            </li>
          </ul>
        </nav>
        <button class="mt-6 w-full py-2 px-4 bg-purple-500 hover:bg-purple-600 dark:bg-purple-700 dark:hover:bg-purple-600 text-white font-semibold rounded-lg shadow-md transition-colors">
          <svg class="w-4 h-4 inline-block mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd"></path></svg>
          New Thread
        </button>
      </aside>

      <!-- Main Content: Threads List -->
      <main class="w-full md:w-3/4">
        <section class="bg-green-50 dark:bg-gray-700 rounded-lg p-4 shadow-sm mb-4">
          <h2 class="text-lg sm:text-xl font-semibold text-green-700 dark:text-green-300 mb-4">Latest Threads</h2>
          <div class="space-y-4">
            <!-- Thread Item 1 -->
            <article class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
              <div class="flex items-start justify-between">
                <div>
                  <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-1">Understanding the Latest Fed Rate Hike</h3>
                  <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Discussing the implications for mortgages and savings accounts.</p>
                </div>
                <div class="flex items-center space-x-2 text-gray-500 dark:text-gray-400">
                  <span class="text-sm">15 replies</span>
                  <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="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"></path></svg>
                </div>
              </div>
              <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mt-3">
                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar" class="w-6 h-6 rounded-full mr-2 border border-pink-400 dark:border-purple-600">
                <span class="font-medium text-gray-700 dark:text-gray-300">John Doe</span>
                <span class="mx-2">•</span>
                <span>2 hours ago</span>
                <span class="ml-auto text-pink-600 dark:text-teal-400 font-semibold">Personal Finance</span>
              </div>
            </article>

            <!-- Thread Item 2 -->
            <article class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
              <div class="flex items-start justify-between">
                <div>
                  <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-1">Beginner's Guide to Stock Market Investing</h3>
                  <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Tips and resources for new investors.</p>
                </div>
                <div class="flex items-center space-x-2 text-gray-500 dark:text-gray-400">
                  <span class="text-sm">32 replies</span>
                  <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="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"></path></svg>
                </div>
              </div>
              <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mt-3">
                <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Author Avatar" class="w-6 h-6 rounded-full mr-2 border border-pink-400 dark:border-purple-600">
                <span class="font-medium text-gray-700 dark:text-gray-300">Jane Smith</span>
                <span class="mx-2">•</span>
                <span>5 hours ago</span>
                <span class="ml-auto text-pink-600 dark:text-teal-400 font-semibold">Investing Strategies</span>
              </div>
            </article>

            <!-- Thread Item 3 -->
            <article class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
              <div class="flex items-start justify-between">
                <div>
                  <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-1">Future of Digital Currencies in Banking</h3>
                  <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Exploring CBDCs and their impact on traditional banking.</p>
                </div>
                <div class="flex items-center space-x-2 text-gray-500 dark:text-gray-400">
                  <span class="text-sm">8 replies</span>
                  <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="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"></path></svg>
                </div>
              </div>
              <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mt-3">
                <img src="https://randomuser.me/api/portraits/men/19.jpg" alt="Author Avatar" class="w-6 h-6 rounded-full mr-2 border border-pink-400 dark:border-purple-600">
                <span class="font-medium text-gray-700 dark:text-gray-300">David Lee</span>
                <span class="mx-2">•</span>
                <span>1 day ago</span>
                <span class="ml-auto text-pink-600 dark:text-teal-400 font-semibold">Banking & Loans</span>
              </div>
            </article>

            <!-- Thread Item 4 -->
            <article class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
              <div class="flex items-start justify-between">
                <div>
                  <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-1">Q3 Earnings Report Analysis: Tech Sector</h3>
                  <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Deep dive into recent tech company performance.</p>
                </div>
                <div class="flex items-center space-x-2 text-gray-500 dark:text-gray-400">
                  <span class="text-sm">20 replies</span>
                  <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="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"></path></svg>
                </div>
              </div>
              <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mt-3">
                <img src="https://randomuser.me/api/portraits/women/67.jpg" alt="Author Avatar" class="w-6 h-6 rounded-full mr-2 border border-pink-400 dark:border-purple-600">
                <span class="font-medium text-gray-700 dark:text-gray-300">Emily White</span>
                <span class="mx-2">•</span>
                <span>2 days ago</span>
                <span class="ml-auto text-pink-600 dark:text-teal-400 font-semibold">Market Analysis</span>
              </div>
            </article>

          </div>
          <div class="mt-6 flex justify-center">
            <button class="py-2 px-6 bg-pink-500 hover:bg-pink-600 dark:bg-teal-600 dark:hover:bg-teal-500 text-white font-semibold rounded-full shadow-lg transition-colors">
              Load More
            </button>
          </div>
        </section>
      </main>
    </div>

    <footer class="p-4 sm:p-6 bg-purple-500 dark:bg-gray-900 text-white text-center text-sm rounded-b-xl shadow-inner">
      &copy; 2023 Finance Community. All rights reserved.
    </footer>
  </div>
</div>