/* shared.jsx — Nav, Footer, palettes, ornaments, CTA, hooks * Denice DeVries · Restoring Paths * Loaded BEFORE each page's own .jsx file. */ const { useState, useEffect, useMemo, useRef } = React; /* External booking widget — Denice's GHL booking link */ const BOOKING_URL = "https://api.leadconnectorhq.com/widget/booking/QbJixbmCX6av4DVi7Dp4"; /* ============================================================ * PALETTES — Slate is default * ============================================================ */ const PALETTES = { slate: { name: "Slate", swatches: ["#EEF1F5", "#1F2937", "#5B7A95", "#6B7F94"], vars: { "--cream": "#EEF1F5", "--cream-2": "#E2E7ED", "--cream-3": "#D2DAE3", "--walnut": "#1F2937", "--walnut-soft": "#475569", "--terracotta": "#5B7A95", "--terracotta-deep": "#46637D", "--sage": "#6B7F94", "--sage-soft": "#94A4B7", "--ink": "#0F172A", "--rule": "rgba(31, 41, 55, 0.18)", "--rule-strong": "rgba(31, 41, 55, 0.32)", }, }, slateMidnight: { name: "Slate Midnight", swatches: ["#E8ECF1", "#0F172A", "#475A75", "#5C6F87"], vars: { "--cream": "#E8ECF1", "--cream-2": "#DCE2EA", "--cream-3": "#C8D1DD", "--walnut": "#0F172A", "--walnut-soft": "#334155", "--terracotta": "#475A75", "--terracotta-deep": "#34465E", "--sage": "#5C6F87", "--sage-soft": "#8694A7", "--ink": "#070C16", "--rule": "rgba(15, 23, 42, 0.18)", "--rule-strong": "rgba(15, 23, 42, 0.32)", }, }, warmDevotional: { name: "Warm Devotional", swatches: ["#F5EFE6", "#3D2E1F", "#A66B3F", "#7A8B6F"], vars: { "--cream": "#F5EFE6", "--cream-2": "#EFE7D8", "--cream-3": "#E8DDC8", "--walnut": "#3D2E1F", "--walnut-soft": "#5A4838", "--terracotta": "#A66B3F", "--terracotta-deep": "#8C552F", "--sage": "#7A8B6F", "--sage-soft": "#9DA992", "--ink": "#2A1F14", "--rule": "rgba(61, 46, 31, 0.18)", "--rule-strong": "rgba(61, 46, 31, 0.32)", }, }, desertBloom: { name: "Desert Bloom", swatches: ["#F8F4ED", "#2C2825", "#B85C3D", "#D4A574"], vars: { "--cream": "#F8F4ED", "--cream-2": "#F0E8D8", "--cream-3": "#E5D6BE", "--walnut": "#2C2825", "--walnut-soft": "#4A4239", "--terracotta": "#B85C3D", "--terracotta-deep": "#9B4A2E", "--sage": "#7E8B6E", "--sage-soft": "#A0AB91", "--ink": "#1F1B17", "--rule": "rgba(44, 40, 37, 0.18)", "--rule-strong": "rgba(44, 40, 37, 0.32)", }, }, oliveAndIvory: { name: "Olive & Ivory", swatches: ["#EFE8DC", "#3A2E26", "#9B5D3F", "#7B7A4F"], vars: { "--cream": "#EFE8DC", "--cream-2": "#E5DCC8", "--cream-3": "#D8CCB2", "--walnut": "#3A2E26", "--walnut-soft": "#564539", "--terracotta": "#9B5D3F", "--terracotta-deep": "#80482D", "--sage": "#7B7A4F", "--sage-soft": "#9C9B72", "--ink": "#221B14", "--rule": "rgba(58, 46, 38, 0.20)", "--rule-strong": "rgba(58, 46, 38, 0.34)", }, }, morningChapel: { name: "Morning Chapel", swatches: ["#FAF6F0", "#1F1A14", "#C19A6B", "#6B5B47"], vars: { "--cream": "#FAF6F0", "--cream-2": "#F2EBDD", "--cream-3": "#E8DDC4", "--walnut": "#1F1A14", "--walnut-soft": "#3A322A", "--terracotta": "#C19A6B", "--terracotta-deep": "#A37E51", "--sage": "#6B5B47", "--sage-soft": "#8C7A66", "--ink": "#1A1510", "--rule": "rgba(31, 26, 20, 0.16)", "--rule-strong": "rgba(31, 26, 20, 0.30)", }, }, sageStudio: { name: "Sage Studio", swatches: ["#EFF1E8", "#2E3A29", "#6B8E5A", "#8FA67D"], vars: { "--cream": "#EFF1E8", "--cream-2": "#E2E7D6", "--cream-3": "#D2DAC0", "--walnut": "#2E3A29", "--walnut-soft": "#46554A", "--terracotta": "#6B8E5A", "--terracotta-deep": "#547047", "--sage": "#8FA67D", "--sage-soft": "#B0C09D", "--ink": "#1F2818", "--rule": "rgba(46, 58, 41, 0.18)", "--rule-strong": "rgba(46, 58, 41, 0.32)", }, }, }; function applyPalette(key) { const pal = PALETTES[key] || PALETTES.slate; const root = document.documentElement; Object.entries(pal.vars).forEach(([k, v]) => root.style.setProperty(k, v)); } /* ============================================================ * Ornaments * ============================================================ */ function CrossMark({ size = 14, color = "currentColor" }) { return ( ); } function DiamondMark({ size = 10, color = "currentColor" }) { return ( ); } function CircleMark({ size = 10, color = "currentColor", filled = true }) { return ( ); } /* PathMark — the Restoring Paths logo mark: a winding path toward the light * of His presence. SVG placeholder until Denice provides a real logo file. */ function PathMark({ size = 40, color = "var(--terracotta)", path = "var(--walnut)" }) { return ( ); } /* ============================================================ * Nav * ============================================================ */ function Nav({ current = "" }) { const [scrolled, setScrolled] = useState(false); const [mobileOpen, setMobileOpen] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 24); window.addEventListener("scroll", onScroll); return () => window.removeEventListener("scroll", onScroll); }, []); useEffect(() => { const prev = document.body.style.overflow; document.body.style.overflow = mobileOpen ? "hidden" : prev || ""; return () => { document.body.style.overflow = prev || ""; }; }, [mobileOpen]); const links = [ { label: "About", href: "about.html", key: "about" }, { label: "Work With Me", href: "work-with-me.html", key: "work" }, { label: "Stories", href: "testimonials.html", key: "stories" }, { label: "FAQ", href: "faq.html", key: "faq" }, { label: "Contact", href: "contact.html", key: "contact" }, ]; const Logo = () => ( Denice DeVries restoring paths ); return ( ); } /* ============================================================ * Universal CTA block (used at bottom of every page) * ============================================================ */ function CTA({ headline = "You don't have to walk", headlineItalic = "this road alone.", eyebrow = "✦ Your next step · free 30-min getting-acquainted call", checklist, }) { const defaultList = [ "Where you actually are — grief, disappointment, or a season you can't name yet", "What seeking His presence could look like in your real, daily life", "One or two simple first practices to reground yourself in truth", "Whether Restoring Paths coaching is the right fit for this season", ]; const list = checklist || defaultList; return (
{eyebrow}

{headline}{" "} {headlineItalic}

Book a free 30-minute getting-acquainted call. We'll visit for a bit, you'll share as much or as little as you want, and together we'll see whether coaching is the right next step. No pressure. No script. Just an honest conversation and the God who restores.

Book a Free Call → Send a Note First
On the call we'll explore
    {list.map((c, i) => (
  • 0{i + 1} {c}
    • ))}
"Answers can be discovered by sincerely seeking God — He wants to be found. Let's reveal His path together. And if I'm not the right coach for you, I'll say so kindly and help you find your next step."
2 Chronicles 20:15 — "Do not be afraid and do not be dismayed… for the battle is not yours but God's."
); } /* ============================================================ * Footer * ============================================================ */ function Footer() { return ( ); } /* ============================================================ * Page-level palette tweaks panel * ============================================================ */ const SHARED_TWEAK_DEFAULTS = { palette: "slate" }; function PaletteTweaksPanel() { const [tweaks, setTweak] = useTweaks(SHARED_TWEAK_DEFAULTS); useEffect(() => { applyPalette(tweaks.palette); }, [tweaks.palette]); return (
{Object.entries(PALETTES).map(([key, p]) => ( ))}
); } /* ============================================================ * Stripe placeholder (used when photos aren't provided) * ============================================================ */ function Placeholder({ label = "image", style = {}, src, alt, objectPosition, ...rest }) { if (src) { const { aspectRatio, width, height, borderRadius, position, inset, top, left, right, bottom, marginTop, ...frameRest } = style || {}; const frameStyle = { position: position || (inset !== undefined || top !== undefined ? "absolute" : "relative"), inset, top, left, right, bottom, width: width ?? (inset !== undefined ? undefined : "100%"), height, aspectRatio, borderRadius, marginTop, overflow: "hidden", background: "var(--cream-2)", ...frameRest, }; return (
{alt
); } return (
); } /* ============================================================ * Inner page hero — reusable * ============================================================ */ function PageHero({ eyebrow, title, italic, subtitle, verse, verseRef }) { return (
{eyebrow}

{title}{" "} {italic && ( {italic} )}

{subtitle && (

{subtitle}

)} {verse && (
{verseRef}

"{verse}"

)}
); } // Export to window so per-page Babel scripts can use these. Object.assign(window, { PALETTES, applyPalette, CrossMark, DiamondMark, CircleMark, PathMark, Nav, Footer, CTA, PaletteTweaksPanel, Placeholder, PageHero, SHARED_TWEAK_DEFAULTS, BOOKING_URL, });