Neon_Glow_Maps_Component

<div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-gray-100 to-white dark:from-gray-950 dark:to-gray-900 overflow-hidden relative">
  <div class="max-w-7xl mx-auto rounded-xl shadow-2xl relative overflow-hidden ring-4 ring-offset-4 ring-offset-gray-100 dark:ring-offset-gray-950 ring-indigo-300 dark:ring-indigo-600 group">
    
    <!-- Glow Effect 1 -->
    <div class="absolute -top-1/4 -left-1/4 w-1/2 h-1/2 bg-blue-400 dark:bg-blue-600 rounded-full mix-blend-multiply filter blur-2xl opacity-10 animate-blob g:animate-blob-slow transform group-hover:scale-125 transition-transform duration-500"></div>
    <!-- Glow Effect 2 -->
    <div class="absolute -bottom-1/4 -right-1/4 w-1/2 h-1/2 bg-purple-400 dark:bg-purple-600 rounded-full mix-blend-multiply filter blur-2xl opacity-10 animate-blob animation-delay-2000 transform group-hover:scale-125 transition-transform duration-500"></div>

    <div class="relative z-10 p-4 sm:p-6 lg:p-8 bg-white dark:bg-gray-800 bg-opacity-80 dark:bg-opacity-80 backdrop-filter backdrop-blur-sm rounded-xl border border-gray-200 dark:border-gray-700">
      <h2 class="text-2xl sm:text-3xl font-extrabold text-center text-gray-900 dark:text-gray-100 mb-4 sm:mb-6 leading-tight tracking-wider">
        <span class="relative inline-block">
          Find Our Locations
          <span class="absolute bottom-0 left-0 w-full h-1 bg-gradient-to-r from-blue-400 to-purple-400 dark:from-blue-600 dark:to-purple-600 rounded-full animate-pulse-light"></span>
        </span>
      </h2>

      <div class="aspect-w-16 aspect-h-9 w-full overflow-hidden rounded-lg shadow-lg relative group">
        <img src="https://picsum.photos/id/1043/1200/675" alt="Map of photography studio locations" class="object-cover w-full h-full rounded-lg transition-transform duration-500 group-hover:scale-105 filter group-hover:brightness-110">
        <div class="absolute inset-0 bg-gradient-to-t from-gray-900 to-transparent opacity-0 group-hover:opacity-60 transition-opacity duration-300 rounded-lg"></div>
        <div class="absolute bottom-4 left-4 right-4 text-white p-2 text-sm text-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none">
          <p class="font-semibold drop-shadow-lg">Explore our inspiring photoshoot locations around the globe.</p>
        </div>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6 mt-6">
        <div class="p-4 sm:p-5 rounded-lg bg-gray-50 dark:bg-gray-850 border border-gray-200 dark:border-gray-700 shadow-md group-hover:scale-[1.02] transition-transform duration-300">
          <p class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-2"><span class="neon-text-blue">Studio Alpha</span></p>
          <p class="text-gray-600 dark:text-gray-400 text-sm">123 Artistry Lane, Creative City, CA 90210</p>
          <p class="text-gray-600 dark:text-gray-400 text-sm">(555) 123-4567</p>
        </div>
        <div class="p-4 sm:p-5 rounded-lg bg-gray-50 dark:bg-gray-850 border border-gray-200 dark:border-gray-700 shadow-md group-hover:scale-[1.02] transition-transform duration-300">
          <p class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-2"><span class="neon-text-purple">Gallery Echo</span></p>
          <p class="text-gray-600 dark:text-gray-400 text-sm">789 Visionary Blvd, Lens Landing, NY 10001</p>
          <p class="text-gray-600 dark:text-gray-400 text-sm">(555) 987-6543</p>
        </div>
      </div>

      <div class="flex justify-center mt-8">
        <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-full text-white bg-gradient-to-r from-blue-500 to-purple-500 hover:from-blue-600 hover:to-purple-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900 focus:ring-blue-500 dark:focus:ring-purple-500 shadow-lg transform transition-all duration-300 ease-in-out hover:scale-105 active:scale-95 group relative overflow-hidden">
          <span class="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-white/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
          <span class="relative z-10">Explore More Locations</span>
          <svg class="ml-2 -mr-1 w-5 h-5 relative z-10" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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><path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
        </a>
      </div>

    </div>
  </div>

  <!-- Custom CSS for glow and blob animations -->
  <style>
    @keyframes blob {
      0% { transform: translate(0px, 0px) scale(1); }
      33% { transform: translate(30px, -50px) scale(1.1); }
      66% { transform: translate(-20px, 20px) scale(0.9); }
      100% { transform: translate(0px, 0px) scale(1); }
    }
    .animate-blob { animation: blob 7s infinite; }
    .animate-blob-slow { animation: blob 12s infinite; }
    .animation-delay-2000 { animation-delay: 2000ms; }
    .dark .animate-pulse-light { animation: pulse-light-dark 2s infinite ease-in-out alternate; }
    .animate-pulse-light { animation: pulse-light 2s infinite ease-in-out alternate; }
    
    @keyframes pulse-light {
        0% { transform: scaleX(0); opacity: 0.2; }
        50% { transform: scaleX(1); opacity: 0.8; }
        100% { transform: scaleX(0); opacity: 0.2; }
    }
    @keyframes pulse-light-dark {
        0% { transform: scaleX(0); opacity: 0.3; }
        50% { transform: scaleX(1); opacity: 0.9; }
        100% { transform: scaleX(0); opacity: 0.3; }
    }
    .neon-text-blue {
      text-shadow: 0 0 5px #a7f3d0, 0 0 10px #67e8f9, 0 0 15px #38b2ac, 0 0 20px #06b6d4, 0 0 25px #0ea5e9;
      color: #7dd3fc;
    }
    .dark .neon-text-blue {
      text-shadow: 0 0 5px #7dd3fc, 0 0 10px #38b2ac, 0 0 15px #0ea5e9, 0 0 20px #06b6d4, 0 0 25px #3b82f6; /* Darker blue glow */
      color: #93c5fd;
    }
    .neon-text-purple {
      text-shadow: 0 0 5px #f0abfc, 0 0 10px #e879f9, 0 0 15px #d946ef, 0 0 20px #c026d3, 0 0 25px #a855f7;
      color: #e879f9;
    }
    .dark .neon-text-purple {
      text-shadow: 0 0 5px #a78bfa, 0 0 10px #c026d3, 0 0 15px #a855f7, 0 0 20px #9333ea, 0 0 25px #8b5cf6; /* Darker purple glow */
      color: #d8b4fe;
    }
  </style>
</div>