Hugging Face's logo

Spaces:
atapiam
/
intranet
Running

App Files Community
intranet / index.html
atapiam's picture
atapiam
Add 3 files
7a3e7b4 verified
raw
history blame contribute delete
39.6 kB
 <!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Intranet GIM Desarrollos</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.sidebar {
transition: all 0.3s ease;
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.active-tab {
border-bottom: 3px solid #3b82f6;
color: #3b82f6;
}
</style>
</head>
<body class="bg-gray-100 font-sans">
<!-- Header -->
<header class="bg-blue-800 text-white shadow-lg">
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
<div class="flex items-center space-x-4">
<img src="https://via.placeholder.com/50" alt="Logo GIM Desarrollos" class="h-10">
<h1 class="text-2xl font-bold">Intranet GIM Desarrollos</h1>
</div>
<div class="flex items-center space-x-4">
<div class="relative">
<input type="text" placeholder="Buscar..." class="px-4 py-2 rounded-full text-gray-800 w-64">
<i class="fas fa-search absolute right-3 top-2.5 text-gray-500"></i>
</div>
<div class="flex items-center space-x-2">
<img src="https://via.placeholder.com/40" alt="Usuario" class="h-8 rounded-full">
<span>Juan Pérez</span>
<i class="fas fa-chevron-down text-sm"></i>
</div>
</div>
</div>
</header>
<div class="flex">
<!-- Sidebar -->
<aside class="sidebar bg-white w-64 min-h-screen shadow-md fixed hidden md:block">
<div class="p-4">
<div class="text-center py-4">
<img src="https://via.placeholder.com/100" alt="Foto usuario" class="h-20 w-20 rounded-full mx-auto mb-2">
<h3 class="font-semibold">Juan Pérez</h3>
<p class="text-sm text-gray-500">Departamento de TI</p>
</div>
<nav class="mt-6">
<div>
<h4 class="px-4 py-2 text-gray-500 uppercase text-xs font-bold">Principal</h4>
<a href="#inicio" class="flex items-center px-4 py-3 text-blue-700 bg-blue-50 rounded-lg">
<i class="fas fa-home mr-3"></i>
<span>Inicio</span>
</a>
<a href="#perfil" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-100 rounded-lg">
<i class="fas fa-user mr-3"></i>
<span>Mi Perfil</span>
</a>
<a href="#mensajes" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-100 rounded-lg">
<i class="fas fa-envelope mr-3"></i>
<span>Mensajes</span>
<span class="ml-auto bg-red-500 text-white text-xs px-2 py-1 rounded-full">3</span>
</a>
</div>
<div class="mt-6">
<h4 class="px-4 py-2 text-gray-500 uppercase text-xs font-bold">Empresa</h4>
<a href="#mision" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-100 rounded-lg">
<i class="fas fa-bullseye mr-3"></i>
<span>Misión y Visión</span>
</a>
<a href="#valores" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-100 rounded-lg">
<i class="fas fa-heart mr-3"></i>
<span>Valores</span>
</a>
<a href="#organigrama" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-100 rounded-lg">
<i class="fas fa-sitemap mr-3"></i>
<span>Organigrama</span>
</a>
</div>
<div class="mt-6">
<h4 class="px-4 py-2 text-gray-500 uppercase text-xs font-bold">Servicios</h4>
<a href="#vacaciones" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-100 rounded-lg">
<i class="fas fa-umbrella-beach mr-3"></i>
<span>Vacaciones</span>
</a>
<a href="#nomina" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-100 rounded-lg">
<i class="fas fa-file-invoice-dollar mr-3"></i>
<span>Recibos de Nómina</span>
</a>
<a href="#transporte" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-100 rounded-lg">
<i class="fas fa-bus mr-3"></i>
<span>Transporte</span>
</a>
<a href="#juntas" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-100 rounded-lg">
<i class="fas fa-users mr-3"></i>
<span>Sala de Juntas</span>
</a>
<a href="#convenios" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-100 rounded-lg">
<i class="fas fa-handshake mr-3"></i>
<span>Convenios</span>
</a>
<a href="#salidas" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-100 rounded-lg">
<i class="fas fa-box-open mr-3"></i>
<span>Salidas de Equipo</span>
</a>
</div>
<div class="mt-6">
<h4 class="px-4 py-2 text-gray-500 uppercase text-xs font-bold">Integraciones</h4>
<a href="#sharepoint" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-100 rounded-lg">
<i class="fas fa-share-alt mr-3"></i>
<span>HSarepoint Empresarial</span>
</a>
</div>
</nav>
</div>
</aside>
<!-- Mobile menu button -->
<button id="mobileMenuButton" class="md:hidden fixed bottom-6 right-6 bg-blue-700 text-white p-4 rounded-full shadow-lg z-50">
<i class="fas fa-bars text-xl"></i>
</button>
<!-- Main Content -->
<main class="flex-1 ml-0 md:ml-64 p-6">
<!-- Welcome Banner -->
<div class="bg-gradient-to-r from-blue-600 to-blue-800 text-white rounded-xl p-6 mb-6 shadow-lg">
<div class="flex flex-col md:flex-row justify-between items-start md:items-center">
<div>
<h2 class="text-2xl font-bold mb-2">¡Bienvenido, Juan!</h2>
<p class="opacity-90">Aquí encontrarás toda la información y herramientas que necesitas para tu día a día en GIM Desarrollos.</p>
</div>
<div class="mt-4 md:mt-0">
<button class="bg-white text-blue-700 px-6 py-2 rounded-lg font-semibold hover:bg-blue-50 transition">
<i class="fas fa-bell mr-2"></i> Notificaciones
</button>
</div>
</div>
</div>
<!-- Quick Access -->
<div class="mb-8">
<h3 class="text-xl font-semibold mb-4 text-gray-700">Acceso rápido</h3>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
<a href="#vacaciones" class="card-hover bg-white p-6 rounded-xl shadow-md flex flex-col items-center text-center transition duration-300">
<div class="bg-blue-100 p-4 rounded-full mb-3">
<i class="fas fa-umbrella-beach text-blue-600 text-2xl"></i>
</div>
<h4 class="font-semibold">Solicitar vacaciones</h4>
<p class="text-sm text-gray-500 mt-1">Gestiona tus días de descanso</p>
</a>
<a href="#nomina" class="card-hover bg-white p-6 rounded-xl shadow-md flex flex-col items-center text-center transition duration-300">
<div class="bg-green-100 p-4 rounded-full mb-3">
<i class="fas fa-file-invoice-dollar text-green-600 text-2xl"></i>
</div>
<h4 class="font-semibold">Recibos de nómina</h4>
<p class="text-sm text-gray-500 mt-1">Consulta tus comprobantes</p>
</a>
<a href="#juntas" class="card-hover bg-white p-6 rounded-xl shadow-md flex flex-col items-center text-center transition duration-300">
<div class="bg-purple-100 p-4 rounded-full mb-3">
<i class="fas fa-users text-purple-600 text-2xl"></i>
</div>
<h4 class="font-semibold">Reservar sala</h4>
<p class="text-sm text-gray-500 mt-1">Agenda espacios para reuniones</p>
</a>
<a href="#sharepoint" class="card-hover bg-white p-6 rounded-xl shadow-md flex flex-col items-center text-center transition duration-300">
<div class="bg-orange-100 p-4 rounded-full mb-3">
<i class="fas fa-share-alt text-orange-600 text-2xl"></i>
</div>
<h4 class="font-semibold">HSarepoint</h4>
<p class="text-sm text-gray-500 mt-1">Accede a documentos compartidos</p>
</a>
</div>
</div>
<!-- Company Info Tabs -->
<div class="bg-white rounded-xl shadow-md mb-8">
<div class="border-b border-gray-200">
<nav class="flex -mb-px">
<button id="misionTab" class="active-tab py-4 px-6 text-center border-b-2 font-medium text-sm">
Misión y Visión
</button>
<button id="valoresTab" class="py-4 px-6 text-center border-b-2 font-medium text-sm text-gray-500 hover:text-blue-700">
Valores Corporativos
</button>
</nav>
</div>
<div class="p-6">
<div id="misionContent" class="tab-content">
<div class="flex flex-col md:flex-row gap-8">
<div class="md:w-1/2">
<h3 class="text-xl font-semibold mb-4 text-blue-700">Nuestra Misión</h3>
<p class="text-gray-700 mb-6">
En GIM Desarrollos nos comprometemos a ofrecer soluciones innovadoras en el sector de la construcción y desarrollo inmobiliario, superando las expectativas de nuestros clientes mediante la excelencia en diseño, calidad y servicio, contribuyendo al desarrollo sostenible de las comunidades donde operamos.
</p>
<div class="bg-blue-50 p-4 rounded-lg border-l-4 border-blue-500">
<h4 class="font-semibold text-blue-700 mb-2">Compromiso con la excelencia</h4>
<p class="text-sm text-gray-600">Cada proyecto es una oportunidad para demostrar nuestro compromiso con los más altos estándares de calidad.</p>
</div>
</div>
<div class="md:w-1/2">
<h3 class="text-xl font-semibold mb-4 text-blue-700">Nuestra Visión</h3>
<p class="text-gray-700 mb-6">
Ser reconocidos como líderes en el sector de desarrollo inmobiliario a nivel nacional para el 2030, destacando por nuestra innovación, responsabilidad social y sostenibilidad, siendo el empleador preferido por profesionales talentosos que comparten nuestros valores.
</p>
<div class="bg-blue-50 p-4 rounded-lg border-l-4 border-blue-500">
<h4 class="font-semibold text-blue-700 mb-2">Innovación constante</h4>
<p class="text-sm text-gray-600">Buscamos constantemente nuevas formas de mejorar y adaptarnos a las necesidades cambiantes del mercado.</p>
</div>
</div>
</div>
</div>
<div id="valoresContent" class="tab-content hidden">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white p-5 rounded-lg shadow-sm border border-gray-100 hover:border-blue-200 transition">
<div class="flex items-center mb-3">
<div class="bg-blue-100 p-2 rounded-full mr-3">
<i class="fas fa-handshake text-blue-600"></i>
</div>
<h3 class="font-semibold">Integridad</h3>
</div>
<p class="text-gray-600 text-sm">Actuamos con honestidad y transparencia en todas nuestras relaciones, manteniendo coherencia entre lo que decimos y hacemos.</p>
</div>
<div class="bg-white p-5 rounded-lg shadow-sm border border-gray-100 hover:border-blue-200 transition">
<div class="flex items-center mb-3">
<div class="bg-green-100 p-2 rounded-full mr-3">
<i class="fas fa-users text-green-600"></i>
</div>
<h3 class="font-semibold">Trabajo en equipo</h3>
</div>
<p class="text-gray-600 text-sm">Fomentamos la colaboración, el respeto mutuo y la sinergia entre áreas para alcanzar objetivos comunes.</p>
</div>
<div class="bg-white p-5 rounded-lg shadow-sm border border-gray-100 hover:border-blue-200 transition">
<div class="flex items-center mb-3">
<div class="bg-purple-100 p-2 rounded-full mr-3">
<i class="fas fa-lightbulb text-purple-600"></i>
</div>
<h3 class="font-semibold">Innovación</h3>
</div>
<p class="text-gray-600 text-sm">Buscamos constantemente nuevas y mejores formas de hacer las cosas, asumiendo riesgos calculados.</p>
</div>
<div class="bg-white p-5 rounded-lg shadow-sm border border-gray-100 hover:border-blue-200 transition">
<div class="flex items-center mb-3">
<div class="bg-yellow-100 p-2 rounded-full mr-3">
<i class="fas fa-heart text-yellow-600"></i>
</div>
<h3 class="font-semibold">Responsabilidad social</h3>
</div>
<p class="text-gray-600 text-sm">Nos comprometemos con el desarrollo sostenible y el bienestar de las comunidades donde operamos.</p>
</div>
<div class="bg-white p-5 rounded-lg shadow-sm border border-gray-100 hover:border-blue-200 transition">
<div class="flex items-center mb-3">
<div class="bg-red-100 p-2 rounded-full mr-3">
<i class="fas fa-trophy text-red-600"></i>
</div>
<h3 class="font-semibold">Excelencia</h3>
</div>
<p class="text-gray-600 text-sm">Buscamos la máxima calidad en todo lo que hacemos, superando constantemente nuestros estándares.</p>
</div>
<div class="bg-white p-5 rounded-lg shadow-sm border border-gray-100 hover:border-blue-200 transition">
<div class="flex items-center mb-3">
<div class="bg-indigo-100 p-2 rounded-full mr-3">
<i class="fas fa-user-tie text-indigo-600"></i>
</div>
<h3 class="font-semibold">Orientación al cliente</h3>
</div>
<p class="text-gray-600 text-sm">Ponemos al cliente en el centro de nuestras decisiones, anticipando y superando sus expectativas.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Employee Services -->
<div class="mb-8">
<h3 class="text-xl font-semibold mb-4 text-gray-700">Servicios al personal</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Vacaciones -->
<div class="bg-white rounded-xl shadow-md overflow-hidden">
<div class="bg-blue-600 px-6 py-3 flex items-center">
<i class="fas fa-umbrella-beach text-white mr-3"></i>
<h4 class="text-white font-semibold">Vacaciones</h4>
</div>
<div class="p-6">
<div class="flex justify-between items-center mb-4">
<div>
<p class="text-sm text-gray-500">Días disponibles</p>
<p class="text-2xl font-bold">12 días</p>
</div>
<div>
<p class="text-sm text-gray-500">Próximo periodo</p>
<p class="text-lg font-semibold">Ene 15, 2024</p>
</div>
</div>
<button class="w-full bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 transition">
Solicitar vacaciones
</button>
</div>
</div>
<!-- Nómina -->
<div class="bg-white rounded-xl shadow-md overflow-hidden">
<div class="bg-green-600 px-6 py-3 flex items-center">
<i class="fas fa-file-invoice-dollar text-white mr-3"></i>
<h4 class="text-white font-semibold">Recibos de nómina</h4>
</div>
<div class="p-6">
<div class="mb-4">
<p class="text-sm text-gray-500 mb-2">Último recibo</p>
<div class="flex justify-between items-center bg-gray-50 p-3 rounded-lg">
<div>
<p class="font-medium">Noviembre 2023</p>
<p class="text-sm text-gray-500">Liquidación completa</p>
</div>
<button class="text-green-600 hover:text-green-700">
<i class="fas fa-download"></i>
</button>
</div>
</div>
<button class="w-full bg-green-600 text-white py-2 rounded-lg hover:bg-green-700 transition">
Ver historial completo
</button>
</div>
</div>
<!-- Transporte -->
<div class="bg-white rounded-xl shadow-md overflow-hidden">
<div class="bg-purple-600 px-6 py-3 flex items-center">
<i class="fas fa-bus text-white mr-3"></i>
<h4 class="text-white font-semibold">Transporte</h4>
</div>
<div class="p-6">
<div class="mb-4">
<p class="text-sm text-gray-500 mb-2">Ruta asignada</p>
<div class="flex items-center">
<i class="fas fa-map-marker-alt text-purple-600 mr-3"></i>
<div>
<p class="font-medium">Ruta Norte - 7:30 AM</p>
<p class="text-sm text-gray-500">Parada: Av. Principal #123</p>
</div>
</div>
</div>
<button class="w-full bg-purple-600 text-white py-2 rounded-lg hover:bg-purple-700 transition">
Consultar rutas
</button>
</div>
</div>
<!-- Sala de juntas -->
<div class="bg-white rounded-xl shadow-md overflow-hidden">
<div class="bg-orange-600 px-6 py-3 flex items-center">
<i class="fas fa-users text-white mr-3"></i>
<h4 class="text-white font-semibold">Sala de juntas</h4>
</div>
<div class="p-6">
<div class="mb-4">
<p class="text-sm text-gray-500 mb-2">Disponibilidad hoy</p>
<div class="grid grid-cols-3 gap-2">
<div class="bg-green-100 text-green-800 text-center py-1 rounded text-xs">9-10 AM</div>
<div class="bg-green-100 text-green-800 text-center py-1 rounded text-xs">10-11 AM</div>
<div class="bg-red-100 text-red-800 text-center py-1 rounded text-xs">11-12 PM</div>
<div class="bg-green-100 text-green-800 text-center py-1 rounded text-xs">2-3 PM</div>
<div class="bg-green-100 text-green-800 text-center py-1 rounded text-xs">3-4 PM</div>
<div class="bg-green-100 text-green-800 text-center py-1 rounded text-xs">4-5 PM</div>
</div>
</div>
<button class="w-full bg-orange-600 text-white py-2 rounded-lg hover:bg-orange-700 transition">
Reservar sala
</button>
</div>
</div>
</div>
</div>
<!-- Additional Services -->
<div class="mb-8">
<h3 class="text-xl font-semibold mb-4 text-gray-700">Otros servicios</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- Convenios -->
<div class="bg-white rounded-xl shadow-md overflow-hidden">
<div class="bg-indigo-600 px-6 py-3 flex items-center">
<i class="fas fa-handshake text-white mr-3"></i>
<h4 class="text-white font-semibold">Convenios</h4>
</div>
<div class="p-6">
<p class="text-gray-600 text-sm mb-4">Beneficios exclusivos para colaboradores de GIM Desarrollos con nuestros aliados comerciales.</p>
<div class="space-y-3">
<div class="flex items-center">
<img src="https://via.placeholder.com/40" alt="Logo convenio" class="h-8 mr-3">
<span class="text-sm font-medium">15% descuento en Gimnasios</span>
</div>
<div class="flex items-center">
<img src="https://via.placeholder.com/40" alt="Logo convenio" class="h-8 mr-3">
<span class="text-sm font-medium">10% descuento en Universidades</span>
</div>
<div class="flex items-center">
<img src="https://via.placeholder.com/40" alt="Logo convenio" class="h-8 mr-3">
<span class="text-sm font-medium">Tarjeta de crédito preferencial</span>
</div>
</div>
<button class="w-full mt-4 bg-indigo-600 text-white py-2 rounded-lg hover:bg-indigo-700 transition">
Ver todos los convenios
</button>
</div>
</div>
<!-- Salidas de equipo -->
<div class="bg-white rounded-xl shadow-md overflow-hidden">
<div class="bg-amber-600 px-6 py-3 flex items-center">
<i class="fas fa-box-open text-white mr-3"></i>
<h4 class="text-white font-semibold">Salidas de equipo</h4>
</div>
<div class="p-6">
<p class="text-gray-600 text-sm mb-4">Registro de equipos y materiales que salen de las instalaciones de la empresa.</p>
<div class="mb-4">
<p class="text-sm text-gray-500 mb-2">Tus solicitudes recientes</p>
<div class="bg-gray-50 p-3 rounded-lg">
<p class="font-medium text-sm">Laptop HP EliteBook</p>
<p class="text-xs text-gray-500">Solicitado: 15/Nov/2023 - Aprobado</p>
</div>
</div>
<button class="w-full bg-amber-600 text-white py-2 rounded-lg hover:bg-amber-700 transition">
Nueva solicitud
</button>
</div>
</div>
<!-- HSarepoint -->
<div class="bg-white rounded-xl shadow-md overflow-hidden">
<div class="bg-red-600 px-6 py-3 flex items-center">
<i class="fas fa-share-alt text-white mr-3"></i>
<h4 class="text-white font-semibold">HSarepoint Empresarial</h4>
</div>
<div class="p-6">
<p class="text-gray-600 text-sm mb-4">Acceso directo a la plataforma de gestión documental y colaboración empresarial.</p>
<div class="flex items-center mb-4">
<i class="fas fa-folder-open text-red-600 mr-3 text-2xl"></i>
<div>
<p class="font-medium">Documentos compartidos</p>
<p class="text-sm text-gray-500">Última actualización: hoy 10:45 AM</p>
</div>
</div>
<div class="flex items-center mb-4">
<i class="fas fa-calendar-alt text-red-600 mr-3 text-2xl"></i>
<div>
<p class="font-medium">Calendario corporativo</p>
<p class="text-sm text-gray-500">3 eventos esta semana</p>
</div>
</div>
<button class="w-full bg-red-600 text-white py-2 rounded-lg hover:bg-red-700 transition">
Acceder a HSarepoint
</button>
</div>
</div>
</div>
</div>
<!-- News and Updates -->
<div class="bg-white rounded-xl shadow-md p-6 mb-8">
<div class="flex justify-between items-center mb-6">
<h3 class="text-xl font-semibold text-gray-700">Noticias y actualizaciones</h3>
<button class="text-blue-600 hover:text-blue-800 text-sm font-medium">
Ver todas <i class="fas fa-chevron-right ml-1"></i>
</button>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="border border-gray-100 rounded-lg overflow-hidden hover:shadow-md transition">
<img src="https://via.placeholder.com/400x200" alt="Noticia" class="w-full h-40 object-cover">
<div class="p-4">
<span class="text-xs text-blue-600 font-semibold">EVENTOS</span>
<h4 class="font-semibold mt-1 mb-2">Fiesta de fin de año 2023</h4>
<p class="text-sm text-gray-600 mb-3">Únete a nuestra celebración anual el 15 de diciembre en el salón principal.</p>
<div class="flex justify-between items-center text-xs text-gray-500">
<span>Publicado: 20/Nov/2023</span>
<button class="text-blue-600 hover:text-blue-800">
Leer más <i class="fas fa-chevron-right ml-1"></i>
</button>
</div>
</div>
</div>
<div class="border border-gray-100 rounded-lg overflow-hidden hover:shadow-md transition">
<img src="https://via.placeholder.com/400x200" alt="Noticia" class="w-full h-40 object-cover">
<div class="p-4">
<span class="text-xs text-green-600 font-semibold">BENEFICIOS</span>
<h4 class="font-semibold mt-1 mb-2">Nuevo convenio con salud dental</h4>
<p class="text-sm text-gray-600 mb-3">Ahora con 30% de descuento en todos los tratamientos para colaboradores.</p>
<div class="flex justify-between items-center text-xs text-gray-500">
<span>Publicado: 15/Nov/2023</span>
<button class="text-blue-600 hover:text-blue-800">
Leer más <i class="fas fa-chevron-right ml-1"></i>
</button>
</div>
</div>
</div>
<div class="border border-gray-100 rounded-lg overflow-hidden hover:shadow-md transition">
<img src="https://via.placeholder.com/400x200" alt="Noticia" class="w-full h-40 object-cover">
<div class="p-4">
<span class="text-xs text-purple-600 font-semibold">POLÍTICAS</span>
<h4 class="font-semibold mt-1 mb-2">Actualización de política de teletrabajo</h4>
<p class="text-sm text-gray-600 mb-3">Conoce los nuevos lineamientos para trabajo remoto a partir de 2024.</p>
<div class="flex justify-between items-center text-xs text-gray-500">
<span>Publicado: 10/Nov/2023</span>
<button class="text-blue-600 hover:text-blue-800">
Leer más <i class="fas fa-chevron-right ml-1"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
<!-- Footer -->
<footer class="bg-gray-800 text-white py-8">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<h4 class="text-lg font-semibold mb-4">GIM Desarrollos</h4>
<p class="text-gray-400 text-sm">Líderes en desarrollo inmobiliario y construcción de alta calidad, comprometidos con la excelencia y la innovación.</p>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Contacto</h4>
<ul class="space-y-2 text-sm text-gray-400">
<li class="flex items-center">
<i class="fas fa-map-marker-alt mr-3"></i> Av. Principal 123, Ciudad
</li>
<li class="flex items-center">
<i class="fas fa-phone-alt mr-3"></i> (555) 123-4567
</li>
<li class="flex items-center">
<i class="fas fa-envelope mr-3"></i> contacto@gimdesarrollos.com
</li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Enlaces rápidos</h4>
<ul class="space-y-2 text-sm text-gray-400">
<li><a href="#" class="hover:text-white transition">Políticas de privacidad</a></li>
<li><a href="#" class="hover:text-white transition">Términos y condiciones</a></li>
<li><a href="#" class="hover:text-white transition">Preguntas frecuentes</a></li>
<li><a href="#" class="hover:text-white transition">Soporte técnico</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4">Síguenos</h4>
<div class="flex space-x-4">
<a href="#" class="h-10 w-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-blue-600 transition">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#" class="h-10 w-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-blue-400 transition">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="h-10 w-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-red-600 transition">
<i class="fab fa-youtube"></i>
</a>
<a href="#" class="h-10 w-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-blue-700 transition">
<i class="fab fa-linkedin-in"></i>
</a>
</div>
<p class="text-xs text-gray-500 mt-6">© 2023 GIM Desarrollos. Todos los derechos reservados.</p>
</div>
</div>
</div>
</footer>
<script>
// Mobile menu toggle
document.getElementById('mobileMenuButton').addEventListener('click', function() {
document.querySelector('.sidebar').classList.toggle('hidden');
});
// Tab functionality
const misionTab = document.getElementById('misionTab');
const valoresTab = document.getElementById('valoresTab');
const misionContent = document.getElementById('misionContent');
const valoresContent = document.getElementById('valoresContent');
misionTab.addEventListener('click', function() {
misionTab.classList.add('active-tab');
misionTab.classList.remove('text-gray-500', 'hover:text-blue-700');
valoresTab.classList.remove('active-tab');
valoresTab.classList.add('text-gray-500', 'hover:text-blue-700');
misionContent.classList.remove('hidden');
valoresContent.classList.add('hidden');
});
valoresTab.addEventListener('click', function() {
valoresTab.classList.add('active-tab');
valoresTab.classList.remove('text-gray-500', 'hover:text-blue-700');
misionTab.classList.remove('active-tab');
misionTab.classList.add('text-gray-500', 'hover:text-blue-700');
valoresContent.classList.remove('hidden');
misionContent.classList.add('hidden');
});
// Simulate loading
document.addEventListener('DOMContentLoaded', function() {
setTimeout(function() {
document.querySelector('main').style.opacity = '1';
}, 300);
});
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=atapiam/intranet" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>