// Devleaps — five hero / structure variants modeled on the LQ project, // rendered with Devleaps fonts, palette tokens, and the real wordmark logo. // All variants share Sections (Services, Manifesto, Team, Process, Contact) // and the same V4-style hero copy: manifesto headline + Devleaps lede. // ============================================================= // SHARED HERO PRIMITIVES — used by all variants // ============================================================= // Three-line manifesto headline with `//` mono ticks (V4 base) const ManifestoHeadline = ({ color = "var(--fg-on-dark)", maxFs = 96, cqi = 5 }) =>

one TEAM integrated solutions lasting impact.

; // Reorders the hero: lede first (highlighted), then secondary copy, then the // manifesto headline last — sized down so it punctuates the story instead of // dominating it. const DevleapsLede = ({ tone = "dark" }) => { const c1 = tone === "dark" ? "#fff" : "var(--fg)"; const c2 = tone === "dark" ? "rgba(255,255,255,.78)" : "var(--fg-muted)"; const c3 = tone === "dark" ? "rgba(255,255,255,.65)" : "var(--fg-subtle)"; return (

DEVLEAPS is your partner in building high-performing tech organizations.

Technology becomes a driver of business transformation: faster delivery, better developer experience, real scale across cloud, platforms, data, and AI.

Engineering excellence at the core. We design, build, integrate, train your engineers, and stay until the transformation actually lands.

); }; const HeroCTAs = ({ onDark = false }) =>
{e.preventDefault();const el = document.getElementById("contact");el && window.scrollTo({ top: el.offsetTop - 64, behavior: "smooth" });}}>Let's build together {e.preventDefault();const el = document.getElementById("services");el && window.scrollTo({ top: el.offsetTop - 64, behavior: "smooth" });}}>What we do
; const V4Line = ({ children }) =>
// {children}
; // ============================================================= // V1 — EDITORIAL ENGINEER (light · aperture diagram on right) // Shared content: V4 manifesto headline + Devleaps tagline. // ============================================================= const V1Hero = () => { const [rot, setRot] = React.useState(0); React.useEffect(() => { const t = setInterval(() => setRot((r) => (r + 0.25) % 360), 32); return () => clearInterval(t); }, []); return (
devleaps · network online · 75+ engineers · 4 hubs
); }; const V1Aperture = ({ rot }) =>
// fig.01 · system unlock
network · 15 nodes
{[0, 60, 120, 180, 240, 300].map((a) => )} {[30, 90, 150, 210, 270, 330].map((a) => )}
{[["throughput", "+312%"], ["cutover", "0 dt"], ["shipped", "12 wks"]].map(([l, v]) =>
{l}
{v}
)}
; // ============================================================= // V2 — TERMINAL (dark · live terminal log on right) // ============================================================= const V2Hero = () => { const [tick, setTick] = React.useState(0); React.useEffect(() => { const t = setInterval(() => setTick((x) => x + 1), 1200); return () => clearInterval(t); }, []); const dot = tick % 4 === 0 ? "●" : tick % 4 === 1 ? "○" : tick % 4 === 2 ? "●" : "○"; return (
{dot} // devleaps · network online · 75+ engineers · 4 hubs
); }; const Terminal = () => { const [lines, setLines] = React.useState([]); const script = React.useMemo(() => [ { t: "$ ", c: "devleaps scope --client=northbank", col: "#fff" }, { t: "", c: "→ authenticating...", col: "rgba(255,255,255,.55)" }, { t: "", c: "✓ network handshake · 4 hubs reachable", col: "var(--accent)" }, { t: "", c: "→ provisioning engineers: 6", col: "rgba(255,255,255,.55)" }, { t: "", c: "✓ cloud · devex · data · ai · transform", col: "var(--accent)" }, { t: "", c: "→ estimated cutover: 12 weeks · zero downtime", col: "rgba(255,255,255,.55)" }, { t: "", c: "✓ scope v1 ready for review", col: "var(--accent)" }, { t: "$ ", c: "devleaps ship", col: "#fff" }], []); React.useEffect(() => { let i = 0; const t = setInterval(() => { setLines((prev) => { if (i >= script.length) {clearInterval(t);return prev;} const next = [...prev, script[i]]; i++; return next; }); }, 650); return () => clearInterval(t); }, [script]); return (
devleaps@engineer · ~/scope
{lines.map((ln, i) =>
{ln.t}{ln.c}
)}
); }; // ============================================================= // V3 — EDITORIAL CONTRAST (full-bleed dark · centered manifesto) // ============================================================= const V3Hero = () =>
// devleaps · network online · 75+ engineers · 4 hubs
; const V3Stats = () =>
{[ ["// ENGINEERS", "75+"], ["// HUBS", "4 · NL / PL / SR / ID"], ["// DELIVERED IMPACT", "50+ projects"], ["// FOUNDED", "2023"]]. map(([l, v]) =>
{l}
{v}
)}
; // ============================================================= // V4 — HYBRID (manifesto headline · full-bleed dark — the canonical layout) // ============================================================= const V4Hero = () =>
; // Animated client marquee — wordmarks scrolling on a strip const ClientMarquee = ({ reverse = false, items, label = "trusted by teams at", inset = false }) => { const list = items || CLIENTS; const loop = [...list, ...list]; return (
{label}
{loop.map((n, i) => { const logo = (typeof CLIENT_LOGOS !== "undefined") && CLIENT_LOGOS[n]; return ( {logo ? {n} : {n} } ); })}
); }; const TechMarquee = () =>
tech we love

The stack we bet on.

Innovative where it earns its keep, stable where it counts. The tech choices that unlock your team's potential without leaving them stranded.

{[...TECH, ...TECH].map((t, i) => {t} )}
; // ============================================================= // V5 — TERMINAL x EDITORIAL (manifesto + terminal log on right) // ============================================================= const V5Hero = () => { const [tick, setTick] = React.useState(0); React.useEffect(() => { const t = setInterval(() => setTick((x) => x + 1), 1200); return () => clearInterval(t); }, []); const dot = tick % 2 === 0 ? "●" : "○"; return (
{dot} // devleaps · network online · 75+ engineers · 4 hubs
); }; // ============================================================= // PAGE COMPOSITIONS — all share the same content order. Hero differs only. // Block sequence: Hero → ClientMarquee → Network → Manifesto → // QuickStart → Team → LifeGallery → HumanQuote (promise) → TechMarquee → ProductsTeaser → Contact. // ============================================================= const buildPage = (Hero, useMarquee = false) => () => { const joost = TEAM.find(m => m.name === "Joost"); return ( <> {useMarquee ? : } {useMarquee ? : } ); }; const V1Page = buildPage(V1Hero, true); const V2Page = buildPage(V2Hero, true); const V3Page = buildPage(V3Hero, true); const V4Page = buildPage(V4Hero, true); const V5Page = buildPage(V5Hero, true); Object.assign(window, { V1Hero, V2Hero, V3Hero, V4Hero, V5Hero, Terminal, ClientMarquee, TechMarquee, V1Page, V2Page, V3Page, V4Page, V5Page });