/* global React */ // NUON hero — animated isometric district diagram // Reuses the visual vocabulary from slides/10-isometric.html, adapted for the // home page with subtle live animations (pulsing core, flowing energy lines). const { useState, useEffect } = React; function IsoHero({ copy }) { return (

{copy.stage_tl} {copy.stage_bl}

{copy.legend_head}

{copy.legend.map((row, i) => { const swatches = ["#0096FF", "#7A81FF", "#76D6FF", "#D883FF", "#FDBFE8"]; return (

{row[0]} {row[1]}

); })}

); } // Reloj de ciclo — la marca es Bogotá; zona y etiqueta viven juntas para que no // se desincronicen, y el formatter se construye una sola vez (no por tick/instancia). const CLOCK_ZONE = { tz: "America/Bogota", label: "UTC-5" }; const CLOCK_FMT = new Intl.DateTimeFormat("en-US", { timeZone: CLOCK_ZONE.tz, hour12: false, hour: "2-digit", minute: "2-digit", second: "2-digit", }); // Live cycle clock — ticking timestamp function Clock({ className, prefix }) { const [t, setT] = useState(new Date()); useEffect(() => { const id = setInterval(() => setT(new Date()), 1000); return () => clearInterval(id); }, []); const time = CLOCK_FMT.format(t).replace(/^24/, "00"); // Intl puede emitir "24:mm:ss" a medianoche return {prefix} {time} {CLOCK_ZONE.label}; } function TypoHero({ copy }) { return (

{copy.stage_tl} v.4.0 · BLUEPRINT

{copy.typo_a}

{copy.typo_b}

{copy.typo_c}{copy.typo_dot}

{/* Floating spectrum chips */}

{["#76D6FF", "#0096FF", "#7A81FF", "#D883FF", "#FDBFE8"].map((c, i) => (

))}

[ TIPOGRAFÍA · BEBAS NEUE 400 ]

); } window.IsoHero = IsoHero; window.TypoHero = TypoHero; window.Clock = Clock;