// App — main composer with Tweaks panel.
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"hero": "split",
"palette": "liquidBrand",
"typography": "modernBold",
"density": "compact",
"animations": true
}/*EDITMODE-END*/;
// Scroll-triggered fade-ins for any element with .ls-fade
function useScrollReveal() {
React.useEffect(() => {
if (typeof IntersectionObserver === "undefined") return;
const els = document.querySelectorAll(".ls-fade");
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => {
if (e.isIntersecting) {
e.target.classList.add("is-visible");
io.unobserve(e.target);
}
});
}, { rootMargin: "0px 0px 0px 0px", threshold: 0 });
els.forEach((el) => io.observe(el));
return () => io.disconnect();
}, []);
}
// Sidebar section navigation — frosted glass panel, visible on any background
function SectionNav({ t }) {
const { pal, typo } = t;
const [active, setActive] = React.useState(0);
const SECTIONS_NAV = [
{ id: "inicio", label: "Inicio" },
{ id: "equipamiento", label: "Soluciones" },
{ id: "industrias", label: "Sectores" },
{ id: "contacto", label: "Contacto" },
];
React.useEffect(() => {
const els = SECTIONS_NAV.map(s => document.getElementById(s.id)).filter(Boolean);
const io = new IntersectionObserver(entries => {
entries.forEach(e => {
if (e.isIntersecting) {
const idx = els.indexOf(e.target);
if (idx !== -1) setActive(idx);
}
});
}, { threshold: 0.4 });
els.forEach(el => io.observe(el));
return () => io.disconnect();
}, []);
const scrollTo = (id) => document.getElementById(id)?.scrollIntoView({ behavior: "smooth", block: "start" });
return (
);
}
// Floating WhatsApp CTA — appears only after scrolling past the hero
// so it doesn't cover the hero marquee / stats on mobile.
function MobileCTA() {
const [visible, setVisible] = React.useState(false);
React.useEffect(() => {
const onScroll = () => {
const hero = document.getElementById("inicio");
const threshold = hero ? hero.offsetHeight - 120 : 600;
setVisible(window.scrollY > threshold);
};
onScroll();
window.addEventListener("scroll", onScroll, { passive: true });
window.addEventListener("resize", onScroll, { passive: true });
return () => {
window.removeEventListener("scroll", onScroll);
window.removeEventListener("resize", onScroll);
};
}, []);
return (
window.va?.('event', { name: 'click_cotizar', data: { source: 'mobile_cta' } })}
style={{
opacity: visible ? 1 : 0,
transform: visible ? "translateY(0)" : "translateY(120%)",
pointerEvents: visible ? "auto" : "none",
transition: "opacity .35s ease, transform .35s cubic-bezier(.2,.6,.2,1)",
}}>
Cotizar por WhatsApp
);
}
function App() {
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
const [lang, setLang] = React.useState("es");
useScrollReveal();
const theme = React.useMemo(() => ({
pal: PALETTES[t.palette] || PALETTES.liquidBrand,
typo: TYPE_PAIRINGS[t.typography] || TYPE_PAIRINGS.editorial,
dens: DENSITY[t.density] || DENSITY.aireado,
}), [t.palette, t.typography, t.density]);
const HeroComponent = (HERO_VARIANTS[t.hero] || HERO_VARIANTS.fullbleed).Component;
return (
({ value: k, label: v.name }))}
onChange={(v) => setTweak("hero", v)}
/>
({ value: k, label: v.name }))}
onChange={(v) => setTweak("palette", v)}
/>
({ value: k, label: v.name }))}
onChange={(v) => setTweak("typography", v)}
/>
setTweak("density", v)}
/>
setTweak("animations", v)}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render();