// src/sections.jsx — page sections const { useState: useS } = React; // ─── hamburger button ───────────────────────────────────────────────── function Hamburger({ open, onClick, palette }) { const bar = (i) => ({ position: "absolute", left: 12, right: 12, top: "50%", height: 1.5, background: palette.ink, borderRadius: 1, transformOrigin: "center", transition: "transform .3s ease, opacity .25s ease", transform: i === 0 ? open ? "translateY(-50%) rotate(45deg)" : "translateY(calc(-50% - 7px))" : i === 1 ? open ? "translateY(-50%) scaleX(0)" : "translateY(-50%)" : open ? "translateY(-50%) rotate(-45deg)" : "translateY(calc(-50% + 7px))", opacity: i === 1 && open ? 0 : 1, }); return ( ); } // ─── full-screen mobile menu drawer ─────────────────────────────────── function MobileMenu({ open, onClose, palette, fonts }) { const closeBtnRef = React.useRef(null); const lastFocusRef = React.useRef(null); React.useEffect(() => { if (!open) return; lastFocusRef.current = document.activeElement; const prev = document.body.style.overflow; document.body.style.overflow = "hidden"; const onKey = (e) => { if (e.key === "Escape") onClose(); }; window.addEventListener("keydown", onKey); // delay focus until after slide-in begins const t = setTimeout( () => closeBtnRef.current && closeBtnRef.current.focus(), 60, ); return () => { document.body.style.overflow = prev; window.removeEventListener("keydown", onKey); clearTimeout(t); if (lastFocusRef.current && lastFocusRef.current.focus) lastFocusRef.current.focus(); }; }, [open, onClose]); const links = [ { href: "#approach", label: "Approach" }, { href: "#sessions", label: "Sessions" }, { href: "#membership", label: "Membership" }, { href: "#practitioner", label: "Practitioner" }, { href: "#faq", label: "FAQ" }, { href: "#visit", label: "Visit" }, ]; const node = (
{STUDIO.phone} {STUDIO.instagramHandle}
{STUDIO.addressLine1} · {STUDIO.addressLine2}
{STUDIO.addressLine3}
Book a session →
); return ReactDOM.createPortal(node, document.body); } // ─── sticky mobile book bar ─────────────────────────────────────────── function MobileBookBar({ palette }) { const mobile = useMediaQuery("(max-width: 720px)"); if (!mobile) return null; return (
Healing Hub 60 min from $105
Book →
); } // ─── header ─────────────────────────────────────────────────────────── function Header({ palette, fonts }) { const [scrolled, setScrolled] = useS(false); const [menuOpen, setMenuOpen] = useS(false); const mobile = useMediaQuery("(max-width: 720px)"); React.useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 60); window.addEventListener("scroll", onScroll, { passive: true }); onScroll(); return () => window.removeEventListener("scroll", onScroll); }, []); return ( <>
The Healing Hub — Massage & Wellness {!mobile && ( )} {!mobile && ( Book a session → )} {mobile && ( setMenuOpen((o) => !o)} palette={palette} /> )}
{mobile && ( setMenuOpen(false)} palette={palette} fonts={fonts} /> )} ); } // ─── hero ───────────────────────────────────────────────────────────── function Hero({ palette, fonts, motion: _motion }) { // Lock the hero to the visible viewport at mount so the URL-bar collapse // on iOS Safari / Firefox Android doesn't grow the section as the user // scrolls. Re-measure only on orientation change. const [minH, setMinH] = useS(null); React.useEffect(() => { const measure = () => { const h = window.innerHeight; if (h > 0) setMinH(h); }; measure(); const onOrient = () => setTimeout(measure, 250); window.addEventListener("orientationchange", onOrient); return () => window.removeEventListener("orientationchange", onOrient); }, []); return (
Welcome to

The Healing Hub

Rest is where healing begins.

A grounded space for therapeutic massage, nervous system support, and intentional bodywork designed to help you slow down, release tension, and reconnect with your body.



Here, care is unhurried and deeply intentional—an invitation to return to your sacred well, and in doing so, return to yourself.

Book a Session Join the Slow Down Club
Studio image placeholder
); } // ─── approach / philosophy ──────────────────────────────────────────── function Approach({ palette, fonts }) { const items = [ { n: "01", h: "Slow descent", p: "We begin where you actually are: wired, depleted, somewhere in between. The first ten minutes are about letting the room hold you.", }, { n: "02", h: "Therapeutic depth", p: "Real bodywork on tissue and fascia, including the places that have been gripping for weeks. The pace is slow enough that your body can actually drop into it instead of bracing against it.", }, { n: "03", h: "Ritual elements", p: "Hot towels, aromatherapy, optional sound and intuitive cards. There's more to a body than tissue, and the work is built that way.", }, { n: "04", h: "Carry it home", p: "You leave with the well a little fuller. The work compounds; monthly visits keep the level up.", }, ]; return (

The body is a vessel. Most arrive carrying it{" "} nearly empty .

{items.map((b) => (
{b.n}

{b.h}

{b.p}

))}
); } // ─── sessions ───────────────────────────────────────────────────────── function SessionCard({ s, palette, fonts, motion, signature }) { return (

{s.name}

${s.price}
· {s.duration}

{s.blurb}

{s.includes && (
    {s.includes.map((i) => (
  • · {i}
    • ))}
)} {s.id === "extended" ? (
Add to session when booking
) : ( Reserve → )}
); } function Sessions({ palette, fonts, motion }) { const featured = SIGNATURE.find( (s) => s.id === "75-minute-signature-massage", ); const supporting = SIGNATURE.filter( (s) => s.id !== "75-minute-signature-massage", ); return (

Signature
sessions

{featured && (
)}
{supporting.map((s) => ( ))}
); } // ─── enhancements ───────────────────────────────────────────────────── function Enhancements({ palette, fonts }) { const mobile = useMediaQuery("(max-width: 720px)"); if (mobile) { return (

Enhancements

Each ritual is $25 and woven directly into your session. Layer freely — add to any massage service.

{ENHANCEMENTS.map((e, i) => (
0{i + 1}
+${e.price}

{e.name}

{e.detail}

))}
); } return (

Enhancements

Each ritual is $25 and woven directly into your session. Layer freely — add to any massage service.

{ENHANCEMENTS.map((e, i) => (
0{i + 1}

{e.name}

{e.detail}

+${e.price}
))}
); } // ─── membership ─────────────────────────────────────────────────────── function Membership({ palette, fonts, motion: _motion }) { return (

The Slow Down
Club

{[0, 1, 2, 3, 4, 5, 6].map((i) => ( ))}

A rhythm of
consistent {" "} care.

Membership is designed to support consistency of care, restoration, and ongoing wellness through intentional therapeutic bodywork

Begin membership →
    {MEMBERSHIP.bullets.map((b, i) => (
  • 0{i + 1} {b}
    • ))}
); } // ─── practitioner ───────────────────────────────────────────────────── function Practitioner({ palette, fonts }) { return (
Nicole Farrell, licensed massage therapist

{PRACTITIONER.name}

{PRACTITIONER.title}

{PRACTITIONER.body}

    {PRACTITIONER.credentials.map((c) => (
  • {c}
    • ))}
); } // ─── testimonials ───────────────────────────────────────────────────── function Testimonials({ palette, fonts }) { const mobile = useMediaQuery("(max-width: 720px)"); const scrollerRef = React.useRef(null); const [active, setActive] = useS(0); React.useEffect(() => { if (!mobile) return; const root = scrollerRef.current; if (!root) return; const cards = Array.from(root.querySelectorAll("[data-card]")); const io = new IntersectionObserver( (entries) => { let best = { ratio: 0, idx: active }; entries.forEach((en) => { if (en.intersectionRatio > best.ratio) { best = { ratio: en.intersectionRatio, idx: Number(en.target.dataset.idx), }; } }); if (best.ratio > 0.5) setActive(best.idx); }, { root, threshold: [0, 0.25, 0.5, 0.75, 1] }, ); cards.forEach((c) => io.observe(c)); return () => io.disconnect(); // eslint-disable-next-line react-hooks/exhaustive-deps }, [mobile]); if (mobile) { return (
{TESTIMONIALS.map((t, i) => (
"{t.quote}"
{t.who}
{t.role}
))}
{TESTIMONIALS.map((_, i) => ( ))}
); } return (
{TESTIMONIALS.map((t, i) => (
"{t.quote}"
{t.who}
{t.role}
))}
); } // ─── FAQ ────────────────────────────────────────────────────────────── function FaqItem({ q, a, palette, fonts, idx }) { const [open, setOpen] = useS(idx === 0); return (
{a}
); } function Faq({ palette, fonts }) { return (
{/* flex-wrap preserves the heading-vs-list ratio on wide and stacks on narrow */}

Before you
arrive .

{FAQ.map((f, i) => ( ))}
); } // ─── visit / contact ────────────────────────────────────────────────── function Visit({ palette, fonts, motion: _motion }) { const mobile = useMediaQuery("(max-width: 720px)"); return (

Visit the
studio .

{mobile ? (
{/* Address */}
· address ·

{STUDIO.addressLine1}
{STUDIO.addressLine2}
{STUDIO.addressLine3}

Open in maps →
{/* Contact */}
· reach out ·
{/* Hours */}
· hours ·
    {HOURS.map((h) => (
  • {h.day} {h.time}
    • ))}
) : (
· address ·

{STUDIO.addressLine1}
{STUDIO.addressLine2}
{STUDIO.addressLine3}

Open in maps →
· hours ·
    {HOURS.map((h) => (
  • {h.day} {h.time}
    • ))}
· reach out ·
)} {/* footer row */}
© Healing Hub · all rights, all rest
well full · 100% restored
); } // ─── sand-toned section wrap (alternates bg under mono palette) ─────── function SandWrap({ palette, alt, children }) { if (alt === palette) return <>{children}; return (
{children}
); } Object.assign(window, { Header, Hero, Approach, Sessions, Enhancements, Membership, Practitioner, Testimonials, Faq, Visit, SandWrap, Hamburger, MobileMenu, MobileBookBar, });