/* eslint-disable */ /* global React, ReactDOM, useLang, LangProvider, WhatsAppFloat */ /* home.jsx — Teramot Home V2 (relanzamiento, foco Finanzas / P&CdG). Recreación del handoff de diseño "Teramot Home V2" (ver /Users/facundoortega/.claude/plans/replicated-dazzling-badger.md para el contexto completo). Nav y footer son propios de esta página (no chrome.jsx) — el resto del sitio no cambia. Mantiene el toggle ES/EN vía el useLang() global (i18n.jsx) por consistencia con el resto del sitio, aunque no está en el diseño original. */ const { useState: useStateHome, useEffect: useEffectHome, useRef: useRefHome, useCallback: useCallbackHome } = React; /* ── Scroll reveal genérico (mismo idiom que el resto del sitio: chrome.jsx, agro.jsx, etc.) — no el motor de reveal más elaborado del handoff. ── */ const useScrollReveal = (rootRef) => { useEffectHome(() => { if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return; const root = rootRef.current; if (!root) return; const groups = []; root.querySelectorAll('section, footer').forEach((sec) => { const wrap = sec.firstElementChild && sec.children.length === 1 ? sec.firstElementChild : sec; // Drawer/overlay are fixed-position overlays, not in-flow content — // reveal-in would fight their own open/close transform. const kids = Array.from(wrap.children).filter((el) => ( el.nodeType === 1 && !el.classList.contains('tm-drawer') && !el.classList.contains('tm-drawer-overlay') )); if (kids.length) groups.push(kids); }); const io = new IntersectionObserver((entries) => { entries.forEach((en) => { if (en.isIntersecting) { en.target.classList.add('rv-in'); io.unobserve(en.target); } }); }, { rootMargin: '0px 0px -8% 0px', threshold: 0.08 }); groups.forEach((kids) => kids.forEach((el, i) => { el.classList.add('rv'); el.style.transitionDelay = Math.min(i, 4) * 70 + 'ms'; io.observe(el); })); return () => io.disconnect(); }, []); }; /* Smooth anchor scroll — duración proporcional a la distancia, easing cubic-bezier(0.16,1,0.3,1), igual que el handoff. */ const makeBezier = (p1x, p1y, p2x, p2y) => { const cx = 3 * p1x, bx = 3 * (p2x - p1x) - cx, ax = 1 - cx - bx; const cy = 3 * p1y, by = 3 * (p2y - p1y) - cy, ay = 1 - cy - by; const sx = (t) => ((ax * t + bx) * t + cx) * t; const dx = (t) => (3 * ax * t + 2 * bx) * t + cx; return (x) => { let t = x; for (let i = 0; i < 6; i++) { const e = sx(t) - x, d = dx(t); if (Math.abs(e) < 1e-5 || Math.abs(d) < 1e-6) break; t -= e / d; } return ((ay * t + by) * t + cy) * t; }; }; const useSmoothAnchors = (hostRef) => { useEffectHome(() => { const root = hostRef.current || document; const ease = makeBezier(0.16, 1, 0.3, 1); let raf = 0; const stop = () => { if (raf) cancelAnimationFrame(raf); raf = 0; }; const glide = (to) => { stop(); const from = window.scrollY; const dist = to - from; if (Math.abs(dist) < 2) return; const dur = Math.min(1500, Math.max(650, Math.abs(dist) * 0.55)); const t0 = performance.now(); const step = (now) => { const p = Math.min(1, (now - t0) / dur); window.scrollTo(0, from + dist * ease(p)); if (p < 1) raf = requestAnimationFrame(step); else raf = 0; }; raf = requestAnimationFrame(step); }; const onClick = (e) => { const a = e.target.closest && e.target.closest('a[href^="#"]'); if (!a) return; const id = a.getAttribute('href').slice(1); if (!id) return; const target = document.getElementById(id); if (!target) return; e.preventDefault(); if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) { window.scrollTo(0, target.getBoundingClientRect().top + window.scrollY); return; } glide(Math.max(0, target.getBoundingClientRect().top + window.scrollY - 24)); }; root.addEventListener('click', onClick); ['wheel', 'touchstart', 'keydown'].forEach((ev) => window.addEventListener(ev, stop, { passive: true })); return () => { stop(); root.removeEventListener('click', onClick); ['wheel', 'touchstart', 'keydown'].forEach((ev) => window.removeEventListener(ev, stop)); }; }, []); }; /* Hero mouse-parallax sobre los layers con data-depth. */ const useHeroParallax = (artRef) => { useEffectHome(() => { const el = artRef.current; if (!el) return; if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return; const layers = Array.from(el.querySelectorAll('[data-depth]')); layers.forEach((l) => { const release = () => { l.style.animation = 'none'; l.style.opacity = '1'; l.style.transform = 'translate3d(0, 0, 0) scale(1)'; }; l.addEventListener('animationend', release, { once: true }); }); let raf = 0; const apply = (dx, dy, lift) => { layers.forEach((l) => { const d = parseFloat(l.dataset.depth) || 0; const x = (-dx * d * 18).toFixed(2); const y = (-dy * d * 14).toFixed(2); l.style.transform = `translate3d(${x}px, ${y}px, 0) scale(${(1 + d * 0.01 * lift).toFixed(4)})`; }); }; const move = (e) => { const r = el.getBoundingClientRect(); const dx = (e.clientX - (r.left + r.width / 2)) / r.width; const dy = (e.clientY - (r.top + r.height / 2)) / r.height; cancelAnimationFrame(raf); raf = requestAnimationFrame(() => apply(dx, dy, 1)); }; const leave = () => { cancelAnimationFrame(raf); apply(0, 0, 0); }; el.addEventListener('mousemove', move); el.addEventListener('mouseleave', leave); return () => { cancelAnimationFrame(raf); el.removeEventListener('mousemove', move); el.removeEventListener('mouseleave', leave); }; }, []); }; /* ── NAV + HERO ──────────────────────────────────────────────── */ const HomeHero = ({ artRef }) => { const { lang, setLang, c } = useLang(); useHeroParallax(artRef); const [drawerOpen, setDrawerOpen] = useStateHome(false); /* Smooth ES/EN content swap — View Transitions crossfades the whole page (old snapshot out, new content in) instead of an instant text swap. Falls back to a plain setLang where unsupported. */ const changeLang = useCallbackHome((next) => { if (next === lang) return; const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches; if (!reduce && document.startViewTransition) { const transition = document.startViewTransition(() => setLang(next)); // Clicking again before a transition settles aborts it — expected, // but the browser otherwise reports it as an unhandled rejection. transition.ready.catch(() => {}); transition.finished.catch(() => {}); } else { setLang(next); } }, [lang, setLang]); useEffectHome(() => { document.body.style.overflow = drawerOpen ? 'hidden' : ''; return () => { document.body.style.overflow = ''; }; }, [drawerOpen]); useEffectHome(() => { if (!drawerOpen) return; const onKey = (e) => { if (e.key === 'Escape') setDrawerOpen(false); }; document.addEventListener('keydown', onKey); return () => document.removeEventListener('keydown', onKey); }, [drawerOpen]); /* Swipe-to-close — same idiom as chrome.jsx's NavBar drawer. */ const touchStartXRef = useRefHome(0); const touchDeltaXRef = useRefHome(0); const onDrawerTouchStart = useCallbackHome((e) => { touchStartXRef.current = e.touches[0].clientX; touchDeltaXRef.current = 0; }, []); const onDrawerTouchMove = useCallbackHome((e) => { touchDeltaXRef.current = e.touches[0].clientX - touchStartXRef.current; }, []); const onDrawerTouchEnd = useCallbackHome(() => { if (touchDeltaXRef.current > 60) setDrawerOpen(false); touchDeltaXRef.current = 0; }, []); return (
Teramot
{c.home2.nav.login} {c.home2.demo}
setDrawerOpen(false)} />
setDrawerOpen(false)}> Teramot

{c.home2.hero.h1Pre}{c.home2.hero.h1Highlight}{c.home2.hero.h1Post}

{c.home2.hero.sub}

{c.home2.hero.finePrint}

{c.home2.hero.artAlt}
); }; /* ── CLIENTES ────────────────────────────────────────────────── */ const CLIENTES_LOGOS = [ { src: 'brand/clients/coca-cola.png', alt: 'The Coca-Cola Company', h: 40 }, { src: 'brand/clients/johnson-johnson.png', alt: 'Johnson & Johnson', h: 15 }, { src: 'brand/clients/sancor-seguros.png', alt: 'Grupo Sancor Seguros', h: 38 }, { src: 'brand/clients/bcr.png', alt: 'Bolsa de Comercio de Rosario', h: 38 }, { src: 'brand/clients/la-segunda.svg', alt: 'La Segunda', h: 27 }, { src: 'brand/clients/cubo-itau.webp', alt: 'Cubo Itaú', h: 32 }, { src: 'brand/clients/endeavor.png', alt: 'Endeavor', h: 19 }, { src: 'brand/clients/digital-house.png', alt: 'Digital House', h: 29 }, { src: 'brand/clients/sullair.svg', alt: 'Sullair', h: 21 }, ]; const ClientesSection = () => { const { c } = useLang(); const track = [...CLIENTES_LOGOS, ...CLIENTES_LOGOS]; return (

{c.home2.clientes.label}

{track.map((logo, i) => ( {logo.alt} ))}
); }; /* ── PROBLEMA ────────────────────────────────────────────────── */ const PROBLEM_ICONS = ['clock-countdown', 'table', 'user-focus', 'chart-line-down']; /* Inlinea problem.svg en runtime para poder animar cada parte por separado. La categorización por posición (sources/flows/core/report) es agnóstica al contenido exacto del SVG — se basa en el bounding box de cada elemento. */ const useProblemIllustration = (hostRef) => { useEffectHome(() => { const host = hostRef.current; if (!host) return; let cancelled = false; (async () => { let markup; try { markup = await (await fetch('assets/home/problem.svg')).text(); } catch (err) { return; } if (cancelled) return; host.innerHTML = markup; const svg = host.querySelector('svg'); if (!svg) return; svg.setAttribute('preserveAspectRatio', 'xMidYMid meet'); svg.style.width = '100%'; svg.style.height = '100%'; svg.style.display = 'block'; const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches; const nodes = Array.from(svg.children).filter((el) => el.tagName !== 'defs'); const sources = [], flows = [], core = [], report = []; nodes.forEach((el) => { let bb; try { bb = el.getBBox(); } catch (e) { return; } if (bb.width >= 700) return; el.style.transformBox = 'fill-box'; el.style.transformOrigin = 'center'; const cx = bb.x + bb.width / 2; if (el.getAttribute('stroke-dasharray')) flows.push(el); else if (cx < 220) sources.push({ el, y: bb.y }); else if (cx < 500) core.push(el); else report.push(el); }); sources.sort((a, b) => a.y - b.y); const hide = (el) => { el.style.opacity = '0'; }; sources.forEach((s) => hide(s.el)); flows.forEach(hide); core.forEach(hide); report.forEach(hide); const ease = 'cubic-bezier(0.2, 0, 0, 1)'; const play = () => { sources.forEach(({ el }, i) => { el.animate([{ opacity: 0, transform: 'translateX(-18px)' }, { opacity: 1, transform: 'translateX(0)' }], { duration: 520, delay: 120 + i * 110, easing: ease, fill: 'forwards' }); }); flows.forEach((el, i) => { el.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 420, delay: 560 + i * 90, easing: ease, fill: 'forwards' }); el.animate([{ strokeDashoffset: 0 }, { strokeDashoffset: -16 }], { duration: 900, delay: 560, iterations: Infinity, easing: 'linear' }); }); core.forEach((el) => { el.animate([{ opacity: 0, transform: 'scale(.92)' }, { opacity: 1, transform: 'scale(1)' }], { duration: 620, delay: 900, easing: ease, fill: 'forwards' }); }); report.forEach((el, i) => { el.animate([{ opacity: 0, transform: 'translateY(10px)' }, { opacity: 1, transform: 'translateY(0)' }], { duration: 560, delay: 1200 + Math.min(i, 18) * 45, easing: ease, fill: 'forwards' }); }); const disc = core.find((el) => (el.getAttribute('fill') || '').toUpperCase() === '#91DFC8'); if (disc) { disc.animate([{ transform: 'scale(1)' }, { transform: 'scale(1.12)' }, { transform: 'scale(1)' }], { duration: 2400, delay: 1600, iterations: Infinity, easing: 'cubic-bezier(0.4, 0, 0.6, 1)' }); } }; if (reduce) { [...sources.map((s) => s.el), ...flows, ...core, ...report].forEach((el) => { el.style.opacity = '1'; }); return; } if (!('IntersectionObserver' in window)) { play(); return; } let played = false; const playOnce = () => { if (played) return; played = true; play(); }; const io = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { playOnce(); io.disconnect(); } }); }, { threshold: 0.35 }); io.observe(host); const guard = setInterval(() => { if (played) { clearInterval(guard); return; } const r = host.getBoundingClientRect(); if (r.height && r.top < window.innerHeight * 0.9 && r.bottom > 0) { playOnce(); io.disconnect(); clearInterval(guard); } }, 250); host._cleanup = () => { io.disconnect(); clearInterval(guard); }; })(); return () => { cancelled = true; if (host._cleanup) host._cleanup(); }; }, []); }; const ProblemaSection = () => { const { c } = useLang(); const problemRef = useRefHome(null); useProblemIllustration(problemRef); return (
{c.home2.problema.eyebrow}

{c.home2.problema.statementPre}{c.home2.problema.statementHighlight}{c.home2.problema.statementPost}

{c.home2.problema.cards.map((card, i) => (

{card.title}

{card.body}

))}
); }; /* ── CÓMO FUNCIONA ───────────────────────────────────────────── */ const HOW_STEP_IMGS = ['teramot-connect-data', 'teramot-schema', 'teramot-dashboard', 'teramot-sync']; const HOW_STEP_NUMS = ['01', '02', '03', '04']; /* ── INTEGRACIONES / DIFERENCIALES / ANTES-DESPUÉS ────────────── (construidas por un subagente a partir del handoff, líneas 389-536; contenido verificado línea por línea contra la fuente.) ── */ const INTEGRATION_LOGOS = [ { src: 'brand/integrations/sap.png', alt: 'SAP', height: 30, labelKey: 'erp' }, { src: 'brand/integrations/netsuite.png', alt: 'Oracle NetSuite', height: 28, labelKey: 'erp' }, { src: 'brand/integrations/dynamics.png', alt: 'Microsoft Dynamics', height: 28, labelKey: 'erp' }, { src: 'brand/integrations/odoo.png', alt: 'Odoo', height: 24, labelKey: 'erp' }, { src: 'brand/integrations/tango.png', alt: 'Tango Gestión', height: 38, labelKey: 'erpLatam' }, { src: 'brand/integrations/softland.png', alt: 'Softland', height: 24, labelKey: 'erpLatam' }, { src: 'brand/integrations/bejerman.png', alt: 'Bejerman', height: 22, labelKey: 'erpLatam' }, { src: 'brand/integrations/excel.png', alt: 'Excel', height: 30, labelKey: 'planillas' }, { src: 'brand/integrations/google-sheets.png', alt: 'Google Sheets', height: 46, labelKey: 'planillas' }, { src: 'brand/integrations/power-bi.png', alt: 'Power BI', height: 36, labelKey: 'bi' }, { src: 'brand/integrations/tableau.png', alt: 'Tableau', height: 22, labelKey: 'bi' }, { src: 'brand/integrations/snowflake.svg', alt: 'Snowflake', height: 34, labelKey: 'dataWarehouse' }, ]; const IntegracionesSection = () => { const { c } = useLang(); const t = c.home2.integraciones; return (
{t.eyebrow}

{t.heading}

{t.lede}

{INTEGRATION_LOGOS.map((logo, i) => (
{logo.alt} {t.labels[logo.labelKey]}
))}
); }; const DIFERENCIALES_ICONS = ['ph ph-graph', 'ph ph-shield-check', 'ph ph-lightning', 'ph ph-sparkle']; const DiferencialesSection = () => { const { c } = useLang(); const t = c.home2.diferenciales; return (
{t.eyebrow}

{t.heading}

{t.lede}

{t.items.map((item, i) => (
{item.kicker}

{item.title}

{item.body}

))}
); }; const AntesDespuesSection = () => { const { c } = useLang(); const t = c.home2.antesDespues; return (
{t.eyebrow}

{t.heading}

{t.beforeTitle}

{t.before.map((text, i) => (
{text}
))}

{t.afterTitle}

{t.after.map((text, i) => (
{text}
))}
); }; /* ── CASOS DE USO (scroll-pinned) ────────────────────────────── */ const CASE_COUNT = 4; const RAIL_ICONS = ['magnifying-glass', 'database', 'chart-line', 'clock-counter-clockwise']; const CASE_ACTION_ICONS = ['download-simple', 'sliders-horizontal', 'funnel', 'plus']; /* Estado/badge color per row — internal styling hook, not user-visible text, so it stays in code rather than the i18n copy tree. */ const CASE2_KINDS = ['green', 'neutral', 'low', 'low']; /* Fake source-table identifiers for the ad-hoc query mockup — technical strings, not translated. */ const CASE3_SOURCES = ['erp.ventas_v2', 'sheets.gastos_cc', 'erp.stock_dep']; const CaseMockupShell = ({ title, actionIcon, actionLabel, children }) => (
Teramot {RAIL_ICONS.map((icon) => ( ))} MG
Teramot v2.6 {title} {actionLabel}
{children}
); const Case0Body = ({ t }) => ( <>
{t.topLabel} {t.badge}
{t.rows.map(([label, time]) => (
{label} {time}
))}
{t.totalLabel} {t.totalValue}
); const Case1Body = ({ t }) => ( <>
{t.topLabel} {t.badge}
{t.realLabel}$ 58.2M
{t.budgetLabel}$ 61.0M
{t.forecastLabel}$ 64.4M
{t.footnotePre}{t.footnoteBold}{t.footnotePost}
); const Case2Body = ({ t }) => ( <>
{t.topLabel} {t.badge}
{t.headSku}{t.headMargin}{t.headStatus}
{t.rows.map(([sku, margin, estado], i) => { const kind = CASE2_KINDS[i]; return (
{sku} {margin} {estado}
); })}
{t.alert}
); const Case3Body = ({ t }) => ( <>
{t.topLabel} {t.badge}
{t.rows.map(([q, value, who], i) => (
{q}
{value} {CASE3_SOURCES[i]} {who}
))}
); const CASE_BODIES = [Case0Body, Case1Body, Case2Body, Case3Body]; const CaseMockup = ({ idx, casos }) => { const Body = CASE_BODIES[idx]; const mockKeys = ['case0', 'case1', 'case2', 'case3']; const t = casos.mockups[mockKeys[idx]]; return ( ); }; const useCaseScrollPin = ({ casesRef, caseShotRef, caseTitleRef, caseDescRef, caseListRef, activeCase, setActiveCase, targetCase, setTargetCase }) => { const activeRef = useRefHome(activeCase); const targetRef = useRefHome(targetCase); const busyRef = useRefHome(false); const tokenRef = useRefHome(0); const timerRef = useRefHome(null); activeRef.current = activeCase; targetRef.current = targetCase; const caseLayers = useCallbackHome(() => { const list = caseListRef.current; const bullets = list ? Array.from(list.children) : []; return { shot: caseShotRef.current, text: [caseTitleRef.current, caseDescRef.current].filter(Boolean), bullets, all: [caseShotRef.current, caseTitleRef.current, caseDescRef.current, ...bullets].filter(Boolean), }; }, []); const resetCaseLayers = useCallbackHome(() => { caseLayers().all.forEach((el) => el.getAnimations().forEach((a) => a.cancel())); }, [caseLayers]); const animateMockBody = useCallbackHome((shot) => { const body = shot.querySelector('[data-mock-body]'); if (!body) return; const softOut = 'cubic-bezier(0.22, 1, 0.36, 1)'; Array.from(body.children).forEach((row, i) => { row.animate( [{ opacity: 0, transform: 'translate3d(0, 10px, 0)' }, { opacity: 1, transform: 'translate3d(0,0,0)' }], { duration: 420, delay: 120 + i * 80, easing: softOut, fill: 'both' } ); }); shot.querySelectorAll('[data-anim="check"]').forEach((el, i) => { el.animate( [{ transform: 'scale(.6)', opacity: 0 }, { transform: 'scale(1.14)', opacity: 1, offset: 0.7 }, { transform: 'scale(1)', opacity: 1 }], { duration: 420, delay: 180 + i * 80, easing: 'cubic-bezier(0.34, 1.4, 0.64, 1)', fill: 'both' } ); }); shot.querySelectorAll('[data-anim~="bar"]').forEach((el, i) => { el.animate([{ transform: 'scaleX(0)' }, { transform: 'scaleX(1)' }], { duration: 700, delay: 200 + i * 90, easing: softOut, fill: 'both' }); if (el.dataset.anim.indexOf('live') > -1) { el.animate([{ opacity: 0.85 }, { opacity: 1 }], { duration: 620, delay: 900, easing: 'ease-in-out', fill: 'both', direction: 'alternate', iterations: 2 }); } }); shot.querySelectorAll('[data-anim="chip"]').forEach((el, i) => { el.animate([{ opacity: 0, transform: 'scale(.9)' }, { opacity: 1, transform: 'scale(1)' }], { duration: 320, delay: 480 + i * 80, easing: softOut, fill: 'both' }); }); }, []); const enterCase = useCallbackHome((dir, token) => { if (token !== tokenRef.current) { resetCaseLayers(); return; } const layers = caseLayers(); resetCaseLayers(); const soft = 'cubic-bezier(0.16, 1, 0.3, 1)'; if (layers.shot) { layers.shot.animate( [{ opacity: 0, transform: 'translate3d(0, 20px, 0)' }, { opacity: 1, transform: 'translate3d(0,0,0)' }], { duration: 500, easing: 'cubic-bezier(0.22, 1, 0.36, 1)', fill: 'both' } ); animateMockBody(layers.shot); } layers.text.forEach((el, i) => { el.animate( [{ opacity: 0, transform: `translate3d(${dir * 22}px, 10px, 0)`, filter: 'blur(4px)' }, { opacity: 1, transform: 'translate3d(0,0,0)', filter: 'blur(0)' }], { duration: 700, delay: 90 + i * 90, easing: soft, fill: 'both' } ); }); layers.bullets.forEach((el, i) => { el.animate( [{ opacity: 0, transform: `translate3d(${dir * 16}px, 8px, 0)` }, { opacity: 1, transform: 'translate3d(0,0,0)' }], { duration: 620, delay: 300 + i * 80, easing: soft, fill: 'both' } ); }); }, [caseLayers, resetCaseLayers, animateMockBody]); const reconcileCase = useCallbackHome(() => { if (busyRef.current) return; if (activeRef.current === targetRef.current) return; runCaseTransition(targetRef.current); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); function runCaseTransition(idx) { const from = activeRef.current; if (from === idx) return; if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) { activeRef.current = idx; setActiveCase(idx); reconcileCase(); return; } const token = ++tokenRef.current; busyRef.current = true; const dir = idx > from ? 1 : -1; const layers = caseLayers(); resetCaseLayers(); const easeOut = 'cubic-bezier(0.45, 0, 0.55, 1)'; let last = null; layers.all.forEach((el, i) => { last = el.animate( [{ opacity: 1, transform: 'translate3d(0,0,0)', filter: 'blur(0)' }, { opacity: 0, transform: `translate3d(${-dir * 26}px, ${-dir * 6}px, 0)`, filter: 'blur(5px)' }], { duration: 260, delay: i * 18, easing: easeOut, fill: 'forwards' } ); }); let done = false; const swap = () => { if (done) return; done = true; clearTimeout(timerRef.current); if (token !== tokenRef.current) { busyRef.current = false; return; } activeRef.current = idx; setActiveCase(idx); busyRef.current = false; enterCase(dir, token); reconcileCase(); }; timerRef.current = setTimeout(swap, 420); if (last) last.finished.then(swap).catch(swap); else swap(); } useEffectHome(() => { const el = casesRef.current; if (!el) return; let box = { top: 0, height: 0 }; const measure = () => { box = { top: el.offsetTop, height: el.offsetHeight }; }; const read = () => { const track = box.height - window.innerHeight; if (track <= 0) return; const p = (window.scrollY - box.top) / track; const idx = Math.max(0, Math.min(CASE_COUNT - 1, Math.floor(p * CASE_COUNT))); if (idx !== targetRef.current) { targetRef.current = idx; setTargetCase(idx); reconcileCase(); } else { reconcileCase(); } }; let raf = 0; const loop = () => { read(); raf = requestAnimationFrame(loop); }; const restart = () => { cancelAnimationFrame(raf); raf = requestAnimationFrame(loop); }; const onResize = () => { measure(); read(); }; const events = ['scroll', 'wheel', 'touchmove', 'keydown', 'visibilitychange']; events.forEach((n) => window.addEventListener(n, read, { passive: true })); window.addEventListener('resize', onResize); measure(); read(); raf = requestAnimationFrame(loop); const timer = setInterval(read, 100); let io = null; if ('IntersectionObserver' in window) { io = new IntersectionObserver(() => { measure(); restart(); read(); }, { threshold: [0, 0.01, 0.5, 1] }); io.observe(el); } return () => { cancelAnimationFrame(raf); clearInterval(timer); clearTimeout(timerRef.current); events.forEach((n) => window.removeEventListener(n, read)); window.removeEventListener('resize', onResize); if (io) io.disconnect(); }; // eslint-disable-next-line react-hooks/exhaustive-deps }, []); const goToCase = useCallbackHome((i) => { const el = casesRef.current; if (!el) { setActiveCase(i); setTargetCase(i); return; } const track = el.offsetHeight - window.innerHeight; // Below 1024px the section isn't pinned (height:auto, no scroll // track) — scrollTo would land on the same spot for every pill, so // switch cases directly instead of relying on scroll position. if (track <= 0) { setTargetCase(i); runCaseTransition(i); return; } const top = el.offsetTop + (track * i) / (CASE_COUNT - 1); window.scrollTo({ top, behavior: 'smooth' }); }, []); return { goToCase }; }; const CasosDeUsoSection = () => { const casesRef = useRefHome(null); const caseShotRef = useRefHome(null); const caseTitleRef = useRefHome(null); const caseDescRef = useRefHome(null); const caseListRef = useRefHome(null); const [activeCase, setActiveCase] = useStateHome(0); const [targetCase, setTargetCase] = useStateHome(0); const { goToCase } = useCaseScrollPin({ casesRef, caseShotRef, caseTitleRef, caseDescRef, caseListRef, activeCase, setActiveCase, targetCase, setTargetCase, }); const { c } = useLang(); const casos = c.home2.casos; const active = casos.items[activeCase]; return (
{casos.eyebrow}

{casos.heading}

{casos.items.map((item, i) => ( ))}

{active.title}

{active.desc}

{active.bullets.map((b) => (
{b}
))}
{casos.items.map((item, i) => ( ))}
); }; /* ── PRENSA ────────────────────────────────────────────────────── Las 3 fotos reales (Forbes/Yahoo/Cronista) no vienen en el handoff — bloque neutro #F3F4F6 en su lugar, tal como indica el propio README. Los links de las notas usan href="#" hasta tener las URLs reales. ── */ /* Mismos links/imágenes que la home productiva actual (press.jsx): la imagen es un screenshot OG obtenido en runtime via microlink.io (no hay asset local), y el logo del medio viene de Clearbit por dominio. */ const PRESS_ITEMS = [ { name: 'Forbes Argentina', domain: 'forbesargentina.com', headlineEs: 'Estos físicos del Balseiro crearon Teramot para hacer posible la IA empresarial', headlineEn: 'Balseiro physicists built Teramot to make enterprise AI possible', url: 'https://www.forbesargentina.com/daily-cover/estos-fisicos-e-ingenieros-balseiro-crearon-teramot-transformar-big-data-smart-data-hacer-posible-ia-empresarial-n55631', imageFrom: 'https://www.lacapital.com.ar/negocios/invirtieron-us-1-millon-crear-un-software-que-procesa-datos-tiempo-record-n10144070.html', }, { name: 'Yahoo Finance', domain: 'yahoo.com', headlineEs: 'Físicos argentinos del Balseiro cierran una ronda de US$ 2,1 millones', headlineEn: 'Argentine physicists close a US$2.1M seed round', url: 'https://es-us.finanzas.yahoo.com/noticias/f%C3%ADsicos-ingenieros-balseiro-crearon-teramot-083500932.html', }, { name: 'El Cronista', domain: 'cronista.com', headlineEs: 'Es argentino, descubrió el talón de Aquiles de la IA y ayuda a empresas de cuatro países', headlineEn: "He found AI's Achilles' heel — and now helps companies across four countries", url: 'https://www.cronista.com/infotechnology/entreprenerds/es-argentino-descubrio-el-talon-de-aquiles-de-la-ia-y-ahora-ayuda-a-empresas-de-cuatro-paises/', }, ]; const PressCard = ({ name, domain, headlineEs, headlineEn, url, imageFrom, readNote }) => { const { lang } = useLang(); const headline = lang === 'en' ? headlineEn : headlineEs; const [ogImage, setOgImage] = useStateHome(null); const [loading, setLoading] = useStateHome(true); const [logoFailed, setLogoFailed] = useStateHome(false); useEffectHome(() => { const fetchUrl = imageFrom || url; fetch(`https://api.microlink.io?url=${encodeURIComponent(fetchUrl)}`) .then((r) => r.json()) .then((data) => { const img = data?.data?.image?.url; if (img && img.startsWith('http')) setOgImage(img); }) .catch(() => {}) .finally(() => setLoading(false)); }, []); return (
{loading ? (
) : ogImage ? ( {headline} ) : (
{name}
)}
{!logoFailed && ( setLogoFailed(true)} /> )} {name}

{headline}

{readNote}
); }; const PrensaSection = () => { const { c } = useLang(); const t = c.home2.prensa; return (
{t.eyebrow}

{t.headingPre}{t.headingHighlight}{t.headingPost}

{t.lede}

{PRESS_ITEMS.map((item) => ( ))}
); }; /* ── SEGURIDAD ───────────────────────────────────────────────── */ const useSoc2Diagram = (hostRef) => { useEffectHome(() => { const host = hostRef.current; if (!host) return; const q = (sel) => host.querySelector(`[data-soc="${sel}"]`); const nodeIn = q('node-in'), nodeOut = q('node-out'), lineIn = q('line-in'), lineOut = q('line-out'); const badge = q('badge'), badgeImg = q('badge-img'), label = q('gov-label'); const glowHost = q('glow'); const glow = glowHost && glowHost.firstElementChild; const dots = Array.from(host.querySelectorAll('[data-soc-dot]')); const particles = q('particles'); const tip = q('tooltip'); if (!nodeIn || !nodeOut || !lineIn || !lineOut || !badge || !glow) return; const ease = 'cubic-bezier(0.22, 1, 0.36, 1)'; const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches; const onEnter = () => { tip.style.opacity = '1'; tip.style.transform = 'translate(-50%, 0)'; glow.animate([{ opacity: 0.72 }, { opacity: 1 }], { duration: 260, easing: ease, fill: 'forwards' }); }; const onLeave = () => { tip.style.opacity = '0'; tip.style.transform = 'translate(-50%, 4px)'; glow.animate([{ opacity: 1 }, { opacity: 0.72 }], { duration: 260, easing: ease, fill: 'forwards' }); }; badge.addEventListener('mouseenter', onEnter); badge.addEventListener('mouseleave', onLeave); /* Touch has no hover — without this, the tooltip is unreachable on phones/tablets. Tap toggles it; a second tap (or tapping elsewhere) closes it early, otherwise it auto-hides. */ let tipHideTimer = 0; let tipShown = false; const onBadgeTap = (e) => { e.stopPropagation(); clearTimeout(tipHideTimer); if (tipShown) { onLeave(); tipShown = false; return; } onEnter(); tipShown = true; tipHideTimer = setTimeout(() => { onLeave(); tipShown = false; }, 2500); }; const onDocTap = (e) => { if (badge.contains(e.target)) return; // the badge's own tap handler already toggles it if (tipShown) { onLeave(); tipShown = false; clearTimeout(tipHideTimer); } }; badge.addEventListener('click', onBadgeTap); document.addEventListener('touchstart', onDocTap); [lineIn, lineOut].forEach((l) => { const len = l.getTotalLength(); l.style.strokeDasharray = len; l.style.strokeDashoffset = len; }); const fadeUp = (el, delay) => el.animate( [{ opacity: 0, transform: 'translateY(6px)' }, { opacity: 1, transform: 'translateY(0)' }], { duration: 600, delay, easing: ease, fill: 'both' } ); const draw = (l, delay) => l.animate( [{ strokeDashoffset: l.getTotalLength() }, { strokeDashoffset: 0 }], { duration: 1000, delay, easing: ease, fill: 'both' } ); const play = () => { fadeUp(nodeIn, 100); draw(lineIn, 500); badge.animate([{ opacity: 0, transform: 'scale(.9)' }, { opacity: 1, transform: 'scale(1)' }], { duration: 700, delay: 800, easing: ease, fill: 'both' }); if (badgeImg) badgeImg.animate([{ opacity: 0, transform: 'scale(.9)' }, { opacity: 1, transform: 'scale(1)' }], { duration: 700, delay: 800, easing: ease, fill: 'both' }); if (label) label.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 500, delay: 900, easing: ease, fill: 'both' }); draw(lineOut, 1000); fadeUp(nodeOut, 1300); if (particles) particles.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 400, delay: 1600, easing: ease, fill: 'both' }); dots.forEach((dot, i) => { const pair = Math.floor(i / 2); const within = i % 2; dot.animate( [{ transform: 'translateX(0px)', opacity: 0, offset: 0 }, { opacity: 1, offset: 0.15 }, { opacity: 1, offset: 0.85 }, { transform: `translateX(${dot.dataset.dx || 142}px)`, opacity: 0, offset: 1 }], { duration: 2400, delay: 1600 + within * 800 + pair * 200, iterations: Infinity, easing: 'linear' } ); }); glow.animate( [{ opacity: 0.72, transform: 'scale(1)' }, { opacity: 1, transform: 'scale(1.06)' }, { opacity: 0.72, transform: 'scale(1)' }], { duration: 3000, delay: 1600, iterations: Infinity, easing: 'ease-in-out' } ); }; if (reduce) { [nodeIn, nodeOut, badge, badgeImg, label, particles].forEach((el) => { if (el) el.style.opacity = '1'; }); [lineIn, lineOut].forEach((l) => { l.style.strokeDashoffset = 0; }); return () => { badge.removeEventListener('mouseenter', onEnter); badge.removeEventListener('mouseleave', onLeave); badge.removeEventListener('click', onBadgeTap); document.removeEventListener('touchstart', onDocTap); clearTimeout(tipHideTimer); }; } let fired = false; let socObserver = null; const fire = () => { if (fired) return; fired = true; clearInterval(socTimer); if (socObserver) socObserver.disconnect(); play(); }; if ('IntersectionObserver' in window) { socObserver = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (entry.isIntersecting) fire(); }); }, { threshold: 0.3 }); socObserver.observe(host); } const check = () => { const r = host.getBoundingClientRect(); if (r.top < window.innerHeight * 0.85 && r.bottom > 0) fire(); }; const socTimer = setInterval(check, 150); check(); return () => { badge.removeEventListener('mouseenter', onEnter); badge.removeEventListener('mouseleave', onLeave); badge.removeEventListener('click', onBadgeTap); document.removeEventListener('touchstart', onDocTap); clearTimeout(tipHideTimer); clearInterval(socTimer); if (socObserver) socObserver.disconnect(); }; }, []); }; const SECURITY_ICONS = ['shield-check', 'lock-key', 'clock-counter-clockwise']; const SeguridadSection = () => { const { c } = useLang(); const t = c.home2.seguridad; const d = t.diagram; const socRef = useRefHome(null); useSoc2Diagram(socRef); return (
{t.eyebrow}

{t.headingPre}{t.headingHighlight}

{t.lede}

{d.dataIn} {d.subIn} {d.govLabel} {d.dataOut} {d.subOut} SOC 2 Type II Certified
{d.tooltip}
{t.cards.map((card, i) => (

{card.title}

{card.body}

))}
); }; const ComoFuncionaSection = () => { const { c } = useLang(); return (
{c.home2.comoFunciona.eyebrow}

{c.home2.comoFunciona.heading}

{c.home2.comoFunciona.lede}

{c.home2.comoFunciona.steps.map((s, i) => (
{s.alt}
{HOW_STEP_NUMS[i]}

{s.title}

{s.body}

))}
); }; /* ── FAQ ─────────────────────────────────────────────────────── */ /* Acordeón exclusivo con animación de altura — misma easing que el resto de las animaciones WAAPI del sitio (SOC2, ilustración de "Problema"). Reemplaza el toggle nativo instantáneo de
por uno animado; la exclusividad (abrir uno cierra el resto) se maneja a mano para poder animar también el que se cierra, algo que el atributo nativo `name` no permite (cierra a los otros de forma instantánea, sin transición). */ const FAQ_EASE = 'cubic-bezier(0.22, 1, 0.36, 1)'; const useFaqAccordion = (listRef) => { useEffectHome(() => { const list = listRef.current; if (!list) return; const items = Array.from(list.querySelectorAll('.tm-home-faq-item')); const anims = new Map(); let current = items.find((d) => d.hasAttribute('open')) || null; const currentPx = (el) => parseFloat(getComputedStyle(el).height) || 0; const runTo = (details, targetPx, onDone) => { const answer = details.querySelector('.tm-home-faq-answer'); const prev = anims.get(details); const fromPx = prev ? currentPx(answer) : (targetPx > 0 ? 0 : answer.scrollHeight); if (prev) prev.cancel(); answer.style.overflow = 'hidden'; const anim = answer.animate( [{ height: `${fromPx}px`, opacity: fromPx === 0 ? 0 : 1 }, { height: `${targetPx}px`, opacity: targetPx === 0 ? 0 : 1 }], { duration: targetPx === 0 ? 240 : 320, easing: FAQ_EASE } ); anims.set(details, anim); anim.onfinish = () => { anims.delete(details); answer.style.overflow = ''; if (onDone) onDone(); }; anim.oncancel = () => { anims.delete(details); }; }; const openItem = (details) => { details.open = true; runTo(details, details.querySelector('.tm-home-faq-answer').scrollHeight); }; const closeItem = (details) => { runTo(details, 0, () => { details.open = false; }); }; const onClick = (e) => { const summary = e.target.closest('.tm-home-faq-summary'); const details = summary && summary.closest('.tm-home-faq-item'); if (!details || !items.includes(details)) return; e.preventDefault(); if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) { if (current && current !== details) current.open = false; details.open = current === details ? !details.open : true; current = details.open ? details : null; return; } if (current === details) { closeItem(details); current = null; return; } if (current) closeItem(current); openItem(details); current = details; }; list.addEventListener('click', onClick); return () => { list.removeEventListener('click', onClick); anims.forEach((a) => a.cancel()); }; }, []); }; const FaqSection = () => { const { c } = useLang(); const t = c.home2.faq; const listRef = useRefHome(null); useFaqAccordion(listRef); return (
{t.items.map((item, i) => (
{item.q}

))}
); }; /* ── CTA FINAL ───────────────────────────────────────────────── */ const CtaFinalSection = () => { const { c } = useLang(); const t = c.home2.ctaFinal; return (

{t.heading}

{t.copy}

{t.finePrint}

); }; /* ── FOOTER (propio de esta página, no chrome.jsx) ────────────── 8 links del sitemap resueltos contra rutas reales existentes; Privacidad/Términos apuntan a los mismos PDFs externos que ya usa el footer compartido (i18n.jsx) — no hay página local para esos temas. ── */ const HomeFooter = () => { const { c } = useLang(); const t = c.home2.footer; return ( ); }; /* ── ROOT ────────────────────────────────────────────────────── */ const HomeApp = () => { const hostRef = useRefHome(null); const artRef = useRefHome(null); useScrollReveal(hostRef); useSmoothAnchors(hostRef); return (
); }; ReactDOM.createRoot(document.getElementById('root')).render();