function Hero() { const heroRef = useRef(null); const bgALayerRef = useRef(null); const bgBLayerRef = useRef(null); const phiRef = useRef(null); const isMobile = window.innerWidth <= 820; useEffect(() => { // Mobile: kill GPU-composited parallax entirely — it causes rendering artifacts on iOS if (isMobile) { if (bgBLayerRef.current) bgBLayerRef.current.style.opacity = '0'; // Remove will-change so layers don't get promoted to separate compositor tiles if (bgALayerRef.current) bgALayerRef.current.style.willChange = 'auto'; return; // no mouse/scroll handlers needed on mobile } const state = { mx: 50, my: 50, p: 0 }; const updateTransforms = () => { const { p, mx, my } = state; const bgZoom = 1 + Math.max(0, p) * 0.18; const bgShift = p * 40; if (bgALayerRef.current) { bgALayerRef.current.style.transform = `scale(${bgZoom}) translate3d(${(mx-50)*-0.2}px,${bgShift+(my-50)*-0.15}px,0)`; } if (bgBLayerRef.current) { bgBLayerRef.current.style.transform = `scale(${bgZoom}) translate3d(${(mx-50)*-0.12}px,${bgShift+(my-50)*-0.1}px,0)`; } if (phiRef.current) { phiRef.current.style.transform = `translate3d(0,${p*-180}px,0) rotate(${p*-6}deg)`; } }; const onMouse = (e) => { const r = heroRef.current?.getBoundingClientRect(); state.mx = (e.clientX / window.innerWidth) * 100; state.my = (e.clientY / window.innerHeight) * 100; if (r && bgBLayerRef.current) { const px = e.clientX - r.left; const py = e.clientY - r.top; const mask = `radial-gradient(circle 280px at ${px}px ${py}px,black 0%,black 60%,transparent 100%)`; bgBLayerRef.current.style.maskImage = mask; bgBLayerRef.current.style.webkitMaskImage = mask; } updateTransforms(); }; let raf = 0; const onScroll = () => { if (raf) return; raf = requestAnimationFrame(() => { raf = 0; const el = heroRef.current; if (!el) return; const r = el.getBoundingClientRect(); const vh = window.innerHeight; state.p = Math.max(0, Math.min(1, (vh - r.top) / (2 * vh))); updateTransforms(); }); }; onScroll(); window.addEventListener('mousemove', onMouse); window.addEventListener('scroll', onScroll, { passive: true }); window.addEventListener('resize', onScroll); return () => { window.removeEventListener('mousemove', onMouse); window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onScroll); if (raf) cancelAnimationFrame(raf); }; }, []); return (
{/* === BG LAYER A === */}
{/* === BG LAYER B — revealed by mouse on desktop only === */}
{/* Scrim — rgba, compatible with all Safari versions */}
{/* Floating PHI glyph — desktop only */}
Φ
{/* === CONTENT === */}
Direção estratégica para produtos físicos · Método PHI
Seu produto não, <>vende mal por estética., <>Vende mal por falta, <>de direção., ]} />

Eu não entrego layouts bonitos. Eu entrego decisões — baseadas em concorrência, cliente e voz de mercado. O design vem depois, como consequência.

window.__openContactModal()}> Diagnosticar meu produto document.getElementById('metodo')?.scrollIntoView({ behavior: 'smooth' })}> Ver o Método PHI
{/* Bottom fade */}
); } // Tries to load a static image (with mobile variant); falls back to animated placeholder function HeroBg({ src, srcMobile, seed }) { const [err, setErr] = useState(false); if (err) return ; return ( {srcMobile && } setErr(true)} style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: '50% 0%', }} /> ); } // Animated placeholder — smooth blobs, no tiling artifacts function HeroMediaCanvas({ seed = 0 }) { const bgRef = useRef(null); useEffect(() => { let raf; const start = performance.now(); const tick = (now) => { const t = (now - start) / 1000; const s1 = 50 + Math.sin(t * 0.12 + seed) * 10; const s2 = 42 + Math.cos(t * 0.10 + seed) * 10; const s3 = 68 + Math.sin(t * 0.08 + seed + 1) * 12; const s4 = 60 + Math.cos(t * 0.11 + seed + 2) * 10; const bg = seed === 0 ? `radial-gradient(ellipse 60% 55% at ${s1}% ${s2}%, rgba(209,178,138,0.65), transparent 55%), radial-gradient(ellipse 55% 50% at ${s3}% ${s4}%, rgba(184,148,100,0.55), transparent 55%), radial-gradient(ellipse 80% 55% at 50% 115%, rgba(140,110,68,0.5), transparent 65%), linear-gradient(180deg, rgb(237,228,212), rgb(210,195,170))` : `radial-gradient(ellipse 65% 55% at ${100-s1}% ${100-s2}%, rgba(72,85,107,0.75), transparent 55%), radial-gradient(ellipse 55% 55% at ${100-s3}% ${s4}%, rgba(51,63,82,0.65), transparent 55%), radial-gradient(ellipse 80% 65% at 40% 115%, rgba(38,47,62,1), transparent 60%), linear-gradient(180deg, rgb(56,67,88), rgb(36,45,58))`; if (bgRef.current) bgRef.current.style.background = bg; raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, []); return (
); } window.Hero = Hero;