// ============================================================= // Remote& website — shared chrome (Header, Footer, CTAs) // Mint canvas. Global-only voice. // ============================================================= const NAV_ITEMS = [ { label: 'Product', href: '#', cards: [ { eyebrow: 'People OS', title: 'HRMS', href: '/hrms', icon: 'users-round', bg: '#2E5119', fg: '#E2F1D2', accent: '#A4CC7C', body: 'One unified system of record for your global headcount — every employee, contract, document, and workflow in one place.', stat: { value: '11', label: 'HRMS modules' }, features: [ { icon: 'network', label: 'Org chart & headcount', desc: 'Live reporting lines and approval routes' }, { icon: 'user-plus', label: 'Onboarding & offboarding', desc: 'Day-one ready, fully audited exits' }, { icon: 'calendar-days', label: 'Time off & leave', desc: 'Local holidays, accruals, balances' }, { icon: 'file-text', label: 'Documents & e-sign', desc: 'Contracts, policies, addenda — signed in-app' }, ], modules: [ { label: 'People management', icon: 'id-card', href: '/platform/people-management' }, { label: 'Onboarding', icon: 'user-plus', href: '/platform/onboarding' }, { label: 'Offboarding', icon: 'user-minus', href: '/platform/offboarding' }, { label: 'Leave management', icon: 'calendar-days', href: '/platform/leave-management' }, { label: 'Compensation', icon: 'circle-dollar-sign', href: '/platform/compensation' }, { label: 'Documents', icon: 'file-text', href: '/platform/documents' }, { label: 'Asset management', icon: 'laptop', href: '/platform/asset-management' }, ], }, { eyebrow: 'Pay anywhere', title: 'Global workforce', href: '/global-workforce-management', icon: 'globe', bg: '#E2F1D2', fg: '#1B3210', accent: '#2E5119', body: 'Hire direct employees, EOR staff, and contractors across 150+ countries — paid accurately, in local currency, on time.', stat: { value: '150+', label: 'countries covered' }, features: [ { icon: 'briefcase', label: 'Employer of record', desc: 'Hire without opening an entity' }, { icon: 'building-2', label: 'Local payroll', desc: 'Statutory filings handled' }, { icon: 'handshake', label: 'Contractors', desc: 'Compliant agreements & invoices' }, { icon: 'banknote', label: 'Multi-currency pay', desc: 'Local-rail payouts, FX transparent' }, ], modules: [ { label: 'Local payroll', icon: 'building-2', href: '/platform/local-payroll' }, { label: 'Expense reimbursements', icon: 'receipt', href: '/platform/expense-reimbursements' }, { label: 'Employer of record', icon: 'briefcase', href: '/platform/employer-of-record' }, { label: 'Remote contractors', icon: 'handshake', href: '/platform/remote-contractors' }, ], }, { eyebrow: 'Always-on', title: 'AI agents', href: '/ai', icon: 'sparkles', bg: '#F26B4A', fg: '#FFF4EE', accent: '#FFD7C5', body: 'Specialist AI agents that run hiring, payroll, and people ops alongside your team — with clear scopes and audit trails.', stat: { value: '24/7', label: 'always working' }, features: [ { icon: 'wallet', label: 'Payla — payroll AI', desc: 'Runs cycles, catches anomalies' }, { icon: 'users', label: 'Hiring agent', desc: 'Sourcing, screening, scheduling' }, { icon: 'life-buoy', label: 'People ops agent', desc: 'Answers employees instantly' }, { icon: 'shield-check', label: 'Audit-grade trails', desc: 'Every action logged & reviewable' }, ], modules: [ { label: 'AI agents overview', icon: 'sparkles', href: '/ai' }, { label: 'Payla — payroll AI', icon: 'wallet', href: '/agent-payla' }, { label: 'Recruitment', icon: 'search', href: '/platform/recruitment' }, ], }, ], footer: [ { label: 'HRMS overview', href: '/hrms', icon: 'layout-grid' }, { label: 'See pricing', href: '/pricing', icon: 'tag' }, { label: 'Book a demo', href: '/book-a-demo', icon: 'calendar' }, { label: 'Country guides', href: '/guides', icon: 'map' }, { label: 'Integrations', href: '/integrations', icon: 'plug' }, ]}, { label: 'Resources', href: '#', library: { headline: 'The global atlas', tagline: '85 country guides, calculators, and references — built for teams hiring across borders.', countries: [ { code: 'eg', name: 'Egypt', flag: '🇪🇬', slug: 'egypt' }, { code: 'sa', name: 'Saudi Arabia', flag: '🇸🇦', slug: 'saudi-arabia' }, { code: 'ae', name: 'United Arab Emirates', flag: '🇦🇪', slug: 'united-arab-emirates' }, { code: 'kw', name: 'Kuwait', flag: '🇰🇼', slug: 'kuwait' }, { code: 'bh', name: 'Bahrain', flag: '🇧🇭', slug: 'bahrain' }, { code: 'qa', name: 'Qatar', flag: '🇶🇦', slug: 'qatar' }, { code: 'jo', name: 'Jordan', flag: '🇯🇴', slug: 'jordan' }, { code: 'ma', name: 'Morocco', flag: '🇲🇦', slug: 'morocco' }, { code: 'tn', name: 'Tunisia', flag: '🇹🇳', slug: 'tunisia' }, { code: 'gb', name: 'United Kingdom', flag: '🇬🇧', slug: 'united-kingdom' }, { code: 'de', name: 'Germany', flag: '🇩🇪', slug: 'germany' }, { code: 'fr', name: 'France', flag: '🇫🇷', slug: 'france' }, { code: 'es', name: 'Spain', flag: '🇪🇸', slug: 'spain' }, { code: 'it', name: 'Italy', flag: '🇮🇹', slug: 'italy' }, { code: 'nl', name: 'Netherlands', flag: '🇳🇱', slug: 'netherlands' }, { code: 'ie', name: 'Ireland', flag: '🇮🇪', slug: 'ireland' }, { code: 'ca', name: 'Canada', flag: '🇨🇦', slug: 'canada' }, { code: 'br', name: 'Brazil', flag: '🇧🇷', slug: 'brazil' }, { code: 'mx', name: 'Mexico', flag: '🇲🇽', slug: 'mexico' }, { code: 'in', name: 'India', flag: '🇮🇳', slug: 'india' }, { code: 'sg', name: 'Singapore', flag: '🇸🇬', slug: 'singapore' }, { code: 'au', name: 'Australia', flag: '🇦🇺', slug: 'australia' }, ], tools: [ { title: 'Cost calculator', desc: 'See the all-in monthly cost of an employee anywhere', icon: 'calculator', href: '/tools/cost-calculator', tag: 'Live' }, { title: 'Country tools', desc: 'Quick calculators for country-specific tasks', icon: 'wrench', href: '/country-tools', tag: 'Soon' }, ], topics: ['Payroll taxes', 'Statutory leave', 'Bonus rules', 'Termination', 'Equity & options', 'Benefits'], }, footer: [ { label: 'See pricing', href: '/pricing', icon: 'tag' }, { label: 'Book a demo', href: '/book-a-demo', icon: 'calendar' }, { label: 'Country guides', href: '/guides', icon: 'map' }, { label: 'Integrations', href: '/integrations', icon: 'plug' }, ]}, { label: 'Pricing', href: '/pricing' }, ]; const NavDropdown = ({ label, items, groups, cards, footer, library }) => { const [open, setOpen] = React.useState(false); const [headerEl, setHeaderEl] = React.useState(null); const ref = React.useRef(null); const closeTimer = React.useRef(null); const cancelClose = () => { if (closeTimer.current) { clearTimeout(closeTimer.current); closeTimer.current = null; } }; const scheduleClose = () => { cancelClose(); closeTimer.current = setTimeout(() => setOpen(false), 180); }; React.useEffect(() => { const handler = (e) => { if (!ref.current) return; if (ref.current.contains(e.target)) return; const panel = document.querySelector('[data-nav-panel]'); if (panel && panel.contains(e.target)) return; setOpen(false); }; document.addEventListener('mousedown', handler); if (ref.current) setHeaderEl(ref.current.closest('header')); return () => { document.removeEventListener('mousedown', handler); cancelClose(); }; }, []); React.useEffect(() => { if (open && window.lucide && window.lucide.createIcons) window.lucide.createIcons(); }, [open]); const isMega = !!(cards || groups || library); const linkStyle = { display: 'block', padding: '8px 12px', fontSize: 13, fontWeight: 500, color: '#111210', textDecoration: 'none', borderRadius: 8 }; const Link = (it) => ( e.currentTarget.style.background = '#E2F1D2'} onMouseOut={e => e.currentTarget.style.background = 'transparent'}> {it.label} ); return (
{ cancelClose(); setOpen(true); }} onMouseLeave={scheduleClose}> {open && (() => { const panel = (
{cards ? (
{cards.map(c => (
{ e.currentTarget.style.transform = 'translateY(-4px)'; const a = e.currentTarget.querySelector('[data-arrow]'); if (a) a.style.transform = 'translateX(4px)'; }} onMouseOut={e => { e.currentTarget.style.transform = 'none'; const a = e.currentTarget.querySelector('[data-arrow]'); if (a) a.style.transform = 'none'; }}>
{c.stat && (
{c.stat.value}
{c.stat.label}
)}
{c.eyebrow}
{c.title}
{c.body}
{c.features && (
    {c.features.map(f => (
  • {f.label || f}
    • ))}
)} {c.modules && ( )} Explore {c.title}
))}
{footer && (
Quick links
)}
) : groups ? (
{groups.map(g => (
{g.title}
{g.heading || g.title}
{g.stat && (
{g.stat.value}
{g.stat.label}
)}
{g.tagline &&
{g.tagline}
} {g.featured && ( { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = `0 10px 24px ${g.accent}33`; e.currentTarget.style.borderColor = g.accent; const arr = e.currentTarget.querySelector('[data-arrow]'); if (arr) arr.style.transform = 'translateX(3px)'; }} onMouseOut={e => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = `0 1px 0 rgba(255,255,255,0.6) inset, 0 2px 6px ${g.accent}1a`; e.currentTarget.style.borderColor = `${g.tint || g.accent}99`; const arr = e.currentTarget.querySelector('[data-arrow]'); if (arr) arr.style.transform = 'none'; }}> {g.featured.title} Overview {g.featured.desc} )}
))}
{footer && (
Quick links
)}
) : library ? (
{/* Header strip — atlas/search style */}
Resources
{library.headline}
{library.tagline}
Browse all 85
{/* Body — 2-column asymmetric: country grid + tools */}
{/* Country grid */} {/* Tools rail */}
{footer && (
Quick links
)}
) : items.map(Link)}
); return isMega && headerEl ? ReactDOM.createPortal(panel, headerEl) : panel; })()}
); }; // ----------------- Header (with mobile menu) ----------------- const SiteHeader = ({ active }) => { const [open, setOpen] = React.useState(false); const arHref = (typeof window !== 'undefined') ? '/ar' + (window.location.pathname === '/' ? '' : window.location.pathname).replace(/\/$/, '') : '/ar'; return (
Remote&
ع Book a demo
{NAV_ITEMS.flatMap(n => { if (n.groups) return n.groups.flatMap(g => [
{g.title}
, ...g.items.map(it => {it.label}), ]); if (n.cards) return n.cards.flatMap(c => [
{c.title}
, {c.title} overview, ...(c.modules || []).map(m => {m.label}), ]); if (n.library) return [ Country guides, ...n.library.tools.map(t => {t.title}), ]; if (n.items) return n.items.map(it => {it.label}); return [{n.label}]; })} Book a demo العربية
); }; // ----------------- Top notice strip ----------------- const SiteNotice = () => (
Exclusive launch offer Free for your first 30 users — full HRMS & every AI agent. ⏳ Ending soon Claim it
); // ----------------- Final CTA band (single, global) ----------------- const FinalCTA = () => (

See it on your own team.

Book a demo
); // ----------------- Footer ----------------- const SiteFooter = () => ( ); // ----------------- Small helpers ----------------- const Eyebrow = ({ children, color = '#2E5119' }) => (

{children}

); const Amp = ({ color = '#F26B4A', size = '1.05em' }) => ( & ); // SiteLogoStrip kept as a no-op so any stale pages importing it don't break. const SiteLogoStrip = () => null; // Logo tile — renders a brand SVG from Simple Icons CDN with a letter-mark fallback. // Pass `slug` if it differs from the display name (Simple Icons slug, lowercase, no spaces). const LogoTile = ({ name, slug, mono = false }) => { const [failed, setFailed] = React.useState(false); const computedSlug = (slug || name).toLowerCase().replace(/[^a-z0-9]+/g, ''); const src = mono ? `https://cdn.simpleicons.org/${computedSlug}/353833` : `https://cdn.simpleicons.org/${computedSlug}`; return (
{failed ? ( {name[0]} ) : ( setFailed(true)} /> )} {name}
); }; Object.assign(window, { SiteHeader, SiteNotice, SiteFooter, SiteLogoStrip, FinalCTA, Eyebrow, Amp, LogoTile });