/* === utils.jsx === */ /* Shared utilities + tiny components */ const { useState, useEffect, useRef, useLayoutEffect, useMemo, useCallback } = React; /* ---- IntersectionObserver hook for reveal animation ---- */ function useReveal() { useEffect(() => { const els = document.querySelectorAll(".reveal:not(.in)"); if (!els.length) return; const io = new IntersectionObserver( (entries) => { entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } }); }, { rootMargin: "0px 0px -10% 0px", threshold: 0.05 } ); els.forEach((el) => io.observe(el)); return () => io.disconnect(); }, []); } /* ---- Scroll progress in 0..1 over a bound ---- */ function useScrollProgress(ref, { start = 0, end = 1 } = {}) { const [p, setP] = useState(0); useEffect(() => { const el = ref.current; if (!el) return; let raf = 0; const onScroll = () => { cancelAnimationFrame(raf); raf = requestAnimationFrame(() => { const r = el.getBoundingClientRect(); const vh = window.innerHeight || 1; // 0 when section top hits top, 1 when section bottom hits bottom. const total = r.height - vh; if (total <= 0) { setP(0); return; } const raw = clamp(-r.top / total, 0, 1); // Optional re-mapping const mapped = clamp((raw - start) / (end - start || 1), 0, 1); setP(mapped); }); }; onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); window.addEventListener("resize", onScroll); return () => { window.removeEventListener("scroll", onScroll); window.removeEventListener("resize", onScroll); cancelAnimationFrame(raf); }; }, [ref, start, end]); return p; } const clamp = (v, lo, hi) => Math.max(lo, Math.min(hi, v)); const lerp = (a, b, t) => a + (b - a) * t; const ease = { out: (t) => 1 - Math.pow(1 - t, 3), inOut: (t) => (t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2), }; // Removed `useElementProgress` — was used by PhoneContent + // MacContent to drive the "Hawa & Adam" scale/fade animation, but // inside the showcase's 500vh sticky stage the device's bounding // rect never crosses the viewport top (it's pinned by sticky), // so the hook stalled near 0.95 and the animation never moved. // The same effect now lives in Showcase as `nameScale` / `nameOpacity`, // derived from the proven `morph` curve and passed down as props. /* ---- Apple chevron ---- */ function Chevron({ size = 12 }) { return ( ); } function ArrowRight({ size = 14 }) { return ( ); } /* Wedding-themed invite card content for image-slot fallbacks. Used when the user hasn't dropped in a screenshot yet — keeps the device frame visually credible. */ function InviteFace({ variant = "eclipse", names, date, accent }) { const presets = { eclipse: { bg: "linear-gradient(180deg,#0e1116 0%, #1a1f27 100%)", ink: "#f4ebe2", accent: "#c9a66b", script: "Eclipse", ornament: "circle", }, lentera: { bg: "linear-gradient(180deg,#1f1410 0%, #2c1d17 100%)", ink: "#f1e0c9", accent: "#e7b265", script: "Lentera", ornament: "lantern", }, bahari: { bg: "linear-gradient(180deg,#0c1c24 0%, #143343 100%)", ink: "#e8edd9", accent: "#9bbf95", script: "Bahari", ornament: "wave", }, aurora: { bg: "linear-gradient(180deg,#f6f1ec 0%, #ebe2d6 100%)", ink: "#3a2e22", accent: "#b4806a", script: "Aurora", ornament: "frame", }, senja: { bg: "linear-gradient(180deg,#f3d9c8 0%, #d99e83 100%)", ink: "#3c1e14", accent: "#7a3424", script: "Senja", ornament: "sun", }, maharani: { bg: "linear-gradient(180deg,#160e1f 0%, #2a1638 100%)", ink: "#f3e6c8", accent: "#dcb15a", script: "Maharani", ornament: "diamond", }, bumi: { bg: "linear-gradient(180deg,#efe9df 0%, #d8cdb9 100%)", ink: "#2c2419", accent: "#7a6a4a", script: "Bumi", ornament: "leaf", }, }; const p = presets[variant] || presets.eclipse; const [first, second] = (names || "Arsenio & Kalia").split("&").map((s) => s.trim()); return (
{p.script} · UWU
THE WEDDING OF
{first || "Arsenio"}
&
{second || "Kalia"}
{date || "12 · 12 · 2026"}
Hutan Kota Plataran · Jakarta
with love · save the date
); } window.useReveal = useReveal; window.useScrollProgress = useScrollProgress; window.clamp = clamp; window.lerp = lerp; window.ease = ease; window.Chevron = Chevron; window.ArrowRight = ArrowRight; window.InviteFace = InviteFace; /* === nav.jsx === */ /* Apple-style top nav: thin, blur, ink-on-paper, condensed on mobile */ /* 4 items (down from 6) — first-time visitors need a guided journey, not 6 destinations. Dropped: "Showcase" (already part of the homepage scroll narrative, not a destination) and "RSVP" (a feature inside the product, not a top-nav target — already surfaced in the Fitur section + on every template demo). Order reflects funnel priority: see → like → cost → objections. */ const NAV_LINKS = [ { label: "Template", href: "/koleksi" }, { label: "Fitur", href: "#features" }, { label: "Harga", href: "#pricing" }, { label: "FAQ", href: "#faq" }, ]; function Nav({ isDark, onToggleTheme }) { const [open, setOpen] = useState(false); const [scrolled, setScrolled] = useState(false); useEffect(() => { // Round 4.7 — Pika-class scroll-shrink. Trigger at scrollY > 8 // (same as before) but use the boolean elsewhere to shrink the // pill: padding 22 → 16, min-height 56 → 48, maxWidth 1240 → 1080. // The visual cue is identical to pika.me — the navbar feels like // it "compacts" once you scroll past the hero. const onScroll = () => setScrolled(window.scrollY > 8); onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); // lock body scroll when mobile menu open + signal the menu state // to other body-tied surfaces (most importantly StickyCTA, which // would otherwise peek through the menu's bottom edge — operator // saw "Mulai gratis" sticky pill rendered behind the open menu). // body class `nav-menu-open` hidden via the @media style block // below. useEffect(() => { document.body.style.overflow = open ? "hidden" : ""; document.body.classList.toggle("nav-menu-open", open); return () => { document.body.style.overflow = ""; document.body.classList.remove("nav-menu-open"); }; }, [open]); return ( <>