Componente de mapas de negocios monocromático minimalista
Un componente de mapa interactivo y receptivo diseñado para sitios web comerciales y corporativos, con un diseño plano minimalista, combinación de colores monocromática y compatibilidad con el modo oscuro. Incluye un marcador de posición, mapa, imagen y marcadores de posición de detalles de contacto.
Código HTML
<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>Componentes relacionados
Luxury_Autumn_Maps_Component
Un componente de mapa elegante y receptivo diseñado para sitios web de viajes y turismo de lujo, con colores otoñales y compatibilidad con el modo oscuro.
Brutalism_Photography_Maps_Component
Un componente de mapa simple de estilo brutalista para portafolios de fotografía, con un esquema de color púrpura audaz con alto contraste y compatibilidad con modo oscuro.
Componente de mapa del tablero de Brutalist
Un componente de mapa de tablero de estilo brutalista con colores vibrantes, alto contraste, elementos interactivos complejos, diseño receptivo y soporte de temas oscuros con Tailwind CSS.