fanfuso/IDE-Demo-B
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

rf-v4.12-somos finish

Browse Source
This commit is contained in:
fanfuso
2026-10-09 22:17:59 -03:00
parent 34a251efb9
commit 38c85162c2
35 changed files with 1622 additions and 432 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ide-academy.html
+167 -220
View File
@@ -17,58 +17,74 @@
<main>
<!-- Header Academy -->
<section class="section-padding hero-video-section" style="background-color: var(--bg-surface); border-bottom: 1px solid var(--border-color); position: relative; overflow: hidden; min-height: 400px;">
<!-- Video de fondo -->
<video autoplay muted loop playsinline style="
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.2;
z-index: 0;
pointer-events: none;
">
<source src="./assets/video/capacitacion.mp4" type="video/mp4">
Tu navegador no soporta videos.
</video>
<!-- Seccion 1: Hero -->
<section class="section-padding-md herobg-6">
<div class="container container-wide">
<div class="hero-grid">
<div>
<span class="eyebrow" style="text-transform: uppercase; color: white; font-style: italic;">
Executive Learning & Capability Development
</span>
<h1 style="margin-bottom: 0.8rem; line-height: 1.1; color: white;">
Desarrollamos capacidades para gestionar, liderar y transformar.
</h1>
<p class="lead-text" style="margin-bottom: 2.5rem; color: white;">
Diseñamos experiencias de aprendizaje que conectan conocimiento, práctica y contexto para fortalecer las capacidades que profesionales, equipos y organizaciones necesitan para convertir el aprendizaje en acción.
</p>
<!-- Hero Actions -->
<div class="hero-actions" style="display: flex; gap: 1rem; flex-wrap: wrap; align-items: center;">
<span class="eyebrow" style="text-transform: uppercase; color: white;">
Ecosistema
</span>
<a href="ecosistema.html#eco-excellence" class="btn btn-primary btn-cta-unificado"
style="border-radius: 50px; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem;">
EXCELLENCE
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<polyline points="12 16 16 12 12 8"></polyline>
<line x1="8" y1="12" x2="16" y2="12"></line>
</svg>
</a>
<a href="ecosistema.html#eco-projects" class="btn btn-primary btn-cta-unificado"
style="border-radius: 50px; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem;">
PROJECTS
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<polyline points="12 16 16 12 12 8"></polyline>
<line x1="8" y1="12" x2="16" y2="12"></line>
</svg>
</a>
<a href="ecosistema.html#eco-digital" class="btn btn-primary btn-cta-unificado"
style="border-radius: 50px; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem;">
DIGITAL
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<polyline points="12 16 16 12 12 8"></polyline>
<line x1="8" y1="12" x2="16" y2="12"></line>
</svg>
</a>
</div>
</div>
<div class="hero-visual"
style="width: 100%; height: 500px; position: relative; display: flex; justify-content: center; align-items: center;">
</div>
<!-- Overlay oscuro opcional para mejor contraste -->
<div style="
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(19, 167, 138, 0.5);
z-index: 1;">
</div>
<div class="container container-narrow text-center" style="position: relative; z-index: 2;">
<span class="eyebrow" style="color: var(--text-main);">Executive Learning & Capability Development</span>
<h1 style="margin-bottom: 1.25rem;">Desarrollamos capacidades para gestionar, liderar y transformar</h1>
<p class="lead-text" style="margin: 0 auto 1.75rem auto;color: var(--text-main);">
Diseñamos experiencias de aprendizaje que conectan conocimiento, práctica y contexto para fortalecer las capacidades que profesionales, equipos y organizaciones necesitan para convertir el aprendizaje en acción.
</p>
<div style="display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap;">
<a href="#cursos-destacados" class="btn btn-primary btn-sm">EXPLORAR CURSOS Y PROGRAMAS →</a>
<a href="contacto.html?busqueda=Formación%20para%20mi%20organización&origen=Academy_InCompany" class="btn btn-outline btn-sm" style="color: var(--text-inverse);">FORMACIÓN IN-COMPANY →</a>
</div>
</div>
</section>
<!-- Aprender con IDE -->
<section class="section-padding">
<!-- Seccion 2:Aprender con IDE -->
<section class="section-padding-md bg4">
<div class="container">
<div style="display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 2.5rem; flex-wrap: wrap; gap: 1rem;">
<div>
<span class="eyebrow">APRENDER CON IDE</span>
<span class="eyebrow-a">APRENDER CON IDE</span>
<h2>Conocimiento que se conecta con la práctica</h2>
<p class="lead-text">
Aprender no es solamente incorporar conceptos. Es comprender cómo aplicarlos, relacionarlos con otros saberes y convertirlos en mejores decisiones y formas de actuar.
<p class="lead-text">
Por eso, en IDE Academy diseñamos experiencias de aprendizaje que parten de situaciones reales, integran herramientas aplicables y promueven el intercambio entre profesionales.
</div>
</div>
<!--Tarjetas descriptivas-->
@@ -112,7 +128,7 @@
<div class="card academy-card">
<div class="curso-header">
<span class="icono-academy-enriquece"></span>
<h4>INTERCAMBIO QUE ENRIQUECE</h4>
<h4>COMUNIDAD</h4>
</div>
<div class="curso-body">
<p>La experiencia y las perspectivas de quienes participan también forman parte del aprendizaje.</p>
@@ -124,7 +140,7 @@
<div class="card academy-card">
<div class="curso-header">
<span class="icono-academy-aplicacion"></span>
<h4>APLICACIÓN QUE CONTINÚA</h4>
<h4>APLICACIÓN CONTINUA</h4>
</div>
<div class="curso-body">
<p>Buscamos que cada experiencia deje herramientas, criterios y capacidades que puedan seguir utilizándose después del curso.</p>
@@ -137,198 +153,129 @@
</div>
</section>
<!--Cursos-->
<section class="section-padding-sm" id="cursos-destacados">
<!--Seccion 3:Cursos-->
<section class="section-padding-sm contact-parallax-section" id="cursos-destacados">
<div class="parallax-wrapper" aria-hidden="true">
<div id="contact-parallax-bg" class="parallax-bg-layer4"></div>
<div class="parallax-overlay"></div>
</div>
<div class="container">
<div style="display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 2.5rem; flex-wrap: wrap; gap: 1rem;">
<div>
<span class="eyebrow">PRÓXIMAS EXPERIENCIAS</span>
<div class="cursos-layout">
<!-- Columna 1: Texto -->
<div class="cursos-intro">
<span class="eyebrow-a">PRÓXIMAS EXPERIENCIAS</span>
<h2>Elegí qué capacidad querés desarrollar.</h2>
<p class="lead-text">
Cursos y programas diseñados para conectar conocimiento, práctica y contexto, con herramientas que podés llevar a tu realidad profesional desde el primer día.
Cursos y programas diseñados para conectar conocimiento y práctica, con herramientas que podés llevar a tu realidad profesional desde el primer día.
</p>
</div>
</div>
<!-- Contenedor inyectado por JS desde /data/cursos.json -->
<div class="grid-3" id="academy-courses-container">
<!-- Fallback en caso de demora de fetch -->
<div class="card text-center" style="grid-column: 1 / -1; padding: 2rem;">
<p style="color: var(--text-muted);">Cargando catálogo de programas formativos...</p>
</div>
</div>
</div>
</section>
<!-- Propuesta de Valor de la Formación IDE -->
<section class="section-padding bg-subtle-section">
<div class="container">
<div style="display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center;">
<div class="fade-in visible">
<p class="eyebrow">DOS FORMAS DE APRENDER CON IDE</p>
<h2 style="padding-bottom: 15px;">Elegí la experiencia que mejor se adapte a tu contexto.</h2>
<div class="divider"></div>
<p>Podés participar de nuestras experiencias abiertas junto a profesionales de distintas organizaciones o desarrollar una propuesta In-Company diseñada a partir de las necesidades de tu equipo.</p>
<p>En ambos casos, compartimos una misma forma de aprender: conocimiento conectado con la práctica, intercambio y aplicación en contextos reales.</p>
</div>
<div style="display: flex; flex-direction: column; gap: 1rem;">
<div class="card-incompany">
<div class="card-cursos-icon">
<span class="icono-fabrica"></span>
</div>
<div class="card-cursos-content">
<h2 style="font-size: 1.05rem; margin-bottom: 0.25rem;">In Company</h2>
<p style="font-size: 0.82rem;">Programa diseñado exclusivamente para tu organización. Contenido adaptado, casos reales, dinámica acorde al equipo.</p>
</div>
</div>
<div class="card-cursos">
<div class="card-cursos-icon">
<svg viewBox="0 0 32 32" fill="currentColor">
<use href="./assets/iconos/calendar_color.svg"></use>
</svg>
</div>
<div class="card-cursos-content">
<h2 style="font-size: 1.05rem; margin-bottom: 0.25rem;">Cursos Abiertos</h2>
<p style="font-size: 0.82rem;">Formación en grupos reducidos, con profesionales de distintas organizaciones. Networking y perspectivas diversas.</p>
</div>
</div>
</div>
</div>
</div>
<div class="container" style="margin-top: clamp(2.5rem, 4vw, 3.5rem);">
<div class="grid-3 text-center">
<div class="card academy-card">
<h4 style="font-size: 1.1rem; margin-bottom: 0.35rem;">Casos Reales y Aplicados</h4>
<p style="font-size: 0.85rem; color: var(--text-muted);">Los participantes trabajan sobre los procesos y desafíos cotidianos de sus propias empresas.</p>
</div>
<div class="card academy-card">
<h4 style="font-size: 1.1rem; margin-bottom: 0.35rem;">Docentes Consultores Senior</h4>
<p style="font-size: 0.85rem; color: var(--text-muted);">Instructores con amplia trayectoria liderando auditorías y proyectos en organizaciones reales.</p>
</div>
<div class="card academy-card">
<h4 style="font-size: 1.1rem; margin-bottom: 0.35rem;">Transferencia de Autonomía</h4>
<p style="font-size: 0.85rem; color: var(--text-muted);">Herramientas y plantillas listas para aplicar inmediatamente en el puesto de trabajo.</p>
<!-- Columnas 2, 3 y 4: Tarjetas inyectadas por JS -->
<div class="cursos-cards" id="academy-courses-container">
<!-- Fallback en caso de demora de fetch -->
<div class="card text-center" style="grid-column: 1 / -1; padding: 2rem;">
<p style="color: var(--text-muted);">Cargando catálogo de programas formativos...</p>
</div>
</div>
</div>
</div>
</section>
<!-- Sección Formación In-Company a Medida -->
<section class="section-padding bg-subtle-section">
<div class="container">
<div class="card">
<div class="grid-2" style="gap: 3rem; align-items: center;">
<div>
<!-- Sección 4: Formación In-Company a Medida -->
<section class="section-padding-md bg-subtle-section">
<div class="container" style="margin-bottom: 2.5rem;">
<div class="incompany-card">
<!-- Col 1: Títulos y texto -->
<div class="incompany-card__intro">
<span class="eyebrow-a">FORMACIÓN A MEDIDA</span>
<h2>Formación In-Company</h2>
<p style="font-size: 1rem; color: var(--text-body); line-height: 1.65; margin: 1rem 0 0 0;">
Diseñamos experiencias de aprendizaje para una organización y su equipo, adaptando objetivos, contenidos, casos y actividades a su contexto. Ideal para Organizaciones que necesitan desarrollar capacidades compartidas, acompañar iniciativas o fortalecer la forma en que sus equipos gestionan y trabajan.
<p class="incompany-card__lead">
Diseñamos experiencias a medida, alineadas a los objetivos de tu organizacion para desarrollar las capacidades que necesitas.
</p>
<p style="margin-top: 0.5rem;">Podemos diseñar:</p>
<!-- Sub-grid: lista a la izquierda, botón a la derecha abajo -->
<div class="incompany-subgrid">
<ul class="incompany-tags">
<li><i class="fa-solid fa-tag"></i> Cursos.</li>
<li><i class="fa-solid fa-tag"></i> Workshops</li>
<li><i class="fa-solid fa-tag"></i> Programas</li>
<li><i class="fa-solid fa-tag"></i> Rutas de Aprendizaje</li>
</ul>
<div class="incompany-cta">
<a href="contacto.html?busqueda=Formación%20para%20mi%20organización&origen=Academy_InCompany_Custom" class="btn btn-primary-cta btn-sm">
HABLEMOS
</a>
</div>
</div>
</div>
<div class="card-academia"></div>
</div>
</div>
</div>
</section>
<!-- Facilitadores / Quiénes facilitan el aprendizaje -->
<section class="section-padding">
<div class="container">
<div class="text-center" style="text-align: center; max-width: 720px; margin: 0 auto 2.5rem auto;">
<span class="eyebrow">QUIÉNES FACILITAN EL APRENDIZAJE</span>
<h2 style="margin-bottom: 1rem;">Experiencias que se comparten</h2>
<p class="lead-text" style="margin: 0 auto;">
En IDE Academy, la formación está a cargo de profesionales que combinan experiencia en consultoría, gestión, proyectos, docencia y práctica organizacional.
</p>
</div>
<div class="grid-4 facilitadores-grid">
<!-- Facilitador 1 -->
<div class="facilitador-item">
<div class="facilitador-avatar">
<img src="./assets/img/CRA.png" alt="Claudia Raquel ANDRÉS">
</div>
<h4 class="facilitador-nombre">Claudia Raquel ANDRÉS</h4>
<p class="facilitador-rol">Consultoría & Gestión</p>
</div>
<!-- Facilitador 2 -->
<div class="facilitador-item">
<div class="facilitador-avatar">
<img src="./assets/img/JAP.png" alt="José PUGLIESE">
</div>
<h4 class="facilitador-nombre">José PUGLIESE</h4>
<p class="facilitador-rol">Proyectos & Agile</p>
</div>
<!-- Facilitador 3 -->
<div class="facilitador-item">
<div class="facilitador-avatar">
<img src="./assets/img/MAR.png" alt="Miguel Ángel ROJAS">
</div>
<h4 class="facilitador-nombre">Miguel Ángel ROJAS</h4>
<p class="facilitador-rol">Calidad & Mejora Continua</p>
</div>
<!-- Facilitador 4 -->
<div class="facilitador-item">
<div class="facilitador-avatar">
<img src="./assets/img/VUB.png" alt="Víctor Ulises BARRIONUEVO">
</div>
<h4 class="facilitador-nombre">Víctor Ulises BARRIONUEVO</h4>
<p class="facilitador-rol">Calidad & Mejora Continua</p>
</div>
</div>
<div style="display: flex; justify-content: center; margin-top: 2.5rem;">
<a href="somos-ide.html" class="btn btn-primary btn-sm">
CONOCER A NUESTROS FACILITADORES →
</a>
</div>
</div>
</section>
<!-- Sección IDE Academy Virtual / Campus -->
<section class="section-padding">
<div class="container">
<div class="card" style="background: linear-gradient(135deg, var(--ide-primary) 0%, #0f7a63 100%); border: none;">
<div class="grid-2" style="gap: 2.5rem; align-items: center;">
<div>
<span class="eyebrow" style="color: rgba(255,255,255,0.75);">CAMPUS VIRTUAL</span>
<h2 style="color: #ffffff; margin-bottom: 0.75rem;">¿Ya sos parte de IDE Academy?</h2>
<p style="color: rgba(255,255,255,0.9); font-size: 1rem; line-height: 1.65; margin: 0; max-width: 520px;">
Accedé a tus cursos, materiales y actividades desde nuestro entorno de aprendizaje.
</p>
</div>
<div style="display: flex; justify-content: flex-end; align-items: center;">
<a href="https://campus.ideconsultores.com" target="_blank" rel="noopener" class="btn btn-sm" style="
background-color: #ffffff;
color: var(--ide-primary);
font-weight: 600;
white-space: nowrap;
">
INGRESAR AL CAMPUS IDE ↗
<!-- Col 2: Bullets + CTA -->
<div class="incompany-card__formats">
<p class="incompany-card__subtitle">Podemos diseñar:</p>
<ul class="incompany-card__list">
<li><i class="fa-solid fa-tag"></i> Cursos</li>
<li><i class="fa-solid fa-tag"></i> Workshops</li>
<li><i class="fa-solid fa-tag"></i> Programas</li>
<li><i class="fa-solid fa-tag"></i> Rutas de Aprendizaje</li>
</ul>
<a href="ecosistema.html#eco-excellence" class="btn btn-academy"
style="border-radius: 50px; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; max-width: 200px;">
HABLEMOS
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<polyline points="12 16 16 12 12 8"></polyline>
<line x1="8" y1="12" x2="16" y2="12"></line>
</svg>
</a>
</div>
</div>
<!-- Col 3: Imagen a sangre -->
<div class="incompany-card__visual" aria-hidden="true"></div>
</div>
</div>
<div class="container">
<div class="campus-banner">
<!-- Col 1: Intro -->
<div class="campus-banner__intro">
<span class="eyebrow campus-banner__eyebrow">CAMPUS VIRTUAL</span>
<h2 class="campus-banner__title">¿Ya sos parte de IDE Academy?</h2>
<p class="campus-banner__lead">
Accedé a tus cursos, materiales y actividades desde nuestro entorno de aprendizaje.
</p>
</div>
<!-- Col 2: Acceso al Campus -->
<div class="campus-banner__access">
<div class="campus-banner__icon">
<i class="fa-solid fa-graduation-cap"></i>
</div>
<h3 class="campus-banner__access-title">Campus IDE</h3>
<p class="campus-banner__access-desc">
Tus cursos, materiales y actividades desde nuestro entorno virtual.
</p>
<a href="https://campus.ideconsultores.com.ar" target="_blank" rel="noopener noreferrer"
class="btn btn-academy2 curso-card__cta"
style="border-radius: 50px; display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.5rem 1rem; width: fit-content; text-decoration: none;">
Ingresar al Campus
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<polyline points="12 16 16 12 12 8"></polyline>
<line x1="8" y1="12" x2="16" y2="12"></line>
</svg>
</a>
</div>
<!-- Col 3: Recursos y Herramientas -->
<div class="campus-banner__access">
<div class="campus-banner__icon">
<i class="fa-solid fa-folder-open"></i>
</div>
<h3 class="campus-banner__access-title">Recursos y Herramientas</h3>
<p class="campus-banner__access-desc">
Descargables, plantillas y guías para aplicar en tu día a día.
</p>
<a href="https://campus.ideconsultores.com.ar" target="_blank" rel="noopener noreferrer"
class="btn btn-academy2 curso-card__cta"
style="border-radius: 50px; display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.5rem 1rem; width: fit-content; text-decoration: none;">
Ver Recursos
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<polyline points="12 16 16 12 12 8"></polyline>
<line x1="8" y1="12" x2="16" y2="12"></line>
</svg>
</a>
</div>
</div>
</div>
</section>