// ───────────────────────────────────────────────────────────────────── // Shared scaffolding for the four Company pages, all routed under // /company// : // /company/about-us/ // /company/our-approach/ // /company/global-workforce/ // /company/security-and-compliance/ // // Exposes on window: // - CompanyHero : the dark-green motion-blur hero, parameterised // by H1 / subhead / hero intro / hero photo / the // active route id for the pill bar in the eyebrow // slot. // - CompanyRoutes : the horizontal pill bar that sits in the hero's // eyebrow slot, used as a page-level nav across // the four Company routes. The active route is // highlighted as a solid white pill; the others // are glass-transparent links. // - SectionLabel : the small uppercase eyebrow used on every // section. // - FinalCTA : the shared "Learn how Argos Data can support // your enterprise AI program." CTA, identical // across all four routes, taken verbatim from // COMPANY.md §Final CTA. // // The hero uses the exact same recipe as the existing site heroes // (Hero / SolutionHero), so these pages sit visually inside the system // rather than next to it. The tonal shift toward "warmer, more // photographic" lives in the page bodies (more imagery, more cream // panels), not in the hero treatment. // ───────────────────────────────────────────────────────────────────── // Page-level nav rendered in the hero eyebrow slot. Each pill is a // real ; the active route is styled as a solid white pill, the // others stay glass-transparent. Active state is set per-page via // the CompanyHero `route` prop. // CountUp — animates 0→target the first time the element scrolls // into view (cubic ease-out, ~1600ms default). Mirrors the // implementation used on the homepage so the four Company pages // feel native to the rest of the site. Respects // prefers-reduced-motion by skipping the animation and rendering // the final value. Supports an optional prefix (e.g. "L") and // suffix (e.g. "+", "K+"), plus decimal places for non-integer // targets. const CountUp = ({ to, prefix = "", suffix = "", decimals = 0, duration = 1600 }) => { const [value, setValue] = React.useState(0); const ref = React.useRef(null); const startedRef = React.useRef(false); React.useEffect(() => { const el = ref.current; if (!el) return; if (typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches) { setValue(to); startedRef.current = true; return; } const run = () => { if (startedRef.current) return; startedRef.current = true; const start = performance.now(); const factor = Math.pow(10, decimals); const ease = (t) => 1 - Math.pow(1 - t, 3); const tick = (now) => { const t = Math.min((now - start) / duration, 1); setValue(Math.round(to * factor * ease(t)) / factor); if (t < 1) requestAnimationFrame(tick); }; requestAnimationFrame(tick); }; if (typeof IntersectionObserver === "undefined") { run(); return; } const obs = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.isIntersecting) { run(); obs.disconnect(); } }); }, { threshold: 0.4 }); obs.observe(el); return () => obs.disconnect(); }, [to, duration, decimals]); return {prefix}{value.toFixed(decimals)}{suffix}; }; const COMPANY_ROUTES = [ { id: "about", label: "About Us", href: "/company/about-us/" }, { id: "approach", label: "Our Approach", href: "/company/our-approach/" }, { id: "workforce", label: "Global Workforce", href: "/company/global-workforce/" }, { id: "security", label: "Security & Compliance", href: "/company/security-and-compliance/" }, ]; // Session-storage key for remembering the previously-active route so // the pill bar on the next page can render its sliding indicator // starting from where it was, then animate to the new active pill. const PREV_ROUTE_KEY = "argosCompanyPrevRoute"; const CompanyRoutes = ({ active }) => { const navRef = React.useRef(null); const btnRefs = React.useRef({}); // pos.animated controls whether the CSS transition is enabled: // - First paint after navigation: we snap (animated: false) to the // PREVIOUS route's position, then on the next frame switch to // animated: true and update to the CURRENT route — giving us the // slide. // - If there is no previous route (first visit), we just snap to // the active position and never animate. // - Window resize keeps everything snapped, no animation. const [pos, setPos] = React.useState({ x: 0, w: 0, animated: false, ready: false }); const measure = React.useCallback((id) => { const nav = navRef.current; const btn = btnRefs.current[id]; if (!nav || !btn) return null; const navRect = nav.getBoundingClientRect(); const btnRect = btn.getBoundingClientRect(); return { x: btnRect.left - navRect.left, w: btnRect.width }; }, []); React.useLayoutEffect(() => { // Read previous route from sessionStorage. If absent / invalid / // same as the current route, treat it as a no-animation snap. let prev = null; try { prev = sessionStorage.getItem(PREV_ROUTE_KEY); } catch (e) {} if (!prev || !btnRefs.current[prev]) prev = active; const startPos = measure(prev); if (!startPos) return; // Initial: place indicator at the PREVIOUS route's slot, no anim. setPos({ ...startPos, animated: false, ready: true }); if (prev !== active) { // After two frames (one to let React commit the initial pos, // one for the browser to paint it), flip on animation and move // to the active route. const r1 = requestAnimationFrame(() => { const r2 = requestAnimationFrame(() => { const endPos = measure(active); if (endPos) setPos({ ...endPos, animated: true, ready: true }); }); // store the inner rAF so we can cancel if unmounted navRef.current && (navRef.current.__rafInner = r2); }); navRef.current && (navRef.current.__rafOuter = r1); } // Remember this route as the "previous" for the next navigation. try { sessionStorage.setItem(PREV_ROUTE_KEY, active); } catch (e) {} return () => { if (navRef.current) { if (navRef.current.__rafOuter) cancelAnimationFrame(navRef.current.__rafOuter); if (navRef.current.__rafInner) cancelAnimationFrame(navRef.current.__rafInner); } }; }, [active, measure]); // Keep the indicator aligned if the viewport resizes (font reflow, // breakpoint changes, etc.). Always snap on resize — no animation. React.useEffect(() => { const onResize = () => { const p = measure(active); if (p) setPos({ ...p, animated: false, ready: true }); }; window.addEventListener("resize", onResize); return () => window.removeEventListener("resize", onResize); }, [active, measure]); // Save current as "previous" right before the browser navigates, // belt-and-braces alongside the useLayoutEffect write — covers // cases where the page commits before the effect runs. const recordPrev = () => { try { sessionStorage.setItem(PREV_ROUTE_KEY, active); } catch (e) {} }; return ( ); }; const CompanyHero = ({ route, h1, subhead, intro, image, }) => (
); // Compact reusable eyebrow row used at the top of every section. const SectionLabel = ({ children, onDark = false, style }) => (
{children}
); // Shared Final CTA — appears at the bottom of all four company pages. // Copy is verbatim from COMPANY.md §Final CTA. const FinalCTA = () => (
{/* Soft warm glow on the right — picks up the yellow/green note from the photography palette without competing with content. */}
); Object.assign(window, { CompanyHero, CompanyRoutes, SectionLabel, FinalCTA, CountUp });