// Shared atoms + the hero animation pieces.
function useNarrow(breakpoint = 768) {
const [narrow, setNarrow] = React.useState(false);
React.useEffect(() => {
const mq = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);
const apply = () => setNarrow(mq.matches);
apply();
mq.addEventListener("change", apply);
return () => mq.removeEventListener("change", apply);
}, [breakpoint]);
return narrow;
}
const Kicker = ({ children }) => (
{children}
);
// Page section wrapper with consistent spacing
const Section = ({ id, children, style }) => {
const narrow = useNarrow(768);
return (
);
};
// Section header with kicker / serif title / sub
const SectionHead = ({ kicker, title, sub, align = "left", maxw = 760 }) => {
const narrow = useNarrow(768);
return (
{kicker}
{title}
{sub &&
{sub}
}
);
};
// Striped placeholder (for any imagery slots)
const Placeholder = ({ label, w = "100%", h = 180 }) => (
{label}
);
window.Kicker = Kicker;
window.useNarrow = useNarrow;
window.Section = Section;
window.SectionHead = SectionHead;
window.Placeholder = Placeholder;