Glassmorphism_Music_Follow_Button_Component

<div class="flex items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900 transition-colors duration-300">
  <div class="relative w-full max-w-sm p-6 rounded-2xl shadow-xl overflow-hidden backdrop-blur-lg bg-white/30 dark:bg-gray-800/30 ring-1 ring-inset ring-white/50 dark:ring-gray-700/50 transform-gpu transition-all duration-500 hover:scale-105 hover:shadow-2xl">
    <!-- Background overlay for glass effect -->
    <div class="absolute inset-0 z-0 bg-gradient-to-br from-blue-300/40 dark:from-sky-700/40 to-indigo-500/40 dark:to-blue-900/40 blur-3xl opacity-60 dark:opacity-40 pointer-events-none"></div>

    <div class="relative z-10 flex flex-col items-center text-center space-y-4">

      <!-- Artist/Profile Image -->
      <div class="relative w-24 h-24 rounded-full overflow-hidden border-4 border-white/70 dark:border-gray-600/70 shadow-lg group-hover:scale-110 transition-transform duration-300">
        <img src="https://randomuser.me/api/portraits/women/5.jpg" alt="Artist Avatar" class="w-full h-full object-cover">
        <div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
      </div>

      <!-- Artist Name and Details -->
      <div>
        <h3 class="text-2xl font-bold text-gray-800 dark:text-white mt-2 drop-shadow-sm">Aurora Rhapsody</h3>
        <p class="text-md text-gray-600 dark:text-gray-300">Electronic / Ambient Artist</p>
        <div class="flex justify-center items-center text-sm text-gray-700 dark:text-gray-400 space-x-2 mt-1">
          <span><strong class="font-semibold">1.2M</strong> Followers</span>
          <span class="h-1 w-1 bg-gray-500 rounded-full"></span>
          <span><strong class="font-semibold">30</strong> Tracks</span>
        </div>
      </div>

      <!-- Follow Button -->
      <button class="follow-button group relative px-6 py-3 rounded-full overflow-hidden shadow-lg bg-blue-500/60 dark:bg-sky-700/60 transition-all duration-300 ring-1 ring-inset ring-blue-400/80 dark:ring-sky-600/80 transform-gpu hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-sky-500">
        <!-- Glassmorphism background for button -->
        <span class="absolute inset-0 bg-blue-400/30 dark:bg-sky-600/30 backdrop-blur-sm group-hover:bg-blue-500/40 dark:group-hover:bg-sky-700/40 transition-colors duration-300"></span>
        <span class="relative z-10 flex items-center text-lg font-semibold text-white group-hover:text-white dark:text-white drop-shadow-md">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2 transition-transform group-hover:rotate-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM12 14v4m-2 2h4m-2-6a4 4 0 100-8 4 4 0 000 8z" />
          </svg>
          Follow
        </span>
      </button>

      <!-- CTA / More Info -->
      <a href="#" class="text-sm text-gray-700 dark:text-gray-400 hover:underline mt-4">
        <span class="flex items-center space-x-1">
          <span>View Profile</span>
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
          </svg>
        </span>
      </a>

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