Theme · Landing · Beginner

Nonprofit Organization Site

Nonprofit site = a full-bleed mission hero with dual CTAs, plus a white impact band with KPIs and a campaign bar.

How to prompt it

Build a website for "Terra Foundation", a climate-restoration nonprofit.

STYLE
- Deep indigo-to-teal gradient hero (#0b1f3a → #0f766e) with a soft aurora glow
- White type on the hero, calm off-white body below
- One warm accent (amber #f59e0b) for the primary "Donate" CTA

LAYOUT
- Nav: "Terra" wordmark; links Mission (on) / Work / Stories; an amber "Donate" pill
- Full-bleed hero: indigo-to-teal gradient with a warm glow; kicker "CLIMATE RESTORATION", headline "Repair the ground beneath us", sub "We restore degraded land with the people who live on it."; amber "Donate now" + outlined "Read our story"
- Tall only: white impact band - KPIs 2.4M Trees planted / 380 Communities / 19k Volunteers and a campaign bar "Fall campaign - $1.8M of $2.5M raised" filled to 72%

COMPONENTS
- Nav: wordmark, three links, amber Donate pill
- Hero: kicker, headline, sub-line, Donate now + Read our story
- Impact band: three KPIs and a campaign progress bar

INTERACTION
- Amber is reserved for donate; KPIs count up once on view; the bar fills to 72%.

TECHNICAL
- React, Tailwind CSS, shadcn/ui

Revise only the impact band of this nonprofit page.

CHANGES
- Add a fourth KPI: Rivers restored 12
- Move the campaign bar to 84% with $2.1M of $2.5M raised

DO NOT
- Do not touch the hero or the nav
- Do not change the amber accent

Build a production nonprofit site for "Terra".

STYLE
- Indigo-to-teal gradient hero with a warm glow; white type
- Amber #f59e0b reserved for donate actions

LAYOUT
- Nav: Terra wordmark, Mission (on) / Work / Stories, Donate pill
- Full-bleed hero: kicker CLIMATE RESTORATION, headline, sub, Donate now + Read our story
- Tall: white impact band with KPIs (trees, communities, volunteers) and a campaign progress bar at 72%

COMPONENTS
- Navbar, button, stats-card, progress
- Donate is the single primary CTA

TECHNICAL
- React, Tailwind CSS, shadcn/ui
- KPIs aria-labelled; donate button has aria-label; full focus rings

MOTION
- KPI count-up once on view. Reduced-motion: static numbers.

Modify prompts change only the target — the rest of your page stays untouched.

Tips

One CTA per screen. The donate button should be the warmest, most inviting element on the page.

Nonprofit Organization Site

Repair the ground beneath us

Tips

See also

Components

Animations

Styles

Themes

Prompts

Glossary

Anti-patterns