미니멀리스트 단색 비즈니스 지도 구성 요소

<section class="py-16 sm:py-20 bg-gray-50 text-gray-800 dark:bg-gray-900 dark:text-gray-200">
  <div class="container mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center mb-12">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-gray-900 dark:text-white mb-4">
        Find Us On The Map
      </h2>
      <p class="text-lg sm:xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
        Visit our office or get in touch through our contact details below. We look forward to connecting with you.
      </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
      <!-- Map Placeholder -->
      <div class="relative rounded-lg overflow-hidden shadow-xl dark:shadow-2xl aspect-video w-full">
        <img src="https://picsum.photos/1200/800?grayscale&blur=2" alt="Placeholder map of our location" class="w-full h-full object-cover transition-transform duration-300 hover:scale-105">
        <div class="absolute inset-0 bg-gradient-to-t from-gray-900/50 to-transparent"></div>
        <div class="absolute bottom-4 left-4 right-4 p-4 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-md shadow-lg text-sm sm:text-base">
          <p class="font-semibold text-gray-900 dark:text-white mb-1">Our Global Headquarters</p>
          <p class="text-gray-700 dark:text-gray-300">123 Business Avenue, Suite 100, Metropolis City, Country 12345</p>
        </div>
      </div>

      <!-- Contact Information -->
      <div class="bg-white dark:bg-gray-800 p-8 sm:p-10 rounded-lg shadow-xl dark:shadow-2xl overflow-hidden">
        <h3 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white mb-6">
          Get In Touch
        </h3>
        <ul class="space-y-6">
          <li class="flex items-start">
            <svg class="h-7 w-7 text-gray-500 dark:text-gray-400 mr-4 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
              <path stroke-linecap="round" stroke-linejoin="round" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
            </svg>
            <div>
              <p class="font-semibold text-gray-900 dark:text-white text-lg">Address:</p>
              <p class="text-gray-700 dark:text-gray-300">123 Maple Street, Business District, Cityville, State 01234</p>
            </div>
          </li>
          <li class="flex items-start">
            <svg class="h-7 w-7 text-gray-500 dark:text-gray-400 mr-4 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
            </svg>
            <div>
              <p class="font-semibold text-gray-900 dark:text-white text-lg">Phone:</p>
              <a href="tel:+1234567890" class="text-indigo-600 hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300 transition-colors duration-200">+1 (234) 567-890</a>
            </div>
          </li>
          <li class="flex items-start">
            <svg class="h-7 w-7 text-gray-500 dark:text-gray-400 mr-4 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
            </svg>
            <div>
              <p class="font-semibold text-gray-900 dark:text-white text-lg">Email:</p>
              <a href="mailto:[email protected]" class="text-indigo-600 hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300 transition-colors duration-200">[email protected]</a>
            </div>
          </li>
        </ul>
        <div class="mt-8">
          <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors duration-200">
            Get Directions
            <svg class="ml-3 -mr-1 h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M17.525 17.525A7.989 7.989 0 0012 3c-4.418 0-8 3.582-8 8s3.582 8 8 8c2.072 0 3.999-.74 5.485-1.975L19 21l2-2-3.475-3.475z" />
            </svg>
          </a>
        </div>
      </div>
    </div>
  </div>
</section>