// Root app — router + tweaks panel + language toggle.
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"palette": "warm",
"processLayout": "timeline",
"storiesCount": 4
}/*EDITMODE-END*/;
// URL ↔ page key mapping
const ROUTES = {
'/': 'home',
'/how-it-works': 'process',
'/nurse-stories': 'stories',
'/about-us': 'about',
'/for-employers': 'employers',
};
const PATHS = Object.fromEntries(Object.entries(ROUTES).map(([p, k]) => [k, p]));
const pageFromUrl = () => ROUTES[window.location.pathname] ?? 'home';
const FILLOUT_FORM_ID = '2BEeCC4U4gus';
const FILLOUT_SCRIPT_SRC = 'https://server.fillout.com/embed/v1/';
const openFilloutForm = (attemptsRemaining = 20) => {
const openButton = document.querySelector(`[data-fillout-id="${FILLOUT_FORM_ID}"] button`);
if (openButton) {
openButton.click();
return;
}
if (attemptsRemaining > 0) {
window.setTimeout(() => openFilloutForm(attemptsRemaining - 1), 150);
}
};
const App = () => {
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
const [page, setPageState] = React.useState(pageFromUrl);
const [lang, setLang] = React.useState('EN');
// Apply palette via data-attr on — tokens.css does the rest.
React.useEffect(() => {
document.documentElement.dataset.palette = t.palette;
}, [t.palette]);
React.useEffect(() => { window.scrollTo({ top: 0 }); }, [page]);
// Sync page state when the user hits back/forward.
React.useEffect(() => {
const onPop = () => setPageState(pageFromUrl());
window.addEventListener('popstate', onPop);
return () => window.removeEventListener('popstate', onPop);
}, []);
React.useEffect(() => {
if (document.querySelector(`script[src="${FILLOUT_SCRIPT_SRC}"]`)) return;
const script = document.createElement('script');
script.src = FILLOUT_SCRIPT_SRC;
script.async = true;
document.body.appendChild(script);
}, []);
const setPage = (key) => {
const path = PATHS[key] ?? '/';
if (window.location.pathname !== path) {
history.pushState({ page: key }, '', path);
}
setPageState(key);
};
const handleNavigate = (key) => {
if (key === 'apply') {
openFilloutForm();
return;
}
setPage(key);
};
const { isMobile } = useBreakpoint();
const isHero = page === 'home';
// On mobile the nav is position:fixed — push page content below it.
const mainPaddingTop = isMobile && !isHero ? 60 : 0;
return (
setLang(lang === 'EN' ? 'ES' : 'EN')}
/>
{page === 'home' ? : null}
{page === 'process' ? : null}
{page === 'stories' ? : null}
{page === 'about' ? : null}
{page === 'employers' ? : null}
setTweak('palette', v)}
/>
Restrained = original Nucleus (atom/navy/proton). Warm adds sunset + gold. Vibrant goes coral + terracotta.
setTweak('processLayout', v)}
/>
handleNavigate('process')}>Jump to Process page
handleNavigate(v)}
/>
);
};
// Placeholder for the "For Employers" route — small page so it doesn't 404.
const EmployersStandinPage = () => (
For US Hospitals
Hire international RNs — long-term, NCLEX-passed, vetted.
This page is a placeholder. The original "For Employers" experience can be migrated in a follow-up — for now, the homepage and Footer carry the message.
Email our team →
);
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render();