// Hero variations for the NeoHelio + orbit marketing site. // Four directions explored side-by-side on a design canvas. The user picks // one and the full multi-page site is built in that direction. // // Each hero is sized like a real desktop viewport (1440 × 820) so they can // be judged at production scale. All share the brand tokens from styles.css // and pull in OrbitWordmark from orbit-brand.jsx for the platform mark. // ────────── Shared nav (the same across all variations) ────────── const HVNav = ({ active = "home", warm = false }) => ( ); // ────────── Reusable: tiny console screenshot ────────── // Mirrors the real Fleet view — financial-first banner, savings tile, // blended-tariff readout, and a fleet table with TOU power curve. const HVMiniConsole = ({ style = {} }) => (
{/* top chrome */}
ORBIT / FLEET · FINANCIAL SYNCED · 1m
{/* body */}
{/* top stats row */}
{[ ["SITES", "12", "ink"], ["CAPACITY", "18.4 MW", "ink"], ["ACTIVE", "92%", "mint"], ["GROUPS", "03", "violet"], ].map(([k, v, tone]) => (
{k}
{v}
))}
{/* fleet bot banner */}
◇ KIT.TRANSMISSION Your fleet has saved 184.2k this month so far (day 19/31). On track for 298.4k by month-end. +18% vs baseline.
{/* financial tiles */}
{[ ["SAVINGS · MTD", "184,200", "amber"], ["VS BASELINE · MTD", "+28,400", "mint"], ["BLENDED TARIFF", "0.42 / kWh", "ink"], ].map(([k, v, tone]) => (
// {k}
{v}
))}
{/* fleet table */}
STATUSSITECAPACITY YIELDSAVINGS VS EXPECTED
{[ ["OK", "amber", "Cornubia", "540 kWp", "36,192", "27,840", "+15,786", true], ["WARN", "violet", "River Quarter", "579 kWp", "27,489", "21,200", "+8,250", false], ["OK", "amber", "Brickworks", "509 kWp", "25,905", "17,420", "+2,687", false], ["OK", "amber", "Paarl", "170 kWp", "9,595", "11,180", "+4,614", false], ["OK", "amber", "Lords View", "759 kWp", "49,544", "—", "+8,295", false], ["OK", "amber", "FreshBev", "252 kWp", "12,666", "—", "+2,787", false], ].map(([status, color, site, cap, yield_, sav, vs, active], i) => (
{status} {site} {cap} {yield_} {sav} {vs}
))}
); // ────────── Reusable: large stat readout ────────── const HVStat = ({ k, v, unit, tone = "ink" }) => (
{k}
{v} {unit && ( {unit} )}
); // ════════════════════════════════════════════════════════════════════ // HERO A · "Mission control" — classic. Big tagline left, console right. // Dense and confident; closest to the brand book's stated personality. // ════════════════════════════════════════════════════════════════════ const HeroA = () => (
{/* left — copy */}
◇ NH-IDENT/01 · solar telemetry infrastructure

Precision solar
monitoring.
Control-room grade.

neohelio builds the telemetry layer for utility-scale solar — from inverter-mounted edge devices to the operator console your team actually uses. One pane. Every array. Every 1.4 seconds.

{/* right — console preview */}
◇ ORBIT · OPERATOR CONSOLE — LIVE PREVIEW
{/* corner brackets */} {["tl", "tr", "bl", "br"].map((c) => (
))}
); // ════════════════════════════════════════════════════════════════════ // HERO B · "Dual identity" — neohelio (company) over orbit (platform). // Stacked editorial layout. The relationship between the two brands is // the lede. Lots of breathing room — warmer than A. // ════════════════════════════════════════════════════════════════════ const HeroB = () => (
{/* upper — company */}
◇ THE COMPANY FOUNDED MMXXV · 14 REGIONS · SOC-2 TYPE II

neohelio.

We build the telemetry layer for utility-scale solar — hardware on the array, software in the control room, no gap in between.

{/* divider band — "ships" */}
ships ↓ PLATFORM · ORB-IDENT/01 · v.4.2
{/* lower — platform */}

orbit is the operator console we ship — mission control for solar fleets. Every site, every inverter, every string, on one ring of telemetry passing through the console once every 1.4 seconds.

{/* right — readouts strip */}
◇ FLEET · LIVE — UPDATED 1.4s AGO
ALL SYSTEMS NOMINAL T+ 04:18:42 UTC
); // ════════════════════════════════════════════════════════════════════ // HERO C · "Orbital diagram" — big planetary diagram centered, copy // flanking. Most metaphorical / visual; observatory feel turned up. // ════════════════════════════════════════════════════════════════════ const HeroCDiagram = () => ( {/* ambient */} {/* outer trajectories */} {/* sun core */} {/* radiating ticks — solar burst */} {Array.from({ length: 16 }).map((_, i) => { const a = (i * 22.5 * Math.PI) / 180; const r1 = 44, r2 = i % 2 ? 56 : 64; return ( ); })} {/* satellites with labels */} {(() => { const sats = [ { rx: 200, ry: 74, rot: -22, t: 0.15, color: "var(--nh-accent)", r: 6, label: "SITE-04 · 247 MW" }, { rx: 160, ry: 58, rot: 28, t: 0.62, color: "var(--nh-violet)", r: 4, label: "SITE-22 · 184 MW" }, { rx: 240, ry: 90, rot: -22, t: 0.88, color: "var(--nh-accent)", r: 3, label: "SITE-31" }, { rx: 120, ry: 44, rot: 8, t: 0.35, color: "var(--nh-mint)", r: 3.5, label: "SITE-12" }, { rx: 78, ry: 28, rot: -50, t: 0.78, color: "var(--nh-accent)", r: 2.5 }, ]; return sats.map((s, i) => { const θ = s.rot * Math.PI / 180; const cosθ = Math.cos(θ), sinθ = Math.sin(θ); const a = s.t * Math.PI * 2; const x0 = Math.cos(a) * s.rx, y0 = Math.sin(a) * s.ry; const x = 260 + x0 * cosθ - y0 * sinθ; const y = 260 + x0 * sinθ + y0 * cosθ; return ( {s.label && ( <> {s.label} )} ); }); })()} {/* compass ticks */} {["N", "E", "S", "W"].map((d, i) => { const a = (i * 90 - 90) * Math.PI / 180; const x = 260 + Math.cos(a) * 252; const y = 260 + Math.sin(a) * 252; return ( {d} ); })} ); const HeroC = () => (
{/* left copy */}
◇ NH-IDENT/01

Every site,
one ring of
telemetry.

neohelio ships the hardware. orbit reads it. Every array on the same console, refreshed every 1.4 seconds.

{/* center diagram */}
{/* right readouts */}
◇ FLEET TELEMETRY · LIVE
SITES ONLINE42 / 42
CAPACITY6.4 GW
INSTANT OUTPUT4.812 GW
INVERTERS11,842
EDGE DEVICES14,218
TELEMETRY Δt1.4 sec
UPTIME (90d)99.97 %
P1 ALERTS1 ACTIVE
◆ NOW SHIPPING
orbit v.4.2 — sub-1.4s string-level
telemetry across 14 regions.
); // ════════════════════════════════════════════════════════════════════ // HERO D · "Editorial" — almost entirely typographic, generous space. // One huge headline, small wordmark, one strip of readouts. Warmest. // ════════════════════════════════════════════════════════════════════ const HeroD = () => (
{/* eyebrow */}
◇ NEOHELIO · SOLAR TELEMETRY INFRASTRUCTURE REV. 2026.05 · ALL SYSTEMS NOMINAL
{/* headline — the centerpiece */}

The solar fleet,
read clearly.

We build the instruments — on the array and in the control room — so utility-scale operators can see every site at once. Hardware by neohelio. Console by orbit.

{/* bottom readout strip */}
); // ────────── Canvas root ────────── const HeroCanvas = () => ( ); window.HeroCanvas = HeroCanvas;