Critical path · next 90 days

{[ ["Final ISA execution", "May 27", 1.00, false], ["GSU delivery confirmation", "Jun 14", 0.55, true], ["Switchyard energization", "Aug 02", 0.18, false], ["Commissioning window", "Sep 09", 0.00, false]]. map(([t, d, p, warn], i) =>

{t} {d}

)}

); } function MK_AIPower() { // Power demand vs supply timeline return (

Top exposures

); } function MK_BTM() { return (

Readiness checks

); } function MK_Solar() { return (

PROJECTMWSCHEDULECOD P75

{[ ["Mojave Ridge", 300, [["IA", 1], ["EPC", 1], ["Equip", 0.85], ["Energize", 0.4]], "Q1 '27"], ["Sandhill Flats", 220, [["IA", 1], ["EPC", 0.9], ["Equip", 0.6], ["Energize", 0.25]], "Q3 '27"], ["Pleasant Valley", 180, [["IA", 1], ["EPC", 0.7], ["Equip", 0.4], ["Energize", 0.1]], "Q4 '27", true], ["Big Springs", 260, [["IA", 1], ["EPC", 1], ["Equip", 1], ["Energize", 0.75]], "Q3 '26"], ["Tularosa II", 240, [["IA", 0.8], ["EPC", 0.4], ["Equip", 0.2], ["Energize", 0]], "Q2 '28", true], ["Cedar Creek", 200, [["IA", 1], ["EPC", 0.95], ["Equip", 0.9], ["Energize", 0.5]], "Q4 '26"]]. map(([name, mw, phases, cod, warn], i) =>

{name} {mw}

{phases.map(([label, p], j) =>

{label}

)}

{cod}

)}

); } function MK_Wind() { return (

Resource & risk

); } function MK_Storage() { return (

VENDOR / TIERSKULEAD TIMEEXPOSURESTATUS

{[ ["CATL · T1", "EnerC 5MWh", 38, 0.42, "ORDERED", false], ["BYD · T1", "MC-1.0", 44, 0.28, "PO ISSUED", false], ["Fluence · T1", "Gridstack", 52, 0.18, "RFQ", true], ["Powin · T2", "Pod 1500", 46, 0.08, "BACKUP", false], ["LG ES · T1", "TR1300", 58, 0.04, "DEFERRED", true]]. map(([v, sku, weeks, expo, status, warn], i) =>

{v} {sku}

{weeks}w

{(expo * 100).toFixed(0)}% · port. {status}

)} ); } function MK_Nuclear() { return ( ); } function MK_Geothermal() { return (

Resource & dev

); } function MK_CRE() { return (

Asset-by-asset readiness

{[ ["Greenfield Logistics", "Industrial", "Phoenix, AZ", 0.92, "CLEAR"], ["Midtown 8", "Office", "Atlanta, GA", 0.61, "REVIEW", true], ["Stonebridge Center", "Mixed-use", "Denver, CO", 0.78, "CLEAR"], ["Harbor Point", "Multifamily", "Tampa, FL", 0.48, "FLAG", true], ["Westline Park", "Retail", "Dallas, TX", 0.85, "CLEAR"], ["North Loop II", "Industrial", "Columbus, OH", 0.70, "REVIEW"]]. map(([name, kind, loc, score, status, warn], i) =>

{name} {kind} {loc}

{status}

)}

Diligence surface

); } function MK_Gas() { return (

Dispatch economics · next 7 days

Siting & permits

); } const MOCKUPS = { "cre": MK_CRE, "datacenters": MK_DataCenters, "ai-power": MK_AIPower, "btm": MK_BTM, "solar": MK_Solar, "wind": MK_Wind, "storage": MK_Storage, "gas": MK_Gas, "nuclear": MK_Nuclear, "geothermal": MK_Geothermal }; function ImageCard({ tab, idx, total, active }) { return (

{/* Image */}

{ // Fallback to a guaranteed-working seeded placeholder if Unsplash 404s. if (!e.currentTarget.dataset.fallback) { e.currentTarget.dataset.fallback = "1"; e.currentTarget.src = `https://picsum.photos/seed/buildq-${tab.id}/1400/900`; } }} style={{ width: "100%", height: "100%", objectFit: "cover", display: "block", filter: active ? "none" : "grayscale(0.6) brightness(0.85)", transition: "filter .5s ease, transform .8s ease", transform: active ? "scale(1.0)" : "scale(1.02)" }} /> {/* Top dark scrim for the meta row */}

{/* Meta row */}

{String(idx + 1).padStart(2, "0")} / {String(total).padStart(2, "0")}

Asset class

{/* Title overlaid at bottom of image */}

{tab.label}

{/* Description block */}

{tab.desc}

); } function InactiveCard({ tab, idx, total }) { return (

{/* Decorative geometric accent — quietly hints at the asset class */}

{String(idx + 1).padStart(2, "0")} / {String(total).padStart(2, "0")}

Asset class

{tab.label}

View →

); } function CarouselDots({ total, active, onChange, progressKey, playing, durationMs, label }) { return (

{String(active + 1).padStart(2, "0")} / {String(total).padStart(2, "0")} {/* Hairline progress track — N segments, accent fills the active segment over durationMs, done segments are filled neutral. */}

{Array.from({ length: total }).map((_, i) => { const isActive = i === active; const isDone = i < active; return ( ); })}

{label && {label} }

); } function CarouselArrow({ dir, onClick, disabled }) { return ( ); } function AssetClassesSection() { const [active, setActive] = React.useState(0); const [viewportW, setViewportW] = React.useState(typeof window !== "undefined" ? window.innerWidth : 1440); const [paused, setPaused] = React.useState(false); React.useEffect(() => { const onR = () => setViewportW(window.innerWidth); window.addEventListener("resize", onR); return () => window.removeEventListener("resize", onR); }, []); // Card width adapts down for narrower viewports. Image cards look better narrower. const cardWidth = Math.min(640, Math.max(440, viewportW - 480)); const gap = 20; const trackOffset = -active * (cardWidth + gap) + (viewportW - cardWidth) / 2; const total = ACT_TABS.length; const ActiveMockup = MOCKUPS[ACT_TABS[active].id]; // Keyboard support React.useEffect(() => { const onKey = (e) => { if (e.key === "ArrowRight") {setActive((a) => (a + 1) % total);setPaused(true);} if (e.key === "ArrowLeft") {setActive((a) => (a - 1 + total) % total);setPaused(true);} }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [total]); // Autoplay: advance every 6s, looping, pause on hover/interaction const AUTOPLAY_MS = 6000; const [tick, setTick] = React.useState(0); // re-key the progress fill on each step React.useEffect(() => { if (paused) return; const id = setTimeout(() => { setActive((a) => (a + 1) % total); setTick((t) => t + 1); }, AUTOPLAY_MS); return () => clearTimeout(id); }, [active, paused, total]); // Manual navigation pauses autoplay; clicking the same active card resumes const manualGo = (i) => { setActive(i); setPaused(true); }; // ───────── Drag-to-swipe ───────── // Pointer-down anywhere on the track starts a drag. We translate the track // by the live delta, then snap to the nearest card on release. Threshold // is ~25% of one card-width — beyond that, we advance/retreat by N steps. const [drag, setDrag] = React.useState({ active: false, startX: 0, dx: 0, pointerId: null }); const trackRef = React.useRef(null); const onPointerDown = (e) => { // Only left mouse / touch / pen if (e.button !== undefined && e.button !== 0) return; setPaused(true); setDrag({ active: true, startX: e.clientX, dx: 0, pointerId: e.pointerId }); try { e.currentTarget.setPointerCapture(e.pointerId); } catch (_) {} }; const onPointerMove = (e) => { if (!drag.active) return; setDrag((d) => ({ ...d, dx: e.clientX - d.startX })); }; const endDrag = (e) => { if (!drag.active) return; const step = cardWidth + gap; const steps = Math.round(-drag.dx / step); if (steps !== 0) { setActive((a) => { let next = a + steps; // Clamp instead of wrap to feel natural with drag. next = Math.max(0, Math.min(total - 1, next)); return next; }); } setDrag({ active: false, startX: 0, dx: 0, pointerId: null }); try { e.currentTarget.releasePointerCapture(e.pointerId); } catch (_) {} }; // ───────── Wheel / trackpad horizontal scroll ───────── // Trackpads send deltaX continuously; we accumulate and step the carousel // once a threshold is crossed, then add a short cooldown so a single swipe // doesn't fly through three slides. const wheelAccum = React.useRef(0); const wheelCooldown = React.useRef(0); const onWheel = (e) => { // Only respond to horizontal intent — vertical scroll keeps scrolling the page. const dx = Math.abs(e.deltaX); const dy = Math.abs(e.deltaY); if (dx < dy) return; e.preventDefault(); setPaused(true); const now = performance.now(); if (now < wheelCooldown.current) return; wheelAccum.current += e.deltaX; const THRESH = 90; if (Math.abs(wheelAccum.current) >= THRESH) { const dir = wheelAccum.current > 0 ? 1 : -1; setActive((a) => Math.max(0, Math.min(total - 1, a + dir))); wheelAccum.current = 0; wheelCooldown.current = now + 360; } }; return (

Every project. Every asset class.

BuildQ supports complex infrastructure projects end-to-end — from site origination to last-mile execution across every capital-intensive asset class.

{/* Controls row */}

manualGo((active - 1 + total) % total)} /> manualGo((active + 1) % total)} />

{/* Carousel track — full-bleed. Pause-on-hover is scoped to the track, not the whole section, so the section header doesn't trap the timer. Pointer + wheel handlers wire up drag-to-swipe and trackpad scroll. */}

setPaused(true)} onMouseLeave={() => setPaused(false)} onPointerDown={onPointerDown} onPointerMove={onPointerMove} onPointerUp={endDrag} onPointerCancel={endDrag} onWheel={onWheel}>

{ACT_TABS.map((tab, i) => { const isActive = i === active; return (

!isActive && setActive(i)} style={{ flex: `0 0 ${cardWidth}px`, width: cardWidth, height: "100%", cursor: isActive ? "default" : "pointer", opacity: isActive ? 1 : 0.72, transform: isActive ? "scale(1)" : "scale(0.95)", transition: "opacity .5s ease, transform .5s ease", overflow: "hidden", borderRadius: 6 }}>

); })}

); } window.AssetClassesSection = AssetClassesSection;