// community-sections.jsx
// Community page — brand character & trust, not conversion.
// Rhythm mirrors Partners: Wise Blue (hero) → Cream (commitment)
// → Cream (Home Depot) → Soft Green (Athletes) → Cream (Rabba)
// → Wise Blue (Tour the Hills) → Soft Green (CTA).
// ============================================================
// 01 · HERO — Paper Cream, editorial split.
// Light treatment that matches Contact + Industry hero language:
// text-led left column, contained Team Canada photograph right.
// ============================================================
const CommunityHero = () => (
{/* faint grid texture — paper-side */}
{/*
Running header
About › Community
Where Green Integrations shows up
*/}
{/* LEFT — editorial column */}
Our community
More than the work{' '}
we deliver.
We believe businesses shouldn’t have to choose between economic
performance and environmental responsibility. That belief shapes how we
work — and how we operate as a company. Here is where we invest
beyond the project.
{/* Four-area marker rail — quiet preview of what's below */}
{[
{ n: '01', l: 'Youth & housing' },
{ n: '02', l: 'Sport & wellbeing' },
{ n: '03', l: 'Charity & fundraising' },
{ n: '04', l: 'Community events' }
].map((m, i) => (
0 ? 18 : 0,
borderRight: i < 3 ? '1px solid rgba(15,33,51,0.10)' : 'none',
minWidth: 0
}}>
{m.n}
{m.l}
))}
{/* RIGHT — contained Team Canada Fan Fest photograph */}
Team Canada Fan Fest · Vancouver, 2026
);
// ============================================================
// 02 · OUR COMMITMENT — Paper Cream. Four-area pillar grid.
// ============================================================
const OurCommitment = () => {
const areas = [
{
icon: 'home',
title: 'Youth & Housing',
body: 'Contributing to programs that create stable housing and opportunity for youth across Canada.'
},
{
icon: 'medal',
title: 'Sport & Wellbeing',
body: 'Backing Canadian athletes and events that promote health, resilience, and competitive development.'
},
{
icon: 'hand-heart',
title: 'Charity & Fundraising',
body: 'Sponsoring initiatives that raise funds for causes our team and clients care about.'
},
{
icon: 'users-round',
title: 'Community Fundraising',
body: 'Participating in community-led events that bring people together around meaningful causes.'
}
];
return (
{areas.map((a, i) => (
{a.title}
{a.body}
))}
);
};
// ============================================================
// InitiativeSection — reusable two-column initiative layout.
// Image left or right, body opposite. Cream or Soft Green or Wise Blue bg.
// Header running-band + caption keep editorial rhythm consistent.
// ============================================================
const InitiativeSection = ({
num, // '03'
label, // screen-reader/section label
bg = 'cream', // 'cream' | 'green' | 'blue'
imageSide = 'right',
img,
imgAlt,
imgMeta, // small caption beneath image
eyebrow,
eyebrowClass, // 'gi-eyebrow--green' | 'gi-eyebrow--gold'
title, // string or JSX
body, // string OR array of strings (paragraphs)
context, // optional mono context line (e.g. 'GI client since 2019')
cta // optional { href, label }
}) => {
const isDark = bg === 'green' || bg === 'blue';
const bgVar = bg === 'green'
? 'var(--gi-soft-green)'
: bg === 'blue'
? 'var(--gi-wise-blue)'
: 'var(--gi-paper-cream)';
const fgTitle = isDark ? '#fff' : 'var(--gi-deep-ink)';
const fgBody = isDark ? 'rgba(255,255,255,0.84)' : 'var(--gi-slate)';
const fgMeta = isDark ? 'rgba(255,255,255,0.55)' : 'var(--gi-graphite)';
const ruleDark = isDark ? 'rgba(255,255,255,0.18)' : 'rgba(15,33,51,0.14)';
const bodies = Array.isArray(body) ? body : [body];
const imageBlock = (
{imgMeta && (
{imgMeta}
)}
);
const textBlock = (
{eyebrow}
{title}
{bodies.map((p, i) => (
{p}
))}
{context && (
{context}
)}
{cta && (
)}
);
return (
{imageSide === 'left' ? (
{imageBlock}{textBlock}
) : (
{textBlock}{imageBlock}
)}
);
};
// ============================================================
// 03 · HOME DEPOT FOUNDATION — Paper Cream, image RIGHT.
// ============================================================
const HomeDepotFoundation = () => (
);
// ============================================================
// 04 · SPORT & WELLBEING — Soft Green (dark), image LEFT.
// ============================================================
const SportAndWellbeing = () => (
);
// ============================================================
// 05 · RABBA CHARITY CLASSIC — Paper Cream, image RIGHT.
// ============================================================
const RabbaCharityClassic = () => (
);
// ============================================================
// 06 · TOUR THE HILLS — Wise Blue (dark), image LEFT.
// ============================================================
const TourTheHills = () => (
);
// ============================================================
// 07 · CLOSING CTA — Soft Green.
// Standard GI assessment CTA per the brief.
// ============================================================
const CommunityCTA = () => (
Start your assessment
Ready to look at your energy costs?
A site visit, utility analysis, and facility-specific financial model — at no cost
and no commitment. We identify where your facility is losing money on energy and what
conservation, generation, and electrification measures are viable, with a payback model
built from your actual utility data.
No commitment required.
);
Object.assign(window, {
CommunityHero, OurCommitment, InitiativeSection,
HomeDepotFoundation, SportAndWellbeing, RabbaCharityClassic,
TourTheHills, CommunityCTA
});