# NGO Website — ODOO4projects

**Project:** NGO marketing homepage and blog
**URL:** [ngo.odoo4projects.com](https://ngo.odoo4projects.com)
**Stack:** Static HTML · Tailwind CSS · Vanilla JS

---

## Repository Rules

- Blog posts live in `blog.json` — do not create separate backup files.
- No backup files in the repo.
- Update this README with every commit.

---

## Page Structure

| # | Block | Purpose |
|---|-------|---------|
| 1 | **Hero** | Headline, subheadline, free-trial CTA, key stats |
| 2 | **Hot NGO Topics** | Three focused topic cards (transparency, communications, fundraising) |
| 3 | **Blog** | Latest articles loaded dynamically from `blog.json` |
| 4 | **Sign Up — Free Trial** | Email signup form, 4-week free trial, no credit card |
| 5 | **Have a Meeting** | 30-minute consultation booking via Google Calendar |

---

## CI Checks (required on every push)

- **HTML lint** — valid markup, no broken anchors
- **JS lint** — no errors, no `console.error` left in production paths
- **Tailwind build** — `npx tailwindcss -i ./src/input.css -o ./assets/site.css --minify` must exit 0
- **Corporate design compliance:**
  - No CSS gradients — `gradient`, `bg-*-gradient`, `linear-gradient`, `radial-gradient` are forbidden
  - No CSS animations or keyframes — `animate-*`, `@keyframes`, transform-based `hover:translate-*` are forbidden
  - No blur or glassmorphism effects — `backdrop-blur`, `backdrop-filter` are forbidden
  - Colors must use the approved brand palette only: `brand-ink · brand-primary · brand-accent · brand-sunrise · brand-emerald · brand-snow · brand-smoke`
  - Images must be served from `odoo4projects.com`, `images.unsplash.com`, or local `assets/`
- **Accessibility** — heading hierarchy (one `<h1>` per page), `alt` on all images, sufficient contrast (WCAG AA)
- **Performance budget** — total page weight ≤ 200 KB (excluding cached fonts); critical render path ≤ 1 s on fast 3G
- **SEO** — `<title>`, `<meta name="description">`, `<h1>`, canonical `<link>`, and JSON-LD structured data must be present

---

## Languages

| Code | Language |
|------|----------|
| `en` | English (default) |
| `es` | Español |
| `de` | Deutsch |

All UI strings are managed via the inline `translations` object in `index.html`.

---

## Focus Keywords

`NGO donor management` · `transparent donations` · `Odoo for NGOs` · `donor communication` · `minimal admin for charities`