/* global React, ReactDOM */
const { useState, useEffect, useRef } = React;
const { motion: _fm, MotionConfig: _MC } = window.Motion || {};
const _MD = (_fm && _fm.div) || 'div';
const _MA = (_fm && _fm.a) || 'a';
const _MB = (_fm && _fm.button) || 'button';
const _prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
const useWindowWidth = () => {
const [w, setW] = useState(window.innerWidth);
useEffect(() => {
const onResize = () => setW(window.innerWidth);
window.addEventListener('resize', onResize, { passive: true });
return () => window.removeEventListener('resize', onResize);
}, []);
return w;
};
/* ============================================================
Tiny scroll-reveal hook + utility
============================================================ */
const useReveal = () => {
const ref = useRef(null);
useEffect(() => {
const el = ref.current;
if (!el) return;
const io = new IntersectionObserver(
(entries) => {
entries.forEach((e) => {
if (e.isIntersecting) {
el.classList.add('is-in');
io.unobserve(el);
}
});
},
{ threshold: 0.15 }
);
io.observe(el);
return () => io.disconnect();
}, []);
return ref;
};
const Reveal = ({ children, delay = 0, as = 'div', ...rest }) => {
const ref = useReveal();
const Tag = as;
return (
{children}
);
};
/* ============================================================
Logo lockup
============================================================ */
const Logo = ({ size = 22, href = 'index.html' }) => (
Recall
);
/* ============================================================
Sticky Nav
============================================================ */
const Nav = ({ active }) => {
const [scrolled, setScrolled] = useState(false);
const [menuOpen, setMenuOpen] = useState(false);
const width = useWindowWidth();
const isMobile = width < 768;
useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 8);
window.addEventListener('scroll', onScroll, { passive: true });
onScroll();
return () => window.removeEventListener('scroll', onScroll);
}, []);
useEffect(() => { if (!isMobile) setMenuOpen(false); }, [isMobile]);
useEffect(() => {
document.body.style.overflow = menuOpen ? 'hidden' : '';
return () => { document.body.style.overflow = ''; };
}, [menuOpen]);
const navLinks = [
['Features', 'features.html', 'features'],
['Pricing', 'pricing.html', 'pricing'],
['Support', 'support.html', 'support'],
];
const desktopLink = (label, href, key) => {
const isActive = key === active;
return (
(e.currentTarget.style.color = 'var(--fg)')}
onMouseLeave={(e) => (e.currentTarget.style.color = isActive ? 'var(--fg)' : 'var(--fg-2)')}
>{label}
);
};
const bar = (transform) => (
);
return (
<>
{menuOpen && (
{navLinks.map(([label, href, key]) => {
const isActive = key === active;
return (
setMenuOpen(false)} style={{
fontFamily: 'var(--font-display)', fontWeight: 800,
fontSize: 'clamp(32px, 10vw, 56px)', letterSpacing: '-0.04em',
color: isActive ? 'var(--fg)' : 'var(--fg-3)',
textDecoration: 'none', lineHeight: 1.15,
transition: 'color 150ms',
}}>{label}
);
})}
<_MA href="waitlist.html" onClick={() => setMenuOpen(false)} style={{
marginTop: 28, height: 56,
display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
background: 'var(--accent-gradient)', color: '#fff', borderRadius: 12,
fontFamily: 'var(--font-body)', fontSize: 16, fontWeight: 600,
textDecoration: 'none', letterSpacing: '-0.011em',
}}
{...(!_prefersReduced && _fm ? { whileTap: { scale: 0.97 }, transition: { type: 'spring', stiffness: 400, damping: 25 } } : {})}
>Join waitlist
You’re on the list. We’ll see you 1 July. 🎉
);
}
const inputBase = {
height: h, border: '1px solid var(--border)', borderRadius: 999,
background: 'var(--surface)', color: 'var(--fg)',
fontFamily: 'var(--font-body)', fontSize, padding: '0 18px',
outline: 'none', letterSpacing: '-0.011em',
width: '100%', boxSizing: 'border-box',
transition: 'box-shadow var(--dur-2) var(--ease-out)',
};
return (
);
};
const Countdown = ({ variant = 'cards' }) => {
const [now, setNow] = useState(Date.now());
useEffect(() => {
const id = setInterval(() => setNow(Date.now()), 1000);
return () => clearInterval(id);
}, []);
const diff = Math.max(0, TARGET - now);
const days = Math.floor(diff / 86400000);
const hours = Math.floor(diff / 3600000) % 24;
const mins = Math.floor(diff / 60000) % 60;
const secs = Math.floor(diff / 1000) % 60;
if (diff === 0) {
return (
Available now
);
}
if (variant === 'inline') {
return (
{String(days).padStart(3, '0')}d : {String(hours).padStart(2, '0')}h : {String(mins).padStart(2, '0')}m : {String(secs).padStart(2, '0')}s
until launch
);
}
const cell = (n, label, idx) => {
const motionProps = (!_prefersReduced && _fm) ? {
initial: { opacity: 0, y: 8 },
animate: { opacity: 1, y: 0 },
transition: { duration: 0.3, ease: 'easeOut', delay: idx * 0.08 },
} : {};
return (
<_MD key={label} {...motionProps} style={{
display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
padding: '14px 18px', minWidth: 84,
background: 'var(--surface)', border: '1px solid var(--border)',
borderRadius: 12,
}}>
{String(n).padStart(2, '0')}
{label}
);
};
return (
{cell(days, 'Days', 0)}{cell(hours, 'Hours', 1)}{cell(mins, 'Mins', 2)}{cell(secs, 'Secs', 3)}
);
};
/* ============================================================
CTA band — bottom of every page
============================================================ */
const CTABand = () => (
{/* Abstract coral glow shapes */}
Try free for 14 days · Windows, Mac & Linux · Early access 1 July 2026
Start learning today.
Join the waitlist and get 50% off as one of the first 100 users.
No spam, ever.
);
/* ============================================================
Footer — minimal 3-col: logo+copy · nav links · social icons
============================================================ */
const Footer = () => (
);
/* FooterCol kept for sub-pages that still use it */
const FooterCol = ({ heading, links }) => (
);
Object.assign(window, {
useWindowWidth, useReveal, Reveal, Logo, Nav,
WaitlistInput, Countdown, CTABand, Footer, FooterCol,
MotionConfig: _MC,
});