/* Upscale Homepage Hi-Fi — Nav + App entry (production build, no Tweaks panel) */ // Map nav label -> route hash const navHrefFor = (label) => { const l = label.toLowerCase(); if (l === 'use cases') return '#/use-cases'; if (l === 'ressources' || l === 'resources') return '#/ressources'; return '#'; }; const navigateTo = (e, href) => { if (href && href !== '#') { e.preventDefault(); window.location.hash = href.replace(/^#/, ''); window.scrollTo({ top: 0, behavior: 'auto' }); } }; const IconArticle = () => ( ); const NAV_DROPDOWN_ITEMS = (lang) => [ { label: 'ARTICLES', title: lang === 'fr' ? 'Articles' : 'Articles', desc: lang === 'fr' ? 'Guides GTM, outbound et RevOps rédigés par notre équipe.' : 'GTM, outbound and RevOps guides written by our team.', tint: '#C8E6C9', icon: , href: '#/ressources', isRoute: true, }, { label: 'TOOLING', title: 'Best GTM Stack 2026', desc: lang === 'fr' ? 'Les meilleurs outils GTM testés chez nos clients.' : 'Best GTM tools tested in real client environments.', tint: '#E1FF6C', icon: , href: '#', badge: lang === 'fr' ? 'Bientôt disponible' : 'Coming soon', }, { label: 'NEWSLETTER', title: lang === 'fr' ? 'Newsletter Upscale' : 'Upscale Newsletter', desc: lang === 'fr' ? 'Les meilleurs insights GTM chaque semaine.' : 'Top GTM insights every week.', tint: '#F4E89B', icon: , href: '#/newsletter', isRoute: true, }, { label: lang === 'fr' ? 'VIDÉOS' : 'VIDEOS', title: lang === 'fr' ? 'Vidéos GTM' : 'GTM Videos', desc: lang === 'fr' ? 'Formats courts sur l\'outbound et le RevOps.' : 'Short formats on outbound and RevOps.', tint: '#D6CFC2', icon: , href: 'https://www.youtube.com/@antoine_Guine/videos', }, ]; const NavDropdown = ({ lang, onEnter, onLeave, onClose }) => { const items = NAV_DROPDOWN_ITEMS(lang); return (
{/* ── Left: resource links ── */} {/* ── Right: featured video ── */}

{lang === 'fr' ? 'À la une' : 'Featured Content'}

); }; const Nav = ({ lang, onLangSwitch, hiddenByScroll }) => { const t = COPY[lang]; const [scrolled, setScrolled] = useState(false); const [open, setOpen] = useState(false); const [dropOpen, setDropOpen] = useState(false); const dropTimer = useRef(null); const handleDropEnter = () => { clearTimeout(dropTimer.current); setDropOpen(true); }; const handleDropLeave = () => { dropTimer.current = setTimeout(() => setDropOpen(false), 180); }; useEffect(() => { const onHash = () => setDropOpen(false); window.addEventListener('hashchange', onHash); return () => window.removeEventListener('hashchange', onHash); }, []); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 20); window.addEventListener('scroll', onScroll); return () => window.removeEventListener('scroll', onScroll); }, []); useEffect(() => { document.body.style.overflow = open ? 'hidden' : ''; return () => { document.body.style.overflow = ''; }; }, [open]); return (
{ e.preventDefault(); window.location.hash = ''; window.scrollTo({ top: 0, behavior: 'auto' }); }} style={{ display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer', textDecoration: 'none', color: 'inherit' }}> Upscale upscale {t.cta.signin} {t.cta.book} → {/* Hamburger — visible on tablet/mobile only */}
{/* Mobile drawer */}
{(() => { const entries = []; t.nav.forEach((n) => { if (n === 'Ressources' || n === 'Resources') { entries.push({ kind: 'header', label: n }); NAV_DROPDOWN_ITEMS(lang).forEach((it) => entries.push({ kind: 'sub', it })); } else { entries.push({ kind: 'link', label: n, href: navHrefFor(n) }); } }); return entries.map((en, i) => { if (en.kind === 'header') { return ( {en.label} ); } if (en.kind === 'sub') { const it = en.it; const isComingSoon = it.href === '#'; const handleClick = (e) => { if (it.isRoute) { e.preventDefault(); window.location.hash = it.href.replace(/^#/, ''); window.scrollTo({ top: 0, behavior: 'auto' }); setOpen(false); } else if (isComingSoon) { e.preventDefault(); } else { setOpen(false); } }; return ( {it.title} {it.badge && ( {it.badge} )} ); } return ( { navigateTo(e, en.href); setOpen(false); }} className="u-nav-drawer-link" style={{ '--i': i }} >{en.label} ); }); })()}
); }; // Lucide-style inline icons (24x24, stroke-width 2) const IconCalendar = () => ( ); const IconLogin = () => ( ); const IconBriefcase = () => ( ); const IconBook = () => ( ); const FloatingDock = ({ lang, visible }) => { const items = lang === 'fr' ? [ { type: 'cal', label: 'Prendre RDV', icon: }, { type: 'link', label: 'Connexion', icon: , href: 'https://upscale-platform.vercel.app/' }, { type: 'route', label: 'Use Cases', icon: , hash: '#/use-cases' }, { type: 'route', label: 'Ressources', icon: , hash: '#/ressources' } ] : [ { type: 'cal', label: 'Book a call', icon: }, { type: 'link', label: 'Sign in', icon: , href: 'https://upscale-platform.vercel.app/' }, { type: 'route', label: 'Use Cases', icon: , hash: '#/use-cases' }, { type: 'route', label: 'Resources', icon: , hash: '#/ressources' } ]; return (
{items.map((it, i) => { const inner = ( <> {it.icon} {it.label} ); if (it.type === 'cal') { return ( {inner} ); } if (it.type === 'link') { return ( {inner} ); } if (it.type === 'route') { return ( navigateTo(e, it.hash)} >{inner} ); } return ( ); })}
); }; const HomePage = ({ lang }) => ( <> {/* — masquée temporairement, réactiver si besoin */} ); function App() { const [lang, setLang] = useState('fr'); const [navHidden, setNavHidden] = useState(false); const [route, setRoute] = useState(window.location.hash || ''); const [copyVersion, setCopyVersion] = useState(0); useEffect(() => { const onCopyUpdate = () => setCopyVersion(v => v + 1); window.addEventListener('copy-updated', onCopyUpdate); return () => window.removeEventListener('copy-updated', onCopyUpdate); }, []); useEffect(() => { let lastY = window.scrollY; let idleTimer = null; const show = () => setNavHidden(false); const resetIdle = () => { clearTimeout(idleTimer); idleTimer = setTimeout(show, 5000); }; const onScroll = () => { const y = window.scrollY; if (y < 80) { setNavHidden(false); } else if (y < lastY) { setNavHidden(false); } // scrolling up else if (y > lastY + 4) { setNavHidden(true); } // scrolling down (4px threshold to avoid jitter) lastY = y; resetIdle(); }; const onActivity = () => resetIdle(); window.addEventListener('scroll', onScroll, { passive: true }); window.addEventListener('mousemove', onActivity, { passive: true }); window.addEventListener('touchstart', onActivity, { passive: true }); resetIdle(); const onHash = () => { setRoute(window.location.hash || ''); window.scrollTo({ top: 0, behavior: 'auto' }); }; window.addEventListener('hashchange', onHash); return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('mousemove', onActivity); window.removeEventListener('touchstart', onActivity); window.removeEventListener('hashchange', onHash); clearTimeout(idleTimer); }; }, []); const caseSlugMatch = route.match(/^#\/use-cases\/([\w-]+)$/); const caseSlug = caseSlugMatch ? caseSlugMatch[1] : null; const isUseCasesList = route === '#/use-cases'; const resourceSlugMatch = route.match(/^#\/ressources\/([\w-]+)$/); const resourceSlug = resourceSlugMatch ? resourceSlugMatch[1] : null; const isResourcesList = route === '#/ressources'; const isNewsletter = route === '#/newsletter'; const isLegalNotice = route === '#/mentions-legales'; const isPrivacy = route === '#/politique-confidentialite'; let page; if (caseSlug) page = ; else if (isUseCasesList) page = ; else if (resourceSlug) page = ; else if (isResourcesList) page = ; else if (isNewsletter) page = ; else if (isLegalNotice) page = ; else if (isPrivacy) page = ; else page = ; return ( <>