// Wedding homepage — section components
// All components attached to window for cross-file use.
const { useState, useEffect, useRef, useCallback } = React;
/* ────────────────────────────────────────────────────────────────
useReveal — IntersectionObserver hook for scroll-in animations
─────────────────────────────────────────────────────────────────*/
function useReveal(threshold = 0.15) {
const ref = useRef(null);
useEffect(() => {
const el = ref.current;
if (!el) return;
const io = new IntersectionObserver(
(entries) => {
entries.forEach((e) => {
if (e.isIntersecting) {
e.target.classList.add('in');
io.unobserve(e.target);
}
});
},
{ threshold }
);
el.querySelectorAll('.reveal').forEach((n) => io.observe(n));
return () => io.disconnect();
}, [threshold]);
return ref;
}
/* ────────────────────────────────────────────────────────────────
Monogram — flexible: "S & D", "SD", "S · D"
─────────────────────────────────────────────────────────────────*/
function Monogram({ style = 'S & D', size = 52, color = 'var(--espresso)' }) {
return (
{style}
);
}
/* ────────────────────────────────────────────────────────────────
Nav — sticky, shrinks on scroll, opens drawer on mobile
─────────────────────────────────────────────────────────────────*/
function Nav({ monogram, onRSVP, solid = false }) {
const [scrolled, setScrolled] = useState(false);
const [open, setOpen] = useState(false);
useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 60);
onScroll();
window.addEventListener('scroll', onScroll, { passive: true });
return () => window.removeEventListener('scroll', onScroll);
}, []);
const isSolid = solid || scrolled;
const links = [
{ href: '/schedule/', label: 'Schedule' },
{ href: '/travel/', label: 'Travel & Stay' },
{ href: '/faq/', label: 'FAQ' },
];
return (
<>
01 · VI · 27
{/* Desktop links */}
{links.map((l) => (
{l.label}
))}
RSVP
{/* Mobile burger */}
setOpen(true)}
className="mobile-burger"
style={{
display: 'none',
background: 'transparent',
border: 'none',
padding: 8,
}}
>
{/* Mobile drawer */}
{open && (
setOpen(false)}
style={{ background: 'transparent', border: 'none', fontSize: 24, color: 'var(--espresso)' }}
>
×
{links.map((l, i) => (
setOpen(false)}
className="serif"
style={{ fontSize: 32, color: 'var(--espresso)' }}
>
{String(i + 1).padStart(2, '0')}
{l.label}
))}
{ setOpen(false); onRSVP(); }}
className="small-caps"
style={{
marginTop: 24,
background: 'var(--espresso)',
color: 'var(--parchment)',
border: 'none',
padding: '16px 22px',
letterSpacing: '0.28em',
alignSelf: 'stretch',
}}
>
RSVP
)}
);
}
/* ────────────────────────────────────────────────────────────────
Hero — full-bleed image-slot with parallax + overlay
─────────────────────────────────────────────────────────────────*/
function Hero({ monogram, heroCrop, italicAccents }) {
const imgRef = useRef(null);
useEffect(() => {
const onScroll = () => {
const el = imgRef.current;
if (!el) return;
const y = window.scrollY;
el.style.transform = `translate3d(0, ${y * 0.25}px, 0) scale(1.08)`;
};
onScroll();
window.addEventListener('scroll', onScroll, { passive: true });
return () => window.removeEventListener('scroll', onScroll);
}, []);
const heights = {
tall: '100vh',
standard: '78vh',
wide: '64vh',
};
const heightVal = heights[heroCrop] || '100vh';
return (
{/* Scrim — vertical gradient weighted where text sits + soft center wash */}
{/* Top hairline frame */}
N 42° 49′ · E 11° 59′
Vol. I — Invitation
{/* Center stack */}
Together with their families
Samantha
&
Devin
The Second of June · MMXXVII
SPAO · Umbria, Italy
{/* Bottom marker */}
);
}
/* ────────────────────────────────────────────────────────────────
InvitationNote — short love letter beneath hero
─────────────────────────────────────────────────────────────────*/
function InvitationNote({ italicAccents }) {
const ref = useReveal();
return (
I · An Invitation
Come spend four slow days with us beneath an Umbrian sun —
share a long table, pour another glass, and watch two of your
favourite people promise the rest of it to one another.
1 — 4 June 2027
);
}
Object.assign(window, {
useReveal,
Monogram,
Nav,
Hero,
InvitationNote,
});