// Shared components: Nav, Footer, Fraction motif, ProductCard, etc. const Frac = ({ size = 22, light = false }) => ( 1 ⁄ 3 ); const NavLink = ({ to, current, navigate, children }) => ( { e.preventDefault(); navigate(to); }} >{children} ); const Nav = ({ current, navigate, inverse = false }) => { const [open, setOpen] = React.useState(false); const close = () => { setOpen(false); document.body.style.overflow = ""; }; const toggle = () => { setOpen(o => { document.body.style.overflow = !o ? "hidden" : ""; return !o; }); }; const go = (path) => { close(); navigate(path); }; return (
{ e.preventDefault(); go("/products"); }}>Products { e.preventDefault(); go("/story"); }}>Our Story { e.preventDefault(); go("/find"); }}>Find Us Shopee ↗
); }; const Footer = ({ navigate }) => ( ); // Reusable product card const ProductCard = ({ p, navigate, density = "regular" }) => ( { e.preventDefault(); navigate("/p/" + p.id); }}> {p.image ? {p.name} :
}
{p.name}
{Array.isArray(p.family) ? p.family.join(" · ") : p.family} · {p.translation}
№ {p.num}
{formatIDR(p.price)}
 ); // Section label — small mono with fraction tag const SectionTag = ({ index = "01", total = "05", label }) => (
{index} {total} {label}
); // Big oversized fraction display element const BigFrac = ({ size = 360, opacity = 1, color = "currentColor" }) => (
1 3
); // Notes pyramid — used on product page and on home const NotesPyramid = ({ top, middle, base, dark = false }) => { const c = dark ? "var(--cream)" : "var(--ink)"; const mute = dark ? "rgba(241,235,223,0.55)" : "var(--ink-mute)"; const Row = ({ label, frac, items, idx }) => (
{frac}
{label}
{["First impression", "Heart", "Final third (yours)"][idx]}
); return (
); }; Object.assign(window, { Frac, Nav, Footer, ProductCard, SectionTag, BigFrac, NotesPyramid, NavLink });