# Impact Page > A sustainability and social impact report: headline numbers, emissions charts, a carbon calculator, giving, people data and commitments. - Type: React template (Templates) - Access: Pro (the source needs a Wingo UI Pro plan, see https://wingo-ui.com/pricing) - Version: 1.0.0 - Install: `npx wingo-ui@latest add impact-page` - Docs: https://wingo-ui.com/templates/impact-page ## Interaction The hero sets the report title beside a drawn landscape whose front ridge is the real emissions-per-user curve, and the four headline numbers roll up once (final in the server markup). Download the full report shows a spinner, then a confirmation (onDownload, or a 900 ms pretend). A sticky chapter nav under the header follows the chapter in view, scrolls its active chip into view on phones, jumps to a chapter on tap and shows reading progress as a thin bar. Every chart has a title, a note, a legend where there are two or more series and a View data toggle that swaps the drawing for its table (the table is always there for screen readers). Hover, tap or Tab to an emissions column, a quarter on the intensity line, a donut source, a giving segment, a map hub or a volunteering month for its values. The carbon calculator takes a team size (slider, arrow keys) and a region (a select, a bottom sheet on phones) and updates Acme vs self-hosted emissions, the yearly saving and a flight equivalence live, with the methodology in a disclosure. The nonprofit map filters by region from its legend. Commitments show a status chip with an icon, a progress bar and the deadline; the archive lists past reports. ## Installation ```bash npx wingo-ui@latest add impact-page ``` Pro item: run `npx wingo-ui@latest login` once with a Pro account. The CLI adds the files, their dependencies and a version record for updates. With shadcn: `npx shadcn@latest add @wingo-ui/impact-page` (needs the @wingo-ui registry with your API key in components.json) Files: - `components/templates/impact-page.tsx` - `components/templates/impact-page-data.ts` npm dependencies: `npm i d3-scale d3-shape lucide-react motion` Wingo UI dependencies (installed automatically): - [Marketing Section](https://wingo-ui.com/components/marketing-section) ([Markdown](https://wingo-ui.com/components/marketing-section.md)) - [Marketing Header](https://wingo-ui.com/components/marketing-header) ([Markdown](https://wingo-ui.com/components/marketing-header.md)) - [Marketing Footer](https://wingo-ui.com/components/marketing-footer) ([Markdown](https://wingo-ui.com/components/marketing-footer.md)) - [CTA Section](https://wingo-ui.com/components/cta-section) ([Markdown](https://wingo-ui.com/components/cta-section.md)) - [Animated Counter](https://wingo-ui.com/components/animated-counter) ([Markdown](https://wingo-ui.com/components/animated-counter.md)) - [Avatar](https://wingo-ui.com/components/avatar) ([Markdown](https://wingo-ui.com/components/avatar.md)) - [Button](https://wingo-ui.com/components/button) ([Markdown](https://wingo-ui.com/components/button.md)) - [Heatmap calendar](https://wingo-ui.com/components/heatmap-calendar) ([Markdown](https://wingo-ui.com/components/heatmap-calendar.md)) - [Select](https://wingo-ui.com/components/select) ([Markdown](https://wingo-ui.com/components/select.md)) - [Slider](https://wingo-ui.com/components/slider) ([Markdown](https://wingo-ui.com/components/slider.md)) - [Chart kit](https://wingo-ui.com/components/chart-kit) ([Markdown](https://wingo-ui.com/components/chart-kit.md)) - [Motion presets](https://wingo-ui.com/components/motion) ([Markdown](https://wingo-ui.com/components/motion.md)) - [Navigation](https://wingo-ui.com/components/navigation) ([Markdown](https://wingo-ui.com/components/navigation.md)) - [Tones](https://wingo-ui.com/components/tones) ([Markdown](https://wingo-ui.com/components/tones.md)) - [UIProvider](https://wingo-ui.com/components/ui-config) ([Markdown](https://wingo-ui.com/components/ui-config.md)) ## Usage ```tsx // app/(marketing)/impact/page.tsx "use client" import Link from "next/link" import { ImpactPage } from "@/components/templates/impact-page" export default function ImpactRoute() { return ( { window.open(href, "_blank") }} /> ) } ``` ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `design?` | `"classic" \| "editorial" \| "minimal"` | `"classic"` | The whole page's look. classic: a drawn landscape beside the copy, raised chart cards and gradient bands; editorial: a printed annual report with giant start-aligned type over a landscape panorama, numbered chapters, heavy rules, flat charts, a centered header and footer; minimal: centered and quiet, a small leaf rosette, hairline cards, no bands, a transparent header and a simple footer. ctaProps, headerProps and footerProps still win. | | `year?` | `number` | `2026` | The report year in the eyebrow, the announcement and the chart notes. | | `headlines?` | `ImpactHeadline[]` | `"IMPACT_HEADLINES"` | { id, value, decimals?, prefix?, suffix?, label }: the hero's numbers. | | `emissions?` | `ImpactEmissionsYear[]` | `"IMPACT_EMISSIONS"` | { year, scope1, scope2, scope3 } in tCO2e per fiscal year: the stacked columns and the climate heading's cut and growth. | | `targetPath?` | `ImpactTargetPoint[]` | `"IMPACT_TARGET_PATH"` | { year, value }: the dashed reduction path; the last point is labeled net zero. | | `intensity?` | `ImpactIntensityPoint[]` | `"IMPACT_INTENSITY"` | { period ("Q1 2022"), value } kg CO2e per active user: the line chart and the hero landscape's ridge. | | `energy?` | `ImpactEnergySource[]` | `"IMPACT_ENERGY"` | { id, name, share, note }: the electricity mix donut. | | `scope3?` | `ImpactCategory[]` | `"IMPACT_SCOPE3"` | { id, name, value }: scope 3 by category in tCO2e. | | `nonprofitStats?` | `ImpactNonprofitStats` | `"IMPACT_NONPROFIT_STATS"` | { organizations, seats, countries, value }: the program's totals. | | `regions?` | `ImpactRegion[]` | `"IMPACT_REGIONS"` | { id, name, hubs: { id, city, lon, lat, organizations }[] }: the dot map and its region filter. | | `stories?` | `ImpactStory[]` | `"IMPACT_STORIES"` | Featured nonprofits with a quote, a metric and a drawn mini app (ui.kind shifts, sites or plan). | | `eligibility?` | `string[]` | `"IMPACT_ELIGIBILITY"` | The checklist on the application card. | | `pillars?` | `ImpactPillar[]` | `"IMPACT_PILLARS"` | { id: equity \| product \| time, title, value, description }: the 1% pledge tiles. | | `giving?` | `ImpactCategory[]` | `"IMPACT_GIVING"` | { id, name, value } cash grants in USD: the proportional bar; the sum is the cash total in the copy. | | `headcount?` | `number` | `184` | Employees, in the people heading. | | `representation?` | `ImpactRepresentation[]` | `"IMPACT_REPRESENTATION"` | { id, team, share, people }: women and non-binary people per team, against parity. | | `pay?` | `ImpactPayGap[]` | `"IMPACT_PAY"` | { id, group, adjusted, unadjusted } cents per dollar: the pay equity dot plot. | | `volunteering?` | `{ month: string; hours: number }[]` | `"IMPACT_VOLUNTEERING"` | Paid volunteer hours per month (yyyy-mm). | | `volunteerShare?` | `number` | `71` | Percent of employees who took at least one volunteer day. | | `peopleNotes?` | `string[]` | `"IMPACT_PEOPLE_NOTES"` | Numbered methodology footnotes under the people charts. | | `openSource?` | `ImpactOpenSourceStats` | `"IMPACT_OPEN_SOURCE"` | { repos, contributors, stars, mergedPrs, sponsored }. | | `repos?` | `ImpactRepo[]` | `"IMPACT_REPOS"` | { id, name, description, language, stars, href }: the repository list. | | `contributions?` | `ImpactContributionDay[]` | `"IMPACT_CONTRIBUTIONS"` | { date, value } merged pull requests per day: the heatmap. | | `contributionsEnd?` | `string` | `"2026-09-30"` | The heatmap's last day (yyyy-mm-dd). | | `commitments?` | `ImpactCommitment[]` | `"IMPACT_COMMITMENTS"` | { id, title, due, status: done \| on-track \| at-risk, progress, detail }: the timeline, grouped by year. | | `shortfalls?` | `ImpactShortfall[]` | `"IMPACT_SHORTFALLS"` | { id, title, body, action }: where the company fell short and what changes. | | `reports?` | `ImpactReport[]` | `"IMPACT_REPORTS"` | { id, year, title, size, format, href }: the archive below this year's report. | | `assuranceScope?` | `string[]` | `"IMPACT_ASSURANCE_SCOPE"` | What the auditor checked, as chips on the assurance card. | | `gridRegions?` | `ImpactGridRegion[]` | `"IMPACT_GRID_REGIONS"` | { value, label, intensity } kg CO2e per kWh: the calculator's regions. | | `calculatorFactors?` | `ImpactCalculatorFactors` | `"IMPACT_CALCULATOR_FACTORS"` | The calculator's per-seat assumptions, also printed in its methodology. | | `defaultTeamSize?` | `number` | `50` | The calculator's team size on load (1 to 500). | | `defaultRegion?` | `string` | `"us"` | The calculator's region on load, a gridRegions value. | | `reportHref?` | `string` | `"/impact/acme-impact-report-2026.pdf"` | The full report's address, handed to onDownload. | | `onDownload?` | `(href: string) => (void \| Promise)` | | Runs with reportHref on Download the full report (hero, nav and archive). A returned promise keeps the buttons loading; a rejection shows an error. Without it: 900 ms, then a confirmation. | | `applyHref?` | `string` | `"/contact"` | Where Apply now and the closing band's primary button go. | | `header?` | `boolean` | `true` | The marketing header; off inside a site layout that has one. | | `footer?` | `boolean` | `true` | The marketing footer. | | `showAnnouncement?` | `boolean` | `true` | The strip above the header bar (labels.announcement). | | `showNav?` | `boolean` | `true` | The sticky chapter nav with the reading progress bar. | | `showClimate?` | `boolean` | `true` | Emissions by scope, intensity per user, electricity mix and scope 3 categories. | | `showCalculator?` | `boolean` | `true` | The carbon calculator for your team. | | `showNonprofits?` | `boolean` | `true` | Program stats, the dot map, nonprofit stories and the application card. | | `showGiving?` | `boolean` | `true` | The 1% pledge tiles and where the cash went. | | `showPeople?` | `boolean` | `true` | Representation, pay equity, volunteering and the footnotes. | | `showOpenSource?` | `boolean` | `true` | Open-source stats, the contributions heatmap and the repositories. | | `showCommitments?` | `boolean` | `true` | The 2030 commitments timeline. | | `showShortfalls?` | `boolean` | `true` | Where we fell short. | | `showAssurance?` | `boolean` | `true` | The independent assurance statement. | | `showArchive?` | `boolean` | `true` | Past reports and data downloads. | | `showCta?` | `boolean` | `true` | The closing band. | | `ctaVariant?` | `"inverted" \| "soft" \| "split"` | `"inverted"` | The closing band: a solid band, a gray band, or copy beside the buttons on a raised panel. Applies to the classic design. | | `background?` | `"plain" \| "soft" \| "glow" \| "aurora" \| "grid" \| "dots"` | `"aurora"` | The main background: plain is the bare page color; the others tint the page and add a glow, an aurora, a grid or dots over the first screen. A design picks its own unless you set one (classic aurora, editorial soft, minimal plain). | | `backgroundColor?` | `string` | `"oklch(0.62 0.14 275)"` | The tint and glow color of the main background. | | `bandBackground?` | `"muted" \| "tinted" \| "gradient" \| "dots"` | `"gradient"` | The secondary background of the bands. Cards, fields and tiles inside a band are lifted one step above it, so they never share its color. | | `bandColor?` | `string` | `"oklch(0.62 0.14 275)"` | The tint of tinted and gradient bands; defaults to backgroundColor. | | `tone?` | `"neutral" \| "brand" \| "success" \| "warning" \| "danger" \| "info"` | `"neutral"` | The active chapter chip, the reading progress bar, the calculator's slider and the eligibility checks (success when neutral). | | `ctaTone?` | `"neutral" \| "brand" \| "success" \| "warning" \| "danger" \| "info"` | `"neutral"` | Download the full report, Apply now, the header's Get started and the closing band. | | `headerProps?` | `Partial` | | Passed to MarketingHeader. | | `footerProps?` | `Partial` | | Passed to MarketingFooter. | | `ctaProps?` | `Partial` | | Passed to the closing CtaSection, spread last. | | `onSubscribe?` | `(email: string) => (void \| Promise)` | | The footer newsletter; a rejected promise shows an error. Without it: 900 ms, then success. | | `animateIn?` | `boolean` | `true` | The headline numbers roll up and the charts grow the first time they scroll into view (never under reduced motion). Everything is final in the server markup. | | `locale?` | `string` | `"en-US"` | Intl locale for every number, percent, amount and month. | | `linkComponent?` | `(props: LinkComponentProps) => ReactNode` | `""` | The router link for every link on the page (next/link in an app). | | `labels?` | `Partial` | `"DEFAULT_IMPACT_PAGE_LABELS"` | Every visible string; {placeholders} are filled from the data. | | `className?` | `string` | | Classes for the root. | | `classNames?` | `Partial>` | | Classes for header, hero, art, headlines, nav, chapter, panel, calculator, map, story, commitments, shortfalls, assurance, archive, cta and footer. | ## Parts ### IMPACT_PAGE_DESIGNS (constant) The design names: classic, editorial, minimal. ### DEFAULT_IMPACT_PAGE_LABELS (constant) Every default string, in English. ### IMPACT_SAMPLE (constant) All the sample content in one object. ### IMPACT_YEAR (constant) 2026. ### IMPACT_HEADLINES (constant) 62% lower per-user emissions, 100% renewable, 18,400 seats, $1.2M donated. ### IMPACT_EMISSIONS (constant) Scopes 1, 2 and 3 for 2022 to 2026: 8,380 down to 4,520 tCO2e. ### IMPACT_TARGET_PATH (constant) 50% below 2022 by 2027, 90% below by 2030. ### IMPACT_INTENSITY (constant) kg CO2e per active user, Q1 2022 to Q3 2026. ### IMPACT_ENERGY (constant) Wind, solar, hydro and certificates. ### IMPACT_SCOPE3 (constant) 2026 scope 3 by category. ### IMPACT_NONPROFIT_STATS (constant) 2,140 organizations, 18,400 seats, 46 countries. ### IMPACT_REGIONS (constant) Six regions with their city hubs. ### IMPACT_STORIES (constant) Harbor Food Bank, Open Rivers Trust and Kijani Schools Network. ### IMPACT_ELIGIBILITY (constant) Who can apply. ### IMPACT_PILLARS (constant) 1% of equity, product and time. ### IMPACT_GIVING (constant) Where the $1.2M went. ### IMPACT_HEADCOUNT (constant) 184. ### IMPACT_REPRESENTATION (constant) Women and non-binary people per team. ### IMPACT_PAY (constant) Adjusted and unadjusted pay ratios. ### IMPACT_VOLUNTEERING (constant) Volunteer hours per month, January to September 2026. ### IMPACT_VOLUNTEER_SHARE (constant) 71. ### IMPACT_PEOPLE_NOTES (constant) The people footnotes. ### IMPACT_OPEN_SOURCE (constant) Open-source totals. ### IMPACT_REPOS (constant) Four public repositories. ### IMPACT_CONTRIBUTIONS (constant) 26 weeks of merged pull requests per day, from a fixed seed. ### IMPACT_CONTRIBUTIONS_END (constant) 2026-09-30. ### IMPACT_COMMITMENTS (constant) Seven goals from 2025 to 2030. ### IMPACT_SHORTFALLS (constant) Travel, AI compute and engineering representation. ### IMPACT_REPORTS (constant) The archive: 2023 to 2025 reports and the 2026 data file. ### IMPACT_ASSURANCE_SCOPE (constant) The assurance card's chips. ### IMPACT_GRID_REGIONS (constant) Six grids with their carbon intensity. ### IMPACT_CALCULATOR_FACTORS (constant) The calculator's assumptions. ### IMPACT_LAND (constant) Rough continent outlines in lon / lat for the dot map. ### ImpactPageDesign (type) classic | editorial | minimal. ### ImpactChapter (type) The nav's chapters. ### ImpactPageSlot (type) The classNames keys. ### ImpactPageLabels (type) The labels object. ### ImpactHeadline (type) One hero number. ### ImpactEmissionsYear (type) One year of emissions by scope. ### ImpactTargetPoint (type) One point of the reduction path. ### ImpactIntensityPoint (type) One quarter of per-user emissions. ### ImpactEnergySource (type) One electricity source. ### ImpactCategory (type) A named amount (scope 3 categories, grants). ### ImpactNonprofitStats (type) The program totals. ### ImpactRegion (type) A region and its hubs. ### ImpactHub (type) One city hub on the map. ### ImpactStory (type) One featured nonprofit. ### ImpactStoryUi (type) The drawn mini app of a story. ### ImpactPillar (type) One pledge pillar. ### ImpactRepresentation (type) One team's representation. ### ImpactPayGap (type) One pay comparison. ### ImpactOpenSourceStats (type) Open-source totals. ### ImpactRepo (type) One repository. ### ImpactContributionDay (type) One day of merged pull requests. ### ImpactCommitment (type) One commitment. ### ImpactCommitmentStatus (type) done | on-track | at-risk. ### ImpactShortfall (type) One shortfall. ### ImpactReport (type) One archived report. ### ImpactGridRegion (type) A calculator region. ### ImpactCalculatorFactors (type) The calculator's assumptions. ### ImpactRing (type) A lon / lat outline. ## Examples - **Editorial design**: design="editorial": a printed annual report. Giant start-aligned type over a landscape panorama, numbered chapters, heavy rules and flat charts. - **Minimal design**: design="minimal": centered and quiet. A small leaf rosette, hairline cards, no gray bands, a transparent header and a simple footer. - **Brand orange, split closing band**: ctaTone="brand" on the download and apply buttons, tone="brand" on the chapter nav and slider, ctaVariant="split". - **Climate only, embedded**: Without the marketing header and footer, only the climate chapter and the calculator: a sustainability page inside your docs site. ## See also - [Year in Review Page](https://wingo-ui.com/templates/year-in-review-page) ([Markdown](https://wingo-ui.com/templates/year-in-review-page.md)) - [Community Page](https://wingo-ui.com/templates/community-page) ([Markdown](https://wingo-ui.com/templates/community-page.md)) - [About Page](https://wingo-ui.com/templates/about-page) ([Markdown](https://wingo-ui.com/templates/about-page.md)) - [Heatmap calendar](https://wingo-ui.com/components/heatmap-calendar) ([Markdown](https://wingo-ui.com/components/heatmap-calendar.md)) - [Donut chart](https://wingo-ui.com/components/donut-chart) ([Markdown](https://wingo-ui.com/components/donut-chart.md)) --- Canonical: https://wingo-ui.com/templates/impact-page More components: https://wingo-ui.com/components ยท Index for agents: https://wingo-ui.com/llms.txt