Juan Felipe Zapata Moreno 3c70f41652 Cambios
2025-08-21 17:12:07 -06:00

126 lines
6.5 KiB
Vue

<template>
<footer class="bg-[#58595b] text-white py-8">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<!-- Logo y información de contacto -->
<div class="flex flex-col md:flex-row gap-6">
<!-- Logo -->
<div class="flex-shrink-0">
<img
src="https://apoyos.comalcalco.gob.mx/images/logo_blanco.png"
alt="Comalcalco Logo"
class="h-20 w-auto object-contain"
/>
</div>
<!-- Información de contacto -->
<div class="space-y-3">
<!-- Dirección -->
<div class="flex items-start space-x-3">
<div class="bg-yellow-600 rounded-full p-2 flex-shrink-0">
<svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"/>
</svg>
</div>
<p class="text-sm text-gray-300">
Plaza Juárez S/N, Centro, C.P. 86300, Comalcalco,<br>
Tabasco, México.
</p>
</div>
<!-- Teléfono -->
<div class="flex items-center space-x-3">
<div class="bg-yellow-600 rounded-full p-2 flex-shrink-0">
<svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
<path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"/>
</svg>
</div>
<p class="text-sm text-gray-300">9331140000</p>
</div>
<!-- Horarios -->
<div class="flex items-center space-x-3">
<div class="bg-yellow-600 rounded-full p-2 flex-shrink-0">
<svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"/>
</svg>
</div>
<p class="text-sm text-gray-300">Lunes a Viernes de 8:00 a 16:00 horas</p>
</div>
<!-- Email -->
<div class="flex items-center space-x-3">
<div class="bg-yellow-600 rounded-full p-2 flex-shrink-0">
<svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
<path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"/>
<path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"/>
</svg>
</div>
<p class="text-sm text-gray-300">
<a href="mailto:mejoraregulatoria@comalcalco.gob.mx" class="hover:text-yellow-400 transition-colors">
mejoraregulatoria@comalcalco.gob.mx
</a>
</p>
</div>
</div>
</div>
<!-- Servicios de emergencia -->
<div class="space-y-4">
<!-- Emergencias -->
<div class="flex items-center space-x-3">
<div class="bg-yellow-600 rounded-full p-2 flex-shrink-0">
<svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
</svg>
</div>
<div>
<p class="text-yellow-400 font-semibold text-sm">Emergencias</p>
<p class="text-white text-lg font-bold">911</p>
</div>
</div>
<!-- Bomberos -->
<div class="flex items-center space-x-3">
<div class="bg-yellow-600 rounded-full p-2 flex-shrink-0">
<svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M12.395 2.553a1 1 0 00-1.45-.385c-.345.23-.614.558-.822.88-.214.33-.403.713-.57 1.116-.334.804-.614 1.768-.84 2.734a31.365 31.365 0 00-.613 3.58 2.64 2.64 0 01-.945-1.067c-.328-.68-.398-1.534-.398-2.654A1 1 0 005.05 6.05 6.981 6.981 0 003 11a7 7 0 1011.95-4.95c-.592-.591-.98-.985-1.348-1.467-.363-.476-.724-1.063-1.207-2.03zM12.12 15.12A3 3 0 017 13s.879.5 2.5.5c0-1 .5-4 1.25-4.5.5 1 .786 1.293 1.371 1.879A2.99 2.99 0 0113 13a2.99 2.99 0 01-.879 2.121z" clip-rule="evenodd"/>
</svg>
</div>
<div>
<p class="text-yellow-400 font-semibold text-sm">Bomberos</p>
<p class="text-white text-lg font-bold">993 315 5670</p>
</div>
</div>
<!-- Cruz Roja -->
<div class="flex items-center space-x-3">
<div class="bg-yellow-600 rounded-full p-2 flex-shrink-0">
<svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M6 2a2 2 0 00-2 2v12a2 2 0 002 2h8a2 2 0 002-2V4a2 2 0 00-2-2H6zm1 2a1 1 0 000 2h6a1 1 0 100-2H7zm6 7a1 1 0 011 1v3a1 1 0 11-2 0v-3a1 1 0 011-1zm-3 3a1 1 0 100 2h.01a1 1 0 100-2H10zm-4 1a1 1 0 011-1h.01a1 1 0 110 2H7a1 1 0 01-1-1zm1-4a1 1 0 100 2h.01a1 1 0 100-2H7zm2 1a1 1 0 011-1h.01a1 1 0 110 2H10a1 1 0 01-1-1zm4-4a1 1 0 100 2h.01a1 1 0 100-2H13zM9 9a1 1 0 011-1h.01a1 1 0 110 2H10a1 1 0 01-1-1zM7 8a1 1 0 000 2h.01a1 1 0 000-2H7z" clip-rule="evenodd"/>
</svg>
</div>
<div>
<p class="text-yellow-400 font-semibold text-sm">Cruz Roja Mexicana</p>
<p class="text-white text-lg font-bold">993 334 3004</p>
</div>
</div>
</div>
</div>
<!-- Copyright -->
<div class="mt-8 pt-6 border-t border-gray-600 text-center">
<div class="flex flex-col md:flex-row justify-center items-center space-y-2 md:space-y-0 md:space-x-6">
<p class="text-sm text-gray-300">
© Ayuntamiento de Comalcalco 2024-2027
</p>
<span class="hidden md:block text-gray-500">|</span>
<a href="#" class="text-sm text-gray-300 hover:text-yellow-400 transition-colors">
Aviso de Privacidad
</a>
</div>
</div>
</div>
</footer>
</template>