// Trazia · Premium marketing site — main app const { useEffect, useRef, useState, useMemo } = React; /* ---------- Hooks ---------- */ function useReveal(threshold = 0.15) { useEffect(() => { const els = document.querySelectorAll(".reveal, .split-word"); const io = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } }); }, { threshold }); els.forEach((el) => io.observe(el)); return () => io.disconnect(); }, []); } function useScrolled(threshold = 24) { const [scrolled, setScrolled] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > threshold); onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, [threshold]); return scrolled; } function useCountUp(target, { duration = 1600, decimals = 0, start = false } = {}) { const [n, setN] = useState(0); useEffect(() => { if (!start) return; const t0 = performance.now(); let raf; const tick = (now) => { const t = Math.min(1, (now - t0) / duration); const eased = 1 - Math.pow(1 - t, 3); setN(target * eased); if (t < 1) raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, [target, duration, start]); return decimals ? n.toFixed(decimals) : Math.round(n).toLocaleString("es-MX"); } /* ---------- Word splitter ---------- */ function SplitWords({ text = "", delay = 0, step = 60, className = "" }) { const words = String(text).split(/(\s+)/); let i = 0; return ( {words.map((w, idx) => { if (/^\s+$/.test(w)) return {w}; const d = delay + i * step; i++; return ( {w} ); })} ); } /* ---------- Icons ---------- */ const I = { arrow: (p={}) => , check: (p={}) => , trace: (p={}) => , shield: (p={}) => , bolt: (p={}) => , qr: (p={}) => , layers: (p={}) => , brain: (p={}) => , shieldLg: (p={}) => , plug: (p={}) => , }; /* ============================================================ NAV ============================================================ */ function Nav() { const scrolled = useScrolled(24); return (
{ e.preventDefault(); window.scrollTo({ top: 0, behavior: 'smooth' }); }}> Trazia
{/* BUG-02 fix: link explícito a la plataforma. Va a la izquierda del CTA primario; abrir en la misma pestaña porque el destino es la consola de la propia marca. */} Iniciar sesión Solicitar demo
); } /* ============================================================ HERO with animated route ============================================================ */ function HeroRoute() { // Route path through the dossier map const path = "M40 260 Q 80 220 130 220 T 230 180 T 340 130 T 440 80"; const pathRef = useRef(null); const [progress, setProgress] = useState(0); const [pathLen, setPathLen] = useState(500); useEffect(() => { if (pathRef.current) setPathLen(pathRef.current.getTotalLength()); }, []); useEffect(() => { let t0 = null, raf; const tick = (now) => { if (!t0) t0 = now; const t = ((now - t0) / 4200) % 1; // ease in out const eased = t < 0.5 ? 2*t*t : 1 - Math.pow(-2*t + 2, 2) / 2; setProgress(eased); raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, []); // Get vehicle position along path const vehiclePos = useMemo(() => { if (!pathRef.current) return { x: 40, y: 260 }; const p = pathRef.current.getPointAtLength(pathLen * progress); return { x: p.x, y: p.y }; }, [progress, pathLen]); const checkpoints = [ { x: 40, y: 260, label: "Origen", thresh: 0.0 }, { x: 130, y: 220, label: "CP-01", thresh: 0.18 }, { x: 230, y: 180, label: "CP-02", thresh: 0.42 }, { x: 340, y: 130, label: "CP-03", thresh: 0.68 }, { x: 440, y: 80, label: "Taller", thresh: 0.99 }, ]; const dashOffset = pathLen - pathLen * progress; return (
{/* dashed full route (intent) */} {/* solid trail (verified) */} {/* checkpoints */} {checkpoints.map((cp, i) => { const reached = progress >= cp.thresh; return ( {reached && } {(i === 0 || i === checkpoints.length - 1) && ( {cp.label.toUpperCase()} )} ); })} {/* vehicle pin */}
); } function Hero() { return (
{/* BUG-01 fix: render the H1 as plain text. SplitWords was occasionally leaving the second line hidden (IntersectionObserver timing on the gradient-clipped ). The hero copy MUST be visible on first paint — animation is a nice-to-have. */}

Trazabilidad auditable,
para cada siniestro.

Trazia digitaliza la cadena de custodia de tus vehículos. Convierte el arrastre en evidencia operativa en tiempo real para que tus áreas de siniestros y antifraude tengan el control total de cada traslado.

SOC 2 Type II en curso LFPDPPP compliant 99.5% uptime SLA
CLM-2026-00084 · QLT-MX
CUSTODIA ACTIVA
Checkpoints
3/4
Tiempo activo
01:42:18
Desviación
+2.4%
SCROLL
); } /* ============================================================ LOGO MARQUEE ============================================================ */ function Logos() { const carriers = ["Quálitas", "GNP", "Mapfre", "HDI", "GMX", "AON", "Inter", "Active Re", "Sura", "Porto Seguro"]; return (
{[...carriers, ...carriers].map((c, i) => (
{c}
))}
); } /* ============================================================ PILLARS ============================================================ */ function Pillars() { const pillars = [ { n: "01", title: "Trazar", body: "Monitorea la ruta exacta del vehículo siniestrado, eliminando la dependencia de reportes manuales y llamadas de seguimiento a grúas.", icon: }, { n: "02", title: "Respaldar", body: "Registra cada custodia y señal de GPS como evidencia firmada y exportable para tus expedientes de siniestros.", icon: }, { n: "03", title: "Auditar", body: "Recibe alertas automáticas sobre anomalías en el proceso para frenar fugas de capital y fraudes en tiempo real.", icon: }, ]; return (
01 · Fundamento

El trayecto del vehículo convertido en evidencia operativa.

Tres operaciones centralizadas. Trazia toma la lectura del dispositivo en campo y la transforma en datos 100% auditables para proteger la operación de tu aseguradora.

{pillars.map((p, i) => (
{p.n}
{p.icon}

{p.title}

{p.body}

))}
); } window.Nav = Nav; window.Hero = Hero; window.Logos = Logos; window.Pillars = Pillars; window.useReveal = useReveal; window.SplitWords = SplitWords; window.I = I;