/* MOCKUP A — "Editorial / Structural" Light, paper-forward. Strong left-aligned hierarchy, asymmetric splits, thin red rules, generous whitespace. The signature SectionHeading device tops most sections. Content identical to mockups B & C (window.ESW_HOME). */ (function () { const { Button, SectionHeading, StatBlock, ProjectCard } = window.ESWagnerDesignSystem_ee40a0; const D = window.ESW_HOME; const head = (s) => ({ fontFamily: "var(--font-heading)", fontWeight: 700, textTransform: "uppercase", lineHeight: 1.02, letterSpacing: "-0.01em", margin: 0 }); const body = { fontFamily: "var(--font-body)", lineHeight: 1.6, color: "var(--text-muted)" }; const HEX = "polygon(25% 0%, 100% 0%, 100% 100%, 25% 100%, 0% 50%)"; // Sector card — editorial: clean white, icon badge tinted, blurb visible function SectorCardA({ s }) { const c = `var(--esw-${s.color === "dirt" ? "carolina-dirt" : s.color})`; return ( e.preventDefault()} className="reveal" style={{ background: "#fff", border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-lg)", padding: "26px 24px", display: "flex", flexDirection: "column", gap: 14, transition: "transform .25s var(--ease-out), box-shadow .25s", boxShadow: "var(--shadow-card)" }} onMouseEnter={(e) => { e.currentTarget.style.transform = "translateY(-4px)"; e.currentTarget.style.boxShadow = "var(--shadow-md)"; }} onMouseLeave={(e) => { e.currentTarget.style.transform = "none"; e.currentTarget.style.boxShadow = "var(--shadow-card)"; }}>

{s.label}

{s.blurb}

Explore ); } function PathCardA({ p }) { return (

{p.title}

{p.blurb}

); } // Project card — editorial: tag has no pill, asphalt text, sector icon at left function ProjectCardA({ p, iconMap }) { const [hover, setHover] = React.useState(false); const inProgress = p.status && p.status.toLowerCase().includes("progress"); return ( e.preventDefault()} style={{ display: "block", background: "#fff", border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-lg)", overflow: "hidden", boxShadow: hover ? "var(--shadow-md)" : "var(--shadow-card)", transform: hover ? "translateY(-4px)" : "none", transition: "transform .25s var(--ease-out), box-shadow .25s", textDecoration: "none" }} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}>
{p.title} {p.status && {p.status}}
{iconMap[p.sector] && ( )} {p.sector}

{p.title}

◆{p.location}
{p.metrics && p.metrics.length > 0 && (
{p.metrics.slice(0, 3).map((m, i) => (
{m.value}
{m.label}
))}
)}
); } function App() { window.useReveal(); const sectorIcon = React.useMemo(() => D.sectors.items.reduce((m, s) => { m[s.label] = s.img; return m; }, {}), []); React.useEffect(() => { if (window.lucide) window.lucide.createIcons(); }); return (
{/* 1 — HERO */}
{D.hero.eyebrow}

{D.hero.h1a}
{D.hero.h1b}

{D.hero.subhead}

ESW jobsite, aerial
{/* 2 — INTRO */}
{D.intro.body}
ESW operator
{/* 3 — STAT BAND */}
{D.stats.map((s, i) => (
))}
{/* 4 — SECTORS */}
{D.sectors.intro}
{D.sectors.items.map((s) => )}
{/* 5 — FEATURED PROJECTS */}
{D.projects.intro}
{D.projects.items.map((p) => (
))}
{/* 6 — CAREERS (dark, co-equal) */}
{D.careers.pitch}
{D.careers.paths.map((p) => )}
{/* 7 — CULTURE */}
ESW crew
{D.culture.body}

"{D.culture.quote}"

— {D.culture.quoteAttr}
{/* 8 — SAFETY */}
Worker wearing the E.S. Wagner Safety — Own It! vest
{D.safety.body}
{/* 9 — NEWS */}
{/* 10 — CAPABILITY */}
{D.capability.eyebrow}
400+
Pieces of major equipment

{D.capability.body}

{/* 11 — CLOSING CTA */}

{D.closing.h2}

{D.closing.body}

{/* 12 — LOCATIONS STRIP */}
); } ReactDOM.createRoot(document.getElementById("root")).render(); })();