/* GeoSegment — landing page (mobile first) */ const { useState, useEffect, useRef, useCallback } = React; // ── Icons ────────────────────────────────────────────── const IconPdf = () => ( ); const IconMap = () => ( ); const IconArrow = () => ( ); const IconDownload = () => ( ); // ── Before/after comparison ──────────────────────────── function Compare({ interactive }) { const [cut, setCut] = useState(2); const ref = useRef(null); const dragging = useRef(false); const touchStart = useRef(null); // null = undecided, 'h' = horizontal (slider), 'v' = vertical (scroll) const lockedAxis = useRef(null); const LOCK_THRESHOLD = 8; // px before we commit to a direction // Intro animation: starts extreme right, sweeps to left, settles center useEffect(() => { let raf; const start = performance.now(); const duration = 950; // ms total const animate = (now) => { const t = Math.min((now - start) / duration, 1); let value; if (t < 0.55) { // fast sweep: 2 → 95 (easeOutQuart — decelerates as it reaches right) const p = t / 0.55; const ease = 1 - Math.pow(1 - p, 4); value = 2 + (95 - 2) * ease; } else { // settle: 95 → 50 (easeInOutCubic — smooth snap to center) const p = (t - 0.55) / 0.45; const ease = p < 0.5 ? 4 * p * p * p : 1 - Math.pow(-2 * p + 2, 3) / 2; value = 95 + (50 - 95) * ease; } setCut(value); if (t < 1) raf = requestAnimationFrame(animate); }; raf = requestAnimationFrame(animate); return () => cancelAnimationFrame(raf); }, []); const updateFromClientX = useCallback((x) => { const el = ref.current; if (!el) return; const rect = el.getBoundingClientRect(); const pct = ((x - rect.left) / rect.width) * 100; setCut(Math.max(2, Math.min(98, pct))); }, []); useEffect(() => { if (!interactive) return; const onMove = (e) => { if (!dragging.current) return; if (e.touches) { const dx = Math.abs(e.touches[0].clientX - touchStart.current.x); const dy = Math.abs(e.touches[0].clientY - touchStart.current.y); // wait until movement passes threshold before locking direction if (lockedAxis.current === null) { if (dx < LOCK_THRESHOLD && dy < LOCK_THRESHOLD) return; lockedAxis.current = dx >= dy ? 'h' : 'v'; } if (lockedAxis.current === 'v') { dragging.current = false; return; } e.preventDefault(); updateFromClientX(e.touches[0].clientX); } else { updateFromClientX(e.clientX); } }; const onUp = () => { dragging.current = false; touchStart.current = null; lockedAxis.current = null; }; window.addEventListener('mousemove', onMove); window.addEventListener('mouseup', onUp); window.addEventListener('touchmove', onMove, { passive: false }); window.addEventListener('touchend', onUp); return () => { window.removeEventListener('mousemove', onMove); window.removeEventListener('mouseup', onUp); window.removeEventListener('touchmove', onMove); window.removeEventListener('touchend', onUp); }; }, [interactive, updateFromClientX]); const onHandleDown = (e) => { if (!interactive) return; e.stopPropagation(); dragging.current = true; lockedAxis.current = null; if (e.touches) { touchStart.current = { x: e.touches[0].clientX, y: e.touches[0].clientY }; } else { updateFromClientX(e.clientX); } }; return (
{/* Base layer = segmentação (revealed on the right of the cut) */} Segmentação por aprendizado profundo {/* Overlay clipped to the LEFT of the cut = imagem aérea original */}
Imagem aérea original
Imagem aérea Segmentação {interactive ?
‹ ›
:
}
); } // ── CTA card ─────────────────────────────────────────── function Cta({ href, download, primary, icon, title, meta, pill }) { const external = !download && href && href.startsWith("http"); return ( {icon} {title} {pill && {pill}} {meta} ); } // ── Tweaks state ─────────────────────────────────────── const PALETTES = { forest: ["#0d4a1f", "#2d8a3e", "#3fa53b"], vibrant: ["#0d4a1f", "#3fa53b", "#7be08e"], earth: ["#5a3a17", "#9c6a2a", "#c4933f"], ocean: ["#0c3a5e", "#1f6fb2", "#3a96d4"], }; const AUTHORS = [ { name: "Deise Adriana Silva Araújo", email: "deeh_adriana@hotmail.com" }, { name: "Gustavo Dias Vicentin", email: "gusvic2501@gmail.com" }, { name: "Lucas Rebouças Silva", email: "lucasreboucas100@gmail.com" }, { name: "Victor Caldeira Iak", email: "victorciak2013@gmail.com" }, { name: "Vinicius Saidi Soares", email: "saidi-soares@hotmail.com" }, ]; const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "theme": "light", "palette": ["#0d4a1f", "#2d8a3e", "#3fa53b"], "interactiveCompare": true, "showAbout": true, "pixelMotif": 0.5, "softwareUrl": "https://geo-segmentation-frontend-production.up.railway.app/" }/*EDITMODE-END*/; function App() { const [t, setTweak] = window.useTweaks(TWEAK_DEFAULTS); // Apply theme + accent useEffect(() => { document.documentElement.dataset.theme = t.theme || "light"; const p = Array.isArray(t.palette) ? t.palette : PALETTES.forest; document.documentElement.style.setProperty("--forest", p[0]); document.documentElement.style.setProperty("--pixel", p[1]); document.documentElement.style.setProperty("--pixel-bright", p[2]); document.documentElement.style.setProperty("--pixel-bg-opacity", String(t.pixelMotif ?? 0.5)); }, [t.theme, t.palette, t.pixelMotif]); return ( <>