// hero.jsx — Hero section with three variants: before/after slider, constellation, single shot. const { useState, useRef, useEffect, useCallback } = React; // ───────────────────────────────────────────────────────────────────────────── // SplitText — wrap any inline label to get the per-character "slide up + replace // from below" hover animation. CSS handles the transform; this stacks two // copies of each char and adds a per-char transition-delay for the stagger. // The hover trigger is in the *parent* (.cta-pill, .btn, .card-link), not on // SplitText itself. function extractText(node) { if (node == null || typeof node === 'boolean') return ''; if (typeof node === 'string' || typeof node === 'number') return String(node); if (Array.isArray(node)) return node.map(extractText).join(''); if (node.props && node.props.children !== undefined) return extractText(node.props.children); return ''; } function SplitText({ children, stagger = 0.018 }) { const text = extractText(children); const chars = [...text]; return ( {chars.map((c, i) => { const display = c === ' ' ? '\u00A0' : c; return ( ); })} ); } window.SplitText = SplitText; // ───────────────────────────────────────────────────────────────────────────── // Stylized venue illustrations (SVG). Used as fallbacks in before/after. // ───────────────────────────────────────────────────────────────────────────── function EmptyVenueIllustration() { // School cafeteria / theater — empty, fluorescent, folding chairs return ( ); } function DeployedVenueIllustration() { // Same venue — deployed with stage, lighting, signage, kids check-in return ( ); } // ───────────────────────────────────────────────────────────────────────────── // Before/after draggable slider // ───────────────────────────────────────────────────────────────────────────── function BeforeAfterSlider() { const [pos, setPos] = useState(50); const ref = useRef(null); const dragging = useRef(false); const updatePos = useCallback((clientX) => { if (!ref.current) return; const r = ref.current.getBoundingClientRect(); const next = Math.max(2, Math.min(98, ((clientX - r.left) / r.width) * 100)); setPos(next); }, []); useEffect(() => { const move = (e) => { if (!dragging.current) return; const x = e.touches ? e.touches[0].clientX : e.clientX; updatePos(x); }; const up = () => { dragging.current = false; document.body.style.userSelect = ''; }; window.addEventListener('mousemove', move); window.addEventListener('touchmove', move, { passive: true }); window.addEventListener('mouseup', up); window.addEventListener('touchend', up); return () => { window.removeEventListener('mousemove', move); window.removeEventListener('touchmove', move); window.removeEventListener('mouseup', up); window.removeEventListener('touchend', up); }; }, [updatePos]); const startDrag = (e) => { dragging.current = true; document.body.style.userSelect = 'none'; const x = e.touches ? e.touches[0].clientX : e.clientX; updatePos(x); }; return (

BEFORE · 06:42 AM AFTER · 09:00 AM

SAME ROOM · TWO HOURS APART · DRAG TO COMPARE

); } // ───────────────────────────────────────────────────────────────────────────── // Constellation hero variant — squircle orbit // ───────────────────────────────────────────────────────────────────────────── const constellationGradients = [ 'linear-gradient(135deg, #2c2c2c, #555)', 'linear-gradient(140deg, #b8956f, #6d4c2a)', 'linear-gradient(135deg, #4a4a4a, #1a1a1a)', 'linear-gradient(135deg, #c4a484, #8b6f47)', 'linear-gradient(135deg, #5a6f4a, #2d3a26)', 'linear-gradient(135deg, #6b7c8a, #3a4a55)', 'linear-gradient(135deg, #d4c5a9, #8a7a5a)', 'linear-gradient(135deg, #7a3a1a, #fd7b03)', ]; function ConstellationHero() { // Eight thumbs orbiting a center const items = [ { angle: -90, radius: 220, size: 150, rot: -7 }, { angle: -45, radius: 240, size: 140, rot: 5 }, { angle: 0, radius: 260, size: 150, rot: -4 }, { angle: 45, radius: 240, size: 140, rot: 6 }, { angle: 90, radius: 220, size: 150, rot: -5 }, { angle: 135, radius: 240, size: 140, rot: 4 }, { angle: 180, radius: 260, size: 150, rot: -6 }, { angle: 225, radius: 240, size: 140, rot: 7 }, ]; return (

{items.map((it, i) => { const rad = (it.angle * Math.PI) / 180; const cx = 50 + (Math.cos(rad) * it.radius) / 12; const cy = 50 + (Math.sin(rad) * it.radius) / 12; return (

); })}

); } // ───────────────────────────────────────────────────────────────────────────── // Single shot hero variant — atmospheric deployed venue // ───────────────────────────────────────────────────────────────────────────── function SingleHero() { return (

CALVARY FORGE · SUNDAY · 09:00 AM

); } // ───────────────────────────────────────────────────────────────────────────── // Hero shell // ───────────────────────────────────────────────────────────────────────────── function Hero({ variant = 'beforeafter' }) { return (

Arkwright Systems · for the church on the move

For churches with more
vision than building.

Arkwright builds complete systems for portable ministries — design, cases, trailers, equipment, delivery, training — so your team can focus on the people Sunday morning is for.

Build a system → See how it works →

Dragto compare

Loaded in by06:42 AM

Service-ready by09:00 AM

Sunday-ready in4–5 months

{variant === 'beforeafter' && } {variant === 'constellation' && } {variant === 'single' && }

); } Object.assign(window, { Hero });

For churches with more vision than building.

For churches with more
vision than building.