// Shared site chrome — design tokens, nav, footer, and prose primitives.
// Loaded before website.jsx (homepage) and before each static page (terms,
// licenses, support) so all pages reuse the same header/footer/design system.
// Follows the repo convention: define locally, expose via Object.assign(window).
const W_TEAL = '#0D7377';
const W_TEAL_DARK = '#0A5C5F';
const W_TEAL_LIGHT = '#E0F5F5';
const W_AMBER = '#F5A623';
const W_AMBER_LIGHT = '#FEF3E2';
const W_PURPLE = '#8B5CF6';
const W_PURPLE_LIGHT = '#F3EEFF';
const W_TEXT = '#1A1D21';
const W_TEXT_2 = '#6B7280';
const W_SEP = '#E5E7EB';
const W_MAX = 1120;
// Logo: homepage inlines it via inline-assets.js (window.LOGO_SRC); static
// pages fall back to the file. Absolute path so it resolves on /terms etc.
const LOGO = window.LOGO_SRC || '/assets/logo.png';
// Responsive hook — inline styles can't be targeted by CSS media queries,
// so we branch on viewport width at render time.
function useIsMobile(bp = 768) {
const [m, setM] = React.useState(
typeof window !== 'undefined' ? window.innerWidth < bp : false
);
React.useEffect(() => {
const onResize = () => setM(window.innerWidth < bp);
onResize();
window.addEventListener('resize', onResize);
return () => window.removeEventListener('resize', onResize);
}, [bp]);
return m;
}
function Wrap({ children, style }) {
const m = useIsMobile();
return {children}
;
}
function SectionTag({ color = W_TEAL, bg = W_TEAL_LIGHT, children }) {
return (
{children}
);
}
function H2({ children, style }) {
const m = useIsMobile();
const base = (style && style.fontSize) || 40;
const mob = m ? { fontSize: Math.min(28, base), letterSpacing: -0.5 } : null;
return {children}
;
}
function Lead({ children, style }) {
return {children}
;
}
function StoreBadge({ kind }) {
const isApple = kind === 'apple';
return (
{isApple ? (
) : (
)}
{isApple ? 'Download on the' : 'Get it on'}
{isApple ? 'App Store' : 'Google Play'}
);
}
// ─── Nav ─────────────────────────────────────────────────────
// Links are root-relative (/#how) so they work from the homepage AND from the
// static pages (they navigate home, then scroll).
const NAV_LINKS = [
{ href: '/#how', label: 'How it works' },
{ href: '/#features', label: 'Features' },
{ href: '/#ai', label: 'AI' },
{ href: '/#pricing', label: 'Pricing' },
{ href: '/#faq', label: 'FAQ' },
];
function SiteNav() {
const m = useIsMobile();
const [menuOpen, setMenuOpen] = React.useState(false);
React.useEffect(() => { if (!m) setMenuOpen(false); }, [m]);
return (
);
}
// ─── Footer ──────────────────────────────────────────────────
const FOOTER_LINKS = [
{ href: '/privacy', label: 'Privacy' },
{ href: '/terms', label: 'Terms' },
{ href: '/support', label: 'Support' },
{ href: '/licenses', label: 'Licenses' },
];
function SiteFooter() {
return (
);
}
// ─── Prose primitives (for static content pages) ─────────────
function PageHead({ tag, title, sub }) {
const m = useIsMobile();
return (
{tag && {tag}}
{title}
{sub && {sub}}
);
}
function DocH2({ children }) {
return {children}
;
}
function DocP({ children, style }) {
return {children}
;
}
function DocUL({ children }) {
return ;
}
function DocLI({ children }) {
return {children};
}
// Standard page layout: sticky nav, centered content column, footer.
function PageShell({ children, maxWidth = 760 }) {
const m = useIsMobile();
return (
{children}
);
}
Object.assign(window, {
W_TEAL, W_TEAL_DARK, W_TEAL_LIGHT, W_AMBER, W_AMBER_LIGHT, W_PURPLE, W_PURPLE_LIGHT,
W_TEXT, W_TEXT_2, W_SEP, W_MAX, LOGO,
useIsMobile, Wrap, SectionTag, H2, Lead, StoreBadge,
NAV_LINKS, SiteNav, FOOTER_LINKS, SiteFooter,
PageHead, DocH2, DocP, DocUL, DocLI, PageShell,
});