Gradient_Forest_Maps_Component

<div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-emerald-50 to-lime-100 dark:from-gray-900 dark:to-gray-800 transition-colors duration-500 min-h-screen flex items-center justify-center">
  <div class="max-w-4xl w-full rounded-xl shadow-2xl overflow-hidden bg-white dark:bg-gray-800 transition-colors duration-500 backdrop-blur-sm bg-opacity-80 dark:bg-opacity-80 border border-emerald-200 dark:border-emerald-700">
    <div class="p-6 sm:p-8 lg:p-10 text-center">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-emerald-800 dark:text-emerald-300 mb-4 sm:mb-6 leading-tight transition-colors duration-500">
        Explore Geographic Concepts
      </h2>
      <p class="text-lg sm:text-xl text-emerald-700 dark:text-emerald-400 mb-6 sm:mb-8 transition-colors duration-500">
        Visualize and understand complex geographic data with interactive maps.
      </p>

      <div class="relative w-full h-64 sm:h-80 md:h-96 lg:h-112 rounded-lg overflow-hidden shadow-xl border border-emerald-300 dark:border-emerald-600 group">
        <!-- Placeholder for an interactive map -->
        <img src="https://picsum.photos/1200/800?random=1&blur=2" alt="Placeholder map illustration with abstract geographical features" class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-105 group-focus-within:scale-105 opacity-80 dark:opacity-70" aria-hidden="true">
        <div class="absolute inset-0 bg-gradient-to-br from-emerald-400/30 to-lime-200/30 dark:from-emerald-800/40 dark:to-lime-900/40 flex items-center justify-center p-4 rounded-lg">
          <div class="text-white drop-shadow-lg text-center">
            <p class="text-xl sm:text-2xl font-bold mb-2">Interactive Map Area</p>
            <p class="text-sm sm:text-base">Content for map embedding would go here.</p>
          </div>
        </div>
      </div>

      <div class="mt-8 text-center">
        <a href="#" class="inline-flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-full shadow-lg text-white 
        bg-gradient-to-r from-emerald-500 to-lime-600 hover:from-emerald-600 hover:to-lime-700 
        dark:from-emerald-600 dark:to-lime-700 dark:hover:from-emerald-700 dark:hover:to-lime-800 
        transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500 dark:focus:ring-emerald-400 focus:ring-offset-white dark:focus:ring-offset-gray-900">
          
          View Course Maps
          <svg class="ml-3 -mr-1 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd" />
            <path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd" />
          </svg>
        </a>
      </div>
    </div>
  </div>
</div>