// ──────────────────────────────────────────────────────────────────────── // rsvp.jsx — RSVP call-to-action section. NOT a form: an elegant invitation // to respond, with a real button that links out to the external RSVP site. // // • deep-maroon premium card on warm ivory, antique-gold frame & type // • staggered reveal on scroll-in (emblem+names → heading → body → button) // built on the project's IntersectionObserver pattern (window.useInView) // • faint VR watermark + faint temple line-art + subtle falling petals // • a subtle secondary "IMPORTANT" info card below the main card // ──────────────────────────────────────────────────────────────────────── (function () { const { useRef } = React; // ── EASY-TO-EDIT CONFIG ─────────────────────────────────────────────── // Clean /rsvp route inside this one merged project. On a static host // (Vercel/Netlify/GitHub Pages) the folder rsvp/index.html serves at /rsvp. const RSVP_URL = '/rsvp/'; // ← the merged RSVP page (Vercel clean URL; cleanUrls in vercel.json) const RSVP_DEADLINE = '[Date TBD]'; // ← e.g. '15th June 2025' // ────────────────────────────────────────────────────────────────────── // palette const GOLD = '#c9a24b'; const GOLD_LT = '#e3c172'; const GOLD_HI = '#f3da97'; const GOLD_DK = '#9c7a32'; const IVORY = '#f3e7cd'; const CREAM = '#efe0bf'; const MAROON = '#6b1d1d'; const A = (q) => window.asset ? window.asset(q) : q; // small gold calendar glyph function CalendarIcon({ size = 20, color = GOLD_HI }) { return ( ); } // gold corner flourish for the maroon card function GoldCorner({ pos }) { const flip = { tl: 'none', tr: 'scaleX(-1)', bl: 'scaleY(-1)', br: 'scale(-1,-1)' }[pos]; const place = { tl: { top: 14, left: 14 }, tr: { top: 14, right: 14 }, bl: { bottom: 14, left: 14 }, br: { bottom: 14, right: 14 } }[pos]; return ( ); } // beaded gold divider (line · diamond beads · lotus · beads · line) function BeadDivider({ width = 230, reveal = 1, color = GOLD_LT }) { const len = 70 * reveal; return ( ); } // tiny gold heart divider used above the button function HeartDivider({ width = 200, reveal = 1, color = GOLD_LT }) { const len = 64 * reveal; return ( ); } // faint temple skyline (simple stepped-gopuram silhouettes) near the card base function TempleSkyline() { const gop = (x, w, h) => { const steps = 4,sw = w,parts = []; for (let i = 0; i < steps; i++) { const iw = sw * (1 - i * 0.16),ih = h / steps; const ix = x + (sw - iw) / 2,iy = h - (i + 1) * ih; parts.push(); } parts.push(); return parts; }; return ( ); } function RSVPSection() { const [ref, inView] = window.useInView(0.22); const OD = window.OrnamentalDivider; const secRef = useRef(null); // scroll-linked drift so the card travels with the scroll, not in a jump const p = window.useScrollProgress ? window.useScrollProgress(secRef) : 0; // staggered transition helper const rise = (delay, dist = 22) => ({ opacity: inView ? 1 : 0, transform: inView ? 'translateY(0)' : `translateY(${dist}px)`, transition: `opacity .85s cubic-bezier(.22,.61,.36,1) ${delay}s, transform .85s cubic-bezier(.22,.61,.36,1) ${delay}s` }); return (
{/* soft vignette */}
); } window.RSVPSection = RSVPSection; })();