// New buyer-trigger-led navigation // Architecture: The Challenge | The Journey | Solutions | Insights | About | [Assess Your AI Readiness] // Mega-menu link with hover state. // it.href (relative to site root) is set only for pages that exist; // basePath converts root-relative paths to the depth of the current page. const MegaLink = ({ it, basePath = "./", onAssess }) => { const [hovered, setHovered] = React.useState(false); const href = it.href ? basePath + it.href : null; const interactive = !!href || !!it.isAssess; return ( { if (!href) { e.preventDefault(); if (it.isAssess) onAssess && onAssess(); } }} onMouseEnter={() => setHovered(interactive)} onMouseLeave={() => setHovered(false)} >
{it.name} {href && ( → )}
{it.sub && (
{it.sub}
)} ); }; // href values are root-relative paths; prepend basePath at render time. // Omitting href means the page doesn't exist yet — the link renders as plain text. const NAV_ITEMS = { challenge: { label: "The Challenge", href: "the-challenge/", cols: [ { t: "Your Challenges", l: [ { name: "Growth Bottleneck", sub: "When your back office can't keep pace", href: "the-challenge/growth-bottleneck/" }, { name: "AI Mandate", sub: "Board has asked for a credible AI strategy", href: "the-challenge/ai-mandate/" }, { name: "Scale Ambition", sub: "Infrastructure for 2× or 3× growth", href: "the-challenge/scale-ambition/" }, { name: "Compliance Event", sub: "Acquisition, audit, or regulatory change", href: "the-challenge/compliance-event/" }, ]}, { t: "Who We Serve", l: [ { name: "CFO & Finance Director", sub: "AI strategy, close cycle, scalable infrastructure", href: "who-we-serve/cfo-finance-director/" }, { name: "COO & Operations Director", sub: "Integrated operational ERP and supply chain", href: "who-we-serve/coo-operations-director/" }, { name: "CEO & Board", sub: "Investment case, governance, strategic finance", href: "who-we-serve/ceo-board/" }, { name: "CTO & IT Director", sub: "Architecture, integration, security, and TCO", href: "who-we-serve/cto-it-director/" }, ]}, ], }, journey: { label: "The Journey", href: "the-journey/", cols: [ { t: "AI Transformation Stages", l: [ { name: "The Journey — Overview", sub: "How we take you from Stage 1 to Stage 4", href: "the-journey/" }, { name: "Stage 1 — Operational Foundation", sub: "Build the platform your business deserves", href: "the-journey/stage-1-operational-foundation/" }, { name: "Stage 2 — Intelligent Automation", sub: "Remove the manual transactional layer", href: "the-journey/stage-2-intelligent-automation/" }, { name: "Stage 3 — AI-Augmented Finance", sub: "Intelligence at the speed of the business", href: "the-journey/stage-3-ai-augmented-finance/" }, { name: "Stage 4 — Agentic Finance Operations",sub: "Finance at scale without headcount growth", href: "the-journey/stage-4-agentic-finance-operations/" }, ]}, { t: "Frameworks & Tools", l: [ { name: "AI Readiness Assessment", sub: "Free — find your maturity stage", isAssess: true }, { name: "Agentic Finance Governance", sub: "Board-defensible AI governance", href: "the-journey/agentic-finance-governance/" }, { name: "Finance Operations Review", sub: "Structured discovery process", href: "the-journey/finance-operations-review/" }, { name: "ISV Partner Ecosystem", sub: "The integrated technology stack", href: "the-journey/isv-partner-ecosystem/" }, ]}, ], }, solutions: { label: "Solutions", href: "solutions/", cols: [ { t: "Platforms", l: [ { name: "Compare Platforms", sub: "Intacct vs X3 — find your fit", href: "solutions/" }, { name: "Sage Intacct", sub: "Finance-first cloud ERP", href: "solutions/sage-intacct/" }, { name: "Sage X3", sub: "Operational ERP for complex businesses", href: "solutions/sage-x3/" }, { name: "X3CloudDocs", sub: "AI document automation — Mysoft IP", href: "solutions/x3clouddocs/" }, { name: "ISV Partner Ecosystem", sub: "Netstock, Lynq, Phocas, SEI and more", href: "the-journey/isv-partner-ecosystem/" }, ]}, { t: "By Sector", l: [ { name: "Manufacturing & Distribution", sub: "Sage X3 for complex operations", href: "solutions/manufacturing-distribution/" }, { name: "Food & Beverage", sub: "FEFO, traceability, compliance", href: "solutions/food-beverage/" }, { name: "Professional Services & SaaS", sub: "Project accounting, revenue recognition", href: "solutions/professional-services-saas/" }, { name: "Not-for-Profit & Healthcare", sub: "Fund accounting, SORP compliance", href: "solutions/not-for-profit-healthcare/" }, { name: "Financial Services", sub: "Multi-entity, regulated environments", href: "solutions/financial-services/" }, ]}, ], }, insights: { label: "Insights", href: "insights/", cols: [ { t: "Content", l: [ { name: "CFO Strategy", sub: "Finance as a growth enabler", href: "insights/cfo-strategy/" }, { name: "Operational Transformation",sub: "AI in AP, AR, and beyond", href: "insights/operational-transformation/" }, { name: "Strategic Insight", sub: "Agentic AI — reality versus hype", href: "insights/strategic-insight/" }, { name: "Events & Webinars", sub: "ERP selection events and roundtables", href: "insights/events-webinars/" }, ]}, { t: "Bootcamps", l: [ { name: "AI Bootcamp", sub: "AI in plain English for finance", href: "resources/ai-bootcamp/" }, { name: "ERP Bootcamp", sub: "ERP selection and implementation", href: "resources/erp-bootcamp/" }, { name: "FMS Bootcamp", sub: "Financial management systems", href: "resources/fms-bootcamp/" }, { name: "eInvoicing Bootcamp", sub: "eInvoicing mandates and standards", href: "resources/einvoicing-bootcamp/" }, { name: "BI & Analytics Bootcamp",sub: "Reporting, BI, and analytics tools", href: "resources/bi-analytics-bootcamp/" }, { name: "Cloud Migration Bootcamp",sub: "Moving your ERP to the cloud", href: "resources/cloud-migration-bootcamp/" }, ]}, { t: "In Focus & Resources", l: [ { name: "Not-for-Profit Finance", sub: "In Focus — fund accounting, SORP", href: "resources/focus/nfp-finance/" }, { name: "SaaS & Technology Finance", sub: "In Focus — ARR, revenue recognition", href: "resources/focus/saas-technology-finance/" }, { name: "Master Data Management", sub: "In Focus — the AI data foundation", href: "resources/focus/master-data-management/" }, { name: "AI-Ready Finance Guide", sub: "Free download", href: "insights/ai-ready-finance-guide/" }, { name: "ERP Selection Framework", sub: "Six-stage evaluation process", href: "insights/erp-selection-framework/" }, { name: "Customer Transformation Stories", sub: "Measurable outcomes", href: "insights/customer-transformation-stories/" }, { name: "Demo Hub", sub: "Watch on demand or book live", href: "insights/demo-hub/" }, ]}, ], }, about: { label: "About", cols: [ { t: "Who We Are", l: [ { name: "Our Story", sub: "20 years. UK's first Sage X3 partner", href: "about/our-story/" }, { name: "Meet the Team",sub: "50+ in-house Sage experts", href: "about/meet-the-team/" }, { name: "Careers", sub: "Join us", href: "about/careers/" }, ]}, { t: "Credentials", l: [ { name: "Sage Platinum Club 2025", sub: "Highest partner tier", href: "about/sage-platinum-club-2025/" }, { name: "Customer Transformation Stories", sub: "Measurable outcomes", href: "insights/customer-transformation-stories/" }, { name: "Support Portal", sub: "Break-fix, service desk, managed", href: "about/support-portal/" }, ]}, ], }, }; const PANEL_CTAS = { challenge: { tag: "Start here", title: "Is your finance function ready for AI?", body: "Free assessment. Maturity stage score and a recommended next step. No commitment.", cta: "Take the assessment →", href: null, }, journey: { tag: "Customer outcomes", title: "See what finance transformation looks like in practice.", body: "Real outcomes from real organisations — measurable results, not testimonial quotes.", cta: "Read customer stories →", href: "insights/customer-transformation-stories/", }, solutions: { tag: "Speak to an expert", title: "Discuss your platform requirements with a Mysoft consultant.", body: "Sector expertise. Platform depth. No obligation. Most conversations are 30 minutes.", cta: "Speak with a consultant →", href: "the-journey/finance-operations-review/", }, insights: { tag: "See it live", title: "See the platform against your specific use cases.", body: "Scenario-based, expert-led demonstrations. On demand or book a live session tailored to your context.", cta: "Visit Demo Hub →", href: "insights/demo-hub/", }, about: { tag: "Get in touch", title: "Talk to us about your finance and operations challenge.", body: "We respond within one business day. No obligation, no sales process.", cta: "Contact us →", href: "contact/", }, }; // Mobile accordion section const MobileNavSection = ({ itemKey, item, basePath, onAssess, onClose }) => { const [expanded, setExpanded] = React.useState(false); return (
{expanded && (
{item.cols.map((col, ci) => (
{col.t}
{col.l.map((it, li) => { const href = it.href ? basePath + it.href : null; return ( { if (!href) { e.preventDefault(); if (it.isAssess) { onClose(); onAssess && onAssess(); } } else onClose(); }} style={{ textDecoration: "none", display: "block", fontFamily: "var(--font-sans)", fontSize: 14, color: href || it.isAssess ? "var(--navy)" : "var(--fg-3)", fontWeight: 500, }} >{it.name} ); })}
))}
)}
); }; const NavBar = ({ onAssess, basePath = "./" }) => { const [open, setOpen] = React.useState(null); const [scrolled, setScrolled] = React.useState(false); const [mobileOpen, setMobileOpen] = React.useState(false); const [isMobile, setIsMobile] = React.useState(window.innerWidth < 768); const closeTimer = React.useRef(null); React.useEffect(() => { const fn = () => setScrolled(window.scrollY > 12); window.addEventListener("scroll", fn); return () => window.removeEventListener("scroll", fn); }, []); React.useEffect(() => { const fn = () => setIsMobile(window.innerWidth < 768); window.addEventListener("resize", fn); return () => window.removeEventListener("resize", fn); }, []); // Lock body scroll when mobile menu is open React.useEffect(() => { document.body.style.overflow = mobileOpen ? "hidden" : ""; return () => { document.body.style.overflow = ""; }; }, [mobileOpen]); const scheduleClose = () => { closeTimer.current = setTimeout(() => setOpen(null), 180); }; const cancelClose = () => { if (closeTimer.current) clearTimeout(closeTimer.current); }; const closePanel = () => { cancelClose(); setOpen(null); }; return ( ); }; Object.assign(window, { NavBar });