// ===== WebAnchor — Plasma components v3 ===== const { useState, useEffect, useRef, useMemo } = React; // --- Inline SVG icon set --- const Icon = { Arr: (p) => , ArrUR: (p) => , Check: (p) => , Plus: (p) => , X: (p) => , Code: (p) => , Cube: (p) => , Layers: (p) => , Spark: (p) => , Pulse: (p) => , Wand: (p) => , Globe: (p) => , Bolt: (p) => , Lock: (p) => , Server: (p) => , Compass: (p) => , Mail: (p) => , Cal: (p) => , Pin: (p) => , GH: (p) => , Tw: (p) => , LI: (p) => , Db: (p) => , }; function Logo({ size = 22 }) { return WebAnchor; } // --- Router --- const ROUTES = [ { path: '/', label: 'Home' }, { path: '/services', label: 'Services' }, { path: '/portfolio', label: 'Portfolio' }, { path: '/pricing', label: 'Pricing' }, { path: '/about', label: 'About' }, { path: '/faq', label: 'FAQ' }, { path: '/contact', label: 'Contact' }, ]; function useRoute() { const get = () => (window.location.hash.replace(/^#/, '') || '/'); const [route, setRoute] = useState(get()); useEffect(() => { const onChange = () => { setRoute(get()); window.scrollTo({ top: 0, behavior: 'instant' }); }; window.addEventListener('hashchange', onChange); return () => window.removeEventListener('hashchange', onChange); }, []); return route; } function Link({ to, children, className = '', style, ...rest }) { const onClick = (e) => { e.preventDefault(); if (window.location.hash !== '#' + to) window.location.hash = to; else window.scrollTo({ top: 0, behavior: 'smooth' }); }; return {children}; } // --- Nav: floating pill, glass blur, gradient CTA --- function Nav() { const route = useRoute(); const [scrolled, setScrolled] = useState(false); const [open, setOpen] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 12); onScroll(); window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); }, []); useEffect(() => { setOpen(false); }, [route]); return ( <> {open && (
{ROUTES.map(r => ( {r.label} ))} Get a quote
)} ); } // --- Section head --- function SectionHead({ eyebrow, title, sub, center = false, action }) { return (
{eyebrow && {eyebrow}}

{title}

{sub &&

{sub}

} {action &&
{action}
}
); } // --- Aurora background helper (subtle iridescent glows) --- function Aurora({ variant = 'default' }) { if (variant === 'hero') { return ( <>
); } if (variant === 'minimal') { return ( <>
); } return null; } // --- Page wrapper --- function Page({ children }) { return
{children}
; } // --- Page intro (for subpages) --- function PageIntro({ eyebrow, title, sub, rightCol }) { return (
{eyebrow}

{title}

{sub &&

{sub}

}
{rightCol &&
{rightCol}
}
); } // --- CTA tail block --- function CtaTail() { return (
Let's talk

Ready to anchor your business online?

A 20-minute call, no charge, no pressure. We'll talk about your project, answer your questions, and see if we're a good fit. No sales pitch — promise.

Get a quote Book a call
); } // --- Footer (water, with a sandy sea floor at the very bottom) --- function Footer() { return ( ); } Object.assign(window, { Icon, Logo, ROUTES, useRoute, Link, Nav, Footer, SectionHead, Aurora, Page, PageIntro, CtaTail, });