Composant Mentions de l’utilisateur

<div class="font-sans p-4 sm:p-6 md:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen flex items-center justify-center">
  <div class="w-full max-w-2xl bg-white dark:bg-gray-800 rounded-xl shadow-lg border border-gray-100 dark:border-gray-700 overflow-hidden transform transition-all duration-300 hover:shadow-xl">
    <div class="p-5 sm:p-6 md:p-7 border-b border-gray-200 dark:border-gray-700">
      <h2 class="text-2xl sm:text-3xl font-extrabold text-blue-600 dark:text-blue-400 mb-1 leading-tight tracking-tight relative">
        Recent Mentions
        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-gradient-to-r from-blue-500 to-fuchsia-500 dark:from-blue-400 dark:to-fuchsia-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out"></span>
      </h2>
      <p class="text-gray-500 dark:text-gray-400 text-sm sm:text-base">Stay updated on discussions where you've been mentioned.</p>
    </div>

    <div class="divide-y divide-gray-200 dark:divide-gray-700">
      <!-- Mention Item 1 -->
      <div class="p-4 sm:p-5 md:p-6 hover:bg-blue-50 dark:hover:bg-gray-700 transition-colors duration-200 flex items-start space-x-3 sm:space-x-4">
        <img class="w-10 h-10 sm:w-12 sm:h-12 rounded-full ring-2 ring-blue-400 dark:ring-blue-300 object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar of Sarah"> 
        <div class="flex-1">
          <div class="flex items-center justify-between mb-1">
            <p class="text-gray-900 dark:text-gray-50 font-semibold text-base sm:text-lg">Sarah Jones
              <span class="text-blue-600 dark:text-blue-400 text-sm font-medium ml-1">@sarah_j</span>
            </p>
            <time datetime="2023-10-26T14:30:00Z" class="text-xs text-gray-500 dark:text-gray-400">2 hours ago</time>
          </div>
          <p class="text-gray-700 dark:text-gray-300 text-sm sm:text-base leading-snug">
            <span class="font-medium text-blue-700 dark:text-blue-300">@me</span> Don't miss the new module on Quantum Physics! It's a game-changer.
          </p>
          <div class="mt-2 flex flex-wrap gap-2 text-xs">
            <span class="px-2 py-0.5 bg-fuchsia-100 dark:bg-fuchsia-900 text-fuchsia-700 dark:text-fuchsia-300 rounded-full">#Physics</span>
            <span class="px-2 py-0.5 bg-emerald-100 dark:bg-emerald-900 text-emerald-700 dark:text-emerald-300 rounded-full">#CourseUpdate</span>
          </div>
        </div>
      </div>

      <!-- Mention Item 2 -->
      <div class="p-4 sm:p-5 md:p-6 hover:bg-blue-50 dark:hover:bg-gray-700 transition-colors duration-200 flex items-start space-x-3 sm:space-x-4">
        <img class="w-10 h-10 sm:w-12 sm:h-12 rounded-full ring-2 ring-fuchsia-400 dark:ring-fuchsia-300 object-cover" src="https://randomuser.me/api/portraits/men/82.jpg" alt="Avatar of David"> 
        <div class="flex-1">
          <div class="flex items-center justify-between mb-1">
            <p class="text-gray-900 dark:text-gray-50 font-semibold text-base sm:text-lg">David Lee
              <span class="text-blue-600 dark:text-blue-400 text-sm font-medium ml-1">@dave_code</span>
            </p>
            <time datetime="2023-10-26T12:00:00Z" class="text-xs text-gray-500 dark:text-gray-400">4 hours ago</time>
          </div>
          <p class="text-gray-700 dark:text-gray-300 text-sm sm:text-base leading-snug">
            Hey <span class="font-medium text-blue-700 dark:text-blue-300">@me</span>, can you review my pull request on the new API integration? 
          </p>
          <div class="mt-2 flex flex-wrap gap-2 text-xs">
            <span class="px-2 py-0.5 bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 rounded-full">#Programming</span>
            <span class="px-2 py-0.5 bg-lime-100 dark:bg-lime-900 text-lime-700 dark:text-lime-300 rounded-full">#CodeReview</span>
          </div>
        </div>
      </div>

      <!-- Mention Item 3 -->
      <div class="p-4 sm:p-5 md:p-6 hover:bg-blue-50 dark:hover:bg-gray-700 transition-colors duration-200 flex items-start space-x-3 sm:space-x-4">
        <img class="w-10 h-10 sm:w-12 sm:h-12 rounded-full ring-2 ring-lime-400 dark:ring-lime-300 object-cover" src="https://randomuser.me/api/portraits/women/6.jpg" alt="Avatar of Emily"> 
        <div class="flex-1">
          <div class="flex items-center justify-between mb-1">
            <p class="text-gray-900 dark:text-gray-50 font-semibold text-base sm:text-lg">Emily Chen
              <span class="text-blue-600 dark:text-blue-400 text-sm font-medium ml-1">@emily_c</span>
            </p>
            <time datetime="2023-10-25T09:00:00Z" class="text-xs text-gray-500 dark:text-gray-400">1 day ago</time>
          </div>
          <p class="text-gray-700 dark:text-gray-300 text-sm sm:text-base leading-snug">
            <span class="font-medium text-blue-700 dark:text-blue-300">@me</span> The new article on ethical AI practices is now live!
          </p>
          <div class="mt-2 flex flex-wrap gap-2 text-xs">
            <span class="px-2 py-0.5 bg-sky-100 dark:bg-sky-900 text-sky-700 dark:text-sky-300 rounded-full">#ArtificialIntelligence</span>
            <span class="px-2 py-0.5 bg-purple-100 dark:bg-purple-900 text-purple-700 dark:text-purple-300 rounded-full">#Ethics</span>
          </div>
        </div>
      </div>
    </div>

    <div class="p-5 sm:p-6 md:p-7 text-center">
      <button class="inline-flex items-center justify-center px-6 py-2 sm:px-8 sm:py-3 border-2 border-blue-500 dark:border-blue-400 rounded-full text-base font-semibold 
                     bg-gradient-to-r from-blue-600 to-fuchsia-600 dark:from-blue-500 dark:to-fuchsia-500 
                     text-white shadow-lg 
                     transform transition-all duration-300 ease-out
                     hover:scale-105 hover:shadow-xl hover:from-blue-700 hover:to-fuchsia-700
                     focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 focus:ring-opacity-75 relative group">
        <span class="relative z-10">View All Mentions</span>
        <span class="absolute inset-0 rounded-full bg-gradient-to-r from-blue-500 to-fuchsia-500 dark:from-blue-400 dark:to-fuchsia-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pulse-animation"></span>
      </button>
    </div>
  </div>
</div>

<style>
  /* This is an example of including a keyframe animation for the pulse effect in the button */
  /* In a real scenario, this would ideally be in a global CSS file or injected via a build step */
  @keyframes pulse-animation {
    0% { transform: scale(0.8); opacity: 0; }
    50% { transform: scale(1); opacity: 0.5; }
    100% { transform: scale(1.2); opacity: 0; }
  }
  .pulse-animation {
    animation: pulse-animation 1.5s infinite cubic-bezier(0.66, 0, 0.33, 1);
  }
</style>