// ============================================================ // NAV + HERO + BRIDGE // ============================================================ const { useState: useStateNH, useEffect: useEffectNH, useRef: useRefNH } = React; const Nav = ({ scrolled, logoVisible, onNav }) => { const [open, setOpen] = useStateNH(false); const isDesktop = useIsDesktop(); const links = [ { id: 'manifiesto', label: 'Manifiesto' }, { id: 'proceso', label: 'Proceso' }, { id: 'servicios', label: 'Servicios' }, { id: 'proyectos', label: 'Proyectos' }, { id: 'contacto', label: 'Contacto' }]; return (
{isDesktop && } {!isDesktop && } {open && !isDesktop &&
{links.map((l) => )}
}
); }; // ============================================================ // HERO — Fotoparaportada + Wordmark animado // Termina con un puente continuo hacia la sección Manifiesto // ============================================================ const Hero = ({ onNav }) => { const scrollY = useScrollY(); const { h: vh } = useViewportSize(); const isDesktop = useIsDesktop(); // ── MÓVIL: hero estático sencillo, sin lógica de scroll ── if (!isDesktop) { return (
{/* Fondo: portada */}
{/* Overlay para legibilidad */}
{/* Contenido */}
{/* 1. Wordmark */}
arquitectura y construcción
{/* 2. Eyebrow */}
HOLA, SOMOS HND —
{/* 3. Título */}

DISEÑO, FUNCIONALIDAD Y EJECUCIÓN.

{/* 4. Párrafo */}

Con procesos claros y presupuestos bien pensados desde el principio.

{/* 5. Botones */}
e.currentTarget.style.backgroundColor = `${BRAND.marfil}15`} onMouseLeave={(e) => e.currentTarget.style.backgroundColor = 'transparent'}> Agenda una cita
); } const animEnd = vh * 0.8; const progress = Math.max(0, Math.min(1, scrollY / animEnd)); const eased = 1 - Math.pow(1 - progress, 3); const logoScale = 1 - eased * 0.82; const logoY = -eased * 42; const logoX = -eased * (isDesktop ? 38 : 32); const textProgress = Math.max(0, Math.min(1, (scrollY - vh * 0.15) / (vh * 0.4))); const textOpacity = textProgress; const textY = (1 - textProgress) * 30; // Bridge progress — gradual takeover starting earlier in the scroll const bridgeStart = vh * 1.05; const bridgeProgress = Math.max(0, Math.min(1, (scrollY - bridgeStart) / (vh * 0.65))); // Border-radius animates from 60px to 0 in the last 35% of bridge progress (so it lands flat) const bridgeRadius = Math.max(0, 60 - Math.max(0, (bridgeProgress - 0.65) / 0.35) * 60); // Hero darkness fades to marfil tone as bridge starts climbing const overlayMarfil = Math.max(0, Math.min(1, (scrollY - vh * 0.95) / (vh * 0.5))); return (
{/* Background image */}
{/* Overlay para legibilidad — y, en el tramo final, vira a marfil suave */}
{/* WORDMARK LND animado */}
arquitectura y construcción
{/* Contenido del hero */}
0.5 ? 'auto' : 'none' }}>
HOLA, SOMOS HND —

DISEÑO, FUNCIONALIDAD  Y EJECUCIÓN.

Con procesos claros y presupuestos bien pensados desde el principio. 

e.currentTarget.style.backgroundColor = `${BRAND.marfil}15`} onMouseLeave={(e) => e.currentTarget.style.backgroundColor = 'transparent'}> Agenda una cita
{/* Pie con siluetas — se oculta gradualmente conforme inicia el puente */}
Scroll ↓
{/* PUENTE — fondo marfil que sube desde abajo del hero */}
{/* Etiqueta/eyebrow que aparece dentro del puente */}
0.45 ? (bridgeProgress - 0.45) / 0.55 : 0, transition: 'opacity 0.2s' }}> Manifiesto · 001
{/* Línea vertical que "baja" durante el puente, conectando ambas secciones */}
0.05 ? 1 : 0, transition: 'opacity 0.2s' }}> {/* Punto en la punta inferior */}
); }; Object.assign(window, { Nav, Hero });