Social_Components_Documentation_Wiki

<div class="min-h-screen bg-gradient-to-br from-amber-100 via-orange-200 to-red-200 dark:from-stone-900 dark:via-red-950 dark:to-orange-950 p-4 sm:p-6 lg:p-8 font-sans transition-colors duration-500">
  <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">

    <!-- Left Sidebar: Profile/Navigation -->
    <aside class="md:col-span-1">
      <div class="bg-white dark:bg-stone-800 rounded-3xl shadow-xl p-6 mb-6 transform transition duration-300 hover:scale-[1.01] hover:shadow-2xl">
        <div class="flex items-center space-x-4 mb-6">
          <img class="w-20 h-20 rounded-full object-cover ring-4 ring-amber-400 dark:ring-red-600 shadow-lg" src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar">
          <div>
            <h2 class="text-2xl font-bold text-stone-800 dark:text-stone-100">John Doe</h2>
            <p class="text-sm text-stone-600 dark:text-stone-300">Documentation Manager</p>
          </div>
        </div>
        <nav class="space-y-3">
          <a href="#" class="flex items-center p-3 rounded-lg text-lg font-medium text-stone-700 dark:text-stone-200 bg-amber-100 dark:bg-red-800 transition-all duration-300 hover:bg-amber-200 dark:hover:bg-red-700 hover:text-orange-800 dark:hover:text-amber-100 group">
            <svg class="w-6 h-6 mr-3 text-amber-600 dark:text-amber-400 group-hover:text-orange-700 dark:group-hover:text-amber-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="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001 1h3v-3m-3 3h4m-re-6 0c0 4.418 7.84 8 13 8s13-3.582 13-8"></path></svg>
            My Wiki
          </a>
          <a href="#" class="flex items-center p-3 rounded-lg text-lg font-medium text-stone-700 dark:text-stone-200 transition-all duration-300 hover:bg-amber-100 dark:hover:bg-red-800 hover:text-orange-800 dark:hover:text-amber-100 group">
            <svg class="w-6 h-6 mr-3 text-stone-500 dark:text-stone-400 group-hover:text-orange-700 dark:group-hover:text-amber-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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
            Recent Activity
          </a>
          <a href="#" class="flex items-center p-3 rounded-lg text-lg font-medium text-stone-700 dark:text-stone-200 transition-all duration-300 hover:bg-amber-100 dark:hover:bg-red-800 hover:text-orange-800 dark:hover:text-amber-100 group">
            <svg class="w-6 h-6 mr-3 text-stone-500 dark:text-stone-400 group-hover:text-orange-700 dark:group-hover:text-amber-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 20h2a2 2 0 002-2V8a2 2 0 00-2-2h-2M13 18v2a2 2 0 002 2h2a2 2 0 002-2v-2M9 18H5a2 2 0 01-2-2V8a2 2 0 012-2h2M11 5H9a2 2 0 00-2 2v2M12 12v.01"></path></svg>
            Settings
          </a>
        </nav>
      </div>

      <!-- Recommended Articles -->
      <div class="bg-white dark:bg-stone-800 rounded-3xl shadow-xl p-6 transform transition duration-300 hover:scale-[1.01] hover:shadow-2xl">
        <h3 class="text-xl font-bold text-stone-800 dark:text-stone-100 mb-4">Trending Articles</h3>
        <ul class="space-y-4">
          <li class="flex items-start">
            <span class="text-orange-500 dark:text-amber-400 font-bold text-lg mr-3">1.</span>
            <div>
              <a href="#" class="text-stone-700 dark:text-stone-200 font-medium text-base hover:text-orange-600 dark:hover:text-amber-300 transition-colors duration-200 leading-tight">Understanding API Integrations v3.0</a>
              <p class="text-sm text-stone-500 dark:text-stone-400">5 min read</p>
            </div>
          </li>
          <li class="flex items-start">
            <span class="text-orange-500 dark:text-amber-400 font-bold text-lg mr-3">2.</span>
            <div>
              <a href="#" class="text-stone-700 dark:text-stone-200 font-medium text-base hover:text-orange-600 dark:hover:text-amber-300 transition-colors duration-200 leading-tight">Getting Started with Microservices</a>
              <p class="text-sm text-stone-500 dark:text-stone-400">12 min read</p>
            </div>
          </li>
          <li class="flex items-start">
            <span class="text-orange-500 dark:text-amber-400 font-bold text-lg mr-3">3.</span>
            <div>
              <a href="#" class="text-stone-700 dark:text-stone-200 font-medium text-base hover:text-orange-600 dark:hover:text-amber-300 transition-colors duration-200 leading-tight">Best Practices for Secure Coding</a>
              <p class="text-sm text-stone-500 dark:text-stone-400">8 min read</p>
            </div>
          </li>
        </ul>
      </div>
    </aside>

    <!-- Main Content Area: Feed/Articles -->
    <main class="md:col-span-2">
      <!-- Search Bar -->
      <div class="mb-6">
        <label for="search" class="sr-only">Search wiki...</label>
        <div class="relative">
          <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
            <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <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" />
            </svg>
          </div>
          <input type="search" id="search" class="block w-full pl-10 pr-3 py-3 rounded-full border border-transparent bg-white dark:bg-stone-800 text-stone-900 dark:text-stone-100 placeholder-stone-500 dark:placeholder-stone-400 shadow-lg focus:outline-none focus:ring-2 focus:ring-orange-500 dark:focus:ring-amber-600 focus:border-transparent transition-all duration-300" placeholder="Search documentation...">
        </div>
      </div>

      <!-- Feed/Article Cards -->
      <section class="space-y-6">

        <!-- Article Card 1 -->
        <article class="bg-white dark:bg-stone-800 rounded-3xl shadow-xl p-6 transform transition duration-300 hover:scale-[1.01] hover:shadow-2xl overflow-hidden relative group">
          <span class="absolute top-0 right-0 bg-orange-500 dark:bg-red-700 text-white text-xs px-3 py-1 rounded-bl-lg font-bold uppercase z-10">New</span>
          <div class="flex items-start space-x-4 mb-4">
            <img class="w-14 h-14 rounded-full object-cover shadow-md ring-2 ring-orange-200" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Author Avatar">
            <div>
              <h3 class="text-xl font-bold text-stone-800 dark:text-stone-100">How to contribute to our Wiki</h3>
              <p class="text-sm text-stone-600 dark:text-stone-300">By <a href="#" class="font-medium text-orange-600 dark:text-amber-400 hover:underline">Jane Smith</a> · October 26, 2023</p>
            </div>
          </div>
          <figure class="mb-4 rounded-xl overflow-hidden shadow-lg border border-gray-100 dark:border-stone-700">
            <img class="w-full h-48 object-cover transform scale-105 group-hover:scale-100 transition duration-500 ease-in-out" src="https://picsum.photos/800/400?random=1" alt="Article Image">
          </figure>
          <p class="text-stone-700 dark:text-stone-200 mb-4 leading-relaxed line-clamp-3">Learn the step-by-step process of adding, editing, and managing content effectively within our knowledge base. This guide covers everything from basic formatting to advanced topic structuring... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          <div class="flex justify-between items-center">
            <a href="#" class="inline-flex items-center px-4 py-2 bg-gradient-to-r from-orange-400 to-red-500 dark:from-red-700 dark:to-orange-800 text-white font-semibold rounded-full shadow-md hover:shadow-lg transform hover:scale-105 transition-all duration-300">
              Read More
              <svg class="ml-2 -mr-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>
            <div class="flex space-x-4">
              <button class="flex items-center text-stone-600 dark:text-stone-300 hover:text-orange-600 dark:hover:text-amber-400 transition-colors duration-200">
                <svg class="w-5 h-5 mr-1" 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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
                <span>45</span>
              </button>
              <button class="flex items-center text-stone-600 dark:text-stone-300 hover:text-orange-600 dark:hover:text-amber-400 transition-colors duration-200">
                <svg class="w-5 h-5 mr-1" 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>
                <span>12</span>
              </button>
            </div>
          </div>
        </article>

        <!-- Article Card 2 -->
        <article class="bg-white dark:bg-stone-800 rounded-3xl shadow-xl p-6 transform transition duration-300 hover:scale-[1.01] hover:shadow-2xl overflow-hidden relative group">
          <div class="flex items-start space-x-4 mb-4">
            <img class="w-14 h-14 rounded-full object-cover shadow-md ring-2 ring-orange-200" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Author Avatar">
            <div>
              <h3 class="text-xl font-bold text-stone-800 dark:text-stone-100">Understanding Database Normalization</h3>
              <p class="text-sm text-stone-600 dark:text-stone-300">By <a href="#" class="font-medium text-orange-600 dark:text-amber-400 hover:underline">Michael Brown</a> · October 20, 2023</p>
            </div>
          </div>
          <figure class="mb-4 rounded-xl overflow-hidden shadow-lg border border-gray-100 dark:border-stone-700">
            <img class="w-full h-48 object-cover transform scale-105 group-hover:scale-100 transition duration-500 ease-in-out" src="https://picsum.photos/800/400?random=2" alt="Article Image">
          </figure>
          <p class="text-stone-700 dark:text-stone-200 mb-4 leading-relaxed line-clamp-3">Delve into the principles of database normalization (1NF, 2NF, 3NF, BCNF) and learn how to design efficient, consistent, and reliable database schemas. This article provides practical examples and best practices... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          <div class="flex justify-between items-center">
            <a href="#" class="inline-flex items-center px-4 py-2 bg-gradient-to-r from-orange-400 to-red-500 dark:from-red-700 dark:to-orange-800 text-white font-semibold rounded-full shadow-md hover:shadow-lg transform hover:scale-105 transition-all duration-300">
              Read More
              <svg class="ml-2 -mr-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>
            <div class="flex space-x-4">
              <button class="flex items-center text-stone-600 dark:text-stone-300 hover:text-orange-600 dark:hover:text-amber-400 transition-colors duration-200">
                <svg class="w-5 h-5 mr-1" 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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
                <span>68</span>
              </button>
              <button class="flex items-center text-stone-600 dark:text-stone-300 hover:text-orange-600 dark:hover:text-amber-400 transition-colors duration-200">
                <svg class="w-5 h-5 mr-1" 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>
                <span>25</span>
              </button>
            </div>
          </div>
        </article>

        <!-- Article Card 3 -->
        <article class="bg-white dark:bg-stone-800 rounded-3xl shadow-xl p-6 transform transition duration-300 hover:scale-[1.01] hover:shadow-2xl overflow-hidden relative group">
          <div class="flex items-start space-x-4 mb-4">
            <img class="w-14 h-14 rounded-full object-cover shadow-md ring-2 ring-orange-200" src="https://randomuser.me/api/portraits/women/67.jpg" alt="Author Avatar">
            <div>
              <h3 class="text-xl font-bold text-stone-800 dark:text-stone-100">Implementing CI/CD Pipelines with Jenkins</h3>
              <p class="text-sm text-stone-600 dark:text-stone-300">By <a href="#" class="font-medium text-orange-600 dark:text-amber-400 hover:underline">Sarah Johnson</a> · October 15, 2023</p>
            </div>
          </div>
          <figure class="mb-4 rounded-xl overflow-hidden shadow-lg border border-gray-100 dark:border-stone-700">
            <img class="w-full h-48 object-cover transform scale-105 group-hover:scale-100 transition duration-500 ease-in-out" src="https://picsum.photos/800/400?random=3" alt="Article Image">
          </figure>
          <p class="text-stone-700 dark:text-stone-200 mb-4 leading-relaxed line-clamp-3">Explore the essentials of Continuous Integration and Continuous Deployment using Jenkins. This comprehensive guide covers setup, pipeline creation, and advanced configurations for automated software delivery... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          <div class="flex justify-between items-center">
            <a href="#" class="inline-flex items-center px-4 py-2 bg-gradient-to-r from-orange-400 to-red-500 dark:from-red-700 dark:to-orange-800 text-white font-semibold rounded-full shadow-md hover:shadow-lg transform hover:scale-105 transition-all duration-300">
              Read More
              <svg class="ml-2 -mr-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>
            <div class="flex space-x-4">
              <button class="flex items-center text-stone-600 dark:text-stone-300 hover:text-orange-600 dark:hover:text-amber-400 transition-colors duration-200">
                <svg class="w-5 h-5 mr-1" 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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
                <span>51</span>
              </button>
              <button class="flex items-center text-stone-600 dark:text-stone-300 hover:text-orange-600 dark:hover:text-amber-400 transition-colors duration-200">
                <svg class="w-5 h-5 mr-1" 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>
                <span>18</span>
              </button>
            </div>
          </div>
        </article>

      </section>
    </main>

  </div>
</div>