Botones de entretenimiento lúdico

<div class="p-4 sm:p-8 md:p-12 min-h-screen bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-900 flex items-center justify-center font-sans">
  <div class="w-full max-w-4xl bg-white dark:bg-gray-700 rounded-3xl shadow-xl p-6 sm:p-8 md:p-10 border border-gray-200 dark:border-gray-600 transition-all duration-300">
    <h2 class="text-2xl sm:text-3xl md:text-4xl font-extrabold text-center mb-8 sm:mb-10 text-gray-800 dark:text-gray-100 leading-tight">
      Your Next Obsession Starts Here!
    </h2>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 md:gap-8">
      
      <!-- Button 1: Stream Now -->
      <button class="relative group flex items-center justify-center px-6 py-3 sm:px-7 sm:py-4 md:px-8 md:py-5 bg-purple-300 dark:bg-purple-600 text-white dark:text-purple-100 font-semibold rounded-full shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 ease-in-out focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-500 overflow-hidden">
        <span class="absolute inset-0 bg-transparent group-hover:bg-purple-400 dark:group-hover:bg-purple-700 opacity-50 rounded-full transition-all duration-300"></span>
        <svg class="h-6 w-6 sm:h-7 sm:w-7 mr-2 sm:mr-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path>
        </svg>
        <span class="relative z-10 text-lg sm:text-xl">Stream Now</span>
      </button>

      <!-- Button 2: Discover More -->
      <button class="relative group flex items-center justify-center px-6 py-3 sm:px-7 sm:py-4 md:px-8 md:py-5 bg-teal-300 dark:bg-teal-600 text-white dark:text-teal-100 font-semibold rounded-full shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 ease-in-out focus:outline-none focus:ring-4 focus:ring-teal-300 dark:focus:ring-teal-500 overflow-hidden">
        <span class="absolute inset-0 bg-transparent group-hover:bg-teal-400 dark:group-hover:bg-teal-700 opacity-50 rounded-full transition-all duration-300"></span>
        <svg class="h-6 w-6 sm:h-7 sm:w-7 mr-2 sm:mr-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
        </svg>
        <span class="relative z-10 text-lg sm:text-xl">Discover More</span>
      </button>

      <!-- Button 3: My Watchlist -->
      <button class="relative group flex items-center justify-center px-6 py-3 sm:px-7 sm:py-4 md:px-8 md:py-5 bg-orange-300 dark:bg-orange-600 text-white dark:text-orange-100 font-semibold rounded-full shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 ease-in-out focus:outline-none focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-500 overflow-hidden">
        <span class="absolute inset-0 bg-transparent group-hover:bg-orange-400 dark:group-hover:bg-orange-700 opacity-50 rounded-full transition-all duration-300"></span>
        <svg class="h-6 w-6 sm:h-7 sm:w-7 mr-2 sm:mr-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M5 4a2 2 0 012-2h6a2 2 0 012 2v14l-5-2.5L5 18V4z"></path>
        </svg>
        <span class="relative z-10 text-lg sm:text-xl">My Watchlist</span>
      </button>

      <!-- Button 4: Browse Genres -->
      <button class="relative group flex items-center justify-center px-6 py-3 sm:px-7 sm:py-4 md:px-8 md:py-5 bg-rose-300 dark:bg-rose-600 text-white dark:text-rose-100 font-semibold rounded-full shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 ease-in-out focus:outline-none focus:ring-4 focus:ring-rose-300 dark:focus:ring-rose-500 overflow-hidden">
        <span class="absolute inset-0 bg-transparent group-hover:bg-rose-400 dark:group-hover:bg-rose-700 opacity-50 rounded-full transition-all duration-300"></span>
        <svg class="h-6 w-6 sm:h-7 sm:w-7 mr-2 sm:mr-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path>
        </svg>
        <span class="relative z-10 text-lg sm:text-xl">Browse Genres</span>
      </button>

      <!-- Button 5: Recently Added -->
      <button class="relative group flex items-center justify-center px-6 py-3 sm:px-7 sm:py-4 md:px-8 md:py-5 bg-sky-300 dark:bg-sky-600 text-white dark:text-sky-100 font-semibold rounded-full shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 ease-in-out focus:outline-none focus:ring-4 focus:ring-sky-300 dark:focus:ring-sky-500 overflow-hidden">
        <span class="absolute inset-0 bg-transparent group-hover:bg-sky-400 dark:group-hover:bg-sky-700 opacity-50 rounded-full transition-all duration-300"></span>
        <svg class="h-6 w-6 sm:h-7 sm:w-7 mr-2 sm:mr-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path>
        </svg>
        <span class="relative z-10 text-lg sm:text-xl">Recently Added</span>
      </button>

      <!-- Button 6: Settings/Profile -->
      <button class="relative group flex items-center justify-center px-6 py-3 sm:px-7 sm:py-4 md:px-8 md:py-5 bg-gray-300 dark:bg-gray-500 text-gray-800 dark:text-gray-100 font-semibold rounded-full shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 ease-in-out focus:outline-none focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-400 overflow-hidden">
        <span class="absolute inset-0 bg-transparent group-hover:bg-gray-400 dark:group-hover:bg-gray-600 opacity-50 rounded-full transition-all duration-300"></span>
        <img class="h-8 w-8 sm:h-9 sm:w-9 rounded-full mr-2 sm:mr-3 object-cover shadow-inner" src="https://randomuser.me/api/portraits/men/8.jpg" alt="User Avatar">
        <span class="relative z-10 text-lg sm:text-xl">My Account</span>
      </button>

    </div>

    <div class="mt-10 sm:mt-12 text-center text-gray-600 dark:text-gray-300 text-sm sm:text-base">
      <p class="mb-2">Enjoy endless entertainment anywhere, anytime.</p>
      <p>&copy; <span id="current-year"></span> Your Entertainment Platform. All rights reserved.</p>
    </div>
  </div>
</div>

<script>
  document.getElementById('current-year').textContent = new Date().getFullYear();
</script>