/* global React, ReactDOM, TweaksPanel, useTweaks, TweakSection, TweakRadio */ const { useState, useEffect, useRef } = React; const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "heroVariant": "asymmetric", "servicesLayout": "grid" } /*EDITMODE-END*/; // ── Icons (inline SVG, monoline) ────────────────────────────── const Icon = { AI: () => , Edge: () => , Transform: () => , Marketing: () => , Analytics: () => , Arrow: () => , Check: () => , Plus: () => , Sparkle: () => }; const SERVICES = [ { key: 'ai', icon: 'AI', title: 'Adopción de IA', desc: 'Agentes inteligentes, chatbots, análisis predictivo y modelos de machine learning personalizados para transformar tus procesos de negocio.' }, { key: 'edge', icon: 'Edge', title: 'Soluciones Edge AI', desc: 'Inteligencia artificial en el borde: inferencia en tiempo real, baja latencia y procesamiento on-premise para operaciones críticas.' }, { key: 'transform', icon: 'Transform', title: 'Transformación Digital', desc: 'Modernización de procesos, sistemas y cultura organizacional a través de la tecnología para una ventaja competitiva sostenible.' }, { key: 'marketing', icon: 'Marketing', title: 'Marketing Digital', desc: 'Estrategias basadas en datos, optimización de campañas y presencia digital que generan resultados medibles y escalables.' }, { key: 'analytics', icon: 'Analytics', title: 'Analítica & BI', desc: 'Dashboards estratégicos, KPIs y visualización de datos que transforman la información en decisiones de negocio inteligentes.' }]; const PROCESS = [ { num: '01', title: 'Descubrimiento', desc: 'Analizamos tu negocio, datos y procesos para identificar las oportunidades de mayor impacto.' }, { num: '02', title: 'Estrategia', desc: 'Diseñamos una hoja de ruta clara con prioridades, tecnologías y métricas de éxito definidas.' }, { num: '03', title: 'Implementación', desc: 'Construimos y desplegamos soluciones robustas, iterando con tu equipo para garantizar la adopción.' }, { num: '04', title: 'Optimización', desc: 'Monitoreamos, ajustamos y escalamos las soluciones para maximizar su valor a largo plazo.' }]; const FAQS = [ { q: '¿Cuánto dura un proyecto típico?', a: 'Depende del alcance. Un piloto de IA o un dashboard de BI suele tomar entre 6 y 10 semanas. Una transformación digital integral se diseña en fases trimestrales con entregables medibles cada 4–6 semanas.' }, { q: '¿Trabajan con empresas pequeñas o solo con grandes corporaciones?', a: 'Trabajamos con empresas de todos los tamaños. Lo que importa es que exista un problema concreto a resolver con datos o tecnología, y un equipo dispuesto a colaborar con nosotros.' }, { q: '¿Cómo garantizan el ROI de un proyecto de IA?', a: 'Antes de construir, definimos contigo las métricas de éxito y el caso de negocio. Empezamos por un piloto acotado, validamos impacto, y solo escalamos lo que demuestra valor.' }, { q: '¿Qué pasa con la privacidad de mis datos?', a: 'La privacidad es la base. Nuestras soluciones Edge AI procesan datos sensibles localmente, y todas nuestras implementaciones siguen buenas prácticas de seguridad, encriptación y cumplimiento normativo.' }, { q: '¿Ofrecen soporte después del despliegue?', a: 'Sí. Ofrecemos acuerdos de soporte y evolución continua: monitoreo, ajustes de modelos, mejoras iterativas y capacitación a tu equipo para que la solución siga generando valor.' }]; // ── Reveal-on-scroll hook ───────────────────────────────────── function useReveal(deps = []) { useEffect(() => { const reveal = (el) => el.classList.add('is-visible'); // 1) Show everything currently above the fold immediately on mount, // so the page never renders as a blank canvas. const showInView = () => { const vh = window.innerHeight || 800; document.querySelectorAll('.reveal:not(.is-visible)').forEach((el) => { const r = el.getBoundingClientRect(); if (r.top < vh * 0.92) reveal(el); }); }; showInView(); // 2) IntersectionObserver for the rest as the user scrolls. let obs; if ('IntersectionObserver' in window) { obs = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.isIntersecting) { reveal(e.target); obs.unobserve(e.target); } }); }, { threshold: 0.08, rootMargin: '0px 0px -40px 0px' }); document.querySelectorAll('.reveal:not(.is-visible)').forEach((el) => obs.observe(el)); } // 3) Belt-and-suspenders: if anything is still hidden after 1.2s // (e.g. IO never fires in this environment), force-show it. const fallback = setTimeout(() => { document.querySelectorAll('.reveal:not(.is-visible)').forEach(reveal); }, 1200); return () => { if (obs) obs.disconnect(); clearTimeout(fallback); }; // eslint-disable-next-line react-hooks/exhaustive-deps }, deps); } // ── Header ──────────────────────────────────────────────────── function Header() { return (
Serendia Hablemos
); } // ── Hero ────────────────────────────────────────────────────── function Hero({ variant }) { return (

El descubrimiento que tu negocio estaba buscando.

Transformamos empresas a través de inteligencia artificial, analítica avanzada e innovación digital. Tu próximo gran hallazgo empieza aquí.

); } // ── Services ────────────────────────────────────────────────── function Services({ layout }) { const [activeTab, setActiveTab] = useState(SERVICES[0].key); const active = SERVICES.find((s) => s.key === activeTab) || SERVICES[0]; const ActiveIcon = Icon[active.icon]; return (

— Nuestros servicios

Soluciones integrales para tu transformación.

Desde la inteligencia artificial hasta la analítica de negocio: cinco prácticas que se combinan para impulsar tu empresa hacia el futuro digital.

{layout === 'tabs' ? <>
{SERVICES.map((s) => { const Ic = Icon[s.icon]; return ( ); })}

{active.title}

{active.desc}

Hablemos de esto
{SERVICES.map((s, i) => { const Ic = Icon[s.icon]; return (

{s.title}

{s.desc}

Descubrir más
); })}
:
{SERVICES.map((s, i) => { const Ic = Icon[s.icon]; return (
{layout === 'list' ? <>

{s.title}

{s.desc}

Descubrir más
: <>

{s.title}

{s.desc}

Descubrir más }
); })}
}
); } // ── Process ─────────────────────────────────────────────────── function Process() { return (

— Cómo trabajamos

Un proceso probado, de la incertidumbre a los resultados.

Cuatro etapas claras que convierten ideas y datos en soluciones que generan valor real.

{PROCESS.map((p, i) =>
{p.num}

{p.title}

{p.desc}

)}
); } // ── FAQ ─────────────────────────────────────────────────────── function FAQ() { const [open, setOpen] = useState(0); return (

— Preguntas frecuentes

Lo que suelen preguntarnos antes de empezar.

¿Te queda alguna otra duda? Escríbenos directamente.

{FAQS.map((f, i) =>
{f.a}
)}
); } // ── CTA + form ──────────────────────────────────────────────── function CTA() { const [email, setEmail] = useState(''); const [msg, setMsg] = useState(''); const [sent, setSent] = useState(false); const submit = (e) => { e.preventDefault(); if (!email.includes('@')) return; setSent(true); setTimeout(() => {setEmail('');setMsg('');setSent(false);}, 4500); }; return (

— Hablemos

Tu próximo gran descubrimiento empieza con una conversación.

Cuéntanos tu desafío en una línea o dos. Te respondemos en menos de 24 horas con los próximos pasos.

{sent ?
¡Gracias! Recibimos tu mensaje. Te respondemos en menos de 24h.
:
setEmail(e.target.value)} placeholder="tu@empresa.com" />
}
); } // ── Footer ──────────────────────────────────────────────────── function Footer() { return ( ); } // ── App ─────────────────────────────────────────────────────── function App() { useReveal([]); return ( <>