mejoras estateticas v2.3

This commit is contained in:
2026-09-27 18:40:07 -03:00
parent c5c589b32e
commit 58cd7a2ed4
7 changed files with 118 additions and 32 deletions
Binary file not shown.
+2 -8
View File
@@ -18,20 +18,15 @@
<main>
<!-- Header Contacto -->
<section class="section-padding" style="background-color: var(--bg-surface); border-bottom: 1px solid var(--border-color);">
<div class="container container-narrow text-center">
<section class="section-padding">
<div class="container container-narrow text-center" style="padding-bottom: 5rem;">
<span class="eyebrow">CONVERSACIÓN INICIAL</span>
<h1 style="margin-bottom: 1.25rem;">Hablemos de lo que necesitás</h1>
<p class="lead-text" style="margin: 0 auto;">
Cada organización, proyecto o iniciativa parte de un contexto diferente. <br>Contanos qué te trae a IDE y empecemos por entender cómo podemos aportar valor.
</p>
</div>
</section>
<!-- Formulario Inteligente & Datos de Contacto -->
<section class="section-padding">
<div class="container">
<div class="grid-2" style="gap: 3.5rem; align-items: flex-start;">
<!-- Columna Izquierda: Formulario Inteligente -->
@@ -156,7 +151,6 @@
</div>
</section>
</main>
<footer id="site-footer"></footer>
+1 -1
View File
@@ -259,7 +259,7 @@
<p class="lead-text-cta" style="margin-bottom: 1.5rem;">
Conversemos para comprender tu desafío e identificar qué capacidades pueden aportar mayor valor.
</p>
<div style="display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap;">
<div style="display: flex; justify-content: left; gap: 1rem; flex-wrap: wrap;">
<a href="contacto.html" class="btn btn-primary-cta btn-sm">HABLEMOS</a>
<a href="desafios.html" class="btn btn-outline-cta btn-sm">Explorar Punto de Partida</a>
</div>
+17 -8
View File
@@ -252,7 +252,7 @@
<!-- Facilitadores / Quiénes facilitan el aprendizaje -->
<section class="section-padding">
<div class="container">
<div class="text-center" style="max-width: 720px; margin: 0 auto 2.5rem auto;">
<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;">
@@ -260,31 +260,40 @@
</p>
</div>
<div class="grid-3 facilitadores-grid">
<div class="grid-4 facilitadores-grid">
<!-- Facilitador 1 -->
<div class="facilitador-item">
<div class="facilitador-avatar">
<img src="assets/img/facilitador-1.jpg" alt="Nombre del facilitador 1">
<img src="assets/img/CRA.jpg" alt="Claudia Raquel ANDRÉS">
</div>
<h4 class="facilitador-nombre">Nombre Apellido</h4>
<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/facilitador-2.jpg" alt="Nombre del facilitador 2">
<img src="assets/img/JAP2.jpg" alt="José PUGLIESE">
</div>
<h4 class="facilitador-nombre">Nombre Apellido</h4>
<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/facilitador-3.jpg" alt="Nombre del facilitador 3">
<img src="assets/img/MAR.jpg" alt="Miguel Ángel ROJAS">
</div>
<h4 class="facilitador-nombre">Nombre Apellido</h4>
<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.jpg" 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>
+1 -1
View File
@@ -20,7 +20,7 @@
<!-- 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="
<video id="hero-bg-video" muted loop playsinline style="
position: absolute;
top: 0;
left: 0;
+63 -9
View File
@@ -9,9 +9,9 @@ document.addEventListener('DOMContentLoaded', () => {
async function initApp() {
initTheme();
initHeroVideoSpeed();
await loadIncludes();
initModals();
/*initBrujulaIDE();*/
initAcademyCourses();
initSolucionesFilters();
initInsightsFeed();
@@ -63,18 +63,31 @@ function highlightActiveNavLink() {
const currentPath = window.location.pathname;
const navLinks = document.querySelectorAll('.nav-link');
// 1. Limpiar estado activo previo
navLinks.forEach(link => link.classList.remove('active'));
// 2. Evaluar cada enlace
navLinks.forEach(link => {
const href = link.getAttribute('href');
if (!href) return;
// Ignoramos enlaces vacíos o anclas "#"
if (!href || href === '#') return;
// Comparación de página activa
if (
(currentPath === '/' || currentPath.endsWith('index.html')) && (href === '/' || href === 'index.html' || href === './') ||
(currentPath.includes(href) && href !== '/' && href !== 'index.html')
) {
const isHome = (currentPath === '/' || currentPath.endsWith('index.html')) &&
(href === '/' || href === 'index.html' || href === './');
const isCurrentPage = currentPath.includes(href) && href !== '/' && href !== 'index.html';
if (isHome || isCurrentPage) {
link.classList.add('active');
} else {
link.classList.remove('active');
// Si este enlace está dentro de un submenú, marcar también al padre
const parentDropdown = link.closest('.dropdown');
if (parentDropdown) {
const parentToggle = parentDropdown.querySelector('.dropdown-toggle');
if (parentToggle) {
parentToggle.classList.add('active');
}
}
}
});
}
@@ -1123,3 +1136,44 @@ function initCareersForm() {
}
});
}
/* ==========================================================================
11. Video de Insights
========================================================================== */
function initHeroVideoSpeed() {
const video = document.getElementById('hero-bg-video');
if (!video) return;
const targetSpeed = 0.5; // 50% de la velocidad normal
// 1. Forzar mute por propiedad nativa JS (garantiza el autoplay sin bloqueo)
video.muted = true;
video.defaultMuted = true;
video.playsInline = true;
const applySpeedAndPlay = () => {
video.playbackRate = targetSpeed;
// Si quedó en pausa, disparar play explícito atrapando la promesa
if (video.paused) {
const playPromise = video.play();
if (playPromise !== undefined) {
playPromise.catch(err => {
console.warn('El navegador requirió interacción previa:', err);
});
}
}
};
// 2. Si el video ya está listo o ya empezó a correr
if (video.readyState >= 2) {
applySpeedAndPlay();
} else {
video.addEventListener('canplay', applySpeedAndPlay, { once: true });
video.addEventListener('loadeddata', applySpeedAndPlay, { once: true });
}
// 3. Garantizar que tras el loop o reanudación conserve la velocidad
video.addEventListener('play', () => {
video.playbackRate = targetSpeed;
});
}
+34 -5
View File
@@ -18,11 +18,40 @@
<main>
<!-- Header Trabaja con Nosotros -->
<section class="section-padding" style="background-color: var(--bg-surface); border-bottom: 1px solid var(--border-color);">
<div class="container container-narrow text-center">
<span class="eyebrow">TALENTO & RED</span>
<h1 style="margin-bottom: 1.25rem;">Sumá tu experiencia <br> al Ecosistema IDE</h1>
<p class="lead-text" style="margin: 0 auto;">
<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.15;
z-index: 0;
pointer-events: none;
">
<source src="/assets/video/desktop_working.mp4" type="video/mp4">
Tu navegador no soporta videos.
</video>
<!-- 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>
<!-- Contenido -->
<div class="container container-narrow text-center" style="position: relative; z-index: 2;">
<span class="eyebrow" style="color: var(--text-main)">TELENTO & RED</span>
<h1 style="margin-bottom: 1.25rem; color:var(--text-main);">Sumá tu experiencia al Ecosistema IDE</h1>
<p class="lead-text" style="color:var(--text-main)">
Construimos una red de profesionales y especialistas con experiencias diversas y una forma compartida de entender la gestión: comprender el contexto, conectar capacidades y generar valor desde la práctica.
</p>
</div>