// sol-hero-process.jsx // Solutions Page (Commercial Solar) — Hero, Service Overview, Proof Strip, Process // Hero is intentionally LIGHT (soft green tint) to differentiate Solutions from Industry pages. // ============================================================ // Breadcrumb — sits inside the soft-green hero, light text on dark // ============================================================ const SolBreadcrumb = () =>
{/* GI Link Audit (Fix 4): Home → /, "Solutions" rendered as plain text since there is no /solutions/ index page in the registry (and no plan to add one). */} Home Solutions Commercial Solar
; // ============================================================ // SolHero — Soft Green brand surface. DOCUMENT-STYLE editorial layout. // Distinct from homepage (which is photo-as-bg + overlaid copy). // Here: structured masthead → large editorial H1 → cinematic photo strip // with embedded technical metadata. Reads like a project spec sheet. // ============================================================ const SolHero = () =>
{/* extremely subtle radial — adds depth without becoming a gradient */}
; // ============================================================ // SolGenerationSketch — small inline SVG; building load curve + solar arc. // Tells the "daytime self-consumption" story in 220×56: // • dashed white line — the facility's typical weekday load profile // • amber arc — the day's solar generation, peaking midday // • amber-fill area where generation sits under load = self-consumption // • two ticks at sunrise / sunset frame the daylight window // Solar is sized to annual consumption; daylight overlap with operations is the natural result. // Same visual language as BessDemandSketch; same dimensions as LedFixtureSketch. // ============================================================ const SolGenerationSketch = () => { // Building load — flat-ish weekday operations, ramp up at start of shift, // mild midday dip (lunch), ramp down at end. Sampled across a 24h frame. const load = "M0,40 L18,38 L34,30 L52,22 L72,20 L92,24 L110,22 L128,20 L146,28 L164,36 L184,40 L200,42 L220,42"; // Solar generation — symmetric arc, sunrise ~h6 (x≈55), peak ~h12 (x≈110), sunset ~h18 (x≈165) const sun = "M55,48 C75,8 145,8 165,48"; // Self-consumption fill — area where solar sits under load (between sunrise & sunset) const overlap = "M55,48 C75,18 145,18 165,48 L165,48 L55,48 Z"; return ( ); }; // ============================================================ // SolServiceOverview — three columns on Paper Cream // Refined: line icons (engineered, not decorative), card lift on hover // ============================================================ const SolOverviewCard = ({ icon, label, body, isLast }) => { const [hovered, setHovered] = React.useState(false); return (
setHovered(true)} onMouseLeave={() => setHovered(false)} style={{ position: 'relative', padding: '64px 48px 68px', borderRight: isLast ? 'none' : '1px solid rgba(15,33,51,0.10)', background: hovered ? '#fff' : 'transparent', transition: 'background 220ms cubic-bezier(.2,0,0,1)', display: 'flex', flexDirection: 'column' }}> {/* sage indicator that brightens on hover */} ); }; const SolServiceOverview = () => { const cols = [ { icon: 'sun', label: 'What it is', body: 'Commercial rooftop solar systems for C&I facilities — sized and installed to offset electricity costs and reduce grid dependency over a 30-year operating life.' }, { icon: 'line-chart', label: 'How we approach it', body: 'We evaluate how your building actually uses energy\u2014identifying efficiency opportunities and aligning solar with real demand. This ensures the system is right-sized, not oversized, and performs as part of a smarter, more efficient energy strategy.' }, { icon: 'file-check', label: 'What you get', body: 'Lower operating costs, reduced grid dependence, and a system designed to perform, aligned with your building\u2019s real energy needs.' }]; return (
Commercial solar

Properly sized through a full-building energy approach.

{cols.map((c, i) => )}
); }; // ============================================================ // SolProofStrip — Wise Blue, visual infographic of solar economics // ============================================================ const SolProofStrip = () => { // Lifecycle proportions: 30-yr total. Payback (3–6 yrs) shown at its upper // bound so the segment honestly visualizes the worst case. Net generation // = remainder under warranty. const TOTAL_YEARS = 30; const PAYBACK_END = 6; const paybackPct = (PAYBACK_END / TOTAL_YEARS) * 100; // 20 const genPct = 100 - paybackPct; // 80 const yearTicks = [0, 5, 10, 15, 20, 25, 30]; return (
{/* Decorative monogram — faint, anchored bottom-right */} {/* Decorative thin vertical "panel-row" hairlines — anchored top-right corner */}
{/* === Header === */}
Proof in numbers

Pay it back in three to six. {` `} Run it for thirty.

The economics of a commercial rooftop system, visualized at full scale. Real returns from completed GI installations.

{/* ============================================================ PRIMARY VISUAL — 30-year lifecycle ribbon. The bar IS the chart: payback segment is proportionally sized against the warranty, so the visual makes the point before any number is read. ============================================================ */}
{/* Year axis */}
{yearTicks.map((y, i) => ( {i === 0 ? 'Year 0' : i === yearTicks.length - 1 ? 'Year 30' : `Yr ${y}`} ))}
{/* Tick marks above bar */} {yearTicks.map((y) => { const x = (y / TOTAL_YEARS) * 1344; return ( ); })} {/* The bar itself */}
{/* Payback segment — amber, with subtle diagonal stripe to read as "working it off". Diagonal nods to the engineering-counterpoint vocabulary in the brand book. */}
{/* Generation segment — sage, solid */}
{/* Boundary marker — vertical line at the payback/generation split */}
{/* Caption row — numerals aligned with segments */}
Payback
3–6 yrs
System pays for itself through generation and incentives.
LONG-TERM GENERATION
30 year performance warranty
Commercial-grade panels generating into year thirty — roughly two-and-a-half decades of electricity after payback.
{/* ============================================================ SUPPORTING ROW — two compact visual stats: (1) 70% offset as a stacked solar/grid bar. (2) 15–30% IRR as a positioned range on a 0–40% scale. ============================================================ */}
{/* (1) Load offset — stacked bar carries the meaning */}
Average annual electricity · C&I facility
70% generated on-site
SOLAR · 70
GRID · 30
{/* (2) Project IRR — range bar placed on a 0-40% scale */}
Project IRR · completed installations
15–30%
{/* Track */}
{/* 15–30 of a 0–40 scale → 37.5% → 75% */}
{/* Endpoint dots */}
{/* Scale labels */}
0% 10% 20% 30% 40%
); }; // ============================================================ // SolProcess — 4 phases. Reuses the homepage's horizontal-flow language, // but on Paper Cream (lighter) and with phase TIMING and DELIVERABLE rows. // ============================================================ const SolProcess = () => { const steps = [ { num: '01', label: 'Electricity Analysis', title: 'Assess', icon: 'search', copy: 'Review utility bills, interval consumption data, rate structures, and planned facility changes to establish a reliable electricity baseline and solar opportunity.', deliv: 'Electricity baseline + preliminary solar opportunity review' }, { num: '02', label: 'Technical Proposal', title: 'Model', icon: 'drafting-compass', copy: 'Develop the preliminary system layout, production estimate, incentives, payback, IRR, and long-term cash flow to confirm the business case.', deliv: 'System concept + financial model + technical proposal' }, { num: '03', label: 'Site Visit', title: 'Verify', icon: 'map-pin', copy: 'Visit the facility to confirm roof, electrical, access, construction, and interconnection assumptions before advancing to engineering.', deliv: 'Site feasibility findings + confirmed design assumptions' }, { num: '04', label: 'Engineering & Regulatory', title: 'Approve', icon: 'shield-check', copy: 'Complete structural, electrical, permitting, utility, and regulatory deliverables to move the project from concept to build-ready.', deliv: 'Engineered design package + approvals + construction-ready plan' }, { num: '05', label: 'Construction', title: 'Build', icon: 'hammer', copy: 'Install the system according to the approved design, coordinate inspections, and complete commissioning for commercial operation.', deliv: 'Commissioned solar PV system + inspection/interconnection sign-off' }, { num: '06', label: 'Operations & Maintenance', title: 'Operate', icon: 'activity', copy: 'Monitor performance, complete preventative maintenance, support service needs, and provide reporting to protect long-term system value.', deliv: 'Monitoring + maintenance support + performance reporting' }]; return (
{/* Compact infograph — 3 columns × 3 rows. Left column rows 1-3: steps 01-03, accent on RIGHT Center spans all 3 rows: editorial title Right column rows 1-3: steps 04-06, accent on LEFT Pairs align: 01↔04, 02↔05, 03↔06 */}
{/* LEFT COLUMN — steps 01, 02, 03 (rows 1, 2, 3) */} {steps.slice(0, 3).map((s, i) =>
{s.label}

{s.title}

{s.copy}

{s.num}
)} {/* CENTER — editorial title, spans all 3 rows */}
The process

Six stages.
One team.

{/* RIGHT COLUMN — steps 04, 05, 06 (rows 1, 2, 3) */} {steps.slice(3, 6).map((s, i) =>
{s.num}
{s.label}

{s.title}

{s.copy}

)}
); }; Object.assign(window, { SolBreadcrumb, SolHero, SolGenerationSketch, SolServiceOverview, SolProofStrip, SolProcess });