estructura inicial
This commit is contained in:
+231
@@ -0,0 +1,231 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>IDE Academy – IDE Consultores</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<style>
|
||||
.course-card {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
background: var(--bg);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition);
|
||||
}
|
||||
.course-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--green); }
|
||||
|
||||
.course-card__banner {
|
||||
height: 110px;
|
||||
background: linear-gradient(135deg, var(--teal-dark) 0%, var(--green) 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.course-card__body { padding: 1.25rem; }
|
||||
.course-card__meta { display:flex; gap:0.75rem; flex-wrap:wrap; margin-bottom:0.75rem; }
|
||||
.course-meta-chip {
|
||||
font-size:0.72rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
|
||||
padding: 2px 8px; border-radius:4px; color:var(--text-sub); border:1px solid var(--border);
|
||||
}
|
||||
.course-card__title { font-size:1rem; font-weight:600; color:var(--text); margin-bottom:0.4rem; }
|
||||
.course-card__desc { font-size:0.85rem; color:var(--text-sub); max-width:none; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="navbar-slot"></div>
|
||||
|
||||
<main>
|
||||
|
||||
<header class="page-header">
|
||||
<div class="container">
|
||||
<p class="eyebrow">IDE Academy</p>
|
||||
<h1>Desarrollamos las capacidades que hacen posible la transformación.</h1>
|
||||
<p>Formación In Company y cursos abiertos diseñados para que las personas de tu organización lideren los cambios, no que los soporten.</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- PROPUESTA DE VALOR -->
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div style="display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center;">
|
||||
<div class="fade-in">
|
||||
<p class="eyebrow">¿Por qué Academy?</p>
|
||||
<h2>La formación como parte del sistema, no como un apéndice.</h2>
|
||||
<div class="divider"></div>
|
||||
<p>Cada programa de Academy se diseña considerando el contexto de la organización, sus desafíos actuales y las capacidades que necesita desarrollar. No dictamos cursos estándar a audiencias genéricas.</p>
|
||||
<p class="mt-1">Academy es la capacidad del Ecosistema IDE que acompaña y sostiene cualquier proceso de transformación.</p>
|
||||
</div>
|
||||
<div class="fade-in">
|
||||
<div class="card">
|
||||
<div class="card__icon">🏢</div>
|
||||
<h3>In Company</h3>
|
||||
<p style="font-size:0.88rem;">Programa diseñado exclusivamente para tu organización. Contenido adaptado, casos reales, dinámica acorde al equipo.</p>
|
||||
</div>
|
||||
<div class="card mt-1">
|
||||
<div class="card__icon">📅</div>
|
||||
<h3>Cursos Abiertos</h3>
|
||||
<p style="font-size:0.88rem;">Formación en grupos reducidos, con profesionales de distintas organizaciones. Networking y perspectivas diversas.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CURSOS DESTACADOS -->
|
||||
<section class="section section--surface">
|
||||
<div class="container">
|
||||
<div class="fade-in mb-3">
|
||||
<p class="eyebrow">Próximos cursos</p>
|
||||
<h2>Cursos destacados</h2>
|
||||
</div>
|
||||
<div class="grid-3 fade-in">
|
||||
|
||||
<div class="course-card" onclick="openModal('modal-curso-iso')">
|
||||
<div class="course-card__banner">📋</div>
|
||||
<div class="course-card__body">
|
||||
<div class="course-card__meta">
|
||||
<span class="course-meta-chip">ISO 9001</span>
|
||||
<span class="course-meta-chip">Online</span>
|
||||
<span class="course-meta-chip">16hs</span>
|
||||
</div>
|
||||
<div class="course-card__title">Auditor Interno ISO 9001:2015</div>
|
||||
<p class="course-card__desc">Formación completa para planificar y ejecutar auditorías internas efectivas. Con ejercicios prácticos basados en casos reales.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="course-card" onclick="openModal('modal-curso-pm')">
|
||||
<div class="course-card__banner">📌</div>
|
||||
<div class="course-card__body">
|
||||
<div class="course-card__meta">
|
||||
<span class="course-meta-chip">Proyectos</span>
|
||||
<span class="course-meta-chip">Presencial</span>
|
||||
<span class="course-meta-chip">24hs</span>
|
||||
</div>
|
||||
<div class="course-card__title">Gestión de Proyectos para No PMPs</div>
|
||||
<p class="course-card__desc">Herramientas prácticas de gestión para líderes y coordinadores que gestionan proyectos sin formación formal en la disciplina.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="course-card" onclick="openModal('modal-curso-ia')">
|
||||
<div class="course-card__banner">🤖</div>
|
||||
<div class="course-card__body">
|
||||
<div class="course-card__meta">
|
||||
<span class="course-meta-chip">IA Aplicada</span>
|
||||
<span class="course-meta-chip">Online</span>
|
||||
<span class="course-meta-chip">8hs</span>
|
||||
</div>
|
||||
<div class="course-card__title">IA para equipos: del miedo al uso estratégico</div>
|
||||
<p class="course-card__desc">Introducción práctica a la inteligencia artificial para equipos no técnicos. Casos de uso reales y primeros pasos de implementación.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- IN COMPANY CTA -->
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div style="display:grid; grid-template-columns:1.5fr 1fr; gap:3rem; align-items:center;" class="fade-in">
|
||||
<div>
|
||||
<p class="eyebrow">Formación In Company</p>
|
||||
<h2>¿Necesitás formación a medida para tu organización?</h2>
|
||||
<p class="mt-1">Diseñamos programas específicos: desde talleres de medio día hasta programas de varios meses. El punto de partida siempre es entender qué capacidades necesita desarrollar tu equipo.</p>
|
||||
<div class="mt-2">
|
||||
<a href="contacto.html" class="btn btn--primary">Consultar por In Company</a>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex; flex-direction:column; gap:1rem;">
|
||||
<div style="display:flex; align-items:center; gap:0.75rem; font-size:0.9rem;">
|
||||
<span style="color:var(--green); font-size:1.2rem;">✓</span>
|
||||
<span>Contenido adaptado al contexto de la organización</span>
|
||||
</div>
|
||||
<div style="display:flex; align-items:center; gap:0.75rem; font-size:0.9rem;">
|
||||
<span style="color:var(--green); font-size:1.2rem;">✓</span>
|
||||
<span>Dictado en las instalaciones del cliente o virtual</span>
|
||||
</div>
|
||||
<div style="display:flex; align-items:center; gap:0.75rem; font-size:0.9rem;">
|
||||
<span style="color:var(--green); font-size:1.2rem;">✓</span>
|
||||
<span>Integrado con otros procesos de transformación IDE</span>
|
||||
</div>
|
||||
<div style="display:flex; align-items:center; gap:0.75rem; font-size:0.9rem;">
|
||||
<span style="color:var(--green); font-size:1.2rem;">✓</span>
|
||||
<span>Seguimiento post-formación disponible</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- MODALES DE CURSOS -->
|
||||
<div class="modal-overlay" id="modal-curso-iso">
|
||||
<div class="modal">
|
||||
<button class="modal__close">×</button>
|
||||
<div class="card__tag">Excellence · ISO 9001</div>
|
||||
<h2 style="font-size:1.5rem; margin-bottom:0.5rem;">Auditor Interno ISO 9001:2015</h2>
|
||||
<div style="display:flex; gap:0.5rem; flex-wrap:wrap; margin-bottom:1.25rem;">
|
||||
<span class="course-meta-chip">Online</span>
|
||||
<span class="course-meta-chip">16 horas</span>
|
||||
<span class="course-meta-chip">Certificado</span>
|
||||
</div>
|
||||
<p>Formación completa para planificar, ejecutar e informar auditorías internas conforme a ISO 19011. Con simulaciones de auditoría y análisis de hallazgos.</p>
|
||||
<div style="margin-top:1rem;">
|
||||
<strong style="font-size:0.82rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--green);">Temario principal</strong>
|
||||
<ul style="margin-top:0.5rem; padding-left:1.2rem; font-size:0.88rem; color:var(--text-sub);">
|
||||
<li>Requisitos de ISO 9001:2015</li>
|
||||
<li>Planificación del programa de auditoría</li>
|
||||
<li>Técnicas de entrevista y muestreo</li>
|
||||
<li>Redacción de hallazgos y no conformidades</li>
|
||||
<li>Práctica simulada de auditoría</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<a href="contacto.html" class="btn btn--primary">Consultar por fechas</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-overlay" id="modal-curso-pm">
|
||||
<div class="modal">
|
||||
<button class="modal__close">×</button>
|
||||
<div class="card__tag">Project</div>
|
||||
<h2 style="font-size:1.5rem; margin-bottom:0.5rem;">Gestión de Proyectos para No PMPs</h2>
|
||||
<div style="display:flex; gap:0.5rem; flex-wrap:wrap; margin-bottom:1.25rem;">
|
||||
<span class="course-meta-chip">Presencial / Híbrido</span>
|
||||
<span class="course-meta-chip">24 horas</span>
|
||||
</div>
|
||||
<p>Herramientas prácticas para liderar proyectos con efectividad, sin necesidad de certificación formal. Ideal para coordinadores y líderes de área.</p>
|
||||
<div class="mt-2">
|
||||
<a href="contacto.html" class="btn btn--primary">Consultar por fechas</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-overlay" id="modal-curso-ia">
|
||||
<div class="modal">
|
||||
<button class="modal__close">×</button>
|
||||
<div class="card__tag">Digital · IA</div>
|
||||
<h2 style="font-size:1.5rem; margin-bottom:0.5rem;">IA para equipos: del miedo al uso estratégico</h2>
|
||||
<div style="display:flex; gap:0.5rem; flex-wrap:wrap; margin-bottom:1.25rem;">
|
||||
<span class="course-meta-chip">Online</span>
|
||||
<span class="course-meta-chip">8 horas</span>
|
||||
</div>
|
||||
<p>Introducción práctica a la inteligencia artificial pensada para equipos no técnicos. Casos reales, herramientas accesibles y primeros pasos para aplicarla en el trabajo cotidiano.</p>
|
||||
<div class="mt-2">
|
||||
<a href="contacto.html" class="btn btn--primary">Consultar por fechas</a>
|
||||
</div>
|
||||
</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