/* Shared components: nav, footer, reveal, tweaks panel */ // === Adornos del estilo anterior (stickers botánicos, washi tape, cursor de hojita) === // El estilo "Chinni Design Studio" no los usa. Quedan como componentes vacíos para que // las páginas que todavía los nombran sigan funcionando sin mostrarlos. const Nothing = () => null; const LeafSticker = Nothing; const BranchSticker = Nothing; const SquiggleSticker = Nothing; const CircleSticker = Nothing; const FlowerSticker = Nothing; const StarburstSticker = Nothing; const DotDashSticker = Nothing; const WashiTape = Nothing; const CursorSticker = Nothing; // === Logo: "C" almohadón peludo en lila (generado en Higgsfield) === const Logo = ({ size = 40 }) => ( ); // === Nav === const Nav = ({ active = "home", overlay = false }) => { const { t } = useT(); const [scrolled, setScrolled] = React.useState(false); React.useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 40); onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); return ( ); }; // === Footer === const Footer = () => { const { t } = useT(); return ( ); }; // === CTA de contacto (el mismo en todas las páginas) === const ContactCTA = () => { const { t } = useT(); const c = t.cta; const email = "melinabelenchinni@gmail.com"; return (
{c.kicker}

{c.lede}

{c.button}
{email} LinkedIn WhatsApp Upwork Behance Contra

); }; // === Reveal on scroll hook === const useReveal = () => { React.useEffect(() => { const io = new IntersectionObserver((entries) => { entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } }); }, { threshold: 0.12 }); document.querySelectorAll(".reveal").forEach(el => io.observe(el)); return () => io.disconnect(); }, []); }; // === Parallax sticker === const ParallaxSticker = ({ children, speed = 0.3, top, left, right, bottom }) => { const ref = React.useRef(null); React.useEffect(() => { const onScroll = () => { if (!ref.current) return; const y = window.scrollY * speed; ref.current.style.transform = `translateY(${y}px)`; }; window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, [speed]); return (
{children}
); }; // === Tweaks panel === const TweaksPanel = () => { const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "palette": "niebla", "fonts": "default", "anim": 1, "botanical": 1 }/*EDITMODE-END*/; const [open, setOpen] = React.useState(false); const [state, setState] = React.useState(TWEAK_DEFAULTS); React.useEffect(() => { const handler = (e) => { if (e.data?.type === "__activate_edit_mode") setOpen(true); if (e.data?.type === "__deactivate_edit_mode") setOpen(false); }; window.addEventListener("message", handler); window.parent.postMessage({ type: "__edit_mode_available" }, "*"); return () => window.removeEventListener("message", handler); }, []); React.useEffect(() => { document.body.dataset.palette = state.palette; document.body.dataset.fonts = state.fonts; document.documentElement.style.setProperty("--anim", state.anim); document.documentElement.style.setProperty("--botanical", state.botanical); }, [state]); const update = (key, value) => { const next = { ...state, [key]: value }; setState(next); window.parent.postMessage({ type: "__edit_mode_set_keys", edits: { [key]: value } }, "*"); }; if (!open) return null; return (

Tweaks

update("anim", parseFloat(e.target.value))} />
update("botanical", parseFloat(e.target.value))} />
); }; // Export globally Object.assign(window, { LeafSticker, BranchSticker, SquiggleSticker, CircleSticker, FlowerSticker, StarburstSticker, DotDashSticker, WashiTape, CursorSticker, Logo, Nav, Footer, ContactCTA, useReveal, ParallaxSticker, TweaksPanel, });