Luxury_Medical_Audio_Player

<div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-indigo-50 to-purple-100 dark:from-gray-900 dark:to-gray-800 p-4 sm:p-6 md:p-8 font-serif">
  <div class="w-full max-w-2xl bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.01] border border-gray-100 dark:border-gray-700">
    <div class="p-6 sm:p-8 md:p-10">
      <div class="flex flex-col sm:flex-row items-center sm:items-start space-y-6 sm:space-y-0 sm:space-x-8">
        <div class="flex-shrink-0 w-32 h-32 sm:w-40 sm:h-40 md:w-52 md:h-52 rounded-2xl overflow-hidden shadow-lg border border-gray-200 dark:border-gray-600 group relative">
          <img src="https://picsum.photos/400/400?random=1" alt="Album Art" class="w-full h-full object-cover transform scale-100 group-hover:scale-105 transition-transform duration-500 ease-in-out" loading="lazy">
          <div class="absolute inset-0 bg-gradient-to-br from-indigo-600/70 via-purple-600/70 to-pink-600/70 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
            <p class="text-white text-xs text-center font-medium opacity-0 group-hover:opacity-100 transition-opacity duration-500 delay-150">Therapeutic Sounds</p>
          </div>
        </div>

        <div class="flex-grow text-center sm:text-left">
          <h3 class="text-lg sm:text-xl md:text-2xl font-bold tracking-tight text-gray-900 dark:text-white capitalize leading-snug mb-1 sm:mb-2">
            Mindfulness Meditation for Stress Relief
          </h3>
          <p class="text-sm sm:text-base text-gray-600 dark:text-gray-300 font-medium opacity-90 mb-3 sm:mb-4 px-2 sm:px-0">
            Dr. Eleanor Vance, Clinical Psychologist
          </p>
          <div class="flex items-center justify-center sm:justify-start space-x-2 text-gray-500 dark:text-gray-400 text-xs sm:text-sm opaciy-80">
            <svg class="w-4 h-4" 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="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m12.728 0l-.707.707M6 18H4a2 2 0 01-2-2V8.307l2.748 1.924A2 2 0 007.5 9h10a2 2 0 011.5 1.076L22 8.307V16a2 2 0 01-2 2h-2M15 9V7a2 2 0 00-2-2H9a2 2 0 00-2 2v2m10 5a2 2 0 01-2 2H7a2 2 0 01-2-2v-2a2 2 0 012-2h6a2 2 0 012 2v2z"></path></svg>
            <span>Session 1 of 5</span>
            <span class="h-1 w-1 bg-gray-400 dark:bg-gray-500 rounded-full"></span>
            <span>30 min</span>
          </div>
        </div>
      </div>

      <div class="mt-8">
        <div class="relative h-1 w-full bg-gray-200 dark:bg-gray-700 rounded-full">
          <div class="absolute top-0 left-0 h-1 bg-gradient-to-r from-indigo-500 to-purple-500 dark:from-indigo-400 dark:to-purple-400 rounded-full" style="width: 45%;"></div>
          <div class="absolute top-1/2 -mt-2 -ml-2 w-4 h-4 bg-purple-600 dark:bg-purple-500 rounded-full shadow-lg cursor-pointer transform -translate-x-1/2" style="left: 45%;"></div>
        </div>
        <div class="flex justify-between text-xs sm:text-sm text-gray-600 dark:text-gray-400 mt-2 font-medium opacity-80">
          <span>0:14</span>
          <span>29:46</span>
        </div>
      </div>

      <div class="flex items-center justify-center space-x-6 sm:space-x-8 mt-6 sm:mt-8">
        <button class="p-3 rounded-full text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800">
          <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="M7 16l-4-4m0 0l4-4m-4 4h18"></path></svg>
        </button>
        <button class="p-2 sm:p-3 rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 dark:from-indigo-600 dark:to-purple-700 text-white shadow-lg transform hover:scale-110 active:scale-95 transition-all duration-200 focus:outline-none focus:ring-4 focus:ring-indigo-300 dark:focus:ring-purple-700">
          <svg class="w-7 h-7 sm:w-8 sm:h-8" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a.75.75 0 01-.75-.75V6.75a.75.75 0 011.5 0v10.5a.75.75 0 01-.75.75zM14.25 18a.75.75 0 01-.75-.75V6.75a.75.75 0 011.5 0v10.5a.75.75 0 01-.75.75z" clip-rule="evenodd"></path></svg>
        </button>
        <button class="p-3 rounded-full text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800">
          <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="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
        </button>
      </div>

      <div class="mt-8 border-t border-gray-100 dark:border-gray-700 pt-6 sm:pt-8">
        <h4 class="text-base sm:text-lg font-semibold text-gray-900 dark:text-white mb-4 opacity-95">Upcoming Sessions</h4>
        <ul class="space-y-4">
          <li class="flex items-center justify-between group cursor-pointer p-4 -mx-4 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200">
            <div class="flex items-center space-x-4">
              <div class="flex-shrink-0 w-10 h-10 rounded-lg overflow-hidden relative">
                <img src="https://picsum.photos/100/100?random=2" alt="Session Art" class="w-full h-full object-cover" loading="lazy">
                <div class="absolute inset-0 bg-yellow-500 opacity-20"></div>
              </div>
              <div>
                <p class="text-sm font-medium text-gray-800 dark:text-white group-hover:text-purple-600 dark:group-hover:text-purple-400 transition-colors leading-tight">Breathing Exercises for Anxiety</p>
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">Dr. Eleanor Vance • 25 min</p>
              </div>
            </div>
            <button class="p-2 text-gray-500 dark:text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400 opacity-0 group-hover:opacity-100 transition-opacity duration-200 focus:outline-none">
              <svg class="w-5 h-5" 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="M9 5l7 7-7 7"></path></svg>
            </button>
          </li>
          <li class="flex items-center justify-between group cursor-pointer p-4 -mx-4 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200">
            <div class="flex items-center space-x-4">
              <div class="flex-shrink-0 w-10 h-10 rounded-lg overflow-hidden relative">
                <img src="https://picsum.photos/100/100?random=3" alt="Session Art" class="w-full h-full object-cover" loading="lazy">
                <div class="absolute inset-0 bg-pink-500 opacity-20"></div>
              </div>
              <div>
                <p class="text-sm font-medium text-gray-800 dark:text-white group-hover:text-purple-600 dark:group-hover:text-purple-400 transition-colors leading-tight">Guided Imagery for Pain Management</p>
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">Dr. Eleanor Vance • 40 min</p>
              </div>
            </div>
            <button class="p-2 text-gray-500 dark:text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400 opacity-0 group-hover:opacity-100 transition-opacity duration-200 focus:outline-none">
              <svg class="w-5 h-5" 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="M9 5l7 7-7 7"></path></svg>
            </button>
          </li>
        </ul>
      </div>

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