+ meta description in sync with selected language _uE(() => { document.documentElement.lang = t.meta.lang; document.title = t.meta.title; let descEl = document.querySelector('meta[name="description"]'); if (!descEl) { descEl = document.createElement('meta'); descEl.setAttribute('name', 'description'); document.head.appendChild(descEl); } descEl.setAttribute('content', t.meta.description); }, [lang, t]); _uE(() => { const onHash = () => setPage((location.hash || '#home').replace('#','')); window.addEventListener('hashchange', onHash); const onScroll = () => setScrolled(window.scrollY > 12); window.addEventListener('scroll', onScroll); return () => { window.removeEventListener('hashchange', onHash); window.removeEventListener('scroll', onScroll); }; }, []); _uE(() => { localStorage.setItem('nf_lang', lang); }, [lang]); // Reveal observer (re-run per page) _uE(() => { const els = document.querySelectorAll('.reveal'); const obs = new IntersectionObserver((entries) => { entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('in'); }); }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' }); els.forEach(el => obs.observe(el)); return () => obs.disconnect(); }, [page]); // Card spotlight effect _uE(() => { const handler = (e) => { document.querySelectorAll('.card, .cap-card').forEach(card => { const r = card.getBoundingClientRect(); if (e.clientX >= r.left && e.clientX <= r.right && e.clientY >= r.top && e.clientY <= r.bottom) { card.style.setProperty('--mx', `${e.clientX - r.left}px`); card.style.setProperty('--my', `${e.clientY - r.top}px`); } }); }; document.addEventListener('mousemove', handler); return () => document.removeEventListener('mousemove', handler); }, []); // Close lang menu on outside click _uE(() => { if (!langOpen) return; const handler = (e) => { if (!e.target.closest('.lang-switcher')) setLangOpen(false); }; setTimeout(() => document.addEventListener('click', handler), 0); return () => document.removeEventListener('click', handler); }, [langOpen]); // Real <a href> + intercept click to keep smooth-scroll behavior. // Falls back to native nav (right-click "open in new tab", keyboard, screen readers). const NavLink = ({ p, label }) => ( <a href={`#${p}`} className={page === p ? 'active' : ''} onClick={(e) => { e.preventDefault(); go(p); }} >{label}</a> ); // For footer/inline links pointing at internal pages. const PageLink = ({ p, children, ...rest }) => ( <a href={`#${p}`} onClick={(e) => { e.preventDefault(); go(p); }} {...rest} >{children}</a> ); const PageComp = { home: window.NF.HomePage, agents: window.NF.AgentsPage, rl: window.NF.RLPage, cyber: window.NF.CyberPage, about: window.NF.AboutPage, contact: window.NF.ContactPage, }[page] || window.NF.HomePage; const LANGS = [ { code: 'en', flag: 'EN', name: 'English' }, { code: 'pl', flag: 'PL', name: 'Polski' }, { code: 'de', flag: 'DE', name: 'Deutsch' }, { code: 'es', flag: 'ES', name: 'Español' }, { code: 'fr', flag: 'FR', name: 'Français' }, ]; return ( <div data-screen-label={page}> {/* Global ambient animated background */} <div className="ambient-bg" aria-hidden="true"> <div className="ambient-orb o1"></div> <div className="ambient-orb o2"></div> <div className="ambient-orb o3"></div> <div className="ambient-orb o4"></div> </div> <div className="ambient-scan" aria-hidden="true"></div> {/* HEADER */} <header className={`header ${scrolled ? 'scrolled' : ''}`}> <div className="container"> <a className="brand" href="#home" onClick={(e) => { e.preventDefault(); go('home'); }} aria-label="NeuroForge — home"> <div className="brand-mark"><window.NF.BrandMark/></div> <div className="brand-name">Neuro<span>Forge</span></div> </a> <nav className="nav" aria-label="Primary"> <NavLink p="home" label={t.nav.home}/> <NavLink p="agents" label={t.nav.agents}/> <NavLink p="rl" label={t.nav.rl}/> <NavLink p="cyber" label={t.nav.cyber}/> <NavLink p="about" label={t.nav.about}/> </nav> <div className="header-right"> <div className="lang-switcher"> <button type="button" className="lang-btn" aria-haspopup="listbox" aria-expanded={langOpen} aria-label="Language" onClick={(e) => { e.stopPropagation(); setLangOpen(o => !o); }}> <span className="mono">{lang.toUpperCase()}</span> <svg width="10" height="6" viewBox="0 0 10 6" fill="none" aria-hidden="true" style={{transform: langOpen?'rotate(180deg)':'none', transition:'transform .2s'}}><path d="M1 1L5 5L9 1" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/></svg> </button> <div className={`lang-menu ${langOpen ? 'open' : ''}`} role="listbox"> {LANGS.map(l => ( <button key={l.code} type="button" role="option" aria-selected={lang === l.code} className={lang === l.code ? 'active' : ''} onClick={() => { setLang(l.code); setLangOpen(false); }}> <span className="lang-flag" style={{background:'linear-gradient(135deg,#00e0ff,#a855f7)', color:'#06070d'}}>{l.flag}</span> <span>{l.name}</span> </button> ))} </div> </div> <button type="button" className="btn btn-plasma" style={{padding:'10px 18px', fontSize:'14px'}} onClick={() => go('contact')}>{t.cta.start}</button> </div> </div> </header> {/* PAGE */} <PageComp t={t} go={go}/> {/* FOOTER */} <footer className="footer"> <div className="container"> <div className="footer-grid"> <div className="footer-col"> <a className="brand" href="#home" onClick={(e) => { e.preventDefault(); go('home'); }} style={{marginBottom:'18px'}} aria-label="NeuroForge — home"> <div className="brand-mark"><window.NF.BrandMark/></div> <div className="brand-name">Neuro<span>Forge</span></div> </a> <p style={{fontSize:'14px', maxWidth:'320px'}}>{t.footer.tag}</p> <div style={{display:'flex', gap:'12px', marginTop:'24px'}}> {['GitHub','LinkedIn','arXiv','RSS'].map(s => ( // Placeholders — wire to real URLs before launch. <button type="button" key={s} className="mono footer-social" style={{fontSize:'11px', color:'#5b6080', padding:'6px 10px', border:'1px solid var(--line)', borderRadius:'6px', cursor:'pointer', background:'transparent'}}>{s}</button> ))} </div> </div> <div className="footer-col"> <h4>{t.footer.product}</h4> <ul> {/* These could become real product pages later — for now they all point at /agents or /rl */} <li><PageLink p="agents">{t.footer.product_links[0]}</PageLink></li> <li><PageLink p="rl">{t.footer.product_links[1]}</PageLink></li> <li><PageLink p="cyber">{t.footer.product_links[2]}</PageLink></li> <li><PageLink p="agents">{t.footer.product_links[3]}</PageLink></li> </ul> </div> <div className="footer-col"> <h4>{t.footer.company}</h4> <ul> <li><PageLink p="about">{t.footer.company_links[0]}</PageLink></li> <li><PageLink p="contact">{t.footer.company_links[1]}</PageLink></li> <li><button type="button" className="footer-link-btn">{t.footer.company_links[2]}</button></li> <li><button type="button" className="footer-link-btn">{t.footer.company_links[3]}</button></li> </ul> </div> <div className="footer-col"> <h4>{t.footer.resources}</h4> <ul> {t.footer.resources_links.map((label, i) => ( <li key={i}><button type="button" className="footer-link-btn">{label}</button></li> ))} </ul> </div> </div> <div className="footer-bot"> <div>{t.footer.copy}</div> <div style={{display:'flex', gap:'24px'}}> {t.footer.bottom_links.map((label, i) => ( <button type="button" key={i} className="footer-link-btn">{label}</button> ))} </div> </div> </div> </footer> </div> ); } ReactDOM.createRoot(document.getElementById('root')).render(<App/>);

// NeuroForge — main app shell with routing & i18n const { useEffect: _uE, useState: _uS, useRef: _uR } = React; function App() { const [page, setPage] = _uS(() => (location.hash || '#home').replace('#','')); const [lang, setLang] = _uS(() => localStorage.getItem('nf_lang') || 'en'); const [langOpen, setLangOpen] = _uS(false); const [scrolled, setScrolled] = _uS(false); const t = window.I18N[lang] || window.I18N.en; const go = (p) => { setPage(p); location.hash = '#' + p; window.scrollTo({ top: 0, behavior: 'smooth' }); }; // Keep + + meta description in sync with selected language _uE(() => { document.documentElement.lang = t.meta.lang; document.title = t.meta.title; let descEl = document.querySelector('meta[name="description"]'); if (!descEl) { descEl = document.createElement('meta'); descEl.setAttribute('name', 'description'); document.head.appendChild(descEl); } descEl.setAttribute('content', t.meta.description); }, [lang, t]); _uE(() => { const onHash = () => setPage((location.hash || '#home').replace('#','')); window.addEventListener('hashchange', onHash); const onScroll = () => setScrolled(window.scrollY > 12); window.addEventListener('scroll', onScroll); return () => { window.removeEventListener('hashchange', onHash); window.removeEventListener('scroll', onScroll); }; }, []); _uE(() => { localStorage.setItem('nf_lang', lang); }, [lang]); // Reveal observer (re-run per page) _uE(() => { const els = document.querySelectorAll('.reveal'); const obs = new IntersectionObserver((entries) => { entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('in'); }); }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' }); els.forEach(el => obs.observe(el)); return () => obs.disconnect(); }, [page]); // Card spotlight effect _uE(() => { const handler = (e) => { document.querySelectorAll('.card, .cap-card').forEach(card => { const r = card.getBoundingClientRect(); if (e.clientX >= r.left && e.clientX <= r.right && e.clientY >= r.top && e.clientY <= r.bottom) { card.style.setProperty('--mx', `${e.clientX - r.left}px`); card.style.setProperty('--my', `${e.clientY - r.top}px`); } }); }; document.addEventListener('mousemove', handler); return () => document.removeEventListener('mousemove', handler); }, []); // Close lang menu on outside click _uE(() => { if (!langOpen) return; const handler = (e) => { if (!e.target.closest('.lang-switcher')) setLangOpen(false); }; setTimeout(() => document.addEventListener('click', handler), 0); return () => document.removeEventListener('click', handler); }, [langOpen]); // Real <a href> + intercept click to keep smooth-scroll behavior. // Falls back to native nav (right-click "open in new tab", keyboard, screen readers). const NavLink = ({ p, label }) => ( <a href={`#${p}`} className={page === p ? 'active' : ''} onClick={(e) => { e.preventDefault(); go(p); }} >{label}</a> ); // For footer/inline links pointing at internal pages. const PageLink = ({ p, children, ...rest }) => ( <a href={`#${p}`} onClick={(e) => { e.preventDefault(); go(p); }} {...rest} >{children}</a> ); const PageComp = { home: window.NF.HomePage, agents: window.NF.AgentsPage, rl: window.NF.RLPage, cyber: window.NF.CyberPage, about: window.NF.AboutPage, contact: window.NF.ContactPage, }[page] || window.NF.HomePage; const LANGS = [ { code: 'en', flag: 'EN', name: 'English' }, { code: 'pl', flag: 'PL', name: 'Polski' }, { code: 'de', flag: 'DE', name: 'Deutsch' }, { code: 'es', flag: 'ES', name: 'Español' }, { code: 'fr', flag: 'FR', name: 'Français' }, ]; return ( <div data-screen-label={page}> {/* Global ambient animated background */} <div className="ambient-bg" aria-hidden="true"> <div className="ambient-orb o1"></div> <div className="ambient-orb o2"></div> <div className="ambient-orb o3"></div> <div className="ambient-orb o4"></div> </div> <div className="ambient-scan" aria-hidden="true"></div> {/* HEADER */} <header className={`header ${scrolled ? 'scrolled' : ''}`}> <div className="container"> <a className="brand" href="#home" onClick={(e) => { e.preventDefault(); go('home'); }} aria-label="NeuroForge — home"> <div className="brand-mark"><window.NF.BrandMark/></div> <div className="brand-name">Neuro<span>Forge</span></div> </a> <nav className="nav" aria-label="Primary"> <NavLink p="home" label={t.nav.home}/> <NavLink p="agents" label={t.nav.agents}/> <NavLink p="rl" label={t.nav.rl}/> <NavLink p="cyber" label={t.nav.cyber}/> <NavLink p="about" label={t.nav.about}/> </nav> <div className="header-right"> <div className="lang-switcher"> <button type="button" className="lang-btn" aria-haspopup="listbox" aria-expanded={langOpen} aria-label="Language" onClick={(e) => { e.stopPropagation(); setLangOpen(o => !o); }}> <span className="mono">{lang.toUpperCase()}</span> <svg width="10" height="6" viewBox="0 0 10 6" fill="none" aria-hidden="true" style={{transform: langOpen?'rotate(180deg)':'none', transition:'transform .2s'}}><path d="M1 1L5 5L9 1" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/></svg> </button> <div className={`lang-menu ${langOpen ? 'open' : ''}`} role="listbox"> {LANGS.map(l => ( <button key={l.code} type="button" role="option" aria-selected={lang === l.code} className={lang === l.code ? 'active' : ''} onClick={() => { setLang(l.code); setLangOpen(false); }}> <span className="lang-flag" style={{background:'linear-gradient(135deg,#00e0ff,#a855f7)', color:'#06070d'}}>{l.flag}</span> <span>{l.name}</span> </button> ))} </div> </div> <button type="button" className="btn btn-plasma" style={{padding:'10px 18px', fontSize:'14px'}} onClick={() => go('contact')}>{t.cta.start}</button> </div> </div> </header> {/* PAGE */} <PageComp t={t} go={go}/> {/* FOOTER */} <footer className="footer"> <div className="container"> <div className="footer-grid"> <div className="footer-col"> <a className="brand" href="#home" onClick={(e) => { e.preventDefault(); go('home'); }} style={{marginBottom:'18px'}} aria-label="NeuroForge — home"> <div className="brand-mark"><window.NF.BrandMark/></div> <div className="brand-name">Neuro<span>Forge</span></div> </a> <p style={{fontSize:'14px', maxWidth:'320px'}}>{t.footer.tag}</p> <div style={{display:'flex', gap:'12px', marginTop:'24px'}}> {['GitHub','LinkedIn','arXiv','RSS'].map(s => ( // Placeholders — wire to real URLs before launch. <button type="button" key={s} className="mono footer-social" style={{fontSize:'11px', color:'#5b6080', padding:'6px 10px', border:'1px solid var(--line)', borderRadius:'6px', cursor:'pointer', background:'transparent'}}>{s}</button> ))} </div> </div> <div className="footer-col"> <h4>{t.footer.product}</h4> <ul> {/* These could become real product pages later — for now they all point at /agents or /rl */} <li><PageLink p="agents">{t.footer.product_links[0]}</PageLink></li> <li><PageLink p="rl">{t.footer.product_links[1]}</PageLink></li> <li><PageLink p="cyber">{t.footer.product_links[2]}</PageLink></li> <li><PageLink p="agents">{t.footer.product_links[3]}</PageLink></li> </ul> </div> <div className="footer-col"> <h4>{t.footer.company}</h4> <ul> <li><PageLink p="about">{t.footer.company_links[0]}</PageLink></li> <li><PageLink p="contact">{t.footer.company_links[1]}</PageLink></li> <li><button type="button" className="footer-link-btn">{t.footer.company_links[2]}</button></li> <li><button type="button" className="footer-link-btn">{t.footer.company_links[3]}</button></li> </ul> </div> <div className="footer-col"> <h4>{t.footer.resources}</h4> <ul> {t.footer.resources_links.map((label, i) => ( <li key={i}><button type="button" className="footer-link-btn">{label}</button></li> ))} </ul> </div> </div> <div className="footer-bot"> <div>{t.footer.copy}</div> <div style={{display:'flex', gap:'24px'}}> {t.footer.bottom_links.map((label, i) => ( <button type="button" key={i} className="footer-link-btn">{label}</button> ))} </div> </div> </div> </footer> </div> ); } ReactDOM.createRoot(document.getElementById('root')).render(<App/>);