estructura inicial
This commit is contained in:
+199
@@ -0,0 +1,199 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Ecosistema – IDE Consultores</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<style>
|
||||
.eco-detail {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 2fr;
|
||||
gap: 3rem;
|
||||
align-items: start;
|
||||
padding-block: 3.5rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.eco-detail:last-child { border-bottom: none; }
|
||||
|
||||
.eco-detail__label {
|
||||
font-family: var(--font-display);
|
||||
font-size: 3.5rem;
|
||||
color: var(--teal-dark);
|
||||
line-height: 1;
|
||||
}
|
||||
[data-theme="dark"] .eco-detail__label { color: var(--green); }
|
||||
.eco-detail__sub {
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
color: var(--green);
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.eco-detail__content h3 { margin-bottom: 0.75rem; color: var(--text); }
|
||||
.eco-detail__content ul { padding-left: 1.2rem; margin-top: 0.75rem; }
|
||||
.eco-detail__content li { font-size: 0.88rem; color: var(--text-sub); margin-bottom: 0.35rem; }
|
||||
|
||||
.network-diagram {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 3rem 0;
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.eco-detail { grid-template-columns: 1fr; gap: 1rem; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="navbar-slot"></div>
|
||||
|
||||
<main>
|
||||
|
||||
<header class="page-header">
|
||||
<div class="container">
|
||||
<p class="eyebrow">El cómo</p>
|
||||
<h1>El Ecosistema IDE</h1>
|
||||
<p>Cuatro capacidades complementarias que se articulan según lo que cada organización necesita. No todos los desafíos requieren todo el ecosistema, pero todos se benefician de una mirada que comprende el conjunto.</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- DIAGRAMA VISUAL -->
|
||||
<section class="section section--surface">
|
||||
<div class="container text-center fade-in">
|
||||
<p class="eyebrow">Visión sistémica</p>
|
||||
<h2>Capacidades que se conectan, no que se suman.</h2>
|
||||
<div class="network-diagram">
|
||||
<svg width="400" height="340" viewBox="0 0 400 340" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- Connections -->
|
||||
<line x1="200" y1="80" x2="80" y2="200" stroke="#29B99A" stroke-width="1.5" stroke-dasharray="5 4" opacity="0.6"/>
|
||||
<line x1="200" y1="80" x2="320" y2="200" stroke="#29B99A" stroke-width="1.5" stroke-dasharray="5 4" opacity="0.6"/>
|
||||
<line x1="80" y1="200" x2="200" y2="290" stroke="#29B99A" stroke-width="1.5" stroke-dasharray="5 4" opacity="0.6"/>
|
||||
<line x1="320" y1="200" x2="200" y2="290" stroke="#29B99A" stroke-width="1.5" stroke-dasharray="5 4" opacity="0.6"/>
|
||||
<line x1="80" y1="200" x2="320" y2="200" stroke="#29B99A" stroke-width="1" stroke-dasharray="5 4" opacity="0.35"/>
|
||||
<line x1="200" y1="80" x2="200" y2="290" stroke="#29B99A" stroke-width="1" stroke-dasharray="5 4" opacity="0.25"/>
|
||||
<!-- Nodes -->
|
||||
<circle cx="200" cy="80" r="42" fill="#1B5E6E" opacity="0.9"/>
|
||||
<circle cx="80" cy="200" r="38" fill="#29B99A" opacity="0.85"/>
|
||||
<circle cx="320" cy="200" r="38" fill="#29B99A" opacity="0.85"/>
|
||||
<circle cx="200" cy="290" r="38" fill="#1B5E6E" opacity="0.75"/>
|
||||
<!-- Labels -->
|
||||
<text x="200" y="76" text-anchor="middle" font-family="'Bebas Neue',sans-serif" font-size="16" fill="white" letter-spacing="1">Excellence</text>
|
||||
<text x="200" y="92" text-anchor="middle" font-family="Inter,sans-serif" font-size="9" fill="rgba(255,255,255,0.7)">Gestión · Calidad</text>
|
||||
<text x="80" y="196" text-anchor="middle" font-family="'Bebas Neue',sans-serif" font-size="16" fill="white" letter-spacing="1">Project</text>
|
||||
<text x="80" y="212" text-anchor="middle" font-family="Inter,sans-serif" font-size="9" fill="rgba(255,255,255,0.7)">PMO · Dirección</text>
|
||||
<text x="320" y="196" text-anchor="middle" font-family="'Bebas Neue',sans-serif" font-size="16" fill="white" letter-spacing="1">Digital</text>
|
||||
<text x="320" y="212" text-anchor="middle" font-family="Inter,sans-serif" font-size="9" fill="rgba(255,255,255,0.7)">Tech · IA</text>
|
||||
<text x="200" y="286" text-anchor="middle" font-family="'Bebas Neue',sans-serif" font-size="16" fill="white" letter-spacing="1">Academy</text>
|
||||
<text x="200" y="302" text-anchor="middle" font-family="Inter,sans-serif" font-size="9" fill="rgba(255,255,255,0.7)">Formación</text>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- DETALLE DE CADA CAPACIDAD -->
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
|
||||
<div class="eco-detail fade-in">
|
||||
<div>
|
||||
<div class="eco-detail__label">Excellence</div>
|
||||
<div class="eco-detail__sub">Gestión & Calidad</div>
|
||||
</div>
|
||||
<div class="eco-detail__content">
|
||||
<h3>Sistemas de gestión que realmente funcionan</h3>
|
||||
<p>Diseñamos e implementamos sistemas de gestión basados en normas internacionales (ISO 9001, 14001, 45001 y más) con foco en el valor que generan, no solo en el cumplimiento formal.</p>
|
||||
<ul>
|
||||
<li>Implementación y certificación ISO</li>
|
||||
<li>Mejora continua de procesos</li>
|
||||
<li>Auditorías internas y diagnósticos</li>
|
||||
<li>Gestión de riesgos organizacionales</li>
|
||||
</ul>
|
||||
<div class="mt-1">
|
||||
<a href="soluciones.html" class="btn btn--ghost">Ver soluciones Excellence</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="eco-detail fade-in">
|
||||
<div>
|
||||
<div class="eco-detail__label">Project</div>
|
||||
<div class="eco-detail__sub">Dirección & PMO</div>
|
||||
</div>
|
||||
<div class="eco-detail__content">
|
||||
<h3>Proyectos que llegan a destino</h3>
|
||||
<p>Diseñamos estructuras de gestión de proyectos (PMOs) y acompañamos la dirección de proyectos estratégicos para que se entreguen en tiempo, costo y con los resultados esperados.</p>
|
||||
<ul>
|
||||
<li>Diseño e implementación de PMO</li>
|
||||
<li>Dirección de proyectos estratégicos</li>
|
||||
<li>Metodologías ágiles, predictivas e híbridas</li>
|
||||
<li>Capacitación en gestión de proyectos</li>
|
||||
</ul>
|
||||
<div class="mt-1">
|
||||
<a href="soluciones.html" class="btn btn--ghost">Ver soluciones Project</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="eco-detail fade-in">
|
||||
<div>
|
||||
<div class="eco-detail__label">Academy</div>
|
||||
<div class="eco-detail__sub">Formación & Desarrollo</div>
|
||||
</div>
|
||||
<div class="eco-detail__content">
|
||||
<h3>Capacidades que hacen posible la transformación</h3>
|
||||
<p>La transformación sostenible requiere que las personas de la organización desarrollen nuevas habilidades. IDE Academy diseña programas de formación alineados con los desafíos reales.</p>
|
||||
<ul>
|
||||
<li>Formación In Company a medida</li>
|
||||
<li>Cursos abiertos en gestión e ISO</li>
|
||||
<li>Talleres de liderazgo y cambio organizacional</li>
|
||||
<li>Programas de IA para equipos no técnicos</li>
|
||||
</ul>
|
||||
<div class="mt-1">
|
||||
<a href="academy.html" class="btn btn--ghost">Conocer IDE Academy</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="eco-detail fade-in">
|
||||
<div>
|
||||
<div class="eco-detail__label">Digital</div>
|
||||
<div class="eco-detail__sub">Tecnología & IA</div>
|
||||
</div>
|
||||
<div class="eco-detail__content">
|
||||
<h3>Tecnología aplicada con propósito</h3>
|
||||
<p>Ayudamos a las organizaciones a identificar dónde la tecnología y la inteligencia artificial realmente generan valor, y acompañamos su implementación desde la estrategia hasta la operación.</p>
|
||||
<ul>
|
||||
<li>Diagnóstico de madurez digital</li>
|
||||
<li>Casos de uso de IA en operaciones</li>
|
||||
<li>Automatización de procesos</li>
|
||||
<li>Hoja de ruta de transformación digital</li>
|
||||
</ul>
|
||||
<div class="mt-1">
|
||||
<a href="soluciones.html" class="btn btn--ghost">Ver soluciones Digital</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section section--dark text-center">
|
||||
<div class="container fade-in">
|
||||
<h2>¿Cuántas capacidades necesita tu organización?</h2>
|
||||
<p style="margin:1rem auto 2rem;">Empecemos con un diagnóstico y lo definimos juntos.</p>
|
||||
<a href="contacto.html" class="btn btn--white">Hablemos</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<div id="footer-slot"></div>
|
||||
<script src="layout.js"></script>
|
||||
<script src="scripts.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user