Landing pages · React
Clean water fundraiser
Donation page for a clean water campaign with live progress, what each gift pays for, the build process and a pledge form.

What you get
A fundraising page for a nonprofit campaign: a hero with campaign progress, impact numbers, the project story, what each gift pays for, how a well gets built, supporter quotes, an FAQ and a pledge form. All content lives in src/site.ts.
Files
Exactly what is copied into a new project: 13 files, nothing generated.
Explorer 13
import type { Site } from "./types"; /** Everything this site shows. Edit freely. */export const site: Site = { "brand": "Wellspring Trust", "nav": [ { "label": "The project", "href": "#project" }, { "label": "Where it goes", "href": "#costs" }, { "label": "FAQ", "href": "#faq" } ], "navCta": { "label": "Donate", "href": "#donate" }, "sections": [ { "kind": "hero", "variant": "center", "eyebrow": "Campaign 2026 · 28 wells in 28 villages", "title": "Clean water within a ten-minute walk, for 11,000 people.", "text": "In the villages we work with, women and girls walk an average of 2.4 hours a day for water. A well run by a trained village committee changes that for twenty years or more.", "primary": { "label": "Give now", "href": "#donate" }, "secondary": { "label": "See where it goes", "href": "#costs" }, "visual": { "type": "mock", "title": "Campaign progress · updated weekly", "rows": [ { "label": "Raised", "value": "$184,300 of $260,000", "tone": "#0369a1" }, { "label": "Donors", "value": "2,914" }, { "label": "Wells completed", "value": "19 of 28", "tone": "#047857" }, { "label": "Committees trained", "value": "21" }, { "label": "Days left", "value": "41" } ], "footer": "Figures from our September field report" } }, { "kind": "stats", "items": [ { "value": "$9,300", "label": "Cost of one well, fully built" }, { "value": "400", "label": "People served per well" }, { "value": "94%", "label": "Of our wells still working after 5 years" }, { "value": "88¢", "label": "Of every dollar spent in the field" } ] }, { "kind": "split", "id": "project", "eyebrow": "The project", "title": "Wells that keep working because the village owns them", "text": "We drill with local contractors, then spend as long on people as on pipes. Each village elects a water committee, trains a mechanic, and sets a small monthly fee that pays for repairs.", "bullets": [ "Every well tested for water quality twice a year", "Spare parts stocked within a day's travel", "Repairs tracked publicly in our annual report" ], "visual": { "type": "card", "tone": "#0c4a6e", "title": "Well 19 · completed 2 October", "lines": [ "Depth: 46 metres", "Serves 380 people", "Committee of 7, 4 of them women" ] } }, { "kind": "menu", "id": "costs", "eyebrow": "Where it goes", "title": "What your gift pays for", "text": "Costs from our 2025 accounts. Gifts go to the campaign as a whole, not a single item.", "groups": [ { "name": "Everyday gifts", "items": [ { "name": "Water testing kit", "text": "Tests one well for a year", "price": "$35" }, { "name": "Hand pump spares", "text": "Seals, rods and a tool kit for one year", "price": "$120" }, { "name": "Mechanic training", "text": "Five days of training for one village mechanic", "price": "$260" } ] }, { "name": "Larger gifts", "items": [ { "name": "Committee training", "text": "Governance, bookkeeping and hygiene for one village", "price": "$480" }, { "name": "Hydrogeological survey", "text": "Finding the right place to drill", "price": "$1,100" }, { "name": "One complete well", "text": "Survey, drilling, pump, training and five years of checks", "price": "$9,300" } ] } ] }, { "kind": "steps", "eyebrow": "How a well gets built", "title": "Six months from survey to first water", "items": [ { "title": "Survey and agree", "text": "A hydrogeologist finds the site, and the village agrees on the committee and the fee." }, { "title": "Drill and install", "text": "Local contractors drill, case the borehole and fit a hand pump. Usually two weeks." }, { "title": "Train and hand over", "text": "The committee and mechanic are trained, the water is tested, and the well is handed over." } ] }, { "kind": "quotes", "eyebrow": "Voices", "title": "From the villages and our supporters", "items": [ { "quote": "My daughter used to miss the first lesson every day. Now she is at school before me.", "name": "Grace M.", "role": "Committee treasurer, well 12" }, { "quote": "They sent us a photo of the committee and the repair log. That's why we give every year.", "name": "Paul & Anne W.", "role": "Monthly donors since 2021" }, { "quote": "I fixed the pump in an hour last month. Before, we waited half a year.", "name": "Joseph K.", "role": "Village mechanic, well 7" } ] }, { "kind": "faq", "id": "faq", "eyebrow": "FAQ", "title": "Questions donors ask", "items": [ { "q": "Is my donation tax-deductible?", "a": "Sample answer: Wellspring Trust is a registered charity in the US and UK. Replace this with your own registration details and check them with your adviser." }, { "q": "What if the campaign raises more than its goal?", "a": "Extra funds go to the next wells on our waiting list, and we'll tell you which ones." }, { "q": "Can I give monthly?", "a": "Yes. Choose monthly on the form below. You can change or stop it at any time." } ] }, { "kind": "contact", "id": "donate", "eyebrow": "Give", "title": "Pledge a gift", "text": "Tell us how much you'd like to give and whether it's one-off or monthly, and we'll send a secure payment link. This form is a demo: connect a payment provider to take gifts directly.", "fields": [ "name", "email", "message" ], "button": "Pledge my gift" } ], "footer": { "text": "Community-owned wells for villages without safe water.", "columns": [ { "title": "Our work", "links": [ "Projects", "Annual report", "Water quality data" ] }, { "title": "Give", "links": [ "One-off gift", "Monthly giving", "Fundraise for us" ] }, { "title": "Contact", "links": [ "giving@wellspringtrust.org" ] } ], "legal": "© Wellspring Trust. Sample content: replace it in src/site.ts." }};Remix
Remix this template
Describe what to change and the agent starts from Clean water fundraiser's files. The box is already started for you: finish “Start from Clean water fundraiser and …”
Dependencies
Documented from the template's package.json. The runtime has a prebuilt dependency set for Vite + React + TypeScript, so installs are fast.
- react^19.1.0
- react-dom^19.1.0
- vite^6.3.0
- @vitejs/plugin-react^4.4.0
- tailwindcss^4.1.0
- @tailwindcss/vite^4.1.0
- typescript^5.8.0
How it runs
- Framework
- Vite + React + TypeScript
- Dev command
- npm run dev
- Build command
- npm run build
- Output directory
- dist
- Port
- 5173
- Entry route
- /
Projects run in an isolated sandbox with a live preview. Read the projects documentation for settings, snapshots and deployment.
Keep browsing
All templates
Budgeting app launch
Launch page for a household budgeting app with a live budget mock, pricing, beta reviews and an early-access form.

Design conference
Bold two-day design conference page with speakers, programme, venue, ticket tiers and an FAQ, ready for ticket sales.

30-day running plan
Friendly sign-up page for a free 30-day plan that takes beginners from walking to running 20 minutes without stopping.
Build on Clean water fundraiser
Create a free account, start from this template, and ask the AI agent to turn it into your app.