/* global React */ const { useState, useEffect, useRef } = React; function useRevealObserver() { useEffect(() => { let cancelled = false; const reveal = (el) => { if (el.classList.contains("in")) return; el.classList.add("in"); // Belt-and-suspenders: if the animation system is hosed (some iframe // environments stall keyframe animations), force the final state. // The animation still plays when it works, this only kicks in if it doesn't. setTimeout(() => { if (cancelled) return; try { const cs = getComputedStyle(el); if (parseFloat(cs.opacity) < 0.99) { el.style.opacity = "1"; el.style.transform = "none"; el.style.filter = "none"; } } catch (_) {} }, 1500); }; const sweep = () => { if (cancelled) return; const els = document.querySelectorAll("[data-reveal]"); const vh = window.innerHeight || document.documentElement.clientHeight; els.forEach(el => { const r = el.getBoundingClientRect(); if (r.top < vh - 40 && r.bottom > 0) reveal(el); }); }; // Mark page as JS-controlled so CSS hides initial state for animation. document.documentElement.classList.add("js-reveal"); // Reveal everything in the hero immediately on mount. const revealHero = () => { const hero = document.querySelector(".hero"); if (!hero) return; hero.querySelectorAll("[data-reveal]").forEach(reveal); const stage = document.querySelector(".hero-stage-2"); if (stage) stage.classList.add("in"); }; const t0 = setTimeout(revealHero, 50); const t1 = setTimeout(sweep, 80); const t2 = setTimeout(sweep, 400); const t3 = setTimeout(sweep, 1200); // Final safety net: after 2s, just reveal everything regardless. const tFinal = setTimeout(() => { if (cancelled) return; document.querySelectorAll("[data-reveal]").forEach(el => { if (!el.classList.contains("in")) { el.classList.add("in"); el.style.opacity = "1"; el.style.transform = "none"; } }); }, 2500); const onScroll = () => sweep(); window.addEventListener("scroll", onScroll, { passive: true }); window.addEventListener("resize", onScroll); return () => { cancelled = true; clearTimeout(t0); clearTimeout(t1); clearTimeout(t2); clearTimeout(t3); clearTimeout(tFinal); window.removeEventListener("scroll", onScroll); window.removeEventListener("resize", onScroll); }; }, []); } function Nav() { return ( ); } function Hero() { const stageRef = useRef(null); useEffect(() => { if (!stageRef.current) return; const el = stageRef.current; const io = new IntersectionObserver(([e]) => { if (e.isIntersecting) { el.classList.add("in"); io.disconnect(); } }, { threshold: 0.1 }); io.observe(el); // Failsafe — reveal immediately if in viewport on mount. const t = setTimeout(() => { const r = el.getBoundingClientRect(); const vh = window.innerHeight || document.documentElement.clientHeight; if (r.top < vh && r.bottom > 0) { el.classList.add("in"); io.disconnect(); } }, 300); return () => { io.disconnect(); clearTimeout(t); }; }, []); // Animated counter for the live "leads hoy" const [leadsHoy, setLeadsHoy] = useState(0); useEffect(() => { const t = setTimeout(() => { let n = 0; const id = setInterval(() => { n += 1; setLeadsHoy(n); if (n >= 14) clearInterval(id); }, 70); return () => clearInterval(id); }, 1400); return () => clearTimeout(t); }, []); const headlineWords = ["Convertí", "desconocidos", "en", "clientes,", "sin", "rezar."]; return (

{/* Floating ambient orbs */}

{/* LEFT — copy */}

CUPOS · 3 3 negocios este mes

Clientes nuevos.
Todas las semanas.

Sistema Meta Ads + Landing + WhatsApp para negocios de Córdoba. Predecible. Medible. Garantía 30d.

Agendar consultoría → Cómo funciona

Clientes activos

A Acuario Club @acuarioclub.cba H Hannah Lingerie @hannah.lingerie

{/* RIGHT — visual stack */}

{/* Bento-style visual grid */}

{/* Big — phone preview */}

hannah.lingerie Córdoba · Patrocinado

···

2x1 EN CORPIÑOS

Solo este
fin de semana.

Enviar mensaje →

♡💬↗

{/* Stat card — ROAS */}

ROAS hoy

7.4×

{/* Stat card — costo lead */}

Costo / lead

$840

↓ 38% vs. mes ant.

{/* WhatsApp chat */}

Mariana G. en línea

12:48

Hola! Vi el aviso, tienen turno para mañana?

¡Hola Mariana! Sí, tengo 11:30 o 16hs ✨

Perfecto, agendá 16hs 🙌

{/* Live notification */}

+1 lead Florencia · IG Ads · ahora

{/* Ambient decorative cards */}

{leadsHoy} leads hoy

+184% vs Q1

{/* Marquee strip just below hero */}

{[...Array(2)].flatMap((_,k) => [ "Hannah Lingerie", "Acuario Club", "Estética Norte", "Inmobiliaria CBA", "Kine + Centro", "Atelier", "Resto Patio" ].map((it,i) => ( {it} ✦ )))}

); } /* SECTION: Problem — visual: empty calendar, dead phone, falling chart */ function Problem() { // Random bars for the descending chart const bars = [78, 65, 70, 55, 48, 38, 30, 22, 18, 12, 8, 5]; return (

01 · El problema

Sin sistema, tu agenda es una ruleta.

Así se ve un mes vivo de referidos. Tres síntomas que ves todos los meses.

{/* CARD 1 — empty calendar */}

◆ Síntoma 01 68%

{Array.from({length: 28}).map((_, i) => { const filled = [4, 12, 19, 24].includes(i); return (

{i+1} {filled && }

); })}

Agenda vacía tres semanas seguidas.

Solo 4 turnos en 28 días. El resto: esperar que alguien se acuerde.

{/* CARD 2 — silent phone, accent */}

◆ Síntoma 02 3 de 5

14:32

🔕

Sin notificaciones

hoy · esta semana · este mes

Sos rehén del boca en boca.

Si nadie te recomienda, el celular no suena. Te la pasás mirándolo.

{/* CARD 3 — falling revenue chart */}

◆ Síntoma 03 ↓ −42%

$2M$1M$0

{bars.map((h, i) => (

{i === bars.length - 1 && hoy}

))}

Cada mes facturás menos.

Sin caño nuevo, los clientes viejos se desgastan. El techo se convierte en piso.

{/* Bottom verdict */}

Esto no es un negocio. Es una serie de meses buenos seguidos de meses malos, sin saber por qué.

Ver cuánto perdés ↓

); } /* SECTION: Calculator (dark) — bento dashboard with live counter */ function Calculator() { const [ticket, setTicket] = useState(25000); const [lost, setLost] = useState(12); const total = ticket * lost; const yearly = total * 12; const fmt = (n) => "$" + n.toLocaleString("es-AR"); const fmtK = (n) => { if (n >= 1000000) return "$" + (n/1000000).toFixed(1).replace(".",",") + "M"; if (n >= 1000) return "$" + Math.round(n/1000) + "k"; return fmt(n); }; // months bars sizes const months = ["E","F","M","A","M","J","J","A","S","O","N","D"]; return (

02 · Calculadora

La plata que no estás cobrando.

Movelo según tu negocio. Te lo mostramos en vivo.

{/* MAIN — big number, dashboard-style */}

PÉRDIDA MENSUAL · EN VIVO CALC

{fmt(total)}

por mes · todos los meses sin sistema

Acumulado anual {fmtK(yearly)}

{months.map((m, i) => (

{m}

))}

{/* CONTROLS */}

Ticket promedio {fmt(ticket)}

setTicket(+e.target.value)} />

$5k$200k

Clientes perdidos / mes {lost}

setLost(+e.target.value)} />

150

{/* SIDE STAT 1 */}

Por día {fmtK(Math.round(total/30))} ↓ se evapora cada 24hs

{/* SIDE STAT 2 */}

En 5 años {fmtK(yearly*5)} → una casa · un local · un auto

{/* CTA */}

◆ La pregunta no es si perdés

Es cuánto. Y por cuánto tiempo más.

Quiero parar la sangría →