/* ============================================================ RACK & BOX — 5 Amy Aghomi-inspired hero variants ============================================================ Variants: video · aghomi · luxsplit · typo · mosaic All use Ph() + window.RB_IMGS; no external deps. ============================================================ */ /* ─── helpers ─────────────────────────────────────────────── */ const img = (label) => (window.RB_IMGS || {})[label] || ""; /* ══════════════════════════════════════════════════════════ 1. CINEMATIC VIDEO HERO Full-bleed image with slow Ken Burns zoom, dark vignette, staggered text reveal. Simulates a looping video bg. ══════════════════════════════════════════════════════════ */ function HeroVideo({ onNav }) { const [loaded, setLoaded] = useState(false); const src = img("HERO · EDITORIAL · THE VOWS"); useEffect(() => { if (!src) return; const i = new Image(); i.onload = () => setLoaded(true); i.src = src; }, [src]); return (
{/* Ken Burns background */}
); } /* ══════════════════════════════════════════════════════════ 2. AGHOMI MINIMAL SLIDER Amy Aghomi-inspired: full-bleed, very sparse UI, thin progress lines, side counter. No heavy arrows. ══════════════════════════════════════════════════════════ */ function HeroAghomi({ onNav }) { const DURATION = 5400; const SLIDES = [ { label: "HERO · BRIDE IN CATHEDRAL GOWN", eyebrow: "The Bridal Atelier · SS26", h1: "Crafted", h2: "With Love.", cta: "Shop Bridal", fn: () => onNav("shop", { cat: "Bridal" }), }, { label: "EDITORIAL · BRIDAL", eyebrow: "The Wedding Atelier", h1: "Dressed for", h2: "The Grand Moment.", cta: "Wedding Edit", fn: () => onNav("shop", { occasion: "Wedding" }), }, { label: "ASOEBI · OWAMBE", eyebrow: "Owambe & Asoebi · SS26", h1: "Reign at", h2: "Every Celebration.", cta: "Shop Asoebi", fn: () => onNav("shop", { cat: "Asoebi" }), }, { label: "RED CARPET · GALA", eyebrow: "Red Carpet · SS26", h1: "Command,", h2: "Every Room.", cta: "Shop Tailoring", fn: () => onNav("shop", { occasion: "Corporate" }), }, ]; const [cur, setCur] = useState(0); const [rev, setRev] = useState(0); /* key to re-trigger animations */ const pausedRef = useRef(false); const rootRef = useRef(null); useEffect(() => { const t = setInterval(() => { if (!pausedRef.current) advance(1); }, DURATION); return () => clearInterval(t); }, [cur]); /* touch swipe */ useEffect(() => { const el = rootRef.current; if (!el) return; let sx = 0; const ts = (e) => { sx = e.touches[0].clientX; }; const te = (e) => { const dx = e.changedTouches[0].clientX - sx; if (Math.abs(dx) > 50) advance(dx < 0 ? 1 : -1); }; el.addEventListener("touchstart", ts, { passive: true }); el.addEventListener("touchend", te, { passive: true }); return () => { el.removeEventListener("touchstart", ts); el.removeEventListener("touchend", te); }; }, [cur]); const advance = (dir) => { setCur(c => (c + dir + SLIDES.length) % SLIDES.length); setRev(r => r + 1); }; const s = SLIDES[cur]; return (
{ pausedRef.current = true; }} onMouseLeave={() => { pausedRef.current = false; }} aria-label="Aghomi-style hero slider" > {/* Stacked background images */} {SLIDES.map((sl, i) => (
))}
); } /* ══════════════════════════════════════════════════════════ 3. LUXURY SPLIT HERO Deep dark left panel with gold vertical divider; tall right-side portrait + two small thumbnail strips. ══════════════════════════════════════════════════════════ */ function HeroLuxSplit({ headline, sub, onNav }) { return (
{/* Left: text panel */}

Couture · Reimagined

{headline}

{/* Gold vertical divider */} {/* Right: large image + thumbnail strip */}
); } /* ══════════════════════════════════════════════════════════ 4. MINIMAL TYPOGRAPHIC HERO Oversized headline dominates; background image bleeds in softly from the right. Very Amy Aghomi: space over décor. ══════════════════════════════════════════════════════════ */ function HeroTypo({ headline, sub, onNav }) { const words = (headline || "Dressed to be unforgettable.").split(" "); return (
{/* Soft background image — right side only */}
); } /* ══════════════════════════════════════════════════════════ 5. MOSAIC / PARALLAX HERO Four floating image cards with mouse-driven parallax depth. Central editorial text on top. Very dynamic and editorial. ══════════════════════════════════════════════════════════ */ function HeroMosaic({ onNav }) { const rootRef = useRef(null); const rafRef = useRef(null); const posRef = useRef({ x: 0, y: 0 }); const curRef = useRef({ x: 0, y: 0 }); /* Smooth parallax via lerp */ useEffect(() => { const el = rootRef.current; if (!el) return; const onMove = (e) => { const r = el.getBoundingClientRect(); posRef.current = { x: ((e.clientX - r.left) / r.width - 0.5) * 2, y: ((e.clientY - r.top) / r.height - 0.5) * 2, }; }; const onLeave = () => { posRef.current = { x: 0, y: 0 }; }; const loop = () => { curRef.current.x += (posRef.current.x - curRef.current.x) * 0.06; curRef.current.y += (posRef.current.y - curRef.current.y) * 0.06; const { x, y } = curRef.current; el.querySelectorAll("[data-depth]").forEach((c) => { const d = parseFloat(c.dataset.depth); c.style.transform = `translate(${x * d * 22}px, ${y * d * 14}px)`; }); rafRef.current = requestAnimationFrame(loop); }; rafRef.current = requestAnimationFrame(loop); el.addEventListener("mousemove", onMove); el.addEventListener("mouseleave", onLeave); return () => { cancelAnimationFrame(rafRef.current); el.removeEventListener("mousemove", onMove); el.removeEventListener("mouseleave", onLeave); }; }, []); const IMGS = window.RB_IMGS || {}; return (
{/* Floating image cards */}
{/* Dark scrim behind text */}
); } /* ─── export to global scope ─────────────────────────────── */ Object.assign(window, { HeroVideo, HeroAghomi, HeroLuxSplit, HeroTypo, HeroMosaic });