// Header / Footer / shared UI bits const ROUTES = [ { id: 'home', label: 'Home', path: '#/' }, { id: 'about', label: 'About', path: '#/about' }, { id: 'business', label: 'Our Business', path: '#/business' }, { id: 'contact', label: 'Contact', path: '#/contact' }, ]; // tiny inline icons const ArrowRight = (props) => ( ); const ExternalIcon = (props) => ( ); function go(path) { window.location.hash = path; } function navigateTo(e, path) { e.preventDefault(); go(path); window.scrollTo({ top: 0, behavior: 'instant' in window ? 'instant' : 'auto' }); } function useRoute() { const [route, setRoute] = useState(() => parseHash(window.location.hash)); useEffect(() => { const onHash = () => setRoute(parseHash(window.location.hash)); window.addEventListener('hashchange', onHash); return () => window.removeEventListener('hashchange', onHash); }, []); return route; } function parseHash(h) { // '#/' -> { page: 'home' } // '#/about' -> { page: 'about' } // '#/business' -> { page: 'business' } // '#/business/consumer' -> { page: 'business', sub: 'consumer' } // '#/contact' -> { page: 'contact' } if (!h || h === '#' || h === '#/' || h === '') return { page: 'home' }; const path = h.replace(/^#\//, '').split('/').filter(Boolean); return { page: path[0] || 'home', sub: path[1] || null }; } function Header() { const route = useRoute(); const [scrolled, setScrolled] = useState(false); const [open, setOpen] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 8); onScroll(); window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); }, []); // Close mobile menu on route change useEffect(() => { setOpen(false); }, [route.page, route.sub]); // Lock body scroll when menu open useEffect(() => { document.body.style.overflow = open ? 'hidden' : ''; return () => { document.body.style.overflow = ''; }; }, [open]); const handleNav = (e, path) => { setOpen(false); navigateTo(e, path); }; return (
{/* Mobile menu — rendered OUTSIDE the header so its position:fixed isn't trapped by the header's backdrop-filter containing block. */}
{ROUTES.map((r) => ( ))} setOpen(false)}> Shop
); } function Logo() { // small horizontal logo (mark + wordmark) — using the official SVG paths inline return ( ); } function Footer() { return ( ); } // Closing line block, used at the end of several pages function ClosingLine({ inverse = false }) { return (

As it is. As it should be.

); } // Energetic scrolling band — used between sections as a rhythm break. // Pass `items` as [{text, tone}] where tone is 'azure'|'orange'|'moss'|'gray'|undefined. function Ticker({ items, inverse = false }) { // Duplicate the list to enable seamless infinite loop const loop = [...items, ...items]; return ( ); } // Animated element glyphs — small SVG illustrations representing each // of the four elements. Used inside the splash so each label is "alive" // instead of plain text. const ElementGlyph = ({ kind }) => { if (kind === 'air') { return ( ); } if (kind === 'sun') { return ( ); } if (kind === 'water') { return ( ); } if (kind === 'earth') { return ( {/* horizon line */} {/* mountain peaks rising */} ); } return null; }; // The four petals of the brand mark assemble into the pinwheel, // "ASWE" + tagline fade in, then the whole splash fades out and // the site is revealed underneath. function SplashScreen({ onComplete }) { const [phase, setPhase] = useState('intro'); // intro → spin → out const [hidden, setHidden] = useState(false); useEffect(() => { // Timeline (purely visual — no text): // 0.0 – 1.3s intro — petals draw in, progress dots fill in sequence // 1.3 – 2.8s spin — pinwheel rotates, ring sweeps around it // 2.8 – 3.4s out — splash scales + fades, boot-splash dismissed const t1 = setTimeout(() => setPhase('spin'), 1300); const t2 = setTimeout(() => setPhase('out'), 2800); const t3 = setTimeout(() => { const boot = document.getElementById('boot-splash'); if (boot) { boot.classList.add('is-hidden'); setTimeout(() => boot.remove(), 600); } document.documentElement.classList.remove('is-booting'); document.body.classList.remove('is-booting'); setHidden(true); onComplete && onComplete(); }, 3400); // Lock scroll robustly while splash is up (iOS rubber-band safe) const prevHtmlOverflow = document.documentElement.style.overflow; const prevBodyOverflow = document.body.style.overflow; const prevHtmlTouch = document.documentElement.style.touchAction; const prevScrollY = window.scrollY; document.documentElement.style.overflow = 'hidden'; document.body.style.overflow = 'hidden'; document.documentElement.style.touchAction = 'none'; document.body.style.position = 'fixed'; document.body.style.top = `-${prevScrollY}px`; document.body.style.left = '0'; document.body.style.right = '0'; document.body.style.width = '100%'; return () => { [t1, t2, t3].forEach(clearTimeout); document.documentElement.style.overflow = prevHtmlOverflow; document.body.style.overflow = prevBodyOverflow; document.documentElement.style.touchAction = prevHtmlTouch; document.body.style.position = ''; document.body.style.top = ''; document.body.style.left = ''; document.body.style.right = ''; document.body.style.width = ''; window.scrollTo(0, prevScrollY); }; }, []); if (hidden) return null; return (