const { useState, useEffect, useRef, useMemo } = React; /* ============ APP ============ */ const ACCENT_PALETTE = [ { name: 'Azul Marinho', accent: '#2E5BFF', soft: '#E8F0FF', ink: '#0A1F44' }, { name: 'Royal', accent: '#1E40AF', soft: '#DBE4FF', ink: '#0B1736' }, { name: 'Azul Céu', accent: '#0EA5E9', soft: '#E0F2FE', ink: '#082F49' }, { name: 'Teal', accent: '#0D9488', soft: '#CCFBF1', ink: '#0B3B38' }, { name: 'Esmeralda', accent: '#059669', soft: '#D1FAE5', ink: '#0A2F1F' }, { name: 'Grafite', accent: '#1F2937', soft: '#E5E7EB', ink: '#111827' }, { name: 'Vinho', accent: '#9F1239', soft: '#FFE4E6', ink: '#3F0A1A' }, { name: 'Âmbar', accent: '#C2410C', soft: '#FFEDD5', ink: '#2C1106' }]; function useTweaks() { const [theme, setTheme] = useState(() => { try {return JSON.parse(localStorage.getItem('ig_tweaks') || '{}').theme || 'light';} catch {return 'light';} }); const [palette, setPalette] = useState(() => { try { const saved = JSON.parse(localStorage.getItem('ig_tweaks') || '{}'); if (saved.accent) { const p = ACCENT_PALETTE.find((x) => x.accent === saved.accent); return p || ACCENT_PALETTE[0]; } } catch {} return ACCENT_PALETTE[0]; }); useEffect(() => { const root = document.documentElement; if (theme === 'dark') root.setAttribute('data-theme', 'dark');else root.removeAttribute('data-theme'); root.style.setProperty('--accent', palette.accent); root.style.setProperty('--accent-soft', theme === 'dark' ? '#1A2340' : palette.soft); if (theme === 'light') root.style.setProperty('--ink', palette.ink);else root.style.removeProperty('--ink'); localStorage.setItem('ig_tweaks', JSON.stringify({ theme, accent: palette.accent })); }, [theme, palette]); return { theme, setTheme, palette, setPalette }; } function TweaksPanel({ theme, setTheme, palette, setPalette }) { const [open, setOpen] = useState(false); return (
{open &&
Personalizar
{/* Theme */}
Tema
{['light', 'dark'].map((t) => )}
{/* Palette */}
Cor principal
{ACCENT_PALETTE.map((p) => )}
{palette.name}
}
); } const SunIcon = () => ; const MoonIcon = () => ; /* ============ UTIL HOOKS ============ */ function useReveal() { useEffect(() => { const els = document.querySelectorAll('.reveal'); const io = new IntersectionObserver((entries) => { entries.forEach((e) => {if (e.isIntersecting) {e.target.classList.add('in');io.unobserve(e.target);}}); }, { threshold: 0.12 }); els.forEach((el) => io.observe(el)); return () => io.disconnect(); }); } function useScrollY() { const [y, setY] = useState(0); useEffect(() => { const onScroll = () => setY(window.scrollY); window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); }, []); return y; } /* ============ ICONS (simple geometric) ============ */ const Dot = ({ c = 'var(--ink)' }) => ; const ArrowUR = ({ s = 14 }) => ; const ArrowR = ({ s = 14 }) => ; const Check = ({ s = 14 }) => ; const Minus = ({ s = 14 }) => ; const Plus = ({ s = 14 }) => ; /* ============ NAV ============ */ function Nav() { const y = useScrollY(); const scrolled = y > 40; return (
Igor Gabriel
Contabilidade Estratégica
); } function Monogram() { return (
Igor Gabriel
); } /* ============ HERO AMBIENT, subtle animated backdrop ============ */ function HeroAmbient() { return (