Componente Perfiles de usuario

<div class="min-h-screen bg-gray-100 p-4 sm:p-6 lg:p-8 dark:bg-gray-900 transition-colors duration-300">
  <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
    <!-- Profile Card 1 -->
    <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 perspective-1000 group dark:shadow-gray-700/50">
      <div class="p-6 sm:p-8 relative z-10">
        <div class="flex flex-col items-center text-center">
          <div class="relative w-24 h-24 mb-4 rounded-full overflow-hidden border-4 border-blue-300 dark:border-blue-600 shadow-lg">
            <img class="w-full h-full object-cover" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Profile image">
            <div class="absolute inset-0 bg-gradient-to-tr from-blue-400/20 to-blue-600/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
          </div>
          <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-1">Jane Doe</h3>
          <p class="text-blue-600 dark:text-blue-400 font-semibold mb-4">Senior Stylist</p>
          <p class="text-gray-600 dark:text-gray-400 text-sm leading-relaxed mb-6">Highly experienced stylist specializing in modern cuts and vibrant color treatments.</p>
        </div>

        <div class="grid grid-cols-2 gap-4 mb-6">
          <div class="flex items-center space-x-2 text-gray-700 dark:text-gray-300">
            <svg class="w-5 h-5 text-blue-500" 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.657L13.414 20.9a1.998 1.998 0 01-2.828 0L6.343 16.657m11.314-11.314L12 3.686l-5.657 5.657m11.314 0L12 10.343l-5.657-5.657m0 0L5.636 5.636m12.728 0c-.78-.78-2.047-.78-2.828 0L12 7.172l-2.121-2.121c-.78-.78-2.047-.78-2.828 0L5.636 5.636m0 0L7.05 7.05m9.9 0L10.343 12 7.05 7.05M7.05 7.05l-1.414 1.414m12.728 0l1.414-1.414M12 12a4 4 0 110-8 4 4 0 010 8z"></path></svg>
            <span>5 Years Exp.</span>
          </div>
          <div class="flex items-center space-x-2 text-gray-700 dark:text-gray-300">
            <svg class="w-5 h-5 text-blue-500" 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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
            <span>Certified</span>
          </div>
        </div>

        <a href="#" class="block w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 rounded-lg text-center transition-all duration-300 transform group-hover:scale-105 active:scale-95 shadow-md hover:shadow-lg dark:bg-blue-500 dark:hover:bg-blue-600">
          Book Appointment
        </a>
      </div>
      <!-- 3D effect layers -->
      <div class="absolute inset-0 bg-gradient-to-br from-blue-100 via-white to-blue-200 dark:from-gray-700 dark:via-gray-800 dark:to-gray-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-xl" style="transform: translateZ(-20px);"></div>
      <div class="absolute inset-0 bg-blue-50 dark:bg-gray-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-xl" style="transform: translateZ(-40px);"></div>
    </div>

    <!-- Profile Card 2 -->
    <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 perspective-1000 group dark:shadow-gray-700/50">
      <div class="p-6 sm:p-8 relative z-10">
        <div class="flex flex-col items-center text-center">
          <div class="relative w-24 h-24 mb-4 rounded-full overflow-hidden border-4 border-blue-300 dark:border-blue-600 shadow-lg">
            <img class="w-full h-full object-cover" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Profile image">
            <div class="absolute inset-0 bg-gradient-to-tr from-blue-400/20 to-blue-600/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
          </div>
          <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-1">John Smith</h3>
          <p class="text-blue-600 dark:text-blue-400 font-semibold mb-4">Master Barber</p>
          <p class="text-gray-600 dark:text-gray-400 text-sm leading-relaxed mb-6">Dedicated master barber with a keen eye for classic and contemporary men's grooming.</p>
        </div>

        <div class="grid grid-cols-2 gap-4 mb-6">
          <div class="flex items-center space-x-2 text-gray-700 dark:text-gray-300">
            <svg class="w-5 h-5 text-blue-500" 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.657L13.414 20.9a1.998 1.998 0 01-2.828 0L6.343 16.657m11.314-11.314L12 3.686l-5.657 5.657m11.314 0L12 10.343l-5.657-5.657m0 0L5.636 5.636m12.728 0c-.78-.78-2.047-.78-2.828 0L12 7.172l-2.121-2.121c-.78-.78-2.047-.78-2.828 0L5.636 5.636m0 0L7.05 7.05m9.9 0L10.343 12 7.05 7.05M7.05 7.05l-1.414 1.414m12.728 0l1.414-1.414M12 12a4 4 0 110-8 4 4 0 010 8z"></path></svg>
            <span>8 Years Exp.</span>
          </div>
          <div class="flex items-center space-x-2 text-gray-700 dark:text-gray-300">
            <svg class="w-5 h-5 text-blue-500" 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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
            <span>Awarded</span>
          </div>
        </div>

        <a href="#" class="block w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 rounded-lg text-center transition-all duration-300 transform group-hover:scale-105 active:scale-95 shadow-md hover:shadow-lg dark:bg-blue-500 dark:hover:bg-blue-600">
          Book Appointment
        </a>
      </div>
      <div class="absolute inset-0 bg-gradient-to-br from-blue-100 via-white to-blue-200 dark:from-gray-700 dark:via-gray-800 dark:to-gray-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-xl" style="transform: translateZ(-20px);"></div>
      <div class="absolute inset-0 bg-blue-50 dark:bg-gray-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-xl" style="transform: translateZ(-40px);"></div>
    </div>

    <!-- Profile Card 3 -->
    <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 perspective-1000 group dark:shadow-gray-700/50">
      <div class="p-6 sm:p-8 relative z-10">
        <div class="flex flex-col items-center text-center">
          <div class="relative w-24 h-24 mb-4 rounded-full overflow-hidden border-4 border-blue-300 dark:border-blue-600 shadow-lg">
            <img class="w-full h-full object-cover" src="https://randomuser.me/api/portraits/women/3.jpg" alt="Profile image">
            <div class="absolute inset-0 bg-gradient-to-tr from-blue-400/20 to-blue-600/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
          </div>
          <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-1">Emily White</h3>
          <p class="text-blue-600 dark:text-blue-400 font-semibold mb-4">Esthetician</p>
          <p class="text-gray-600 dark:text-gray-400 text-sm leading-relaxed mb-6">Expert esthetician, passionate about skincare and providing rejuvenating facial treatments.</p>
        </div>

        <div class="grid grid-cols-2 gap-4 mb-6">
          <div class="flex items-center space-x-2 text-gray-700 dark:text-gray-300">
            <svg class="w-5 h-5 text-blue-500" 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.657L13.414 20.9a1.998 1.998 0 01-2.828 0L6.343 16.657m11.314-11.314L12 3.686l-5.657 5.657m11.314 0L12 10.343l-5.657-5.657m0 0L5.636 5.636m12.728 0c-.78-.78-2.047-.78-2.828 0L12 7.172l-2.121-2.121c-.78-.78-2.047-.78-2.828 0L5.636 5.636m0 0L7.05 7.05m9.9 0L10.343 12 7.05 7.05M7.05 7.05l-1.414 1.414m12.728 0l1.414-1.414M12 12a4 4 0 110-8 4 4 0 010 8z"></path></svg>
            <span>3 Years Exp.</span>
          </div>
          <div class="flex items-center space-x-2 text-gray-700 dark:text-gray-300">
            <svg class="w-5 h-5 text-blue-500" 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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
            <span>Licensed</span>
          </div>
        </div>

        <a href="#" class="block w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 rounded-lg text-center transition-all duration-300 transform group-hover:scale-105 active:scale-95 shadow-md hover:shadow-lg dark:bg-blue-500 dark:hover:bg-blue-600">
          Book Appointment
        </a>
      </div>
      <div class="absolute inset-0 bg-gradient-to-br from-blue-100 via-white to-blue-200 dark:from-gray-700 dark:via-gray-800 dark:to-gray-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-xl" style="transform: translateZ(-20px);"></div>
      <div class="absolute inset-0 bg-blue-50 dark:bg-gray-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-xl" style="transform: translateZ(-40px);"></div>
    </div>

  </div>
</div>