/* shared.jsx — Nav, Footer, palettes, ornaments, CTA, hooks * Julie Janes · GraceLife Coaching * Loaded BEFORE each page's own .jsx file. */ const { useState, useEffect, useMemo, useRef } = React; /* External booking widget */ const BOOKING_URL = "https://api.leadconnectorhq.com/widget/booking/n4fwR1tiSYDvNDPFdLtm"; /* ============================================================ * PALETTES — Sage Studio 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.sageStudio; 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 ( ); } /* ============================================================ * 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 = () => ( GraceLife Coaching Julie Janes gracelife coaching ); return ( ); } /* ============================================================ * Universal CTA block (used at bottom of every page) * ============================================================ */ function CTA({ headline = "You don't have to", headlineItalic = "carry this alone.", eyebrow = "✦ Your next step · free 30-min heart connection call", checklist, }) { const defaultList = [ "Where the childhood wound is still shaping the way you love and react today", "Why knowledge alone hasn't produced the change you're desperate for — and what actually does", "What a grace-led, Holy Spirit-anchored path through the pain looks like for you specifically", "Whether coaching with Julie is the right fit for the season you're in", ]; const list = checklist || defaultList; return (
{eyebrow}

{headline}{" "} {headlineItalic}

Book a free 30-minute heart connection call. We'll talk about where you are, what you've been carrying, and whether GraceLife Coaching is the right next step. No performance required. No scripts. Just two women and the Holy Spirit.

Book a Free Call → Learn More
On the call we'll explore
    {list.map((c, i) => (
  • 0{i + 1} {c}
    • ))}
"If I'm not the right fit, I'll tell you honestly and point you toward someone who is. No pressure. Just grace."
Philippians 4:13 — "I can do all things through Christ who strengthens me."
); } /* ============================================================ * Footer * ============================================================ */ function Footer() { return ( ); } /* ============================================================ * Page-level palette tweaks panel * ============================================================ */ const SHARED_TWEAK_DEFAULTS = { palette: "sageStudio" }; 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, Nav, Footer, CTA, PaletteTweaksPanel, Placeholder, PageHero, SHARED_TWEAK_DEFAULTS, BOOKING_URL, });