Volet Composantes sociales

<div class="min-h-screen py-8 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-cyan-500 via-purple-600 to-rose-500 dark:from-gray-900 dark:via-purple-900 dark:to-pink-900 text-white flex items-center justify-center">
  <div class="max-w-3xl w-full mx-auto bg-white dark:bg-gray-800 rounded-2xl shadow-xl overflow-hidden backdrop-blur-sm bg-opacity-30 dark:bg-opacity-30 border border-white border-opacity-20 dark:border-gray-700">
    <!-- Header -->
    <div class="p-6 sm:p-8 bg-gradient-to-r from-teal-400 via-blue-500 to-purple-600 dark:from-gray-700 dark:via-blue-800 dark:to-purple-800 text-white flex items-center justify-between">
      <h2 class="text-2xl sm:text-3xl font-bold font-sans tracking-wide">Weather Dispatch</h2>
      <div class="flex items-center space-x-3">
        <button class="p-2 rounded-full hover:bg-white hover:bg-opacity-20 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50">
          <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="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path></svg>
        </button>
        <img src="https://randomuser.me/api/portraits/men/52.jpg" alt="User Avatar" class="w-9 h-9 rounded-full border-2 border-white object-cover">
      </div>
    </div>

    <!-- Main Content Area -->
    <div class="p-6 sm:p-8 space-y-8 text-gray-800 dark:text-gray-200">

      <!-- New Post Section -->
      <div class="bg-white dark:bg-gray-700 rounded-xl p-5 shadow-lg bg-opacity-70 dark:bg-opacity-70">
        <div class="flex items-center space-x-3 mb-4">
          <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-purple-500 object-cover">
          <div class="flex-1">
            <textarea class="w-full p-3 bg-gray-100 dark:bg-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 dark:focus:ring-purple-400 text-gray-800 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-300 resize-none" rows="2" placeholder="Share your weather observations..."></textarea>
          </div>
        </div>
        <div class="flex justify-between items-center">
          <div class="flex space-x-3">
            <button class="flex items-center text-purple-600 dark:text-purple-400 hover:text-purple-700 dark:hover:text-purple-300 font-medium transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-purple-500 rounded-md p-1">
              <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-4 4 4 4-4V5h-2l-4 4-4-4H4v10zm-4-7a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg>
              Photo
            </button>
            <button class="flex items-center text-purple-600 dark:text-purple-400 hover:text-purple-700 dark:hover:text-purple-300 font-medium transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-purple-500 rounded-md p-1">
              <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path></svg>
              Location
            </button>
          </div>
          <button class="px-5 py-2 bg-purple-600 dark:bg-purple-700 text-white rounded-lg font-semibold hover:bg-purple-700 dark:hover:bg-purple-800 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-purple-500 dark:focus:ring-purple-400 shadow-md">
            Post
          </button>
        </div>
      </div>

      <!-- Weather Forecast Card (Post Example) -->
      <div class="bg-white dark:bg-gray-700 rounded-xl p-5 shadow-lg bg-opacity-70 dark:bg-opacity-70 border border-gray-100 dark:border-gray-600">
        <div class="flex items-center space-x-4 mb-4">
          <img src="https://randomuser.me/api/portraits/women/12.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-pink-500 object-cover">
          <div>
            <p class="font-semibold text-lg">Alice Johnson</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">2 hours ago • New York, USA</p>
          </div>
        </div>
        <p class="text-lg mb-4 leading-relaxed">Current conditions in NYC: mostly sunny with a high of 72°F. Light breeze from the west. Perfect day for a walk in the park! #WeatherNYC #SunnyDays</p>
        <img src="https://picsum.photos/800/450?random=1" alt="Weather Scene" class="w-full h-auto rounded-lg mb-4 object-cover max-h-64">
        <div class="flex justify-between items-center text-gray-600 dark:text-gray-300">
          <div class="flex space-x-4">
            <button class="flex items-center hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-md p-1">
              <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 13.94l-5.11-.99a1 1 0 00-.7-.14l-2.45.42a1 1 0 01-1.07-1.63L13.62 5.3a1 1 0 00-1.74-.9l-3.08 7.21a1 1 0 01-1.84 0L4.38 4.4a1 1 0 00-1.74.9l4.56 8.52a1 1 0 01-1.07 1.63L3.11 13.94a1 1 0 00-.7.14l-2 1a1 1 0 001.37 1.84l2.58-1.29a1 1 0 01.7-.14l2.45.42a1 1 0 001.07-1.63L6.38 5.3a1 1 0 011.74-.9l3.08 7.21a1 1 0 001.84 0l4.56-8.52a1 1 0 00-1.37-1.84l-2.58 1.29a1 1 0 00-.7.14z" clip-rule="evenodd"></path></svg>
              <span class="hidden sm:inline">1.2K</span>
            </button>
            <button class="flex items-center hover:text-green-500 dark:hover:text-green-400 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-green-500 rounded-md p-1">
              <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.707 3.293a1 1 0 010 1.414L5.414 7H11a7 7 0 017 7v2a1 1 0 11-2 0v-2a5 5 0 00-5-5H5.414l2.293 2.293a1 1 0 11-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
              <span class="hidden sm:inline">234</span>
            </button>
            <button class="flex items-center hover:text-red-500 dark:hover:text-red-400 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-red-500 rounded-md p-1">
              <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
              <span class="hidden sm:inline">57</span>
            </button>
          </div>
          <button class="flex items-center hover:text-purple-500 dark:hover:text-purple-400 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-purple-500 rounded-md p-1">
            <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M15 8a3 3 0 10-2.977-2.977L5.269 9.11A3.001 3.001 0 1010 11.0l4.764-2.91a3 3 0 10-.109-.568l-4.763 2.909-.2-.364-.225-.411zm0 0l.138.688A3 3 0 1015 8z" /></svg>
            <span class="hidden sm:inline">Share</span>
          </button>
        </div>
      </div>

      <!-- Another Post Example (Climate Data) -->
      <div class="bg-white dark:bg-gray-700 rounded-xl p-5 shadow-lg bg-opacity-70 dark:bg-opacity-70 border border-gray-100 dark:border-gray-600">
        <div class="flex items-center space-x-4 mb-4">
          <img src="https://randomuser.me/api/portraits/men/33.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-cyan-500 object-cover">
          <div>
            <p class="font-semibold text-lg">Mark Davis</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">1 day ago • Research Group</p>
          </div>
        </div>
        <p class="text-lg mb-4 leading-relaxed">Our latest climate model shows increased precipitation patterns in the Amazon basin over the next decade. Critical for understanding ecosystem shifts. #ClimateChange #DataScience</p>
        <figure class="mb-4">
          <img src="https://picsum.photos/800/450?random=2" alt="Climate Data Visualization" class="w-full h-auto rounded-lg object-cover max-h-64">
          <figcaption class="text-center text-sm text-gray-500 dark:text-gray-400 mt-2">Projected precipitation in Amazon Basin.</figcaption>
        </figure>
        <div class="flex justify-between items-center text-gray-600 dark:text-gray-300">
          <div class="flex space-x-4">
            <button class="flex items-center hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-md p-1">
              <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 13.94l-5.11-.99a1 1 0 00-.7-.14l-2.45.42a1 1 0 01-1.07-1.63L13.62 5.3a1 1 0 00-1.74-.9l-3.08 7.21a1 1 0 01-1.84 0L4.38 4.4a1 1 0 00-1.74.9l4.56 8.52a1 1 0 01-1.07 1.63L3.11 13.94a1 1 0 00-.7.14l-2 1a1 1 0 001.37 1.84l2.58-1.29a1 1 0 01.7-.14l2.45.42a1 1 0 001.07-1.63L6.38 5.3a1 1 0 011.74-.9l3.08 7.21a1 1 0 001.84 0l4.56-8.52a1 1 0 00-1.37-1.84l-2.58 1.29a1 1 0 00-.7.14z" clip-rule="evenodd"></path></svg>
              <span class="hidden sm:inline">843</span>
            </button>
            <button class="flex items-center hover:text-green-500 dark:hover:text-green-400 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-green-500 rounded-md p-1">
              <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.707 3.293a1 1 0 010 1.414L5.414 7H11a7 7 0 017 7v2a1 1 0 11-2 0v-2a5 5 0 00-5-5H5.414l2.293 2.293a1 1 0 11-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
              <span class="hidden sm:inline">150</span>
            </button>
            <button class="flex items-center hover:text-red-500 dark:hover:text-red-400 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-red-500 rounded-md p-1">
              <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
              <span class="hidden sm:inline">32</span>
            </button>
          </div>
          <button class="flex items-center hover:text-purple-500 dark:hover:text-purple-400 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-purple-500 rounded-md p-1">
            <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M15 8a3 3 0 10-2.977-2.977L5.269 9.11A3.001 3.001 0 1010 11.0l4.764-2.91a3 3 0 10-.109-.568l-4.763 2.909-.2-.364-.225-.411zm0 0l.138.688A3 3 0 1015 8z" /></svg>
            <span class="hidden sm:inline">Share</span>
          </button>
        </div>
      </div>

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