// Clube da Luz — sections part A: Nav, Hero, Marquee, Manifesto // Hero remixed — mixed blue ink + gold portrait, parallax, mouse tilt 3D. const { useState, useEffect, useRef, useMemo } = React; /* ============================================================ */ /* Mark */ /* ============================================================ */ function Mark({ size = 22 }) { return ( ); } /* ============================================================ */ /* Nav (responsive) */ /* ============================================================ */ function Nav() { const [scrolled, setScrolled] = useState(false); const [open, setOpen] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 24); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); const navStyle = { position: "fixed", top: 0, left: 0, right: 0, zIndex: 50, padding: scrolled ? "12px 0" : "22px 0", backdropFilter: scrolled ? "blur(18px) saturate(140%)" : "none", WebkitBackdropFilter: scrolled ? "blur(18px) saturate(140%)" : "none", background: scrolled ? "rgba(6,9,18,0.7)" : "transparent", borderBottom: scrolled ? "1px solid var(--line)" : "1px solid transparent", transition: "all .35s ease", }; return ( ); } /* ============================================================ */ /* Hero — composição azul/dourado, parallax, 3D */ /* ============================================================ */ function Hero() { const y = window.useScrollY(); const tilt = window.useMouseTilt(0.6); const vw = window.useViewport(); const isMobile = vw <= 820; // parallax factors (subtle) const inkY = y * -0.18; const portY = y * -0.10; const fogY = y * 0.06; const sparkY = y * -0.32; const heroFade = Math.max(0, 1 - y / 600); const tiltStyle = (depth) => ({ transform: `translate3d(${tilt.tx * depth * -20}px, ${tilt.ty * depth * -20}px, 0)`, transition: "transform .15s cubic-bezier(.2,.7,.2,1)", }); return (
{/* layer 1 — blue ink background (LEFT) */}
{/* layer 2 — Adriano portrait (RIGHT), tinted & blended */}
{/* layer 3 — aqua/gold fog wash to bind the two together */}
{/* layer 4 — drifting sparkles (gold + aqua) */} {/* layer 5 — content */}
— Edição I · 2026 ∴ Acesso por convite

Onde a criação encontra a sua luz.

{/* Right column — empty visual breathing space (the portrait lives in layer 2) */}
{/* bottom strip — info compacta */}
Próxima imersão · 14.06.2026 · Rio de Janeiro 12 vagas · Inscrições abertas Edição I — Vol. 01
); } /* Sparkles — pontos dourados/aqua flutuando com leve parallax */ function Sparkles({ count = 18, parallax = 0 }) { const dots = useMemo(() => { const seed = []; for (let i = 0; i < count; i++) { const gold = Math.random() > 0.4; seed.push({ left: Math.random() * 80 + 5, top: Math.random() * 90 + 5, size: Math.random() * 4 + 1.5, delay: Math.random() * 6, dur: Math.random() * 6 + 6, dx: (Math.random() - 0.5) * 80, dy: -Math.random() * 140 - 40, gold, }); } return seed; }, [count]); return (
{dots.map((d, i) => ( ))}
); } /* ============================================================ */ /* Marquee strip */ /* ============================================================ */ function Marquee() { const items = [ "Criatividade aplicada", "Mentoria viva", "Régua criativa", "Laboratório de projetos", "Círculo privado", "Rituais semanais", "Biblioteca selecionada", ]; return (
{[...items, ...items, ...items].map((t, i) => ( {t} ✦ ))}
); } /* ============================================================ */ /* Manifesto */ /* ============================================================ */ function Manifesto() { return (
— 01 · Manifesto
∴ Lido em voz alta no início de cada ciclo.

Criatividade não é talento. É um modo de estar no mundo — uma escuta refinada, um músculo treinado, uma escolha diária de tornar visível o que ainda não tem forma.

Este é um lugar para quem reconhece que fazer é mais importante do que esperar a inspiração. Aqui, a obra acontece em comunidade — entre rituais, encontros, trilhas de estudo e provocações que afiam o olhar.

Não vendemos cursos. Sustentamos uma prática. Quem entra, entra para ficar, para contribuir, para liderar pequenos movimentos dentro do círculo. A entrada é por aplicação — porque o tempo de cada mentor é finito.

); } Object.assign(window, { Mark, Nav, Hero, Marquee, Manifesto });