Luxury_Autumn_Maps_Component

<div class="bg-stone-50 dark:bg-stone-950 min-h-screen p-4 sm:p-8 font-serif text-stone-800 dark:text-stone-200 transition-colors duration-300">
  <div class="max-w-7xl mx-auto bg-white dark:bg-stone-900 rounded-3xl shadow-xl overflow-hidden md:flex elevation-200">
    
    <!-- Left Panel: Map Preview -->
    <div class="md:w-3/5 relative min-h-[300px] md:min-h-auto">
      <img src="https://picsum.photos/1200/800/?random=1&blur=2" alt="Map Preview" class="w-full h-full object-cover brightness-90 dark:brightness-75">
      <div class="absolute inset-0 bg-gradient-to-t from-stone-900/60 to-transparent flex items-end p-6 md:p-10">
        <h2 class="text-4xl sm:text-5xl font-bold text-white leading-tight mb-2">
          Explore Hidden Gems
        </h2>
      </div>
      <button class="absolute top-6 right-6 p-3 rounded-full bg-white dark:bg-stone-800 text-stone-700 dark:text-stone-300 shadow-lg hover:scale-105 active:scale-95 transition-transform duration-200 focus:outline-none focus:ring-4 focus:ring-stone-300 dark:focus:ring-stone-700" aria-label="View Live Map">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M9.75 17L9 20l-1 1h-5v-1h5.381c.217 0 .419-.074.587-.206 1.745-1.229 2.542-3.873 1.282-5.733L7.02 9.083c-.882-1.322-.44-3.109 1.096-3.771 1.764-.784 3.731-.225 4.542 1.411.085.176.136.377.144.584L14.5 12h2.5l-.276-2.76A5 5 0 0013.2 4.14C11.5 1.458 8 1.875 6.07 4.128L3.11 7.24a4.998 4.998 0 00-1.07 4.137l.45 2.25c.162.81.71 1.636 1.44 2.115l.235.155c.677.447 1.503.654 2.316.654H9.75z" />
        </svg>
      </button>
    </div>

    <!-- Right Panel: Location Details & Search -->
    <div class="md:w-2/5 p-6 sm:p-8 md:p-10 flex flex-col justify-between">
      <div>
        <h3 class="text-3xl font-bold text-stone-800 dark:text-stone-100 mb-4">Discover Your Next Adventure</h3>
        <p class="text-stone-600 dark:text-stone-300 leading-relaxed mb-6">
          Uncover curated experiences and stunning destinations. From serene landscapes to bustling cityscapes, find your perfect escape.
        </p>

        <!-- Search Bar -->
        <div class="relative mb-6">
          <input type="text" placeholder="Search locations, landmarks..." class="w-full py-3 pl-12 pr-4 rounded-xl bg-stone-100 dark:bg-stone-800 border border-stone-200 dark:border-stone-700 text-stone-800 dark:text-stone-200 focus:outline-none focus:ring-2 focus:ring-orange-400 dark:focus:ring-orange-600 transition-all duration-200 placeholder:text-stone-400 dark:placeholder:text-stone-500">
          <div class="absolute inset-y-0 left-0 flex items-center pl-4">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-stone-500 dark:text-stone-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
            </svg>
          </div>
        </div>

        <!-- Featured Locations -->
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 auto-rows-fr">
          <div class="flex items-center p-4 rounded-lg bg-orange-50 dark:bg-orange-950 border border-orange-100 dark:border-orange-800 shadow-sm transition-transform hover:scale-[1.02] duration-200">
            <img src="https://picsum.photos/60/60?random=2" alt="Location Image" class="w-10 h-10 rounded-full object-cover mr-3">
            <div>
              <p class="font-semibold text-orange-800 dark:text-orange-200 text-sm">Autumn Peaks</p>
              <p class="text-xs text-orange-600 dark:text-orange-400">Mountains, SCENIC</p>
            </div>
          </div>
          <div class="flex items-center p-4 rounded-lg bg-orange-50 dark:bg-orange-950 border border-orange-100 dark:border-orange-800 shadow-sm transition-transform hover:scale-[1.02] duration-200">
            <img src="https://picsum.photos/60/60?random=3" alt="Location Image" class="w-10 h-10 rounded-full object-cover mr-3">
            <div>
              <p class="font-semibold text-orange-800 dark:text-orange-200 text-sm">Vineyard Valley</p>
              <p class="text-xs text-orange-600 dark:text-orange-400">WINE, RURAL</p>
            </div>
          </div>
          <div class="flex items-center p-4 rounded-lg bg-orange-50 dark:bg-orange-950 border border-orange-100 dark:border-orange-800 shadow-sm transition-transform hover:scale-[1.02] duration-200">
            <img src="https://picsum.photos/60/60?random=4" alt="Location Image" class="w-10 h-10 rounded-full object-cover mr-3">
            <div>
              <p class="font-semibold text-orange-800 dark:text-orange-200 text-sm">Lakeside Retreat</p>
              <p class="text-xs text-orange-600 dark:text-orange-400">NATURE, CALM</p>
            </div>
          </div>
          <div class="flex items-center p-4 rounded-lg bg-orange-50 dark:bg-orange-950 border border-orange-100 dark:border-orange-800 shadow-sm transition-transform hover:scale-[1.02] duration-200">
            <img src="https://picsum.photos/60/60?random=5" alt="Location Image" class="w-10 h-10 rounded-full object-cover mr-3">
            <div>
              <p class="font-semibold text-orange-800 dark:text-orange-200 text-sm">Historic Old Town</p>
              <p class="text-xs text-orange-600 dark:text-orange-400">CITY, CULTURAL</p>
            </div>
          </div>
        </div>
      </div>

      <!-- Call to Action -->
      <div class="mt-8">
        <a href="#" class="inline-flex items-center justify-center w-full px-6 py-3 rounded-xl bg-orange-700 text-white font-semibold tracking-wide hover:bg-orange-800 dark:bg-orange-600 dark:hover:bg-orange-700 transition-colors duration-300 shadow-lg transform hover:-translate-y-0.5 active:translate-y-0 focus:outline-none focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-800">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M17.657 16.727A8 8 0 016.343 5.273L3 9.77v.068a.5.5 0 01-.5.5h-.069l-.16.03a.5.5 0 01-.177.018l-1.077.016a.5.5 0 01-.497-.48l-.001-.01c0-.27.224-.492.497-.492a.5.5 0 01.49-.408l.01-.01.01-.005a.5.5 0 01.372-.09m14.975 1.01a8 8 0 00-11.314-11.314M12 17.5V12h-.01m0 0l-5-5m5 5l5-5" />
          </svg>
          Plan Your Trip Now
        </a>
      </div>
    </div>

  </div>
</div>