/* sections.jsx — CherryMarket landing — shared components & sections */ const { useState, useEffect, useRef, useMemo } = React; const BOOKING_URL = "https://cal.com/juan-pablo-grez-p8la8s/30min"; /* ────────────────────────────────────────────────────────── icons */ const IconBars = ({ size = 26, color = "var(--brand)" }) => ( ); const IconArrow = ({ size = 14 }) => ( ); const IconSearch = ({ size = 13 }) => ( ); const IconCheck = () => ( ); /* ────────────────────────────────────────────────────────── reveal hook */ function useReveal() { useEffect(() => { const els = document.querySelectorAll(".reveal"); const io = new IntersectionObserver( (entries) => entries.forEach( (e) => e.isIntersecting && e.target.classList.add("in"), ), { threshold: 0.12 }, ); els.forEach((el) => io.observe(el)); return () => io.disconnect(); }, []); } /* ────────────────────────────────────────────────────────── animated counter */ function Counter({ to, prefix = "", suffix = "", decimals = 0, durationMs = 1200, }) { const ref = useRef(null); const [val, setVal] = useState(0); useEffect(() => { let raf; const io = new IntersectionObserver( (entries) => { entries.forEach((e) => { if (e.isIntersecting) { const t0 = performance.now(); const tick = (now) => { const p = Math.min(1, (now - t0) / durationMs); const eased = 1 - Math.pow(1 - p, 3); setVal(to * eased); if (p < 1) raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); io.disconnect(); } }); }, { threshold: 0.4 }, ); if (ref.current) io.observe(ref.current); return () => { io.disconnect(); cancelAnimationFrame(raf); }; }, [to, durationMs]); const fmt = val.toLocaleString("es-CL", { maximumFractionDigits: decimals, minimumFractionDigits: decimals, }); return ( {prefix} {fmt} {suffix} ); } /* ────────────────────────────────────────────────────────── NAV */ function Nav({ theme, onTheme }) { const [open, setOpen] = useState(false); useEffect(() => { document.body.style.overflow = open ? "hidden" : ""; return () => { document.body.style.overflow = ""; }; }, [open]); const close = () => setOpen(false); return ( <>
cherry.market
Iniciar sesión Agendar demo
Producto El problema Módulos 4 vistas Benchmark Industria Para quién Equipos FruitMarkets Nuevo Conversemos Demo Iniciar sesión Portal Agendar demo
); } /* ────────────────────────────────────────────────────────── HERO MOCK */ const MARKETS = ["Mercado", "Liquidaciones", "Comparativas", "Preliquidación"]; function HeroMock() { const [tab, setTab] = useState(0); // simulated live data; small jitter const [tick, setTick] = useState(0); useEffect(() => { const i = setInterval(() => setTick((t) => t + 1), 2400); return () => clearInterval(i); }, []); // chart series, two lines (your average vs market reference) const seriesA = useMemo( () => [3.2, 3.4, 3.55, 3.7, 3.6, 3.85, 4.1, 4.2, 4.4, 4.55, 4.7, 4.85], [], ); const seriesB = useMemo( () => [3.0, 3.1, 3.15, 3.2, 3.35, 3.45, 3.5, 3.6, 3.75, 3.85, 3.95, 4.05], [], ); const w = 460, h = 160, pad = 8; const max = 5.2, min = 2.8; const sx = (i, arr) => pad + (i / (arr.length - 1)) * (w - pad * 2); const sy = (v) => h - pad - ((v - min) / (max - min)) * (h - pad * 2); const toPath = (arr) => arr .map( (v, i) => `${i === 0 ? "M" : "L"}${sx(i, arr).toFixed(1)},${sy(v).toFixed(1)}`, ) .join(" "); const toArea = (arr) => `${toPath(arr)} L${sx(arr.length - 1, arr)},${h - pad} L${sx(0, arr)},${h - pad} Z`; // last point with jitter const last = seriesA[seriesA.length - 1] + Math.sin(tick) * 0.04; return (
{MARKETS.map((m, i) => (
setTab(i)} > {m}
))}
Cerezas · Lapins · 28mm…{" "} ⌘K
Retorno promedio
USD
▲ +12,4% vs semana ant.
Cajas liquidadas
▲ +8,1%
Spread vs mercado
+USD
▼ −0,08 esta sem.