);
}
/* =======================================================================
CONTACT CTA — a lightweight top spacer before the footer.
Kept for App.jsx compatibility; footer now holds everything.
======================================================================= */
function ContactCTA() {
return (
{/* pt-16 (mobile-only — sm:pt-20 overrides from 640px up) makes
the Investments→Footer gap on mobile = Investments pb-16 (4rem)
+ this 4rem = 8rem, matching the BBO→Investments gap for
consistent inter-section rhythm. Desktop pt values unchanged. */}
);
}
/* =======================================================================
EDITORIAL GET IN TOUCH (MOBILE-ONLY)
-----------------------------------------------------------------------
Magazine-spread vocabulary inspired by editorial design references —
thin hairlines, mono-uppercase tags, an oversized italic serif as the
focal piece, numbered rows for the contact options. Replaces the
lavender pill on phones (`<= md`); the desktop pill is rendered in
parallel and hidden on mobile so neither version touches the other.
The copy-email flow + clipboard fallback chain mirrors the pill
button so the action behaves identically.
======================================================================= */
function EditorialGetInTouchMobile() {
const [copied, setCopied] = React.useState(false);
const resetRef = React.useRef(null);
const handleCopy = async () => {
let success = false;
try {
if (navigator.clipboard && navigator.clipboard.writeText) {
await navigator.clipboard.writeText(FOOTER_EMAIL);
success = true;
} else {
const ta = document.createElement('textarea');
ta.value = FOOTER_EMAIL;
ta.setAttribute('readonly', '');
ta.style.position = 'fixed';
ta.style.left = '-9999px';
ta.style.opacity = '0';
document.body.appendChild(ta);
ta.select();
try { success = document.execCommand('copy'); } catch (_) { /* no-op */ }
document.body.removeChild(ta);
}
} catch (_) { success = false; }
if (!success) { window.location.href = `mailto:${FOOTER_EMAIL}`; return; }
setCopied(true);
if (resetRef.current) clearTimeout(resetRef.current);
resetRef.current = setTimeout(() => setCopied(false), 2200);
};
React.useEffect(() => () => {
if (resetRef.current) clearTimeout(resetRef.current);
}, []);
const MONO = 'ui-monospace, SFMono-Regular, Menlo, monospace';
const TEXT = 'rgb(var(--c-text))';
const RULE = 'rgb(var(--c-text) / 0.16)';
const TAG = 'rgb(var(--c-text) / 0.5)';
// A row in the numbered list. `onClick` makes it behave as a tappable
// surface (the email row); plain rows just render. Active state gives
// a faint background flash for press feedback on touch.
const Row = ({ idx, value, onClick, href, action }) => {
const inner = (
{idx}{value}
{action && (
↗
)}
);
const cls = 'block w-full text-left press';
if (onClick) {
return (
);
}
if (href) {
return (
{inner}
);
}
return inner;
};
const Hairline = () => (
);
return (
{/* Top mono tag rail — the "magazine masthead" beat. */}
Get In TouchEst. 2021
{/* Headline — oversized italic serif, two-line stack. The period
stays upright (fontStyle: normal) so it lands as a sharp visual
stop after the lean of the italic. */}
Reach out.
{/* Numbered rows. The email row toggles to "Email copied" on tap so
the user gets a clear acknowledgement of the action, matching
the pill's behaviour on desktop. */}
{/* Coordinates line — small italic serif, the "Buzludzha spread"
flourish from the inspiration. Reads as a quiet typographic
period at the end of the section. */}
48° 25′ 38″ N — 123° 22′ 04″ W
);
}
/* =======================================================================
FOOTER — wordmark first, giant Get In Touch button below, meta rail.
======================================================================= */
function Footer() {
// Scroll-driven reveals matching the rest of the page. Each block gets
// its own ref so it can enter on its own beat as the user scrolls into
// the footer — the wordmark lands first (heavy weight, biggest move),
// then the link grid columns, then the meta rail. The Get In Touch
// button has its own bespoke spring entrance below and is intentionally
// left out of the reveal cascade — wrapping it would hide the spring
// animation behind the parent's opacity ramp.
const wordmarkRef = React.useRef(null);
// Two link columns (Navigate / Connect) since the Legal column was
// removed (it held only dead Privacy/Terms href="#" links).
const linksColRefs = [React.useRef(null), React.useRef(null)];
const metaRef = React.useRef(null);
React.useEffect(() => {
const apply = window.applyBlurFadeUp;
if (!apply) return;
const cleanups = [
// Reveal windows are tuned so that EVERY layer is fully resolved by
// the time the page reaches its scroll-end resting position. The
// previous build used endVh values (0.43 → 0.55) below the meta
// rail's resting top (≈0.94vh in a full-fold footer), so the rail
// could never finish its animation — it stayed half-blurred at
// rest. The new endVh values are pushed up against each layer's
// resting position, and the start→end windows are tightened so the
// reveals feel snappier (less lingering blur on slow scroll).
apply(wordmarkRef.current, { startVh: 1.00, endVh: 0.70, dyPx: 90, blurPx: 22 }),
apply(linksColRefs[0].current, { startVh: 1.00, endVh: 0.82, dyPx: 36, blurPx: 10 }),
apply(linksColRefs[1].current, { startVh: 0.96, endVh: 0.80, dyPx: 36, blurPx: 10 }),
// Meta rail rests right at the bottom of the viewport; endVh:0.95
// guarantees raw≥1 by scroll-end, so the rail lands sharp.
apply(metaRef.current, { startVh: 1.05, endVh: 0.95, dyPx: 24, blurPx: 8 }),
];
return () => cleanups.forEach((fn) => fn && fn());
}, []);
const navItems = [
{ label: 'Home', href: '/' },
{ label: 'Portfolio', href: '/investments.html' },
];
const connectItems = [
{ label: 'contact@follypartners.com', href: 'mailto:contact@follypartners.com' },
{ label: 'Victoria, British Columbia' },
];
// The "Legal" column was removed: its only entries were Privacy and
// Terms linking to href="#" (no-op), and no legal.html exists. Per the
// design review, ship nothing rather than dead links. The grid below
// rebalanced from 3 columns to 2 (Navigate / Connect) so the colophon
// still reads as intentional. Reinstate a Legal column here (and bump
// the grid back to sm:grid-cols-3 + a third linksColRef) only once real
// /privacy and /terms pages exist.
return (
);
}
Object.assign(window, { ContactCTA, Footer });