// site-kit.jsx — PocketPolyglot marketing site shared primitives
// Theme-aware (reuses ppTheme/Waveform/Icon from kit.jsx). Exports to window.
// Wordmark · SiteNav · Footer · WaitlistForm · Reveal (scroll) · section helpers.
const SITE_SERIF = '"Spectral", Georgia, serif';
const SITE_UI = '-apple-system, "SF Pro Text", system-ui, sans-serif';
// one-time keyframes for site motion
if (typeof document !== 'undefined' && !document.getElementById('pp-site-kf')) {
const s = document.createElement('style');
s.id = 'pp-site-kf';
s.textContent = `
html { scroll-behavior: smooth; }
.pp-reveal { opacity: 1; }
.pp-reveal.is-in { animation: ppReveal .8s cubic-bezier(.2,.6,.3,1) both; }
@keyframes ppReveal { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes ppSiteWaveIdle { 0%,100% { transform: scaleY(0.7); } 50% { transform: scaleY(1); } }
.pp-site a { text-decoration: none; }
.pp-site button, .pp-site a.pp-btn { transition: transform .2s cubic-bezier(.34,1.4,.5,1), filter .2s ease, background .2s ease, border-color .2s ease, color .2s ease; }
.pp-site button:active:not(:disabled), .pp-site a.pp-btn:active { transform: scale(0.97); filter: brightness(0.95); }
.pp-site ::selection { background: rgba(44,94,140,0.18); }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.pp-site-wave-bar { animation: none !important; }
}
@media (max-width: 560px) {
.pp-nav-inner { padding: 0 20px !important; }
.pp-nav-links { display: none !important; }
.pp-foot-inner { padding: 0 20px !important; gap: 36px !important; }
.pp-foot-cols { gap: 40px !important; flex-wrap: wrap !important; }
.pp-foot-bottom { padding: 0 20px !important; }
}`;
document.head.appendChild(s);
}
// ── Wordmark: six waveform bars + Pocket·Polyglot ───────────────────────
function Wordmark({ dark = false, size = 22, animated = false, color }) {
const bars = [0.3, 0.7, 1, 0.6, 0.85, 0.3];
const blue = color || (dark ? '#6EA8DA' : '#2C5E8C');
const ink = dark ? '#EAF1F8' : '#1A2733';
const h = Math.round(size * 0.95);
return (
{bars.map((v, i) => (
))}
PocketPolyglot
);
}
// ── Pill button / link ──────────────────────────────────────────────────
function PPButton({ children, href, dark = false, variant = 'primary', size = 'md', onClick, style = {} }) {
const blue = dark ? '#6EA8DA' : '#2C5E8C';
const big = size === 'lg';
const base = {
display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 9,
height: big ? 60 : 50, padding: big ? '0 32px' : '0 24px', borderRadius: big ? 20 : 16,
fontFamily: SITE_UI, fontSize: big ? 18 : 15.5, fontWeight: 600, letterSpacing: -0.2,
cursor: 'pointer', border: 'none', whiteSpace: 'nowrap', ...style,
};
const skins = {
primary: { background: blue, color: dark ? '#0B1117' : '#fff', boxShadow: `0 10px 26px ${dark ? 'rgba(110,168,218,0.30)' : 'rgba(44,94,140,0.26)'}` },
ghost: { background: 'transparent', color: dark ? '#EAF1F8' : '#1A2733', border: `1.5px solid ${dark ? 'rgba(255,255,255,0.18)' : 'rgba(26,39,51,0.16)'}` },
};
const props = { className: 'pp-btn', style: { ...base, ...skins[variant] }, onClick };
return href ? {children} : ;
}
// ── Sticky top nav ──────────────────────────────────────────────────────
function SiteNav({ dark = false, active, onToggleTheme }) {
const ink = dark ? '#EAF1F8' : '#1A2733';
const sub = dark ? 'rgba(234,241,248,0.62)' : 'rgba(26,39,51,0.6)';
const [mob, setMob] = React.useState(typeof window !== 'undefined' ? window.innerWidth < 560 : false);
React.useEffect(() => {
const f = () => setMob(window.innerWidth < 560);
window.addEventListener('resize', f);
return () => window.removeEventListener('resize', f);
}, []);
const links = [
{ label: 'The method', href: 'Method.html', id: 'method' },
{ label: 'About', href: 'About.html', id: 'about' },
];
return (
);
}
// ── Scroll reveal ───────────────────────────────────────────────────────
function Reveal({ children, delay = 0, y = 20, style = {}, as = 'div' }) {
const ref = React.useRef(null);
const [shown, setShown] = React.useState(false);
React.useLayoutEffect(() => {
const el = ref.current;
if (!el) return;
let done = false;
const reveal = () => { if (!done) { done = true; setShown(true); cleanup(); } };
const check = () => {
const r = el.getBoundingClientRect();
const vh = window.innerHeight || document.documentElement.clientHeight || 800;
if (r.top < vh * 0.92 && r.bottom > 0) reveal();
};
const cleanup = () => {
window.removeEventListener('scroll', check);
window.removeEventListener('resize', check);
};
window.addEventListener('scroll', check, { passive: true });
window.addEventListener('resize', check);
const t1 = setTimeout(check, 30);
const t2 = setTimeout(check, 300);
return () => { cleanup(); clearTimeout(t1); clearTimeout(t2); };
}, []);
const Tag = as;
return (
{children}
);
}
// ── Eyebrow label ───────────────────────────────────────────────────────
function Eyebrow({ children, dark = false, color }) {
return (
{children}
);
}
// ── Waitlist form ───────────────────────────────────────────────────────
function WaitlistForm({ dark = false, compact = false }) {
const blue = dark ? '#6EA8DA' : '#2C5E8C';
const ink = dark ? '#EAF1F8' : '#1A2733';
const sub = dark ? 'rgba(234,241,248,0.6)' : 'rgba(26,39,51,0.58)';
const surface = dark ? '#171E27' : '#FFFFFF';
const hair = dark ? 'rgba(255,255,255,0.12)' : 'rgba(26,39,51,0.14)';
const [email, setEmail] = React.useState('');
const [done, setDone] = React.useState(false);
const [submitting, setSubmitting] = React.useState(false);
const [error, setError] = React.useState(null);
const valid = /\S+@\S+\.\S+/.test(email);
const submit = async (e) => {
e.preventDefault();
if (!valid || submitting) return;
setSubmitting(true);
setError(null);
try {
const r = await fetch('/api/waitlist', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ email }),
});
if (r.ok) setDone(true);
else setError('Something went wrong. Please try again.');
} catch {
setError('Network error. Please try again.');
} finally {
setSubmitting(false);
}
};
if (done) {
return (
You’re on the list.
We will write when it is ready to listen.
);
}
return (
);
}
// ── Footer ──────────────────────────────────────────────────────────────
function SiteFooter({ dark = false }) {
const sub = dark ? 'rgba(234,241,248,0.5)' : 'rgba(26,39,51,0.5)';
const faint = dark ? 'rgba(234,241,248,0.34)' : 'rgba(26,39,51,0.34)';
const hair = dark ? 'rgba(255,255,255,0.08)' : 'rgba(26,39,51,0.08)';
const cols = [
{ h: 'Product', links: [['The method', 'Method.html'], ['About', 'About.html'], ['Join the waitlist', '#waitlist']] },
];
return (
);
}
Object.assign(window, {
SITE_SERIF, SITE_UI, Wordmark, PPButton, SiteNav, Reveal, Eyebrow, WaitlistForm, SiteFooter,
});