// Shared layout: top nav + footer + router // Global scope: no exports, attaches to window. const { useState, useEffect, useRef, useMemo, useCallback } = React; // ---- Simple hash router ---- function useRoute() { const [route, setRoute] = useState(() => (location.hash.replace(/^#\/?/, '') || 'home')); useEffect(() => { const onRouteChange = () => { const r = location.hash.replace(/^#\/?/, '') || 'home'; setRoute(r); window.scrollTo({ top: 0, behavior: 'instant' }); }; window.addEventListener('hashchange', onRouteChange); window.addEventListener('popstate', onRouteChange); return () => { window.removeEventListener('hashchange', onRouteChange); window.removeEventListener('popstate', onRouteChange); }; }, []); return [route, (r) => { if (r === 'home') { history.pushState(null, '', location.pathname + location.search); setRoute('home'); window.scrollTo({ top: 0, behavior: 'instant' }); return; } location.hash = '#/' + r; }]; } // ---- Logo ---- function Logo({ inverse = false }) { return (
Synchronize
); } // ---- Nav ---- function Nav({ route, go }) { const [mobileOpen, setMobileOpen] = useState(false); const links = [ { id: 'home', label: 'Home' }, { id: 'how-it-works', label: 'How it works' }, { id: 'pricing', label: 'Pricing' }, ]; const productActive = route === 'product' || route.startsWith('product-'); useEffect(() => setMobileOpen(false), [route]); useEffect(() => { if (!mobileOpen) return undefined; const closeOnEscape = (event) => { if (event.key === 'Escape') setMobileOpen(false); }; window.addEventListener('keydown', closeOnEscape); return () => window.removeEventListener('keydown', closeOnEscape); }, [mobileOpen]); const mobileGo = (event, destination) => { event.preventDefault(); setMobileOpen(false); go(destination); }; const mobileLinkClass = (destination) => ( 'mobile-nav-link' + (route === destination ? ' active' : '') ); return (
{ e.preventDefault(); setMobileOpen(false); go('home'); }} className="nav-logo">
{ e.preventDefault(); go('home'); }} className={'nav-link' + (route === 'home' ? ' active' : '')}>Home
{ e.preventDefault(); go('product'); }} className={'nav-link nav-product-trigger' + (productActive ? ' active' : '')} aria-haspopup="true"> Product
{ e.preventDefault(); go('product-circle'); }}> Synchronize for CircleDeep Circle integration { e.preventDefault(); go('product-slack'); }}> Synchronize for SlackA complete community layer { e.preventDefault(); go('product-core'); }}> Synchronize CorePlatform + managed migration { e.preventDefault(); go('product'); }}> Compare all products
{links.slice(1).map(l => ( { e.preventDefault(); go(l.id); }} className={'nav-link' + (route === l.id ? ' active' : '')}> {l.label} ))}
Log in { e.preventDefault(); go('get-started'); }} className="btn btn-primary btn-sm"> Book a demo
); } // ---- Footer ---- function Footer({ go }) { const footerLink = (route, label) => ( {e.preventDefault();go(route);}}>{label} ); return ( ); } // ---- Reveal on scroll hook ---- function useReveal() { const reducedMotion = useReducedMotion(); useEffect(() => { const els = document.querySelectorAll('.reveal:not(.in)'); if (reducedMotion || !('IntersectionObserver' in window)) { els.forEach(el => el.classList.add('in')); return; } const io = new IntersectionObserver((entries) => { entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } }); }, { threshold: 0.12 }); els.forEach(el => io.observe(el)); return () => io.disconnect(); }, [reducedMotion]); } // ---- Motion preference hook ---- function useReducedMotion() { const [reducedMotion, setReducedMotion] = useState(() => ( typeof window !== 'undefined' && window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)').matches : false )); useEffect(() => { if (!window.matchMedia) return undefined; const query = window.matchMedia('(prefers-reduced-motion: reduce)'); const update = event => setReducedMotion(event.matches); setReducedMotion(query.matches); if (query.addEventListener) query.addEventListener('change', update); else query.addListener(update); return () => { if (query.removeEventListener) query.removeEventListener('change', update); else query.removeListener(update); }; }, []); return reducedMotion; } // ---- Scroll-y hook ---- function useScrollY() { const [y, setY] = useState(0); useEffect(() => { const on = () => setY(window.scrollY); window.addEventListener('scroll', on, { passive: true }); return () => window.removeEventListener('scroll', on); }, []); return y; } Object.assign(window, { Logo, Nav, Footer, useRoute, useReveal, useReducedMotion, useScrollY });