/* global React, Header, Hero, CollectionGrid, CollectionsIndex, ConfiguratorStrip, ProjectsGrid, ProjectsPage, EDM, Footer, COLLECTIONS, SpecificationSection, SpecifierDownloads, EnquiryBlock, ThreadBadge, THREADS, useViewport, FeatureCarousel, GatewayCarousel, EditorialCarousel, NowShowing, CollaboratorsStrip, MaterialsStory, TaglineSlab, About, DesignCapabilities, CircularEconomy, ProjectDetail, PolicyPage, ModularBuildUp, ModularAssemblies */ const { useState, useEffect } = React; function Home({ setScreen }) { const goCollection = (slug) => setScreen(slug === "gateway" ? "gateway" : "collections"); return ( <> ); } function GatewayDetail() { const vw = useViewport(); const isMobile = vw < 720; return ( <> {/* Full-bleed carousel — page opens on image with its own caption */} {/* Title + intro, now below the carousel */} {/* Editorial pair — image carousel + copy */}
Endure · Configure

An organic, adaptable system for public passage.

Designed from the ground up around the contemporary user's need for on-demand connectivity within a clean, uncluttered environment. The result integrates connectivity, ergonomic comfort and architectural clarity to set a new standard for public seating across diverse, demanding environments.

{/* Three features — what makes Gateway Gateway */}
What Gateway does

Three pillars holding the system together.

{[ { no: "01", kicker: "Modular", title: "Distinct seating zones for diverse user profiles.", body: "An organic, modular design tailored to a wide range of users — from solo travellers and waiting patients to families, groups and corporate users. Configurations can be reconfigured with ease as needs shift, supporting the dynamic nature of modern public environments.", image: "images/collections/gateway/feature/01.webp", alt: "Gateway configured as a linear beam", }, { no: "02", kicker: "Connected", title: "Integrated power and wireless charging by OE Elsafe.", body: "Concealed cable management and on-demand power and USB access support the digital needs of contemporary users while preserving the calm aesthetic essential to public environments. Delivered in collaboration with OE Elsafe — global leaders in soft wiring and workspace technologies.", image: "images/collections/gateway/feature/02.jpg", alt: "Gateway · phone charging on the integrated armrest USB-C socket", }, { no: "03", kicker: "Universal", title: "Accessibility designed in, not retrofitted.", body: "Wheelchair-accessible positions sit seamlessly within the seating layout, allowing companions and wheelchair users to sit alongside one another without separation or compromise. The detail is considered rather than retrofitted — accessibility is part of the system's core design language.", image: "images/collections/gateway/feature/03.jpg", alt: "Gateway · wheelchair zone integrated into the cluster", }, ].map((f) => (
{f.alt}
{f.no}
{f.kicker}

{f.title}

{f.body}

))}
{/* The build-up — condensed sequence */} {/* The shortcut path — typical pre-drawn assemblies */} {/* Specified in — projects using this collection */}
{[ { name: "Dallas Fort Worth Airport", place: "Dallas, USA", firm: "", year: 2024, image: "assets/gateway/hero-dfw.webp", slug: "dfw" }, { name: "Adelaide Airport", place: "Adelaide, AUS", firm: "Woods Bagot", year: 2025, image: "images/_legacy/projects/adelaide-airport.jpg", slug: "adelaide" }, { name: "Cairns Airport", place: "Cairns, AUS", firm: "Studio Spillane", year: 2025, image: "images/_legacy/projects/cairns/17-canoe-suspended.jpg", slug: "cairns" }, ].map((p) => (
{p.name}
Related collections
{(window.COLLECTIONS || []).filter(c => ["trio","platform","mochi"].includes(c.slug)).map((c) => (
{c.image && ( {c.name} )}
{c.name}
{c.threads.map(tk => )}
))}
); } // Coerce retired screen ids back to home so a stale localStorage value or an old // bookmarked deep link (e.g. the removed "client" portal) never lands on a blank // page — the render block has no default fallback. const RETIRED_SCREENS = { client: 1 }; function normalizeScreen(s) { return RETIRED_SCREENS[s] ? "home" : s; } // ---- URL <-> screen mapping --------------------------------------------- // The app keeps a single internal `screen` id (e.g. "gateway", "project-dfw", // "policy-privacy"). These two helpers translate that id to/from a real path so // the address bar reads /collections/gateway instead of /?screen=gateway. // Collection details nest under /collections/, projects under /projects/, and // policies under /policy/; every other screen is a flat top-level path. The map // is fully reversible, so pushState and the back button round-trip cleanly. function isCollectionSlug(s) { return !!(window.COLLECTIONS || []).find((c) => c.slug === s); } function screenToPath(s) { if (!s || s === "home") return "/"; if (s.indexOf("project-") === 0) return "/projects/" + s.slice("project-".length); if (s.indexOf("policy-") === 0) return "/policy/" + s.slice("policy-".length); if (isCollectionSlug(s)) return "/collections/" + s; return "/" + s; } function pathToScreen(path) { const p = (path || "/").replace(/\/+$/, ""); // trim trailing slashes if (p === "") return "home"; const parts = p.replace(/^\/+/, "").split("/").map((x) => { try { return decodeURIComponent(x); } catch (e) { return x; } }); if (parts[0] === "collections" && parts[1]) return parts[1]; if (parts[0] === "projects" && parts[1]) return "project-" + parts[1]; if (parts[0] === "policy" && parts[1]) return "policy-" + parts[1]; return parts[0] || "home"; } // Exposed so the few detail components that navigate via a full page load // (they have no setScreen prop) can build a real path instead of the old // localStorage+reload hack, which path routing would otherwise override. window.screenToPath = screenToPath; window.pathToScreen = pathToScreen; // Map a screen id → its document title + analytics label. Data-driven from the // collection/project registries so EVERY page is tracked distinctly. Lead // Forensics and GTM read document.title and the URL on each virtual pageview, // so these must be unique per screen. function screenMeta(screen) { const SITE = "Derlot"; const STATIC = { home: ["Derlot — Designed for the spaces between.", "01 Home"], collections: ["Collections — " + SITE, "02 Collections"], downloads: ["Downloads — " + SITE, "04 Downloads"], projects: ["Projects — " + SITE, "05 Projects"], about: ["About — " + SITE, "06 About"], "design-capabilities": ["Collaboration — " + SITE, "07 Collaboration"], "circular-economy": ["Circularity — " + SITE, "08 Circularity"], distributors: ["Distributors — " + SITE, "10 Distributors"], moodboard: ["Moodboard — " + SITE, "Moodboard"], }; if (STATIC[screen]) return { title: STATIC[screen][0], label: STATIC[screen][1] }; if (screen && screen.indexOf("policy-") === 0) { const name = screen.replace("policy-", "").replace(/-/g, " "); const nice = name.replace(/\b\w/g, (c) => c.toUpperCase()); return { title: nice + " — " + SITE, label: "Policy · " + name }; } if (screen && screen.indexOf("project-") === 0) { const p = window.getProject && window.getProject(screen); const nm = (p && p.name) || screen.replace("project-", ""); return { title: nm + " — Projects — " + SITE, label: "Project · " + nm }; } const c = (window.COLLECTIONS || []).find((x) => x.slug === screen); if (c) return { title: c.name + " — Collections — " + SITE, label: c.name + " detail" }; return { title: SITE, label: screen || "home" }; } function App() { const [screen, setScreenState] = React.useState(() => { // URL is the source of truth. Prefer a real path (/collections/gateway), // then a legacy ?screen= deep link (old shared links still resolve), then // the persisted screen for a bare "/" visit, then home. We don't persist // the URL value so a deep-linked tab doesn't clobber other tabs. try { const q = new URLSearchParams(window.location.search).get("screen"); if (q) return normalizeScreen(q); const fromPath = pathToScreen(window.location.pathname); if (fromPath && fromPath !== "home") return normalizeScreen(fromPath); } catch (e) { /* no-op */ } return normalizeScreen(localStorage.getItem("derlot-screen") || "home"); }); // SPA virtual pageview — fires on user navigation AND back/forward, with the // accurate title + path so Lead Forensics / GTM attribute each screen. const firePageview = (s) => { const m = screenMeta(s); window.dataLayer = window.dataLayer || []; window.dataLayer.push({ event: "screen_view", screen: s, page_title: m.title, page_path: screenToPath(s) }); }; const setScreen = (s) => { setScreenState(s); localStorage.setItem("derlot-screen", s); // Reflect the screen as a real path so deep links, the address bar and // URL-based analytics all track the actual page (e.g. /collections/gateway). try { window.history.pushState({ screen: s }, "", screenToPath(s)); } catch (e) { /* no-op */ } firePageview(s); window.scrollTo({ top: 0, behavior: "instant" }); }; // Keep the tab/document title + canonical URL in sync with the screen (covers // initial load too), so each route is titled and canonicalised distinctly. React.useEffect(() => { try { document.title = screenMeta(screen).title; const link = document.querySelector('link[rel="canonical"]'); if (link) link.setAttribute("href", "https://www.derlot.com" + screenToPath(screen)); } catch (e) { /* no-op */ } }, [screen]); // Back/forward: restore the screen from the URL without pushing a new entry. React.useEffect(() => { const onPop = () => { let s = "home"; try { const q = new URLSearchParams(window.location.search).get("screen"); s = q || pathToScreen(window.location.pathname); } catch (e) { /* no-op */ } s = normalizeScreen(s); setScreenState(s); localStorage.setItem("derlot-screen", s); firePageview(s); window.scrollTo({ top: 0, behavior: "instant" }); }; window.addEventListener("popstate", onPop); return () => window.removeEventListener("popstate", onPop); }, []); return (
{window.PDP_ROUTES && window.PDP_ROUTES.has(screen) && ( )} {window.PROJECT_PDP_ROUTES && window.PROJECT_PDP_ROUTES.has(screen) && ( )}
{screen === "home" && } {screen === "collections" && } {screen === "gateway" && } {screen === "trio" && } {screen === "pipeline" && } {screen === "prisma" && } {screen === "caterpillar" && } {screen === "mochi" && } {screen === "twig" && } {screen === "autobahn" && } {screen === "cocoon" && } {screen === "volar" && } {screen === "stump-r" && } {screen === "s1" && } {screen === "tonne" && } {screen === "stump" && } {screen === "cup" && } {screen === "biggie" && } {screen === "platform" && } {screen === "strap" && } {screen === "picket" && } {screen === "pinto" && } {screen === "hext" && } {screen === "yeti" && } {screen === "rio" && } {screen === "pillar" && } {screen === "guell" && } {screen === "fit" && } {screen === "tetromino-s" && } {screen === "mass" && } {screen === "seed" && } {screen === "ivi" && } {screen === "homework" && } {screen === "coral" && } {screen === "wombat" && } {screen === "flatliner" && } {screen === "kono" && } {screen === "bolet" && } {screen === "kink" && } {screen === "pill" && } {screen === "downloads" && } {screen === "projects" && } {screen === "about" && } {screen === "design-capabilities" && } {screen === "circular-economy" && } {screen === "distributors" && } {screen.startsWith("policy-") && } {screen === "moodboard" && } {screen.startsWith("project-") && window.getProject && window.getProject(screen) && }
); } window.App = App;