estructura inicial
This commit is contained in:
+170
@@ -0,0 +1,170 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>IDE Consultores – Inicio</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="navbar-slot"></div>
|
||||
|
||||
<main>
|
||||
|
||||
<!-- HERO -->
|
||||
<section class="hero hero--centered section">
|
||||
<div class="container">
|
||||
<p class="eyebrow">Todo está conectado</p>
|
||||
<h1>Mejorar una parte no siempre mejora el todo.</h1>
|
||||
<div class="divider divider--center"></div>
|
||||
<p style="font-size:1.05rem; max-width:54ch;">En una organización, cada decisión genera efectos más allá del lugar donde interviene. Antes de buscar una solución, hay que comprender el sistema.</p>
|
||||
|
||||
<div class="hero__entry-cards mt-2">
|
||||
<a href="desafios.html" class="entry-card">
|
||||
<div class="label">Tengo un desafío</div>
|
||||
<p>Algo no funciona como debería, pero no sé exactamente qué necesito.</p>
|
||||
</a>
|
||||
<a href="soluciones.html" class="entry-card">
|
||||
<div class="label">Busco una solución</div>
|
||||
<p>Necesito ISO, una PMO, formación o transformación digital.</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- LA TENSIÓN -->
|
||||
<section class="section section--surface">
|
||||
<div class="container">
|
||||
<div style="display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center;">
|
||||
<div class="fade-in">
|
||||
<p class="eyebrow">El problema real</p>
|
||||
<h2>Soluciones aisladas para problemas que nunca estuvieron realmente aislados.</h2>
|
||||
<div class="divider"></div>
|
||||
<p>Las organizaciones ya tienen procesos, herramientas y personas. Sin embargo, algunos desafíos persisten. La raíz rara vez está donde parece.</p>
|
||||
</div>
|
||||
<!-- Gráfico minimalista SVG -->
|
||||
<div class="fade-in" style="display:flex; justify-content:center;">
|
||||
<svg width="260" height="200" viewBox="0 0 260 200" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- Nodos desconectados (problema) -->
|
||||
<circle cx="50" cy="60" r="18" fill="#9E9E9E" opacity="0.35"/>
|
||||
<circle cx="130" cy="40" r="18" fill="#9E9E9E" opacity="0.35"/>
|
||||
<circle cx="210" cy="60" r="18" fill="#9E9E9E" opacity="0.35"/>
|
||||
<!-- Nodos conectados (IDE) -->
|
||||
<circle cx="50" cy="148" r="18" fill="#29B99A" opacity="0.8"/>
|
||||
<circle cx="130" cy="128" r="18" fill="#1B5E6E" opacity="0.9"/>
|
||||
<circle cx="210" cy="148" r="18" fill="#29B99A" opacity="0.8"/>
|
||||
<line x1="50" y1="148" x2="130" y2="128" stroke="#29B99A" stroke-width="2.5"/>
|
||||
<line x1="130" y1="128" x2="210" y2="148" stroke="#29B99A" stroke-width="2.5"/>
|
||||
<line x1="50" y1="148" x2="210" y2="148" stroke="#29B99A" stroke-width="1.5" stroke-dasharray="4 3"/>
|
||||
<!-- Labels -->
|
||||
<text x="130" y="190" text-anchor="middle" font-size="10" fill="#29B99A" font-family="Inter,sans-serif">Sistema conectado</text>
|
||||
<text x="130" y="22" text-anchor="middle" font-size="10" fill="#9E9E9E" font-family="Inter,sans-serif">Partes aisladas</text>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- METODOLOGÍA -->
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="text-center mb-3 fade-in">
|
||||
<p class="eyebrow">Principio IDE</p>
|
||||
<h2>Comprender el todo para saber dónde intervenir.</h2>
|
||||
</div>
|
||||
<div class="process-steps fade-in">
|
||||
<div class="step">
|
||||
<div class="step__num">01</div>
|
||||
<div class="step__text">
|
||||
<h3>Comprender</h3>
|
||||
<p>Mapeo sistémico de la organización y su contexto.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div class="step__num">02</div>
|
||||
<div class="step__text">
|
||||
<h3>Focalizar</h3>
|
||||
<p>Identificar dónde intervenir genera mayor impacto.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div class="step__num">03</div>
|
||||
<div class="step__text">
|
||||
<h3>Integrar</h3>
|
||||
<p>Conectar capacidades del ecosistema IDE con precisión.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div class="step__num">04</div>
|
||||
<div class="step__text">
|
||||
<h3>Transformar</h3>
|
||||
<p>Resultados sostenibles que fortalecen el sistema.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ECOSISTEMA -->
|
||||
<section class="section section--surface">
|
||||
<div class="container">
|
||||
<div class="text-center mb-3 fade-in">
|
||||
<p class="eyebrow">Ecosistema IDE</p>
|
||||
<h2>No se trata de sumar soluciones. Se trata de conectar capacidades.</h2>
|
||||
</div>
|
||||
<div class="grid-4 fade-in">
|
||||
<a href="ecosistema.html" class="eco-card">
|
||||
<div class="eco-card__name">Excellence</div>
|
||||
<div class="eco-card__sub">Sistemas de gestión y mejora continua.</div>
|
||||
</a>
|
||||
<a href="ecosistema.html" class="eco-card">
|
||||
<div class="eco-card__name">Project</div>
|
||||
<div class="eco-card__sub">Gestión de proyectos y PMO.</div>
|
||||
</a>
|
||||
<a href="academy.html" class="eco-card">
|
||||
<div class="eco-card__name">Academy</div>
|
||||
<div class="eco-card__sub">Desarrollo de capacidades organizacionales.</div>
|
||||
</a>
|
||||
<a href="ecosistema.html" class="eco-card">
|
||||
<div class="eco-card__name">Digital</div>
|
||||
<div class="eco-card__sub">Transformación digital e inteligencia artificial.</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SECTORES -->
|
||||
<section class="section">
|
||||
<div class="container fade-in">
|
||||
<p class="eyebrow">Sectores</p>
|
||||
<h2 class="mb-2">Acompañamos la transformación en contextos complejos.</h2>
|
||||
<div class="sectors">
|
||||
<div class="sector-pill">🌾 Agro</div>
|
||||
<div class="sector-pill">🏥 Salud</div>
|
||||
<div class="sector-pill">🎓 Educación</div>
|
||||
<div class="sector-pill">🏭 Industria</div>
|
||||
<div class="sector-pill">🏗️ Infraestructura</div>
|
||||
<div class="sector-pill">⚡ Energía</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA FINAL -->
|
||||
<section class="section section--dark text-center">
|
||||
<div class="container fade-in">
|
||||
<p class="eyebrow">¿Empezamos?</p>
|
||||
<h2>¿Qué desafío querés transformar?</h2>
|
||||
<p style="margin:1rem auto 2rem; max-width:42ch;">Empecemos por entenderlo.</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