// ============================================================ // PAGE — Servizi // Hero + 7 servizi dettagliati + processo + CTA // ============================================================ const { useState: useStateSV, useRef: useRefSV } = React; const motionSV = new Proxy({}, { get: (_, p) => window.FramerMotion.motion[p] }); const useInViewSV = (...a) => window.FramerMotion.useInView(...a); // ============================================================ // SERVIZI ATMOSPHERE — universo caldo, calmo, editoriale // Metafora: "7 servizi = costellazione". Starfield + costellazione + // nebulosa calda. Editoriale, low-impact, palette scura del sito. // ============================================================ function ServiziStarfield() { const canvasRef = useRefSV(null); const wrapRef = useRefSV(null); const animRef = useRefSV(null); const mouseRef = useRefSV({ x: 0, y: 0, target: { x: 0, y: 0 } }); const tRef = useRefSV(0); const starsRef = useRefSV([]); React.useEffect(() => { const canvas = canvasRef.current; const wrap = wrapRef.current; if (!canvas || !wrap) return; const ctx = canvas.getContext('2d'); const dpr = Math.min(window.devicePixelRatio || 1, 2); let w = 0, h = 0; const buildStars = () => { const stars = []; // 3 layers — depth via size, brightness, parallax factor const counts = [180, 90, 35]; const layers = [ { p: 0.15, sz: [0.4, 0.9], br: [0.3, 0.55], warm: 0.15 }, { p: 0.30, sz: [0.7, 1.5], br: [0.45, 0.75], warm: 0.35 }, { p: 0.55, sz: [1.2, 2.4], br: [0.65, 0.95], warm: 0.55 }, ]; layers.forEach((L, li) => { for (let i = 0; i < counts[li]; i++) { stars.push({ x: Math.random() * w, y: Math.random() * h, r: L.sz[0] + Math.random() * (L.sz[1] - L.sz[0]), br: L.br[0] + Math.random() * (L.br[1] - L.br[0]), tw: 0.5 + Math.random() * 2.5, // twinkle speed ph: Math.random() * Math.PI * 2, // phase par: L.p, warm: Math.random() < L.warm, // some stars are warm gold }); } }); starsRef.current = stars; }; const resize = () => { const rect = wrap.getBoundingClientRect(); w = rect.width; h = rect.height; canvas.width = w * dpr; canvas.height = h * dpr; canvas.style.width = w + 'px'; canvas.style.height = h + 'px'; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); buildStars(); }; const onMouse = (e) => { const rect = wrap.getBoundingClientRect(); mouseRef.current.target = { x: ((e.clientX - rect.left) / rect.width - 0.5) * 2, y: ((e.clientY - rect.top) / rect.height - 0.5) * 2, }; }; const onLeave = () => { mouseRef.current.target = { x: 0, y: 0 }; }; const draw = () => { tRef.current += 0.01; const t = tRef.current; mouseRef.current.x += (mouseRef.current.target.x - mouseRef.current.x) * 0.05; mouseRef.current.y += (mouseRef.current.target.y - mouseRef.current.y) * 0.05; const mx = mouseRef.current.x; const my = mouseRef.current.y; ctx.clearRect(0, 0, w, h); // very slow horizontal drift (sky rotation feel) const drift = t * 4; starsRef.current.forEach(s => { const tw = 0.6 + 0.4 * Math.sin(t * s.tw + s.ph); const px = ((s.x + drift * s.par) % (w + 20)) - mx * 18 * s.par; const py = s.y - my * 14 * s.par; const a = s.br * tw; if (s.warm) { // warm halo const grad = ctx.createRadialGradient(px, py, 0, px, py, s.r * 4); grad.addColorStop(0, `rgba(255,215,0,${a})`); grad.addColorStop(0.4, `rgba(201,168,76,${a * 0.4})`); grad.addColorStop(1, 'rgba(201,168,76,0)'); ctx.fillStyle = grad; ctx.beginPath(); ctx.arc(px, py, s.r * 4, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = `rgba(255,236,170,${a})`; ctx.beginPath(); ctx.arc(px, py, s.r, 0, Math.PI * 2); ctx.fill(); } else { ctx.fillStyle = `rgba(230,235,255,${a})`; ctx.beginPath(); ctx.arc(px, py, s.r, 0, Math.PI * 2); ctx.fill(); } }); animRef.current = requestAnimationFrame(draw); }; resize(); window.addEventListener('resize', resize); wrap.addEventListener('mousemove', onMouse); wrap.addEventListener('mouseleave', onLeave); animRef.current = requestAnimationFrame(draw); return () => { cancelAnimationFrame(animRef.current); window.removeEventListener('resize', resize); wrap.removeEventListener('mousemove', onMouse); wrap.removeEventListener('mouseleave', onLeave); }; }, []); return (
); } function ServiziAtmosphere() { return (