// how-it-works.jsx — Dark "How it works" section (Gladia-style scroll-driven) function HowItWorksSection() { const steps = [ { num: 1, title: 'Conecta tu número', desc: 'Vinculas tu WhatsApp y tu teléfono en 2 minutos. Sin instalar nada, sin tocar código.', bullets: [ 'Tu mismo número de WhatsApp y llamadas, sin cambiar nada', 'Calendario, agenda de citas y herramientas que ya usas', 'Todo en un solo lugar, desde el celular o la computadora', 'En menos de 10 minutos lo tienes andando', ], illustration: 'channels', }, { num: 2, title: 'Cuéntale tu negocio', desc: 'Le dices a qué te dedicas, qué responder, cómo cobrar, cuándo pasarte una conversación. Él entiende y se adapta.', bullets: [ 'Le subes tu menú, lista de precios o lo que vendas', 'Eliges cómo habla: formal, cercano, con tu nombre o el de tu marca', 'Pruebas todo antes de soltarlo con tus clientes', 'Si responde algo raro, lo corriges en un clic', ], illustration: 'train', }, { num: 3, title: 'Y se pone a trabajar', desc: 'Atiende cada llamada y cada mensaje al instante, agenda citas, recupera ventas y te avisa cuando hace falta un humano. Sin descansar, sin pedirte permiso.', bullets: [ 'Responde en menos de 2 segundos, a cualquier hora', 'Agenda citas en tu calendario y manda recordatorios', 'Sabe quién quiere comprar de verdad y quién solo pregunta', 'Tú ves todo lo que pasa, en vivo, desde tu celular', ], illustration: 'automate', }, ]; return (
{/* Smooth gradient transition from light to dark */}
{/* Intro statement (Gladia-style) — bridge between hero and HowItWorks header */}

La diferencia entre cerrar la venta o perderla está en quién responde primero

Cada minuto que un cliente espera, sube la probabilidad de que se vaya con otro. Tu agente responde antes de que termine de escribir la pregunta

{/* Section header */}

Listo en una tarde. En tres pasos

No necesitas saber nada de tecnología. Lo conectas, le enseñas tu negocio, y empieza a trabajar. Tú haces lo de siempre

{/* Steps — scroll-driven */}
{steps.map((step, i) => ( ))}
); } function HIWStep({ step, isLast }) { const ref = React.useRef(null); const [visible, setVisible] = React.useState(false); React.useEffect(() => { const el = ref.current; if (!el) return; const observer = new IntersectionObserver(([entry]) => { if (entry.isIntersecting) { setVisible(true); } }, { threshold: 0.15, rootMargin: '0px 0px -60px 0px' }); observer.observe(el); return () => observer.disconnect(); }, []); return (
{/* Left — text */}
Paso {step.num}

{step.title}

{step.desc}

{step.bullets.map((b, j) => (
{b}
))}
{/* Vertical divider (visible on desktop) */}
{/* Right — illustration */}
); } // iOS status bar reusable function IPhoneStatusBar() { return (
9:41
); } // Gladia-style floating cards + connectors function StepIllustration({ type }) { // Inline lucide-style icons const IconMic = () => ( ); const IconPhone = () => ( ); const IconChat = () => ( ); const IconWhatsapp = () => ( ); const IconCheck = () => ( ); const IconCalendar = () => ( ); const IconWebhook = () => ( ); const IconBolt = () => ( ); // === Step 1: Conecta tu número — 3 channels funnel into 1 unified output if (type === 'channels') { return (
WhatsApp Llamadas Web Chat
Tu número activo
3 canales conectados
); } // === Step 2: Cuéntale tu negocio — config card + test results if (type === 'train') { return (
Asistente ALVEX LISTO
Nombre Asistente ALVEX
Tono Profesional · cercano
Idiomas ES · EN · PT
Conocimiento 14 docs · 2.4 MB
Probado · 23 conversaciones
); } // === Step 3: Y se pone a trabajar — input fans out to 3 actions if (type === 'automate') { return (
Mensaje entrante 4.2s
"Hola, ¿tienen mesa para 4 mañana a las 21:00?"
Respondido Cita agendada CRM actualizado
Resuelto · sin tu equipo
); } return null; } Object.assign(window, { HowItWorksSection });