/* global React, Eyebrow, Reveal, PhotoBlock, PinkCircle, Mark, CTABanner, ParallaxCTASection */ // Page 3 — CHI SIAMO /* ── ChiSiamoHero — scroll-expand "hijack" (21st.dev style) Wheel/touch input alimenta un targetRef. Un loop RAF interpola currentRef → targetRef con easing esponenziale (~0.12 / frame) e scrive direttamente width/height/opacity via DOM refs: no React re-render per frame, motion sempre fluida indipendentemente dal rate degli eventi scroll. Scroll bloccato finché expanded=true. */ function ChiSiamoHero() { const [vw, setVw] = React.useState(typeof window !== 'undefined' ? window.innerWidth : 1024); const [vh, setVh] = React.useState(typeof window !== 'undefined' ? window.innerHeight : 800); const targetRef = React.useRef(0); // progress target (input scroll) const currentRef = React.useRef(0); // progress mostrato (lerp) const wrapperRef = React.useRef(null); const overlayRef = React.useRef(null); const rafRef = React.useRef(0); // expandedRef è SOLO un ref (no React state) → flip sincrono dentro // gli handler, niente race con useEffect/re-render const expandedRef = React.useRef(false); // Reset + viewport tracking React.useEffect(() => { targetRef.current = 0; currentRef.current = 0; expandedRef.current = false; window.scrollTo(0, 0); const onResize = () => { setVw(window.innerWidth); setVh(window.innerHeight); }; onResize(); window.addEventListener('resize', onResize); return () => window.removeEventListener('resize', onResize); }, []); // RAF lerp + DOM update React.useEffect(() => { const isMobile = vw < 768; const startW = isMobile ? 240 : 320; const startH = isMobile ? 320 : 420; const endW = isMobile ? Math.min(vw - 24, 720) : Math.min(vw - 60, 1280); // Mobile: forziamo 4:3 (landscape) all'espansione max per non tagliare i volti const endH = isMobile ? Math.min(endW * 3 / 4, vh - 300) : Math.min(vh - 300, 720); const applyDOM = (p) => { const w = wrapperRef.current; const o = overlayRef.current; if (w) { w.style.width = `${(startW + p * (endW - startW)).toFixed(1)}px`; w.style.height = `${(startH + p * (endH - startH)).toFixed(1)}px`; } if (o) { o.style.opacity = (0.45 - p * 0.37).toFixed(4); } }; const tick = () => { const t = targetRef.current; const c = currentRef.current; const diff = t - c; if (Math.abs(diff) > 0.0008) { // Lerp asimmetrico: shrink (target < current) leggermente più rapido // così l'uscita non sembra "lazy" rispetto all'espansione const k = diff > 0 ? 0.12 : 0.18; currentRef.current = c + diff * k; } else { currentRef.current = t; } applyDOM(currentRef.current); // Auto-promozione: appena target=1 e visual quasi al limite → expand // + riattiva Lenis perché ora la pagina deve scrollare normalmente if (t >= 1 && currentRef.current > 0.985 && !expandedRef.current) { expandedRef.current = true; if (window.__lenis) window.__lenis.start(); } rafRef.current = requestAnimationFrame(tick); }; applyDOM(currentRef.current); rafRef.current = requestAnimationFrame(tick); return () => cancelAnimationFrame(rafRef.current); }, [vw, vh]); // Input handlers — flag SINCRONO, niente useEffect-sync (no race) React.useEffect(() => { let touchStartY = 0; const WHEEL_K = 0.0010; const TOUCH_DOWN_K = 0.007; const TOUCH_UP_K = 0.005; const handleWheel = (e) => { // Caso 1: image espansa, utente al top, scroll-up → riapri il lock E // processa lo stesso evento per iniziare lo shrink (niente eventi persi) if (expandedRef.current && e.deltaY < 0 && window.scrollY <= 5) { expandedRef.current = false; // sync, no setState if (window.__lenis) window.__lenis.stop(); e.preventDefault(); const delta = e.deltaY * WHEEL_K; targetRef.current = Math.min(Math.max(targetRef.current + delta, 0), 1); return; } // Caso 2: lock attivo → wheel guida il target if (!expandedRef.current) { e.preventDefault(); const delta = e.deltaY * WHEEL_K; targetRef.current = Math.min(Math.max(targetRef.current + delta, 0), 1); } }; const handleTouchStart = (e) => { touchStartY = e.touches[0].clientY; }; const handleTouchMove = (e) => { if (!touchStartY) return; const touchY = e.touches[0].clientY; const deltaY = touchStartY - touchY; if (expandedRef.current && deltaY < -20 && window.scrollY <= 5) { expandedRef.current = false; if (window.__lenis) window.__lenis.stop(); e.preventDefault(); const delta = deltaY * TOUCH_DOWN_K; targetRef.current = Math.min(Math.max(targetRef.current + delta, 0), 1); touchStartY = touchY; return; } if (!expandedRef.current) { e.preventDefault(); const factor = deltaY < 0 ? TOUCH_DOWN_K : TOUCH_UP_K; const delta = deltaY * factor; targetRef.current = Math.min(Math.max(targetRef.current + delta, 0), 1); touchStartY = touchY; } }; const handleTouchEnd = () => { touchStartY = 0; }; const handleScroll = () => { if (!expandedRef.current) window.scrollTo(0, 0); }; window.addEventListener('wheel', handleWheel, { passive: false }); window.addEventListener('touchstart', handleTouchStart, { passive: false }); window.addEventListener('touchmove', handleTouchMove, { passive: false }); window.addEventListener('touchend', handleTouchEnd); window.addEventListener('scroll', handleScroll); return () => { window.removeEventListener('wheel', handleWheel); window.removeEventListener('touchstart', handleTouchStart); window.removeEventListener('touchmove', handleTouchMove); window.removeEventListener('touchend', handleTouchEnd); window.removeEventListener('scroll', handleScroll); }; }, []); return (
Chi ti seguirà

Un team di professionisti dedicato a te

Persone vere, con anni di esperienza, che conoscono la tua storia e i tuoi obiettivi.

{/* Expanding image — width/height aggiornate via DOM refs in RAF loop */}
Team completo Progetto Forma — Ferrara
); } function TrainerCards() { const trainers = [ { photo: 'assets/foto/marco.webp', name: 'Marco Gabrielli', tagline: 'Il tuo punto di riferimento', body: 'Marco è la persona che conosci dal primo giorno e che ti accompagna fino all\u2019ultimo. Conosce la tua storia, i tuoi obiettivi e i tuoi giorni difficili. Monitora i tuoi progressi e aggiusta il percorso quando serve.', credentials: ['Laureato in scienze motorie e in osteopatia', '8 anni nel mondo del fitness'], }, { photo: 'assets/foto/francesco.webp', name: 'Francesco Borghesi', tagline: 'Ti senti a casa dal primo giorno', body: 'Francesco è la persona che trovi in sala ogni sessione. Ti spiega ogni movimento con pazienza, adatta la seduta se hai un giorno storto e non ti fa mai sentire in difetto. Quello che le palestre commerciali non ti danno — un ambiente tranquillo dove ti senti protetta — con lui lo hai da subito.', credentials: ['Istruttore di sala', 'Laureato in scienze motorie'], }, { photo: 'assets/foto/davide.webp', name: 'Davide Filippini', tagline: 'La nutrizione costruita sulla tua vita', body: 'Davide è il motivo per cui il tuo piano alimentare funzionerà. Ha due competenze in una sola persona. Per questo costruisce il tuo piano alimentare sapendo esattamente come ti alleni e di cosa ha bisogno il tuo corpo.', credentials: ['Biologo Nutrizionista con Laurea Magistrale', 'Personal trainer certificato, laureato in scienze motorie'], }, ]; return (
{trainers.map((t, i) => ( ))}
); } function TrainerCard({ photo, name, tagline, body, credentials }) { return (
{/* Image card with overlay */}
{name} {/* Gradient overlay for text legibility */}
{/* Overlay text */}
{tagline}

{name}

{/* Body */}

{body}

{/* Credentials bullets */}
); } function ChiSiamoClosing({ onCTA }) { return ( ); } Object.assign(window, { ChiSiamoHero, TrainerCards, ChiSiamoClosing });