// home.jsx — Corporate-engineering homepage for Enginuity // Hatch / DRA / EPCM aesthetic — full-bleed photo hero, image-led service cards, // markets grid, difference, projects, insights, contact band. const { useState: useState_h, useEffect: useEffect_h, useRef: useRef_h } = React; // ── Data ─────────────────────────────────────────────────────────────────── const CAPABILITIES = [ { id: 'ideation', label: 'Ideation', tag: 'Concept & R&D', headline: 'Turning complex problems into practical engineering.', blurb: 'From client challenge to validated concept. We bring deep R&D — including world-class microwave technology research from our St Gallen office — to bear on new processes, products and recovery routes.', services: [ ['New product development', 'From client problem to functional prototype. FMEA, design-of-experiments, patentable concepts.'], ['Recycling & circular process', 'Material recovery flow-sheets. Beneficiation of secondary streams. Lab through pilot scale.'], ['Microwave technology', 'High-frequency heating for ore pre-treatment, drying and breakage reduction. Multiphysics simulation.'], ], tone: 'studio', }, { id: 'design', label: 'Design', tag: 'Engineering', headline: 'Technically sound, best-practice engineering across disciplines.', blurb: 'Mechanical, MV electrical, civil, process and mining engineers working from the same project room. ANSYS FEA and CFD, Aspen, ETAP — we validate in software before steel is ordered.', services: [ ['Mechanical engineering', 'Structural, rotating and materials handling. FEA, CFD, fatigue and vibration analysis.'], ['MV electrical engineering', 'Medium-voltage reticulation, protection coordination, MCCs, SCADA integration.'], ['Civil engineering', 'Earthworks, foundations, stormwater. RC and steel structures.'], ['Process & plant design', 'Mass and energy balances. PFDs, P&IDs, 3D plant models. Hazop-ready packages.'], ['Mining engineering', 'Mine planning, ventilation, hoist and material handling, geotechnical interface.'], ], tone: 'industrial', }, { id: 'execution', label: 'Execution', tag: 'EPCM & Construction', headline: 'Project delivery with a single accountable team.', blurb: 'The engineers who design the plant stay on the project through procurement, construction and commissioning. NEC4, FIDIC and PMBOK frameworks. Cost, schedule and contract administration.', services: [ ['EPCM', 'Engineering, procurement and construction management — definition through handover.'], ['Project & programme management','NEC4, FIDIC and PMBOK frameworks. Cost, schedule and risk management.'], ['Construction supervision', 'Resident engineering, QA/QC, vendor inspection and commissioning support.'], ], tone: 'earth', }, { id: 'monitoring', label: 'Monitoring', tag: 'Operations & Lifecycle', headline: 'Performance, risk and opportunity — after handover.', blurb: 'We instrument what we build and stay involved long after commissioning. Condition monitoring, predictive analytics and lifecycle integration feed the next design and protect the operating asset.', services: [ ['Civil & structural', 'Settlement, strain and crack monitoring. Tailings dam integrity.'], ['Mechanical performance', 'Vibration, alignment, lubrication. Bearing and gearbox condition trending.'], ['Electrical & control', 'Power quality, thermography, partial-discharge surveys.'], ['Predictive & analytical','Failure-mode modelling, RCM frameworks, ML anomaly detection.'], ['Lifecycle integration', 'Asset management plans, ISO-55000 alignment, OPEX optimisation.'], ], tone: 'plant', }, ]; const MARKETS = [ { id: 'mining', label: 'Mining', blurb: 'Hard-rock, surface and underground operations across PGMs, base metals, gold, diamond and coal.', tone: 'earth' }, { id: 'minerals', label: 'Minerals & Metals', blurb: 'Concentrators, smelters, refineries and recovery plants. Brownfield expansion and de-bottlenecking.', tone: 'industrial' }, { id: 'energy', label: 'Energy & Power', blurb: 'Industrial power infrastructure, MV reticulation and energy-efficiency projects.', tone: 'sky' }, { id: 'industrial', label: 'Industrial Plant', blurb: 'Chemicals, water treatment and bulk materials handling. Project-specific process design.', tone: 'studio' }, { id: 'research', label: 'Technology & R&D', blurb: 'Microwave heating, pre-treatment, novel beneficiation. From bench to pilot.', tone: 'plant' }, ]; // Each client carries a logo slug. Drop logo files at uploads/logos/.png // (or .svg) and they appear automatically; until then a clean wordmark shows. const CLIENTS = [ { name: 'Anglo American', slug: 'anglo-american' }, { name: 'Black Chrome Mine', slug: 'bcm' }, { name: 'Aurex Constructors', slug: 'aurex' }, { name: 'General Kinematics', slug: 'general-kinematics' }, { name: 'Iritron', slug: 'iritron' }, { name: 'R&R Quantity Surveyors', slug: 'rr-quantity-surveyors' }, ]; const PROJECTS = [ { id: 'p1', sector: 'Platinum · UG2', title: 'Concentrator de-bottlenecking', location: 'Limpopo, South Africa', year: '2024', metric: '+18% throughput', blurb: 'Hydrocyclone re-engineering and slurry distribution redesign. ANSYS CFD model validated against plant trial. Implemented with zero unplanned downtime.', discipline: ['Mechanical', 'Process', 'EPCM'], tone: 'industrial', }, { id: 'p2', sector: 'Diamond · Kimberlite', title: 'Microwave pre-treatment pilot', location: 'Northern Cape, South Africa', year: '2024 — 2025', metric: '−22% mill energy', blurb: 'Pilot-scale 100 kW continuous microwave applicator for kimberlite pre-conditioning. Multiphysics design, fabrication oversight, performance monitoring.', discipline: ['R&D', 'Mechanical', 'Microwave'], tone: 'studio', }, { id: 'p3', sector: 'Base metals · Smelter', title: 'MV reticulation upgrade', location: 'North West, South Africa', year: '2023', metric: '11 kV → 22 kV', blurb: 'Brownfield medium-voltage upgrade across an active smelter. Protection grading, harmonic study, phased switching plan, commissioning supervision.', discipline: ['MV Electrical', 'EPCM'], tone: 'industrial', }, { id: 'p4', sector: 'PGM · Tailings', title: 'Re-mining flow-sheet', location: 'Rustenburg, South Africa', year: '2025', metric: '3.4 Mt/a feed', blurb: 'Front-end engineering and lab programme for a tailings re-treatment plant. Recovery model, mass balance, capex estimate to AACE Class 3.', discipline: ['Process', 'Ideation', 'EPCM'], tone: 'earth', }, ]; const INSIGHTS = [ { id: 'i1', kind: 'Insight', title: 'Why microwave pre-treatment is finally ready for mineral processing', date: 'March 2026', blurb: 'After two decades of academic interest, continuous microwave systems are at last viable at production scale. Here is what changed — and what still needs work.', tone: 'studio', }, { id: 'i2', kind: 'Case study', title: 'How a 7 mm cyclone change added 18% throughput at a UG2 concentrator', date: 'February 2026', blurb: 'A study in why CFD-led detail matters more than capital. The change cost less than a single replacement pump and outperformed a far larger upgrade.', tone: 'industrial', }, { id: 'i3', kind: 'News', title: 'Enginuity opens a research office in St Gallen, Switzerland', date: 'January 2026', blurb: 'Our R&D team now operates from both Centurion and St Gallen, deepening our work on microwave heating and circular-process design for the resource sector.', tone: 'sky', }, ]; // ── Hero — full-bleed photo carousel ─────────────────────────────────────── const HERO_SLIDES = [ { eyebrow: 'Enginuity · Technology development & EPCM partner', title: 'Engineering and project delivery for the mining and industrial sectors.', sub: 'Detailed engineers and on-site builders working as one team — across Africa and Europe.', cta: ['Explore our services', 'capabilities'], tone: 'industrial', img: 'assets/home-hero-mashup.jpg', caption: 'Concentrator floor — Limpopo, 2024', }, { eyebrow: 'R&D in focus', title: 'Microwave pre-treatment, from concept to commissioned pilot.', sub: 'World-class research from our St Gallen office, integrated into the projects we deliver.', cta: ['See the R&D programme', 'capabilities/ideation'], tone: 'studio', img: 'assets/campus-stgallen.jpg', caption: '100 kW continuous applicator — pilot site, 2025', }, { eyebrow: 'Operating across two continents', title: 'Two offices, one team — Centurion and St Gallen.', sub: 'Engineering, construction management and lifecycle support for the operators who keep industry moving.', cta: ['About Enginuity', 'about'], tone: 'earth', img: 'assets/headframe.jpg', caption: 'Site supervision — North West, 2023', }, ]; function Hero({ layout, onNav }) { if (layout === 'split') return ; if (layout === 'editorial') return ; return ; } function HeroCarousel({ onNav }) { const [i, setI] = useState_h(0); useEffect_h(() => { const t = setInterval(() => setI((n) => (n + 1) % HERO_SLIDES.length), 7500); return () => clearInterval(t); }, []); return (
{HERO_SLIDES.map((s, idx) => (
))}
{HERO_SLIDES[i].eyebrow} {HERO_SLIDES[i].title}

{HERO_SLIDES[i].sub}

{/* Slide dots */}
{HERO_SLIDES.map((_, idx) => ( ))}
); } function HeroSplit({ onNav }) { return (
Technology development & EPCM partner Engineering and project delivery for the mining and industrial sectors.

Detailed engineers and on-site builders working as one team — across Africa and Europe.

); } function HeroEditorial({ onNav }) { return (
Enginuity
Engineering and project delivery for the resource sector.

Enginuity is a multi-disciplinary engineering, project delivery and technology development partner. We work for mining, minerals and industrial clients across South Africa and Europe — from first-principles design through commissioning.

); } // ── Welcome — DRA-style intro paragraph ──────────────────────────────────── function Welcome({ onNav }) { return (
Welcome A different kind of engineering firm.

Enginuity is a multi-disciplinary engineering, project delivery and operations partner — focused on the mining, minerals and industrial sectors. We bring together advanced research and turn-key EPCM delivery in a single team, so projects move from concept to commissioned asset without losing the engineers who started them.

From our headquarters in Centurion, South Africa and our research office in St Gallen, Switzerland, we serve Anglo American, Black Chrome Mine, Aurex Constructors, General Kinematics, Iritron and R&R Quantity Surveyors — among others.

onNav('about')}>About Enginuity
); } // ── Services — DRA-style image-led cards ─────────────────────────────────── function Services({ onNav }) { return (
What we do Four stages. One accountable team.

We cover the full lifecycle of an engineering project — from early-stage R&D and conceptual design through to long-term performance monitoring of operating assets.

{CAPABILITIES.map((c) => ( ))}
); } function ServiceCard({ cap, onNav }) { const [h, setH] = useState_h(false); return (
setH(true)} onMouseLeave={() => setH(false)} onClick={() => onNav(`capabilities/${cap.id}`)} style={{ background: 'var(--bg)', cursor: 'pointer', border: '1px solid var(--hair)', transition: 'box-shadow .25s, transform .25s', boxShadow: h ? '0 12px 32px rgba(0,0,0,0.08)' : '0 1px 0 rgba(0,0,0,0.02)', transform: h ? 'translateY(-2px)' : 'translateY(0)', display: 'flex', flexDirection: 'column', }}>
{cap.tag}
{cap.label}

{cap.blurb}

{ e?.stopPropagation && e.stopPropagation(); onNav(`capabilities/${cap.id}`); }}> Read more
); } // ── Markets — tile grid with photos ──────────────────────────────────────── function Markets({ onNav }) { return (
Markets Sectors we serve.

Our work concentrates where simulation accuracy and on-site delivery must both be right — mining, minerals processing and the industrial plant that supports them.

{MARKETS.map((m, i) => { // First market spans 3, second spans 3, then 2-2-2 const spans = [3, 3, 2, 2, 2]; return ; })}
); } function MarketTile({ market, span, onNav }) { const [h, setH] = useState_h(false); return ( ); } // ── Offices — two offices, one team ─────────────────────────────────────── function Difference({ onNav }) { return (
Offices Two offices, one team.

Headquartered in South Africa with a research arm in Switzerland — so the R&D bench and the EPCM delivery floor stay connected.

{[ { tag: 'South Africa', city: 'Centurion', role: 'Engineering & EPCM headquarters', detail: ['Limeroc Business Park', 'Mini Factory Unit 27, Magner Street', 'Knoppieslaagte 385-JR, Centurion 0157'], img: 'assets/office-centurion.jpeg', pos: 'center', tone: 'earth' }, { tag: 'Switzerland', city: 'St Gallen', role: 'Research & technology development', detail: ['Lerchenfeldstrasse 3', '9014 St Gallen', 'Switzerland'], img: 'assets/office-stgallen.jpeg', pos: 'center 40%', tone: 'sky' }, ].map((o, i) => (
{o.tag} {o.city}

{o.role}

    {o.detail.map((line, j) => (
  • {line}
    • ))}
))}
); } // ── Stats band ───────────────────────────────────────────────────────────── function Stats() { return (
{[ ['09', 'Years operating'], ['24', 'Projects delivered'], ['> R 1.4 bn', 'Combined project value'], ['02', 'Continents · ZA + CH'], ].map(([n, l], i) => (
{n}
{l}
))}
); } // ── Featured projects ────────────────────────────────────────────────────── function FeaturedWork({ onNav }) { return (
Selected projects Built, commissioned, running.
04 of 24 featured
{PROJECTS.map((p) => ( ))}
); } function ProjectCard({ project, onNav }) { const [h, setH] = useState_h(false); return (
setH(true)} onMouseLeave={() => setH(false)} onClick={() => onNav('work')} style={{ cursor: 'pointer' }}>
{project.sector} {project.year}
{project.title}

{project.blurb}

{project.metric} · {project.location}
); } // ── Clients ──────────────────────────────────────────────────────────────── function Clients() { return (
Trusted by Working with the operators who keep industry moving.
{CLIENTS.map((c, i) => ( ))}
); } // Renders a client's logo image, falling back to a clean wordmark if the // image file hasn't been uploaded yet (uploads/logos/.png|svg). function ClientLogo({ client, borderRight, borderBottom }) { const [mode, setMode] = useState_h('png'); // png → svg → wordmark const src = mode === 'png' ? `assets/logos/${client.slug}.png` : mode === 'svg' ? `assets/logos/${client.slug}.svg` : null; return (
{ e.currentTarget.style.color = 'var(--fg)'; e.currentTarget.style.background = 'var(--bg2)'; }} onMouseLeave={(e) => { e.currentTarget.style.color = 'var(--fg2)'; e.currentTarget.style.background = 'transparent'; }} > {src ? ( {client.name} setMode(mode === 'png' ? 'svg' : 'wordmark')} style={{ maxHeight: 52, maxWidth: '80%', width: 'auto', objectFit: 'contain', opacity: 0.92, transition: 'opacity .2s, transform .2s', }} onMouseEnter={(e) => { e.currentTarget.style.opacity = '1'; e.currentTarget.style.transform = 'scale(1.03)'; }} onMouseLeave={(e) => { e.currentTarget.style.opacity = '0.92'; e.currentTarget.style.transform = 'scale(1)'; }} /> ) : ( {client.name} )}
); } // ── Insights ─────────────────────────────────────────────────────────────── function Insights({ onNav }) { const { items } = useInsights(); return (
Insights & news What we are working on, writing about and learning.
{items.slice(0, 3).map((it) => ( ))}
); } // ── Contact CTA ──────────────────────────────────────────────────────────── function ContactCTA({ onNav }) { return (
Need a solution? Let's build it together.

Send us a brief — even a rough sketch — and we will come back with how we would approach it, who would lead it, and what a first phase might look like.

karla.naude@engn.co.za
); } // ── Home compose ─────────────────────────────────────────────────────────── function HomePage({ tweaks, onNav }) { return ( <> ); } Object.assign(window, { HomePage, CAPABILITIES, MARKETS, CLIENTS, PROJECTS, INSIGHTS, Hero, HeroCarousel, HeroSplit, HeroEditorial, Welcome, Services, ServiceCard, Markets, MarketTile, Difference, Stats, FeaturedWork, ProjectCard, Clients, Insights, ContactCTA, });