Composant Profils utilisateur

<div class="p-4 sm:p-6 md:p-8 bg-stone-100 dark:bg-stone-900 min-h-screen flex items-center justify-center font-sans">

  <div class="max-w-4xl w-full mx-auto grid md:grid-cols-2 gap-6 lg:gap-8">

    <!-- User Profile Card 1 -->
    <div class="relative bg-gradient-to-br from-stone-200 to-stone-300 dark:from-stone-800 dark:to-stone-750 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 perspective-1000 group p-6 sm:p-8 overflow-hidden">
      <!-- Overlay for 3D effect -->
      <div class="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" style="transform: translateZ(10px); perspective: 1000px;"></div>

      <div class="relative z-10 flex flex-col items-center text-center">
        <div class="w-32 h-32 md:w-36 md:h-36 rounded-full overflow-hidden border-4 border-stone-400 dark:border-stone-600 shadow-lg mb-4 group-hover:scale-105 transition-transform duration-300">
          <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Isabella Rossi" class="w-full h-full object-cover">
        </div>
        <h2 class="text-2xl sm:text-3xl font-extrabold text-stone-800 dark:text-stone-100 mt-2 mb-2 group-hover:text-amber-700 dark:group-hover:text-amber-500 transition-colors duration-300">Isabella Rossi</h2>
        <p class="text-md sm:text-lg text-stone-600 dark:text-stone-300 font-medium mb-4 italic">"The world is a book, and those who do not travel read only one page."</p>

        <div class="w-full grid grid-cols-2 gap-4 text-stone-700 dark:text-stone-300 mb-6">
          <div class="flex flex-col items-center">
            <span class="text-xl font-bold text-amber-700 dark:text-amber-500">12</span>
            <span class="text-sm">Trips Taken</span>
          </div>
          <div class="flex flex-col items-center">
            <span class="text-xl font-bold text-amber-700 dark:text-amber-500">23</span>
            <span class="text-sm">Reviews</span>
          </div>
        </div>

        <p class="text-sm text-stone-600 dark:text-stone-400 mb-6 max-w-sm">
          Passionate globetrotter with a love for sustainable travel and exploring hidden gems. Specializes in cultural immersions.
        </p>

        <div class="flex flex-wrap justify-center gap-3">
          <a href="#" class="inline-flex items-center px-5 py-2.5 rounded-full bg-amber-700 hover:bg-amber-800 dark:bg-amber-500 dark:hover:bg-amber-600 text-white text-sm font-semibold transition-colors duration-300 shadow-md group-hover:shadow-lg dark:shadow-stone-950/50">
            <svg class="w-4 h-4 mr-2 -ml-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="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>
            Send Message
          </a>
          <a href="#" class="inline-flex items-center px-5 py-2.5 rounded-full border border-amber-700 dark:border-amber-500 text-amber-700 dark:text-amber-500 dark:hover:text-white hover:bg-amber-700 dark:hover:bg-amber-500 text-sm font-semibold transition-colors duration-300 shadow-md group-hover:shadow-lg dark:shadow-stone-950/50">
            <svg class="w-4 h-4 mr-2 -ml-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="M17.657 16.727A8 8 0 016.343 7.273L17.657 16.727zm0 0A8 8 0 0118.91 10.37M6.343 7.273v10.184h10.184"></path></svg>
            View Profile
          </a>
        </div>
      </div>
    </div>

    <!-- User Profile Card 2 -->
    <div class="relative bg-gradient-to-br from-stone-200 to-stone-300 dark:from-stone-800 dark:to-stone-750 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 perspective-1000 group p-6 sm:p-8 overflow-hidden">
      <!-- Overlay for 3D effect -->
      <div class="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" style="transform: translateZ(10px); perspective: 1000px;"></div>

      <div class="relative z-10 flex flex-col items-center text-center">
        <div class="w-32 h-32 md:w-36 md:h-36 rounded-full overflow-hidden border-4 border-stone-400 dark:border-stone-600 shadow-lg mb-4 group-hover:scale-105 transition-transform duration-300">
          <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Ethan Miller" class="w-full h-full object-cover">
        </div>
        <h2 class="text-2xl sm:text-3xl font-extrabold text-stone-800 dark:text-stone-100 mt-2 mb-2 group-hover:text-amber-700 dark:group-hover:text-amber-500 transition-colors duration-300">Ethan Miller</h2>
        <p class="text-md sm:text-lg text-stone-600 dark:text-stone-300 font-medium mb-4 italic">"Blessed are the curious for they shall have adventures."</p>

        <div class="w-full grid grid-cols-2 gap-4 text-stone-700 dark:text-stone-300 mb-6">
          <div class="flex flex-col items-center">
            <span class="text-xl font-bold text-amber-700 dark:text-amber-500">9</span>
            <span class="text-sm">Trips Taken</span>
          </div>
          <div class="flex flex-col items-center">
            <span class="text-xl font-bold text-amber-700 dark:text-amber-500">18</span>
            <span class="text-sm">Reviews</span>
          </div>
        </div>

        <p class="text-sm text-stone-600 dark:text-stone-400 mb-6 max-w-sm">
          Adventure seeker and nature enthusiast always looking for the next hiking trail or mountain to conquer. Enjoys wilderness expeditions.
        </p>

        <div class="flex flex-wrap justify-center gap-3">
          <a href="#" class="inline-flex items-center px-5 py-2.5 rounded-full bg-amber-700 hover:bg-amber-800 dark:bg-amber-500 dark:hover:bg-amber-600 text-white text-sm font-semibold transition-colors duration-300 shadow-md group-hover:shadow-lg dark:shadow-stone-950/50">
            <svg class="w-4 h-4 mr-2 -ml-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="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>
            Send Message
          </a>
          <a href="#" class="inline-flex items-center px-5 py-2.5 rounded-full border border-amber-700 dark:border-amber-500 text-amber-700 dark:text-amber-500 dark:hover:text-white hover:bg-amber-700 dark:hover:bg-amber-500 text-sm font-semibold transition-colors duration-300 shadow-md group-hover:shadow-lg dark:shadow-stone-950/50">
            <svg class="w-4 h-4 mr-2 -ml-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="M17.657 16.727A8 8 0 016.343 7.273L17.657 16.727zm0 0A8 8 0 0118.91 10.37M6.343 7.273v10.184h10.184"></path></svg>
            View Profile
          </a>
        </div>
      </div>
    </div>

  </div>
</div>