// Hero.jsx — with canvas botanical particles + parallax depth layers const BIO_IMG = "https://imagedelivery.net/mYdfeAeRRdkIXG5w7XJhtQ/7b1350d2-5543-4add-13f7-272003a23800/public"; const WORK_IMG = "https://imagedelivery.net/mYdfeAeRRdkIXG5w7XJhtQ/e0f17ae9-c2ad-43be-c515-691856a2a400/public"; /* ── Leaf SVG ── */ function Leaf({ size = 120, style = {}, rotate = 0 }) { return ( ); } /* ── Canvas Particles ── */ function useParticles(canvasRef) { React.useEffect(() => { const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext("2d"); let raf; let W,H,particles = []; const resize = () => { W = canvas.width = canvas.offsetWidth; H = canvas.height = canvas.offsetHeight; }; resize(); window.addEventListener("resize", resize); // Particle types: dot, leaf-outline, petal const COLORS = ["rgba(143,162,135,", "rgba(201,169,110,", "rgba(199,211,194,"]; function makeParticle() { const type = Math.random() < 0.5 ? "dot" : "leaf"; const c = COLORS[Math.floor(Math.random() * COLORS.length)]; return { x: Math.random() * W, y: Math.random() * H, vx: (Math.random() - 0.5) * 0.35, vy: -Math.random() * 0.4 - 0.1, size: type === "dot" ? Math.random() * 3 + 1.5 : Math.random() * 18 + 10, alpha: Math.random() * 0.35 + 0.08, rot: Math.random() * Math.PI * 2, rotV: (Math.random() - 0.5) * 0.008, type, color: c, life: 0, maxLife: Math.random() * 500 + 300 }; } for (let i = 0; i < 38; i++) particles.push(makeParticle()); function drawLeaf(ctx, x, y, size, rot, alpha, color) { ctx.save(); ctx.translate(x, y); ctx.rotate(rot); ctx.globalAlpha = alpha; ctx.strokeStyle = color + "1)"; ctx.lineWidth = 0.8; ctx.beginPath(); ctx.moveTo(0, -size / 2); ctx.bezierCurveTo(size * 0.6, -size * 0.3, size * 0.6, size * 0.3, 0, size / 2); ctx.bezierCurveTo(-size * 0.6, size * 0.3, -size * 0.6, -size * 0.3, 0, -size / 2); ctx.stroke(); // vein ctx.beginPath(); ctx.moveTo(0, -size / 2); ctx.lineTo(0, size / 2); ctx.globalAlpha = alpha * 0.5; ctx.stroke(); ctx.restore(); } function tick() { ctx.clearRect(0, 0, W, H); particles.forEach((p, i) => { p.x += p.vx;p.y += p.vy;p.rot += p.rotV;p.life++; const fade = p.life < 60 ? p.life / 60 : p.life > p.maxLife - 60 ? (p.maxLife - p.life) / 60 : 1; const a = p.alpha * fade; if (p.type === "dot") { ctx.save(); ctx.globalAlpha = a; ctx.fillStyle = p.color + "1)"; ctx.beginPath(); ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2); ctx.fill(); ctx.restore(); } else { drawLeaf(ctx, p.x, p.y, p.size, p.rot, a, p.color); } if (p.life >= p.maxLife || p.y < -20) { particles[i] = { ...makeParticle(), x: Math.random() * W, y: H + 10 }; } }); raf = requestAnimationFrame(tick); } tick(); return () => {cancelAnimationFrame(raf);window.removeEventListener("resize", resize);}; }, []); } /* ── Parallax hook ── */ function useParallax() { const ref = React.useRef(null); React.useEffect(() => { const el = ref.current;if (!el) return; const botanicals = document.querySelectorAll(".botanical-parallax"); const onScroll = () => { const y = window.scrollY; botanicals.forEach((b, i) => { const speed = i % 2 === 0 ? 0.15 : 0.22; b.style.transform = `translateY(${y * speed}px)`; }); }; window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); return ref; } function Hero() { const canvasRef = React.useRef(null); const imgRef = React.useRef(null); const sectionRef = useParallax(); useParticles(canvasRef); // Subtle 3D tilt on image React.useEffect(() => { const el = imgRef.current;if (!el) return; const onMove = (e) => { const r = el.getBoundingClientRect(); const x = (e.clientX - r.left) / r.width - 0.5; const y = (e.clientY - r.top) / r.height - 0.5; el.style.transform = `perspective(900px) rotateY(${x * 5}deg) rotateX(${-y * 4}deg)`; }; const onLeave = () => {el.style.transform = "perspective(900px) rotateY(0) rotateX(0)";}; el.addEventListener("mousemove", onMove); el.addEventListener("mouseleave", onLeave); return () => {el.removeEventListener("mousemove", onMove);el.removeEventListener("mouseleave", onLeave);}; }, []); return (
{/* Particle canvas */} {/* Botanical layers */}
{/* ── Text ── */}
STUDIO DE SOBRANCELHAS · GOIÂNIA

Sobrancelhas desenhadas
para revelar sua{" "} beleza natural.

{/* Animated gold line */}

Design personalizado, mapeamento facial e técnicas precisas para realçar a harmonia do seu rosto com naturalidade e cuidado.

{[["100+", "Clientes atendidas"], ["2 anos", "De experiência"], ["98%", "Satisfação"]].map(([n, l]) =>
{n}
{l}
)}
{/* ── Image ── */}
Beatriz — Essenza Glow
✦
Design Personalizado
Especialidade
Brow Design
{/* Gold corner dots */} {[["−18px", "−18px"], ["−18px", "calc(100% + 4px)"], ["calc(100% + 4px)", "−18px"], ["calc(100% + 4px)", "calc(100% + 4px)"]].map(([t, l], i) =>
)}
); } Object.assign(window, { Hero, Leaf, BIO_IMG, WORK_IMG });