with a background-image rather than an ![]()
). Fall back to
// the first ![]()
inside any .
main.querySelector('[data-hero-anchor]') ||
main.querySelector('section img');
const measure = () => {
const anchor = findAnchor();
if (!anchor) return;
const mainTop = main.getBoundingClientRect().top;
const aRect = anchor.getBoundingClientRect();
const midRel = aRect.top - mainTop + aRect.height / 2;
if (midRel > 0) setHeight(Math.round(midRel));
};
measure();
const ro = new ResizeObserver(measure);
ro.observe(main);
const imgs = main.querySelectorAll('section img, [data-hero-anchor] img');
imgs.forEach((i) => i.addEventListener('load', measure));
window.addEventListener('resize', measure);
return () => {
ro.disconnect();
imgs.forEach((i) => i.removeEventListener('load', measure));
window.removeEventListener('resize', measure);
};
}, [bp, effectiveFraction]);
return (
);
}
if (bp === 'desktop') {
return (
);
}
// ── Tablet: single column, portrait 3:2 on top, text below ───────────────
if (bp === 'tablet') {
return (
);
}
// ── Mobile: single column, portrait 3:2 on top (16 px side padding), text below
// ── Large Mobile ──────────────────────────────────────────────────────
if (bp === 'largeMobile') {
return (
);
}
// ── Small Mobile (fallback) ──────────────────────────────────────────
return (
);
};
// ─── Footer ───────────────────────────────────────────────────────────────────
const Footer = ({ tagline, sub }) => {
const bp = useBreakpoint();
// Footer legal links open the in-page reading overlay (handled in App).
const openLegal = key => window.dispatchEvent(new CustomEvent('openLegal', { detail: key }));
const legalLinks = (fontSize) =>
[['Privacy Policy', 'privacy'], ['Terms and Conditions', 'terms']].map(([label, key]) =>
{ e.preventDefault(); openLegal(key); }}
onMouseEnter={(e) => (e.currentTarget.style.color = '#fff')}
onMouseLeave={(e) => (e.currentTarget.style.color = '#b5b5b7')}
style={{ fontFamily: 'Inter', fontWeight: 400, fontSize, letterSpacing: '-0.01em', color: '#b5b5b7', textDecoration: 'none', cursor: 'pointer', transition: 'color 180ms ease' }}>{label}
);
// ── Desktop: exact original ────────────────────────────────────────────────
// ── Large Desktop ───────────────────────────────────────────────────────
if (bp === 'largeDesktop') {
return (
);
}
if (bp === 'desktop') {
return (
);
}
// ── Tablet: 64 px padding, tagline 28 px, 4 nav links in a row ────────────
if (bp === 'tablet') {
return (
);
}
// ── Mobile: 32 px padding, tagline 20 px, links in 2 columns (Figma V3) ────
// ── Large Mobile ──────────────────────────────────────────────────────
if (bp === 'largeMobile') {
return (
);
}
// ── Small Mobile (fallback) ──────────────────────────────────────────
return (
);
};
// ─── Page Title ───────────────────────────────────────────────────────────────
// THREE separate branches per breakpoint. Direct-editing the desktop branch
// never touches tablet/mobile and vice versa. Do NOT collapse back into a
// shared block with ternaries — that's exactly what made edits bleed across
// breakpoints before.
const PageTitle = ({ line1, line2 }) => {
const bp = useBreakpoint();
// ── Desktop ──────────────────────────────────────────────────────────────
// ── Large Desktop ───────────────────────────────────────────────────────
if (bp === 'largeDesktop') {
return (
{line1}
);
}
if (bp === 'desktop') {
return (
{line1}
);
}
// ── Tablet ───────────────────────────────────────────────────────────────
if (bp === 'tablet') {
return (
{line1}
);
}
// ── Mobile ───────────────────────────────────────────────────────────────
// ── Large Mobile ──────────────────────────────────────────────────────
if (bp === 'largeMobile') {
return (
{line1}
);
}
// ── Small Mobile (fallback) ──────────────────────────────────────────
return (
{line1}
);
};
// ─── Highlights ───────────────────────────────────────────────────────────────
// THREE separate branches per breakpoint — same isolation pattern as NavBar.
// Edit one without touching the others.
const Highlights = ({ label, items }) => {
const bp = useBreakpoint();
// ── Desktop ──────────────────────────────────────────────────────────────
// ── Large Desktop ───────────────────────────────────────────────────────
if (bp === 'largeDesktop') {
return (
);
}
if (bp === 'desktop') {
return (
);
}
// ── Tablet ───────────────────────────────────────────────────────────────
if (bp === 'tablet') {
return (
);
}
// ── Mobile ───────────────────────────────────────────────────────────────
// ── Large Mobile ──────────────────────────────────────────────────────
if (bp === 'largeMobile') {
return (
);
}
// ── Small Mobile (fallback) ──────────────────────────────────────────
return (
);
};
// ─── Pill ─────────────────────────────────────────────────────────────────────
// THREE separate branches per breakpoint.
const Pill = ({ children }) => {
const bp = useBreakpoint();
// ── Desktop ──────────────────────────────────────────────────────────────
// ── Large Desktop ───────────────────────────────────────────────────────
if (bp === 'largeDesktop') {
return (
{children});
}
if (bp === 'desktop') {
return (
{children});
}
// ── Tablet ───────────────────────────────────────────────────────────────
if (bp === 'tablet') {
return (
{children});
}
// ── Mobile ───────────────────────────────────────────────────────────────
// ── Large Mobile ──────────────────────────────────────────────────────
if (bp === 'largeMobile') {
return (
{children});
}
// ── Small Mobile (fallback) ──────────────────────────────────────────
return (
{children});
};
// ─── Email Form ───────────────────────────────────────────────────────────────
const EmailForm = ({ onSubmit, copy, defaultEmail, forcedError, formState }) => {
const [email, setEmail] = React.useState(defaultEmail || '');
const [error, setError] = React.useState(forcedError || null);
const bp = useBreakpoint();
// Once the email validates + submits, the CTA flips to a success state:
// "Download" → "Sent", "Subscribe" → "Subscribed" (with a check mark).
const sent = formState === 'success';
const ctaLabel = sent ? (copy?.sentCta || 'Sent') : (copy?.cta || 'Download');
const ctaBg = sent ? '#1f8a5b' : '#101010';
const CtaLabel = () => sent
?
{ctaLabel}
: ctaLabel;
React.useEffect(() => {
setEmail(defaultEmail || '');
setError(forcedError || null);
}, [defaultEmail, forcedError]);
const validate = (v) => {
if (!v || !v.trim()) return 'Missing Field';
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v.trim())) return 'Please enter a valid email';
return null;
};
const submit = (e) => {
e.preventDefault();
const err = validate(email);
setError(err);
if (err) return;
onSubmit(email.trim());
};
// ── Desktop: exact original sizes ─────────────────────────────────────────
// ── Large Desktop ───────────────────────────────────────────────────────
if (bp === 'largeDesktop') {
return (
);
}
if (bp === 'desktop') {
return (
);
}
// ── Tablet: 88 px form, 56 px inner, 20 px button font (Figma V3) ─────────
if (bp === 'tablet') {
return (
);
}
// ── Mobile: 67 px form, 51 px inner, 16 px button font (Figma V3) ─────────
// ── Large Mobile ──────────────────────────────────────────────────────
if (bp === 'largeMobile') {
return (
);
}
// ── Small Mobile (fallback) ──────────────────────────────────────────
return (
);
};
// ─── Success Toast ────────────────────────────────────────────────────────────
// FIVE separate components per breakpoint — same pattern as SocialIcons.
// Each component is a distinct source location, so a direct-edit in the
// preview only touches the breakpoint currently rendered. Do NOT collapse
// these back into a shared component with internal branches; the editor
// cannot pin an edit to the right branch and changes will leak across sizes.
// ── Large Desktop (> 1200 px) ────────────────────────────────────────────────
const SuccessToastLargeDesktop = ({ visible, message }) =>
ReactDOM.createPortal(
component above.
const SuccessToast = (props) => {
if (typeof document === 'undefined') return null;
const bp = useBreakpoint();
if (bp === 'smallMobile') return Free ` — pulls label from context.
const PricePill = () => {
const { model, price, currency } = React.useContext(PricingContext);
return {model === 'paid' ? `$${price} ${currency}` : 'Free'} ;
};
// ─── Paid CTA ────────────────────────────────────────────────────────────────
// Replaces the EmailForm block on paid templates: single big "Get this template"
// button, no email field, no disclaimer (per Figma node 102:196).
// FIVE separate branches per breakpoint — same isolation pattern as the rest
// of the file. Edits to one breakpoint never bleed into others.
const PaidCTA = ({ label = 'Get this template' }) => {
const { onPurchase } = React.useContext(PricingContext);
const bp = useBreakpoint();
const baseBtn = {
width: '100%', background: '#101010', color: '#fff',
border: 'none', cursor: 'pointer',
fontFamily: 'Inter', fontWeight: 700, letterSpacing: '-0.01em',
boxShadow: '0 6px 19.9px rgba(0,0,0,0.2)',
display: 'flex', alignItems: 'center', justifyContent: 'center',
transition: 'transform 120ms ease, box-shadow 120ms ease'
};
if (bp === 'largeDesktop') {
return (
);
}
if (bp === 'desktop') {
return (
);
}
if (bp === 'tablet') {
return (
);
}
if (bp === 'largeMobile') {
return (
);
}
return (
);
};
Object.assign(window, {
useBreakpoint, SocialIcons, SocialIconsDesktop, SocialIconsTablet, SocialIconsMobile,
NavBar, HeroBackdrop, BioSection, Footer,
PageTitle, Highlights, Pill, EmailForm,
SuccessToast,
SuccessToastSmallMobile, SuccessToastLargeMobile, SuccessToastTablet,
SuccessToastDesktop, SuccessToastLargeDesktop,
PricingContext, PricePill, PaidCTA
});
{/* Base vertical wash — static, so the top edge always reads warm */}
{/* Spot A — right-side warm hotspot, drifts left (~7s motion / 11s pulse) */}
{/* Spot B — left cream highlight, drifts right (~9s motion / 13s pulse) */}
{/* Spot C — center peach glow, drifts horizontally (~11s motion / 17s pulse) */}
{/* Spot D — lower-mid amber, drifts the opposite way (~13s motion / 19s pulse). */}
);
};
// ─── Bio Section ──────────────────────────────────────────────────────────────
// Desktop: side-by-side (text left, portrait right) — unchanged.
// Tablet + Mobile: single column — portrait (3:2 crop) on top, text below (Figma V3).
const BioSection = ({ portrait, role, story, headline }) => {
const bp = useBreakpoint();
const [titleRef, titleSeen] = useInView({ threshold: 0.35, rootMargin: '0px 0px -10% 0px' });
const titleCls = 'serif spl-reveal' + (titleSeen ? ' is-in' : '');
// Stack-overlap: the section rises and overlaps the block above it on scroll.
const isDesk = bp === 'largeDesktop' || bp === 'desktop';
const overlap = isDesk ? 72 : bp === 'tablet' ? 52 : 40;
const radius = 0;
// Classic scroll: no stack-overlap. Section flows normally below the block above.
const secRef = React.useRef(null);
const overlapStyle = { zIndex: 2 };
const topShadow = 'none';
// ── Desktop: exact original ────────────────────────────────────────────────
// ── Large Desktop ───────────────────────────────────────────────────────
if (bp === 'largeDesktop') {
return (
{headline}
{role}
{story}
{headline}
{role}
{story}
{/* Portrait — full content width, 3:2 landscape crop */}
{headline}
{role}
{story}
{/* Portrait — 3:2 aspect ratio, 16 px side padding → 358 px on 390 px mobile */}
{headline}
{role}
{story}
{/* Portrait — 3:2 aspect ratio, 16 px side padding → 358 px on 390 px mobile */}
{headline}
{role}
{story}
{line1}
{line2}
);
}
if (bp === 'desktop') {
return (
{line1}
{line2}
);
}
// ── Tablet ───────────────────────────────────────────────────────────────
if (bp === 'tablet') {
return (
{line1}
{line2}
);
}
// ── Mobile ───────────────────────────────────────────────────────────────
// ── Large Mobile ──────────────────────────────────────────────────────
if (bp === 'largeMobile') {
return (
{line1}
{line2}
);
}
// ── Small Mobile (fallback) ──────────────────────────────────────────
return (
{line1}
{line2}
);
};
// ─── Highlights ───────────────────────────────────────────────────────────────
// THREE separate branches per breakpoint — same isolation pattern as NavBar.
// Edit one without touching the others.
const Highlights = ({ label, items }) => {
const bp = useBreakpoint();
// ── Desktop ──────────────────────────────────────────────────────────────
// ── Large Desktop ───────────────────────────────────────────────────────
if (bp === 'largeDesktop') {
return (
{label}
-
{items.map((it, i) =>
- {it} )}
{label}
-
{items.map((it, i) =>
- {it} )}
{label}
-
{items.map((it, i) =>
- {it} )}
{label}
-
{items.map((it, i) =>
- {it} )}
{label}
-
{items.map((it, i) =>
- {it} )}
{message}
,
document.body
);
// ── Desktop (1025 – 1200 px) ─────────────────────────────────────────────────
const SuccessToastDesktop = ({ visible, message }) =>
ReactDOM.createPortal(
{message}
,
document.body
);
// ── Tablet (768 – 1024 px) ───────────────────────────────────────────────────
const SuccessToastTablet = ({ visible, message }) =>
ReactDOM.createPortal(
{message}
,
document.body
);
// ── Large Mobile (481 – 767 px) ──────────────────────────────────────────────
const SuccessToastLargeMobile = ({ visible, message }) =>
ReactDOM.createPortal(
{message}
,
document.body
);
// ── Small Mobile (≤ 480 px) ──────────────────────────────────────────────────
const SuccessToastSmallMobile = ({ visible, message }) =>
ReactDOM.createPortal(
{message}
,
document.body
);
// Thin router — picks the right component for the current breakpoint.
// Does NO styling of its own. To change a size, edit the matching
// SuccessToast