Playful_Booking_Media_Component

<div class="p-4 sm:p-6 lg:p-8 bg-blue-50 dark:bg-gray-800 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-md mx-auto bg-white dark:bg-gray-900 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.02] border-4 border-rose-400 dark:border-rose-600">
    <div class="relative bg-rose-200 dark:bg-rose-700 h-40 overflow-hidden flex items-center justify-center p-4">
      <img src="https://picsum.photos/400/250?random=1" alt="Booking header image" class="absolute inset-0 w-full h-full object-cover rounded-t-3xl opacity-80">
      <div class="absolute inset-0 bg-gradient-to-t from-rose-400/80 to-rose-200/50 dark:from-rose-800/80 dark:to-rose-700/50"></div>
      <h2 class="relative text-center text-3xl sm:text-4xl font-extrabold text-white dark:text-gray-100 drop-shadow-lg leading-tight p-2">
        Ready to Book Your Spot?
      </h2>
    </div>

    <div class="p-6 sm:p-8 space-y-6 text-center">
      <div class="flex justify-center -mt-16 mb-4">
        <img class="w-24 h-24 sm:w-28 sm:h-28 rounded-full border-4 border-yellow-300 dark:border-yellow-500 shadow-lg object-cover" src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="Service Provider Avatar">
      </div>
      
      <p class="text-gray-700 dark:text-gray-300 text-lg sm:text-xl font-semibold mb-4">
        Hello! I'm <span class="text-rose-500 dark:text-rose-400">Alex</span>,<br>your friendly service provider.
      </p>

      <p class="text-gray-600 dark:text-gray-400 text-base sm:text-lg leading-relaxed">
        Let's find the perfect time for your appointment. It's super easy!
      </p>

      <div class="flex flex-col sm:flex-row justify-center gap-4 pt-4">
        <a href="#" class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-yellow-400 hover:bg-yellow-500 dark:bg-yellow-600 dark:hover:bg-yellow-700 transition-colors duration-300 transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
          <svg class="-ml-1 mr-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
          </svg>
          Book Now
        </a>
        <a href="#" class="inline-flex items-center justify-center px-6 py-3 border-2 border-yellow-400 dark:border-yellow-600 text-base font-medium rounded-full text-yellow-600 dark:text-yellow-400 hover:bg-yellow-50 dark:hover:bg-gray-800 transition-colors duration-300 transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
          <svg class="-ml-1 mr-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684L10.5 9l2.5-2.5L14.5 9l1.5-1.5L18 11.5V14a2 2 0 01-2 2H8a2 2 0 01-2-2V6a2 2 0 012-2h3.28a1 1 0 01.948.684L10.5 9l2.5-2.5L14.5 9l1.5-1.5L18 11.5V14a2 2 0 01-2 2H8a2 2 0 01-2-2V6c0-1.1.9-2 2-2h3.28a1 1 0 01.948.684L10.5 9z" />
          </svg>
          Learn More
        </a>
      </div>
    </div>
  </div>
</div>