// Footer.jsx — shared footer mounted across every BlueMoso page (homepage, // ICP pages, legal pages, apply page, etc.). One source of truth. // // Layout: 5 columns (Brand · Who we serve · Services · Company · Resources) // followed by a "Browse every virtual assistant page" CTA strip, then the // copyright line. Featured ICP/service links are curated by hand here. Long // tail lives on the hubs: who-we-serve.html, services.html, virtual-assistants.html. const footStyles = { wrap: { background: 'var(--ink)', color: 'var(--paper)', padding: '72px 32px 40px' }, inner: { maxWidth: 1280, margin: '0 auto' }, // Pre-footer CTA band — sits above the dark footer on every page. Mirrors // the Hero's primary CTA so the page bookends on the same promise. // Single closing moment. One confident bookend carries the whole close // (the old light "Get your time back" card was removed so the page doesn't // end on two near-identical CTAs). White ground with a whisper of blue so // it reads as a deliberate finale, then steps into the dark footer. preWrap: { background: 'var(--paper)', borderTop: '1px solid var(--line-soft)', padding: '104px 32px', backgroundImage: 'radial-gradient(80% 120% at 50% 0%, rgba(8,120,216,0.05) 0%, transparent 62%)', }, preInner: { maxWidth: 1080, margin: '0 auto', textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 22, }, preEyebrow: { fontFamily: "'JetBrains Mono', ui-monospace, monospace", fontSize: 12, fontWeight: 500, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--blue)', display: 'inline-flex', alignItems: 'center', gap: 10, }, preEyebrowDot: { width: 6, height: 6, borderRadius: 999, background: 'var(--coral)' }, preH2: { fontFamily: "'Outfit', system-ui, sans-serif", fontSize: 'clamp(36px, 5vw, 56px)', lineHeight: 1.05, letterSpacing: '-0.025em', fontWeight: 600, color: 'var(--ink)', margin: 0, maxWidth: 760, textWrap: 'balance', }, preH2Accent: { color: 'var(--blue)' }, preSub: { fontFamily: "'Inter', system-ui, sans-serif", fontSize: 17, lineHeight: 1.55, color: 'var(--ink-muted)', maxWidth: 520, margin: 0, textWrap: 'pretty', }, preBtn: { background: 'var(--ink)', color: 'var(--paper)', padding: '14px 14px 14px 28px', borderRadius: 999, fontSize: 16, fontWeight: 600, letterSpacing: '-0.005em', display: 'inline-flex', alignItems: 'center', gap: 14, transition: 'background .2s, transform .15s', textDecoration: 'none', marginTop: 10, boxShadow: '0 10px 24px rgba(22,27,61,0.16), 0 2px 4px rgba(22,27,61,0.08)', }, preBtnArrow: { width: 36, height: 36, borderRadius: '50%', background: 'var(--coral)', color: '#fff', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, transition: 'transform .18s', }, top: { display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr 1fr', gap: 40, paddingBottom: 36 }, brandLine: { display: 'flex', alignItems: 'center', gap: 10, marginBottom: 20 }, logoText: { fontSize: 18, fontWeight: 600, letterSpacing: '-0.02em' }, tagline: { fontFamily: "'Outfit', system-ui, sans-serif", fontSize: 22, lineHeight: 1.35, letterSpacing: '-0.01em', marginBottom: 20, maxWidth: 380, color: 'rgba(247,245,240,0.96)' }, tagItalic: { color: 'var(--blue-mid)' }, small: { fontSize: 13, color: 'rgba(247,245,240,0.92)', lineHeight: 1.55, maxWidth: 320 }, colTitle: { fontSize: 12, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--blue-mid)', marginBottom: 18, fontWeight: 500 }, list: { listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }, link: { fontSize: 14, color: 'rgba(247,245,240,0.96)', transition: 'color .15s' }, browseAllRow: { paddingTop: 28, paddingBottom: 28, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 14, flexWrap: 'wrap', textAlign: 'center', }, browseAllText: { fontSize: 14, color: 'rgba(247,245,240,0.9)' }, browseAllLink: { fontSize: 14, color: 'var(--blue-mid)', fontWeight: 500, display: 'inline-flex', alignItems: 'center', gap: 6 }, bottom: { paddingTop: 28, display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 16, fontSize: 12, color: 'rgba(247,245,240,0.9)' }, }; function Footer({ baseHref = '', preCta = {} }) { const resolve = (href) => (baseHref && href.startsWith('#')) ? baseHref + href : href; // Pre-footer CTA copy is prop-driven so individual pages (e.g. the // AI-or-Human Worksheet lead magnet) can close the loop on their own // topic instead of repeating the homepage promise. Defaults match the // site-wide copy, so every other page is unchanged. const cta = { eyebrow: 'Ready when you are', headLead: 'Delegate the work.', headAccent: 'Take back your time now.', sub: "Book a 30-minute call. We'll talk through what could come off your plate, and what your days look like once it does.", button: 'Take back your time now', source: 'footer_pre_cta', ...preCta, }; // Pre-footer CTA uses data-booking-modal-trigger so the global BookingModal // delegated handler catches the click and pops the modal — same behavior // on every page. href is just a fallback for the no-JS case. const renderLink = (l) => (
  • {l.label}
    • ); return ( <> {/* Pre-footer CTA band — bookends the page with the Hero's promise. */}
    {cta.eyebrow}

    {cta.headLead} {cta.headAccent}

    {cta.sub}

    { e.currentTarget.style.background = 'var(--blue)'; e.currentTarget.style.transform = 'translateY(-1px)'; const a = e.currentTarget.querySelector('[data-pre-arrow]'); if (a) a.style.transform = 'translateX(2px)'; }} onMouseLeave={e => { e.currentTarget.style.background = 'var(--ink)'; e.currentTarget.style.transform = 'translateY(0)'; const a = e.currentTarget.querySelector('[data-pre-arrow]'); if (a) a.style.transform = 'translateX(0)'; }}> {cta.button}
    {/* Footer link hover — applies to ALL footer links so they read uniformly as clickable. Underline on hover for every column link (Who we serve, Services, Company, Resources) including the accent "See all services" and "See everyone we serve" links and the browse-all CTA strip. Regular links also brighten to full white; accent links keep their blue. Spec'd here (vs. inline) because :hover can't be expressed in React inline styles. */} ); } Object.assign(window, { Footer });