/* Shared components: Nav, Footer, Logo, Reveal hook, etc. */ const { useState, useEffect, useRef, useMemo } = React; /* ---------- Logo: realistic banyan tree illustration ---------- A naturalistic banyan with detailed foliage clumps, multiple trunk system, visible aerial roots, and ground shadow. Painted feel, not iconographic. */ function BanyanMark({ size = 28, color = "currentColor", accent = "var(--moss-400)" }) { // We accept color/accent for theming but use rich gradients for realism. const id = React.useMemo(() => 'bm-' + Math.random().toString(36).slice(2, 8), []); return ( ); } /* ---------- Wordmark: serif "Banyan" + caps tracking subtitle ---------- */ function BanyanWordmark({ size = 22, subtitle = true }) { return ( Banyan {subtitle && ( Consulting )} ); } /* ---------- Navigation ---------- */ function Nav({ active = "home" }) { const [scrolled, setScrolled] = useState(false); const [open, setOpen] = useState(false); const [theme, setTheme] = useState(() => { if (typeof document === 'undefined') return 'light'; return document.documentElement.getAttribute('data-theme') || 'light'; }); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 8); onScroll(); window.addEventListener('scroll', onScroll); return () => window.removeEventListener('scroll', onScroll); }, []); useEffect(() => { document.body.classList.toggle('nav-open', open); return () => document.body.classList.remove('nav-open'); }, [open]); useEffect(() => { const onResize = () => { if (window.innerWidth > 880) setOpen(false); }; window.addEventListener('resize', onResize); return () => window.removeEventListener('resize', onResize); }, []); const toggleTheme = () => { const next = theme === 'dark' ? 'light' : 'dark'; setTheme(next); document.documentElement.setAttribute('data-theme', next); try { localStorage.setItem('banyan-theme', next); } catch(e){} }; const items = [ { id: 'services', label: 'Services', href: 'services.html' }, { id: 'industries', label: 'Industries', href: 'industries.html' }, { id: 'pricing', label: 'Pricing', href: 'pricing.html' }, { id: 'about', label: 'About', href: 'about.html' }, { id: 'contact', label: 'Contact', href: 'contact.html' }, ]; const ThemeBtn = ( ); return ( ); } /* ---------- Footer ---------- */ function Footer() { return ( ); } const badgeStyle = { fontFamily: 'var(--mono)', fontSize: 12, textTransform: 'uppercase', letterSpacing: '0.08em', padding: '6px 10px', border: '1px solid var(--glass-line)', borderRadius: 999, color: 'var(--bone-300)', }; /* ---------- Reveal-on-scroll wrapper ---------- */ function Reveal({ children, delay = 0, className = "" }) { const ref = useRef(null); const [vis, setVis] = useState(false); useEffect(() => { const el = ref.current; if (!el) return; const io = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setTimeout(() => setVis(true), delay); io.disconnect(); } }, { threshold: 0.12 }); io.observe(el); return () => io.disconnect(); }, [delay]); return (

{children}

); } /* ---------- Tweaks defaults ---------- */ const BANYAN_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "accent": "moss", "heroVariant": "ai-pulse", "showBadges": true }/*EDITMODE-END*/; /* Apply accent live by overriding CSS variables. For the default "moss"/"plum" preset we CLEAR any inline overrides instead of writing them, so the theme-aware CSS rules ([data-theme="light"] / [dark]) take effect — light theme uses deep plum, dark uses light mauve. */ function applyAccent(name) { const root = document.documentElement; const overrideKeys = ['--moss-300', '--moss-400', '--moss-500', '--moss-700']; if (name === 'moss' || name === 'plum' || !name) { // Default — let CSS theme tokens win. Strip any previously-set inline overrides. overrideKeys.forEach(k => root.style.removeProperty(k)); return; } const presets = { copper: { '--moss-300': '#E0B68A', '--moss-400': '#C89B6B', '--moss-500': '#A47B4D', '--moss-700': '#3F2D1E' }, sky: { '--moss-300': '#7DD3FC', '--moss-400': '#38BDF8', '--moss-500': '#0EA5E9', '--moss-700': '#0C4A6E' }, bone: { '--moss-300': '#F5F1EA', '--moss-400': '#E8E2D6', '--moss-500': '#B8B2A6', '--moss-700': '#2A2620' }, }; const p = presets[name]; if (!p) { overrideKeys.forEach(k => root.style.removeProperty(k)); return; } Object.entries(p).forEach(([k, v]) => root.style.setProperty(k, v)); } /* expose globally */ /* ---------- Odoo wordmark (inlined so "doo" inherits text color via currentColor) ---------- */ function OdooLogo() { return ( ); } /* ---------- Final CTA (used on home, services, industries, about, pricing) ---------- */ function CTAFinal() { return (

Let's make implementation the easy part.

Free diagnostic →

); } /* ---------- Sticky mobile CTA bar ---------- */ function StickyCTA({ label = "Free 45-min diagnostic", sub = "Florida-based · No commitment", cta = "Book", href = "contact.html" }) { return ( ); } Object.assign(window, { BanyanMark, BanyanWordmark, OdooLogo, CTAFinal, Nav, Footer, Reveal, BANYAN_TWEAK_DEFAULTS, applyAccent, StickyCTA });