// components.jsx — UI primitives + sections
const { useState, useEffect, useRef, useMemo, useCallback, useLayoutEffect } = React;
/* ============================================================
Visual primitives
============================================================ */
function Arrow({ size = 14, dir = "ne" }) {
const rotations = { ne: -45, e: 0, s: 90, sw: 135, nw: -135, n: -90, w: 180 };
return (
);
}
function CircleMotif({ top, left, right, bottom, size, opacity = 0.25, dashed }) {
return (
);
}
function HairlineRow({ children, style }) {
return (
{children}
);
}
/* ============================================================
Navbar
============================================================ */
function Navbar({ route, navigate, lang, setLang, t }) {
const linkStyle = (k) => ({
fontSize: 14,
letterSpacing: "0.02em",
cursor: "pointer",
position: "relative",
color: route === k ? "var(--ink)" : "var(--muted)",
transition: "color 0.3s",
});
return (
);
}
function LangToggle({ lang, setLang }) {
return (
{["pt", "en"].map(l => (
))}
);
}
/* ============================================================
Hero / Home
============================================================ */
function Home({ t, navigate, lang }) {
const heroRef = useRef(null);
const nameRef = useRef(null);
useEffect(() => {
const lines = heroRef.current?.querySelectorAll('[data-reveal]') || [];
gsap.set(lines, { yPercent: 110 });
gsap.to(lines, { yPercent: 0, duration: 1.2, ease: "expo.out", stagger: 0.08, delay: 0.2 });
// marquee animation
const marquee = document.querySelector('[data-marquee-track]');
if (marquee) {
gsap.to(marquee, { xPercent: -50, duration: 40, ease: "none", repeat: -1 });
}
}, [lang]);
return (
{/* Hero */}
{t.hero.eyebrow}
(2021 — 2026)
v.{lang === "pt" ? "PT" : "EN"} · 01
{t.hero.name1}
{t.hero.name2}
{/* Marquee */}
{/* Featured projects glimpse */}
);
}
function Marquee({ t, lang }) {
const items = lang === "pt"
? ["Product Design", "UX Strategy", "Interface Craft", "Prototipação", "Design System", "AI Workflow"]
: ["Product Design", "UX Strategy", "Interface Craft", "Prototyping", "Design System", "AI Workflow"];
const repeated = [...items, ...items, ...items, ...items];
return (
{repeated.map((it, i) => (
{it}
))}
);
}
function FeaturedProjects({ t, navigate, lang }) {
useEffect(() => {
// preload all project cover images so hover previews don't flash a dark bg
PROJECTS.forEach(p => { if (p.cover) { const img = new Image(); img.src = p.cover; } });
// refresh ScrollTrigger after layout settles (fonts/images load)
const refresh = () => ScrollTrigger.refresh();
const timer = setTimeout(refresh, 100);
window.addEventListener("load", refresh);
return () => { clearTimeout(timer); window.removeEventListener("load", refresh); };
}, []);
return (
{t.work.title}.
{t.work.subtitle}
{PROJECTS.map((p, i) => (
navigate("project", { id: p.id })}/>
))}
);
}
function ProjectListRow({ p, index, t, lang, onClick }) {
const ref = useRef(null);
const imgRef = useRef(null);
const [hover, setHover] = useState(false);
useEffect(() => {
if (!ref.current) return;
const el = ref.current;
gsap.fromTo(el,
{ yPercent: 40, opacity: 0 },
{
yPercent: 0, opacity: 1, duration: 0.9, ease: "expo.out",
scrollTrigger: { trigger: el, start: "top 100%", toggleActions: "play none none none" },
}
);
}, []);
useEffect(() => {
const el = ref.current;
if (!el) return;
const handleMouse = (e) => {
if (!imgRef.current) return;
const rect = el.getBoundingClientRect();
gsap.to(imgRef.current, { x: e.clientX - rect.left - 180, y: e.clientY - rect.top - 110, duration: 0.6, ease: "power3.out" });
};
el.addEventListener("mousemove", handleMouse);
return () => el.removeEventListener("mousemove", handleMouse);
}, []);
return (
setHover(true)}
onMouseLeave={() => setHover(false)}
style={{
position: "relative",
display: "grid",
gridTemplateColumns: "60px 1.4fr 1fr 200px 60px",
alignItems: "center",
padding: "32px 0",
borderTop: "1px solid var(--hairline)",
cursor: "pointer",
transition: "padding 0.5s var(--ease)",
paddingLeft: hover ? 24 : 0,
}}>
{p.n}
{p.name}
— {p.type[lang]}
{p.role[lang]}
{p.year}
{t.nav.index} · 01 / {String(PROJECTS.length).padStart(2, "0")}
{t.work.title.split(" ")[0]} {t.work.title.split(" ").slice(1).join(" ")}
{PROJECTS.map((p, i) => (
navigate("project", { id: p.id })}/>
))}
);
}
function WorkBigRow({ p, t, lang, onClick }) {
const [hover, setHover] = useState(false);
const imgRef = useRef(null);
const rowRef = useRef(null);
useEffect(() => {
const el = rowRef.current;
if (!el) return;
const handleMouse = (e) => {
if (!imgRef.current) return;
const rect = el.getBoundingClientRect();
gsap.to(imgRef.current, { x: e.clientX - rect.left - 200, y: e.clientY - rect.top - 130, duration: 0.6, ease: "power3.out" });
};
el.addEventListener("mousemove", handleMouse);
return () => el.removeEventListener("mousemove", handleMouse);
}, []);
return (
setHover(true)}
onMouseLeave={() => setHover(false)}
style={{
position: "relative",
display: "grid",
gridTemplateColumns: "80px 1fr 200px 60px",
alignItems: "center",
padding: "44px 0",
borderTop: "1px solid var(--hairline)",
cursor: "pointer",
}}>
{p.n}
{p.name.includes(" ") ? <>
{p.name.split(" ")[0]} {p.name.split(" ").slice(1).join(" ")}
: p.name}
{p.type[lang]}