Charity foundation website
An elderly-care foundation site “Warm Home” — paper, terracotta, Playfair Display serif and handwritten notes, warmth without pity: a hero with a fundraising counter and milestone progress, “what your amount gives” with a card that changes with chips, ward stories as letters opening from envelopes, reporting as a ring chart by year, a help map with points lighting up, the team in polaroids, volunteering with a live badge, partners, ticket events, a donation form with “×12” and a footer with bank details. Playfair Display, Golos Text and Caveat.
A foundation site that explains help in concrete terms: a counter shows what's been raised, “what your gift does” turns money into actions, stories and reports build trust, and a form lets people donate or volunteer. The foundation in the demo is fictional.
What it is made of
12 catalog blocks in page order. Each one is installed with its own command; nothing is recreated.
1. Header
Charity foundation navbar with a handwritten note and a “Donate” buttonnavbar-044
A serif with a handwritten note, “Help” with a beating heart, burger.
2. First screen
Fundraising hero: an amount counter, a milestone progress bar and a magnetic buttonhero-044
The fundraising sum rolls up, progress with notched milestones, a magnetic button.
3. What it gives
“What your amount buys”: chips, a slider and a redrawing cardcharity-001
Amount chips and a slider → the card changes, an icon draws itself.
4. Stories
Beneficiary stories: a drag-scroll lane of envelopes with a typing lettercharity-002
A letter strip with drag-scroll, an envelope opens, the text types.
5. Reporting
Foundation reporting: a donut chart by year and a “0% on ads” stampcharity-003
A ring chart grows on appear, a year switch, “0 % on ads”.
6. Help map
Help map: dots light up in turn with beneficiary countscharity-004
An SVG region map, the route draws itself, points light up with numbers.
7. Team
Team as polaroids with handwritten captionspeople-024
Polaroids with handwritten captions, “40 more volunteers”.
8. Volunteering
“Become a volunteer”: role and day chips, a live badge and a “helped today” countercharity-005
Role and day chips → a live badge, “helped N today”.
9. Partners
“Worked with” as a text marqueelogocloud-007
A partner marquee.
10. Events
Foundation events as perforated tickets with a “hands needed” scaleevent-025
Perforated tickets, a “hands needed” scale.
11. Donation
Donation form: amount chips, “once / monthly” with ×12cta-037
Chips and a custom amount, “once / monthly” with ×12, a heart that draws itself.
12. Footer
Foundation footer with requisites, documents and a handwritten “thank you”footer-043
Bank details as chips, documents, contacts, a handwritten “thank you”.
Pro
The exact composition, page source and agent link are in PRO
The demo and the block list are open to everyone. Subscribers see every block's props as in the demo, the theme rules, the image prompts and one link an AI agent uses to build the same page.
Get PROFAQ
- What is the “Charity foundation website” page made of?
- 12 catalog sections in order: Charity foundation navbar with a handwritten note and a “Donate” button, Fundraising hero, “What your amount buys”, Beneficiary stories, Foundation reporting, Help map, Team as polaroids with handwritten captions, “Become a volunteer”, “Worked with” as a text marquee, Foundation events as perforated tickets with a “hands needed” scale, Donation form, Foundation footer with requisites, documents and a handwritten “thank you”. Each one is a separate VibeUI item.
- How do I build this page with an AI agent?
- Press “Copy the scenario for AI” and paste it into Cursor or Claude Code: the agent gets the page source, shared theme rules and image prompts, and installs every section from the registry with the shadcn CLI.
- Is the scenario free?
- The live demo and the list of sections are open to everyone. The page source and the instruction for the agent come with PRO.