estructura inicial
This commit is contained in:
+220
@@ -0,0 +1,220 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Soluciones – IDE Consultores</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<style>
|
||||
.filter-tabs { display:flex; gap:0.5rem; flex-wrap:wrap; margin-bottom:2.5rem; }
|
||||
.filter-tab {
|
||||
padding:0.45rem 1.1rem; border-radius:99px;
|
||||
border:1.5px solid var(--border); background:var(--bg);
|
||||
font-size:0.82rem; font-weight:600; cursor:pointer; color:var(--text-sub);
|
||||
transition: all var(--transition);
|
||||
}
|
||||
.filter-tab:hover { border-color:var(--green); color:var(--green); }
|
||||
.filter-tab.active { background:var(--green); border-color:var(--green); color:var(--white); }
|
||||
|
||||
.sol-card { cursor:pointer; }
|
||||
.sol-card h3 { color:var(--text); margin-bottom:0.4rem; }
|
||||
.sol-card .tag { margin-bottom:0.75rem; }
|
||||
|
||||
/* Modal detail */
|
||||
.modal-section { margin-top:1.25rem; }
|
||||
.modal-section h4 { font-size:0.78rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--green); margin-bottom:0.5rem; }
|
||||
.modal-section p, .modal-section li { font-size:0.9rem; }
|
||||
.modal-section ul { padding-left:1.2rem; }
|
||||
.modal-section li { margin-bottom:0.3rem; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="navbar-slot"></div>
|
||||
|
||||
<main>
|
||||
|
||||
<header class="page-header">
|
||||
<div class="container">
|
||||
<p class="eyebrow">Por solución</p>
|
||||
<h1>Encontrá exactamente lo que buscás.</h1>
|
||||
<p>Si ya sabés qué necesita tu organización, aquí está la respuesta concreta.</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
|
||||
<div class="filter-tabs">
|
||||
<button class="filter-tab active" data-filter="all">Todas</button>
|
||||
<button class="filter-tab" data-filter="excellence">Excellence</button>
|
||||
<button class="filter-tab" data-filter="project">Project</button>
|
||||
<button class="filter-tab" data-filter="digital">Digital</button>
|
||||
<button class="filter-tab" data-filter="academy">Academy</button>
|
||||
</div>
|
||||
|
||||
<div class="grid-3">
|
||||
|
||||
<div class="card sol-card fade-in filterable" data-cat="excellence" onclick="openModal('modal-iso9001')">
|
||||
<div class="card__tag">Excellence</div>
|
||||
<h3>ISO 9001 – Calidad</h3>
|
||||
<p style="font-size:0.88rem;">Implementación y certificación del sistema de gestión de calidad. Diseñado para agregar valor, no solo cumplir requisitos.</p>
|
||||
<div class="mt-1"><span class="btn btn--ghost">Ver más</span></div>
|
||||
</div>
|
||||
|
||||
<div class="card sol-card fade-in filterable" data-cat="excellence" onclick="openModal('modal-iso14001')">
|
||||
<div class="card__tag">Excellence</div>
|
||||
<h3>ISO 14001 – Ambiente</h3>
|
||||
<p style="font-size:0.88rem;">Sistema de gestión ambiental. Cumplimiento normativo y estrategia de sustentabilidad integrada.</p>
|
||||
<div class="mt-1"><span class="btn btn--ghost">Ver más</span></div>
|
||||
</div>
|
||||
|
||||
<div class="card sol-card fade-in filterable" data-cat="excellence" onclick="openModal('modal-iso45001')">
|
||||
<div class="card__tag">Excellence</div>
|
||||
<h3>ISO 45001 – SST</h3>
|
||||
<p style="font-size:0.88rem;">Seguridad y salud en el trabajo. Reducción de riesgos y cultura preventiva.</p>
|
||||
<div class="mt-1"><span class="btn btn--ghost">Ver más</span></div>
|
||||
</div>
|
||||
|
||||
<div class="card sol-card fade-in filterable" data-cat="project" onclick="openModal('modal-pmo')">
|
||||
<div class="card__tag">Project</div>
|
||||
<h3>Implementación de PMO</h3>
|
||||
<p style="font-size:0.88rem;">Diseño y puesta en marcha de oficinas de gestión de proyectos adaptadas al contexto de cada organización.</p>
|
||||
<div class="mt-1"><span class="btn btn--ghost">Ver más</span></div>
|
||||
</div>
|
||||
|
||||
<div class="card sol-card fade-in filterable" data-cat="project" onclick="openModal('modal-pm')">
|
||||
<div class="card__tag">Project</div>
|
||||
<h3>Gestión de Proyectos</h3>
|
||||
<p style="font-size:0.88rem;">Acompañamiento en la dirección y control de proyectos estratégicos o de transformación.</p>
|
||||
<div class="mt-1"><span class="btn btn--ghost">Ver más</span></div>
|
||||
</div>
|
||||
|
||||
<div class="card sol-card fade-in filterable" data-cat="digital" onclick="openModal('modal-ia')">
|
||||
<div class="card__tag">Digital</div>
|
||||
<h3>Transformación Digital e IA</h3>
|
||||
<p style="font-size:0.88rem;">Diagnóstico, hoja de ruta e implementación de soluciones de inteligencia artificial aplicadas a procesos reales.</p>
|
||||
<div class="mt-1"><span class="btn btn--ghost">Ver más</span></div>
|
||||
</div>
|
||||
|
||||
<div class="card sol-card fade-in filterable" data-cat="academy" onclick="openModal('modal-academy')">
|
||||
<div class="card__tag">Academy</div>
|
||||
<h3>Formación In Company</h3>
|
||||
<p style="font-size:0.88rem;">Programas de formación a medida para equipos. Desde metodologías de gestión hasta liderazgo e IA.</p>
|
||||
<div class="mt-1"><span class="btn btn--ghost">Ver más</span></div>
|
||||
</div>
|
||||
|
||||
<div class="card sol-card fade-in filterable" data-cat="excellence" onclick="openModal('modal-mejora')">
|
||||
<div class="card__tag">Excellence</div>
|
||||
<h3>Mejora de Procesos</h3>
|
||||
<p style="font-size:0.88rem;">Mapeo, análisis y rediseño de procesos críticos para eliminar desperdicios y mejorar la eficiencia operativa.</p>
|
||||
<div class="mt-1"><span class="btn btn--ghost">Ver más</span></div>
|
||||
</div>
|
||||
|
||||
<div class="card sol-card fade-in filterable" data-cat="digital" onclick="openModal('modal-automatizacion')">
|
||||
<div class="card__tag">Digital</div>
|
||||
<h3>Automatización de Procesos</h3>
|
||||
<p style="font-size:0.88rem;">Identificación e implementación de automatizaciones que liberan tiempo y reducen errores operativos.</p>
|
||||
<div class="mt-1"><span class="btn btn--ghost">Ver más</span></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- MODALES -->
|
||||
|
||||
<div class="modal-overlay" id="modal-iso9001">
|
||||
<div class="modal">
|
||||
<button class="modal__close">×</button>
|
||||
<div class="card__tag">Excellence</div>
|
||||
<h2 style="font-size:1.6rem; margin-bottom:0;">ISO 9001 – Gestión de Calidad</h2>
|
||||
<div class="modal-section">
|
||||
<h4>¿Qué es?</h4>
|
||||
<p>La norma internacional de sistemas de gestión de la calidad. Define los requisitos para diseñar procesos orientados a la satisfacción del cliente y la mejora continua.</p>
|
||||
</div>
|
||||
<div class="modal-section">
|
||||
<h4>¿Para quién?</h4>
|
||||
<p>Cualquier organización que quiera ordenar sus operaciones, mejorar la consistencia de sus productos o servicios, y acceder a mercados que exigen la certificación.</p>
|
||||
</div>
|
||||
<div class="modal-section">
|
||||
<h4>Cómo intervenimos</h4>
|
||||
<ul>
|
||||
<li>Diagnóstico de brechas respecto a la norma</li>
|
||||
<li>Diseño e implementación del sistema de gestión</li>
|
||||
<li>Capacitación de auditores internos</li>
|
||||
<li>Acompañamiento hasta la certificación</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="modal-section" style="background:rgba(41,185,154,0.07); padding:1rem; border-radius:var(--radius); border-left:3px solid var(--green);">
|
||||
<p style="font-size:0.85rem;"><strong>¿Sabías que</strong> un sistema de gestión de calidad también requiere desarrollar las capacidades del equipo? Conocé IDE Academy como complemento.</p>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<a href="contacto.html" class="btn btn--primary">Consultar por ISO 9001</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-overlay" id="modal-pmo">
|
||||
<div class="modal">
|
||||
<button class="modal__close">×</button>
|
||||
<div class="card__tag">Project</div>
|
||||
<h2 style="font-size:1.6rem; margin-bottom:0;">Implementación de PMO</h2>
|
||||
<div class="modal-section">
|
||||
<h4>¿Qué es?</h4>
|
||||
<p>Una Oficina de Gestión de Proyectos (PMO) es la estructura que estandariza, controla y apoya la gestión de proyectos en una organización.</p>
|
||||
</div>
|
||||
<div class="modal-section">
|
||||
<h4>Cómo intervenimos</h4>
|
||||
<ul>
|
||||
<li>Diagnóstico de madurez en gestión de proyectos</li>
|
||||
<li>Diseño del modelo de PMO adecuado</li>
|
||||
<li>Definición de metodologías y herramientas</li>
|
||||
<li>Acompañamiento en la puesta en marcha</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<a href="contacto.html" class="btn btn--primary">Consultar por PMO</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-overlay" id="modal-ia">
|
||||
<div class="modal">
|
||||
<button class="modal__close">×</button>
|
||||
<div class="card__tag">Digital</div>
|
||||
<h2 style="font-size:1.6rem; margin-bottom:0;">Transformación Digital e IA</h2>
|
||||
<div class="modal-section">
|
||||
<h4>¿Qué problema aborda?</h4>
|
||||
<p>Las organizaciones que incorporan tecnología sin estrategia generan complejidad, no eficiencia. Ayudamos a identificar dónde la IA y la digitalización realmente agregan valor.</p>
|
||||
</div>
|
||||
<div class="modal-section">
|
||||
<h4>Cómo intervenimos</h4>
|
||||
<ul>
|
||||
<li>Diagnóstico de madurez digital</li>
|
||||
<li>Hoja de ruta de transformación</li>
|
||||
<li>Identificación de casos de uso de IA</li>
|
||||
<li>Implementación y acompañamiento</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<a href="contacto.html" class="btn btn--primary">Consultar por Digital</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modales placeholder para el resto -->
|
||||
<div class="modal-overlay" id="modal-iso14001"><div class="modal"><button class="modal__close">×</button><div class="card__tag">Excellence</div><h2 style="font-size:1.6rem;">ISO 14001 – Ambiente</h2><p class="mt-1">Detalle completo disponible en la demo final. <a href="contacto.html" class="btn btn--primary" style="margin-top:1.5rem; display:inline-flex;">Consultar</a></p></div></div>
|
||||
<div class="modal-overlay" id="modal-iso45001"><div class="modal"><button class="modal__close">×</button><div class="card__tag">Excellence</div><h2 style="font-size:1.6rem;">ISO 45001 – SST</h2><p class="mt-1">Detalle completo disponible en la demo final. <a href="contacto.html" class="btn btn--primary" style="margin-top:1.5rem; display:inline-flex;">Consultar</a></p></div></div>
|
||||
<div class="modal-overlay" id="modal-pm"><div class="modal"><button class="modal__close">×</button><div class="card__tag">Project</div><h2 style="font-size:1.6rem;">Gestión de Proyectos</h2><p class="mt-1">Detalle completo disponible en la demo final. <a href="contacto.html" class="btn btn--primary" style="margin-top:1.5rem; display:inline-flex;">Consultar</a></p></div></div>
|
||||
<div class="modal-overlay" id="modal-academy"><div class="modal"><button class="modal__close">×</button><div class="card__tag">Academy</div><h2 style="font-size:1.6rem;">Formación In Company</h2><p class="mt-1">Detalle completo disponible en la demo final. <a href="academy.html" class="btn btn--primary" style="margin-top:1.5rem; display:inline-flex;">Ver Academy</a></p></div></div>
|
||||
<div class="modal-overlay" id="modal-mejora"><div class="modal"><button class="modal__close">×</button><div class="card__tag">Excellence</div><h2 style="font-size:1.6rem;">Mejora de Procesos</h2><p class="mt-1">Detalle completo disponible en la demo final. <a href="contacto.html" class="btn btn--primary" style="margin-top:1.5rem; display:inline-flex;">Consultar</a></p></div></div>
|
||||
<div class="modal-overlay" id="modal-automatizacion"><div class="modal"><button class="modal__close">×</button><div class="card__tag">Digital</div><h2 style="font-size:1.6rem;">Automatización</h2><p class="mt-1">Detalle completo disponible en la demo final. <a href="contacto.html" class="btn btn--primary" style="margin-top:1.5rem; display:inline-flex;">Consultar</a></p></div></div>
|
||||
|
||||
<div id="footer-slot"></div>
|
||||
<script src="layout.js"></script>
|
||||
<script src="scripts.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user