ゲームのための遊び心のあるマップコンポーネント

<div class="p-4 sm:p-8 bg-gradient-to-br from-emerald-100 to-teal-100 dark:from-gray-800 dark:to-gray-950 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-4xl bg-gradient-to-br from-purple-200 to-indigo-200 dark:from-purple-900 dark:to-indigo-950 rounded-3xl shadow-2xl p-6 sm:p-8 transform hover:scale-105 transition duration-300 ease-in-out border-4 border-white dark:border-gray-700 overflow-hidden">
    <div class="flex flex-col md:flex-row gap-6 sm:gap-8 items-center">
      <div class="flex-shrink-0 w-full md:w-1/2 p-2 bg-white dark:bg-gray-800 rounded-2xl shadow-lg transform hover:rotate-2 transition duration-200 ease-in-out">
        <img src="https://picsum.photos/600/400?random=1" alt="Game Map Screenshot" class="w-full h-auto rounded-xl object-cover border-2 border-indigo-400 dark:border-indigo-600 shadow-md">
      </div>
      <div class="flex-grow text-center md:text-left">
        <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-indigo-800 dark:text-indigo-300 mb-3 sm:mb-4 leading-tight tracking-tight drop-shadow-lg">
          Explore <span class="text-fuchsia-600 dark:text-fuchsia-400">Mystic</span> Realms
        </h2>
        <p class="text-lg sm:text-xl text-indigo-700 dark:text-indigo-200 mb-6 sm:mb-8 max-w-lg mx-auto md:mx-0">
          Embark on epic quests and discover hidden treasures across vibrant landscapes. Your next adventure awaits!
        </p>
        <div class="flex flex-col sm:flex-row gap-4 justify-center md:justify-start">
          <button class="px-8 py-3 bg-fuchsia-500 hover:bg-fuchsia-600 text-white rounded-full font-bold text-lg shadow-lg transform hover:scale-105 hover:rotate-1 transition duration-200 ease-in-out focus:outline-none focus:ring-4 focus:ring-fuchsia-300 dark:focus:ring-fuchsia-700">
            View All Maps
          </button>
          <button class="px-8 py-3 bg-emerald-500 hover:bg-emerald-600 text-white rounded-full font-bold text-lg shadow-lg transform hover:scale-105 hover:-rotate-1 transition duration-200 ease-in-out focus:outline-none focus:ring-4 focus:ring-emerald-300 dark:focus:ring-emerald-700">
            Start Adventure
          </button>
        </div>
      </div>
    </div>
    <div class="mt-8 sm:mt-10 pt-6 border-t-2 border-indigo-300 dark:border-indigo-800 text-center">
      <h3 class="text-xl sm:text-2xl font-bold text-purple-800 dark:text-purple-300 mb-4">Popular Zones</h3>
      <div class="grid grid-cols-2 md:grid-cols-4 gap-4 sm:gap-6">
        <div class="p-3 sm:p-4 bg-white dark:bg-gray-800 rounded-xl shadow-md transform hover:translate-y-1 transition duration-200 ease-in-out border-2 border-purple-300 dark:border-purple-700 group cursor-pointer">
          <img src="https://picsum.photos/100/100?random=2" alt="Zone 1" class="w-12 h-12 sm:w-16 sm:h-16 rounded-full mx-auto mb-2 object-cover border-2 border-emerald-400 dark:border-emerald-600 group-hover:scale-110 transition duration-200">
          <p class="text-sm sm:text-base font-semibold text-indigo-700 dark:text-indigo-200">Sunken City</p>
        </div>
        <div class="p-3 sm:p-4 bg-white dark:bg-gray-800 rounded-xl shadow-md transform hover:translate-y-1 transition duration-200 ease-in-out border-2 border-purple-300 dark:border-purple-700 group cursor-pointer">
          <img src="https://picsum.photos/100/100?random=3" alt="Zone 2" class="w-12 h-12 sm:w-16 sm:h-16 rounded-full mx-auto mb-2 object-cover border-2 border-emerald-400 dark:border-emerald-600 group-hover:scale-110 transition duration-200">
          <p class="text-sm sm:text-base font-semibold text-indigo-700 dark:text-indigo-200">Dragon's Peak</p>
        </div>
        <div class="p-3 sm:p-4 bg-white dark:bg-gray-800 rounded-xl shadow-md transform hover:translate-y-1 transition duration-200 ease-in-out border-2 border-purple-300 dark:border-purple-700 group cursor-pointer">
          <img src="https://picsum.photos/100/100?random=4" alt="Zone 3" class="w-12 h-12 sm:w-16 sm:h-16 rounded-full mx-auto mb-2 object-cover border-2 border-emerald-400 dark:border-emerald-600 group-hover:scale-110 transition duration-200">
          <p class="text-sm sm:text-base font-semibold text-indigo-700 dark:text-indigo-200">Whispering Woods</p>
        </div>
        <div class="p-3 sm:p-4 bg-white dark:bg-gray-800 rounded-xl shadow-md transform hover:translate-y-1 transition duration-200 ease-in-out border-2 border-purple-300 dark:border-purple-700 group cursor-pointer">
          <img src="https://picsum.photos/100/100?random=5" alt="Zone 4" class="w-12 h-12 sm:w-16 sm:h-16 rounded-full mx-auto mb-2 object-cover border-2 border-emerald-400 dark:border-emerald-600 group-hover:scale-110 transition duration-200">
          <p class="text-sm sm:text-base font-semibold text-indigo-700 dark:text-indigo-200">Crimson Wastes</p>
        </div>
      </div>
      <div class="mt-6">
        <a href="#" class="inline-flex items-center text-indigo-700 dark:text-indigo-300 hover:text-emerald-500 dark:hover:text-emerald-400 font-semibold text-md sm:text-lg transition-colors duration-200">
          See All Zones
          <svg class="ml-2 w-4 h-4 sm:w-5 sm: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="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
        </a>
      </div>
    </div>
  </div>
</div>