// Top sections: Nav + Hero + Marquee const { useState: useS1, useEffect: useE1, useRef: useR1 } = React; // ---------------- Nav ---------------- function Nav({ onCotizar }) { const [scrolled, setScrolled] = useS1(false); const { progress } = usePageScroll(); useE1(() => { const h = () => setScrolled(window.scrollY > 20); window.addEventListener('scroll', h); return () => window.removeEventListener('scroll', h); }, []); return ( <> {/* Global scroll progress bar at top of viewport */}
); } // ---------------- Hero Visual: real photo + WhatsApp bubbles ---------------- function HeroVisual() { const photoP = useMouseParallax(12); const bubbleP = useMouseParallax(24); return (
{/* Pulsing coral glow */}
{/* Photo container */}
Sala de estar cálida al atardecer con sofá crema y luz ámbar
{/* Bubbles */}
{/* Bubble 1: user */}
C
Hola Homli, necesito limpieza el sábado
{/* Bubble 2: homli */}
Listo, $95.000. ¿Confirmamos?
{/* Bubble 3: pin + text */}
Camila va en camino, llega en 12 min
); } // ---------------- Hero ---------------- function Hero({ onCotizar, onWhatsapp, heroHeadline }) { const { scrollY } = usePageScroll(); // Hero scroll-driven: as user scrolls down, copy fades + lifts, blobs drift const heroProg = Math.min(1, scrollY / 700); // 0..1 over first 700px return (
{[0,1,2,3,4].map(i => ( ))}
4.9/5 · 5.000+ servicios prestados

Tu hogar en buenas manos.

Limpieza, fontanería, electricidad y mucho más, con técnicos verificados y una cotización por WhatsApp en minutos. Sin complicaciones.

); } // ---------------- Reveal helper ---------------- function Reveal({ children, delay = 0, as: Tag = 'div' }) { const [ref, inView] = useInView(); return ( {children} ); } // ---------------- Marquee (replaces SocialProof) ---------------- function Marquee() { const services = ['Limpieza regular', 'Limpieza profunda', 'Cortinas y persianas', 'Fontanería', 'Cerrajería', 'Electricidad', 'Carpintería', 'Obra civil', 'Fumigación', 'Jardinería']; const benefits = ['Insumos incluidos', 'Garantía 48 horas', 'Técnicos verificados', 'Pago al finalizar', 'Cotización en minutos', 'Mismo equipo cada semana', 'Sin letra pequeña', 'Pago contraentrega']; const maskCss = { maskImage: 'linear-gradient(to right, transparent 0, black 8%, black 92%, transparent 100%)', WebkitMaskImage: 'linear-gradient(to right, transparent 0, black 8%, black 92%, transparent 100%)', }; const Diamond = () => ( ); return (
{/* Row 1: services */}
{[...services, ...services].map((s, i) => (
{s}
))}
{/* Row 2: benefits */}
{[...benefits, ...benefits].map((b, i) => (
{b}
))}
); } Object.assign(window, { Nav, Hero, HeroVisual, Reveal, Marquee });