A free, open-source landing page template built with Next.js 16 and Tailwind CSS v4 — designed specifically for NGOs, nonprofits, and charities who need a professional website without the agency price tag.
📸 To add the preview image: save a screenshot of the home page as
docs/preview.pngand push it to the repo.
- 10 fully designed sections — Hero, Impact Stats, Mission/About, Programs, Testimonials, Team, News, Newsletter, Donate, and FAQ page
- Mobile-first & fully responsive — looks great on every screen size
- Accessible — semantic HTML, ARIA labels, keyboard-navigable accordion
- SEO ready —
metadataBase, Open Graph, Twitter Card,robots.txt,sitemap.xml, JSON-LD Organization schema, FAQ structured data - Custom 404 page — branded, with suggested links
- Single content file — all text and data in
lib/content.ts, no need to touch components - Best practices — Next.js App Router, React Server Components, TypeScript, zero
any
| Route | Description |
|---|---|
/ |
Full landing page (all sections) |
/faq |
FAQ page with accordion + JSON-LD schema |
/robots.txt |
Auto-generated by Next.js |
/sitemap.xml |
Auto-generated by Next.js |
/* (404) |
Branded not-found page |
# 1. Clone the repo
git clone https://github.com/santichausis/NGO-Template.git
cd NGO-Template
# 2. Install dependencies
npm install
# 3. Start the dev server
npm run dev
# 4. Open in browser → http://localhost:3000All text, data, and configuration lives in lib/content.ts. It's the only file you need to touch to personalize the entire site:
| Export | What to change |
|---|---|
siteConfig |
Organization name, URL, email, phone, address, social links |
heroContent |
Headline, subheadline, CTA buttons, hero image |
missionContent |
About text, values, mission image |
impactStats |
Your real impact numbers |
programs |
Your programs/projects (add or remove cards) |
teamMembers |
Team names, roles, bios, photos |
testimonials |
Real quotes from beneficiaries |
newsArticles |
Latest news/blog posts |
footerLinks |
Footer navigation columns |
FAQ content lives separately in lib/faq.ts.
The hero uses an Unsplash placeholder. All other images use picsum.photos. Replace them with your own:
- Add images to the
/publicfolder - Update the
imagefield inlib/content.tsto/your-image.jpg
Recommended sizes:
| Section | Size |
|---|---|
| Hero | 1920×1080px |
| Program cards | 600×400px |
| Team headshots | 400×400px (square) |
| News thumbnails | 800×500px |
| Testimonial avatars | 200×200px |
Open app/globals.css and update the --color-brand-* CSS variables. Use oklch.com to generate a full scale from your brand hex code.
Update siteConfig.url in lib/content.ts with your real domain (no trailing slash). This is used by the SEO metadata, robots.txt, and sitemap.xml.
url: "https://yourorganization.org",The donate section (components/sections/Donate.tsx) is UI-only. Connect it to a real processor:
| Platform | Notes |
|---|---|
| Donorbox | Easiest — embed their widget |
| Give Lively | Free for US nonprofits |
| Stripe | Full control, requires dev work |
| PayPal Giving Fund | Simple, widely trusted |
The newsletter form (components/sections/Newsletter.tsx) needs a Server Action. Create app/actions/newsletter.ts and call your email platform's API (Mailchimp, ConvertKit, Beehiiv, etc.).
NGO-Template/
├── app/
│ ├── faq/
│ │ └── page.tsx # FAQ page with JSON-LD schema
│ ├── icon.svg # Favicon (replace with your logo)
│ ├── layout.tsx # Root layout, metadata, JSON-LD org schema
│ ├── not-found.tsx # Custom 404 page
│ ├── page.tsx # Home page (assembles all sections)
│ ├── robots.ts # Generates /robots.txt
│ ├── sitemap.ts # Generates /sitemap.xml
│ └── globals.css # Global styles + brand color variables
│
├── components/
│ ├── layout/
│ │ ├── Navbar.tsx # Sticky navbar, transparent → opaque on scroll
│ │ └── Footer.tsx # 4-column footer with social icons
│ ├── sections/
│ │ ├── Hero.tsx # Full-screen hero with image overlay
│ │ ├── Impact.tsx # Stats grid (dark green background)
│ │ ├── Mission.tsx # Two-column about + values
│ │ ├── Programs.tsx # Card grid of programs/projects
│ │ ├── Testimonials.tsx # Beneficiary quote cards
│ │ ├── Team.tsx # Team member cards with LinkedIn
│ │ ├── News.tsx # News/blog article cards
│ │ ├── Newsletter.tsx # Email capture form
│ │ └── Donate.tsx # Donation amount selector (monthly/once)
│ └── ui/
│ ├── Button.tsx # Reusable link/button component
│ ├── FaqAccordion.tsx # Animated accordion (client component)
│ └── SectionHeader.tsx # Section label + headline block
│
└── lib/
├── content.ts # ALL site content (edit this to customize)
└── faq.ts # FAQ questions and answers
The template is a single-page landing, but it's built to grow:
app/
├── programs/[slug]/page.tsx # Individual program detail pages
├── blog/page.tsx # Blog listing
├── blog/[slug]/page.tsx # Blog post
├── about/page.tsx # Full about page
└── contact/page.tsx # Contact form
One-click deploy on Vercel (free tier works perfectly for NGOs):
Or build manually:
npm run build # Build for production
npm start # Start production serverContributions are welcome! If you add something useful for nonprofits:
- Fork the repo
- Create a feature branch (
git checkout -b feat/my-feature) - Open a Pull Request
MIT — free to use, modify, and distribute for any purpose. A credit link is appreciated but not required.
Built with care for the nonprofits doing the hard work. 🌱