# Vision Aid Foundation — Website Documentation

**Live domain:** [https://visionaidfoundation.org/](https://visionaidfoundation.org/)  
**New project:** `/home/veh/visionaidfoundation.org/visionaid-web`  
**Legacy project:** `/home/veh/visionaidfoundation.org/ci_1.0`  
**Content sources:** `/home/veh/visionaidfoundation.org/resources`

---

## 1. Purpose

This document describes the new Next.js website for **Vision Aid Foundation (VAF)** — a government-registered, nonpolitical, nonprofit humanitarian organisation in Bangladesh. The site replaces the older CodeIgniter (`ci_1.0`) build with a modern, professional public presence focused on eye health and related community programmes.

---

## 2. Organisation overview

| Field | Value |
|-------|--------|
| Legal name | Vision Aid Foundation (VAF) |
| Motto | Mission for Vision — Restoring Sight, Restoring Dignity |
| Mission | Accessible, affordable, and inclusive eye care — and holistic support — for all |
| Flagship partnership | Dristi Eye Hospital (DEH) |
| Established | October 2016 (from legacy site) |
| NGOAB registration | 3511/2025 |
| Social Welfare registration | S-12434/2016 |
| Hospital partner licence | Government eye hospital Licence No. 4911 |

### Contact

| Field | Value |
|-------|--------|
| Address | Road 4, House 4, Block B, Chand Uddan, Mohammadpur, Dhaka 1207, Bangladesh |
| Hotline | +880 1868-507578 |
| Email | info@visionaidfoundation.org |
| Facebook | https://www.facebook.com/visionaidfoundation/ |
| Chairman | Taufique Mohiuddin |

### Donation banking (from legacy site)

| Field | Value |
|-------|--------|
| Bank | Eastern Bank Ltd. |
| Account | 1081350124660 |
| Branch | Sat Mosjid Road, Dhanmondi |
| Routing | 095264035 |
| SWIFT | EBLDBDDH017 |

> Banking details are recorded here for migration planning. They are not yet exposed on the new public UI until a dedicated Donate page is built.

---

## 3. Repository layout

```text
/home/veh/visionaidfoundation.org/
├── ci_1.0/                 # Legacy CodeIgniter 3 website
├── resources/              # Planning + programme source copy
│   ├── info.txt            # Sitemap / wireframe (planned IA)
│   └── info1.txt           # Programme & org content (primary copy)
├── visionaid-web/          # New Next.js App Router website
│   ├── DOCUMENTATION.md    # This file
│   ├── README.md           # Quick start
│   ├── package.json
│   ├── scripts/
│   │   └── smoke-test.mjs  # Production route smoke tests
│   ├── public/
│   └── src/
│       ├── app/            # Routes & layout
│       ├── components/     # Header, footer, icons
│       └── data/site.ts    # Shared content model
└── .gitignore
```

---

## 4. Technology stack

| Layer | Choice |
|-------|--------|
| Framework | Next.js 16 (App Router) |
| Language | TypeScript |
| UI | Custom CSS + Tailwind CSS v4 PostCSS |
| Fonts | Manrope (display), DM Sans (body) via `next/font` |
| Testing | Production build + HTTP smoke tests (`npm test`) |
| Lint | ESLint (`eslint-config-next`) |

### Scripts

| Command | Description |
|---------|-------------|
| `npm run dev` | Local development server (`http://localhost:3000`) |
| `npm run build` | Production build |
| `npm start` | Serve production build |
| `npm run lint` | Lint source |
| `npm test` | Build + smoke-test all public routes |
| `npm run check` | Lint + full test |

---

## 5. Information architecture

### Implemented now

| Route | Purpose |
|-------|---------|
| `/` | Homepage — hero, intro, programmes, gallery preview, impact, partners |
| `/about` | Story, working principles, legal accreditation |
| `/programmes` | Full programmes index |
| `/programmes/[slug]` | Eight programme detail pages |
| `/gallery` | Media hub for photos and videos |
| `/gallery/photos` | Photo gallery with click-to-view lightbox |
| `/gallery/videos` | Video gallery (blank until verified videos exist) |
| `/contact` | Phone, email, Facebook, address, chairman |
| `/robots.txt` | Crawler rules |
| `/sitemap.xml` | SEO sitemap |

### Programme slugs

| Slug | Programme |
|------|-----------|
| `eye-health` | Eye Health |
| `womens-empowerment` | Women’s Empowerment |
| `occupational-health-safety` | Occupational Health & Safety |
| `food-safety` | Food Safety & Consumer Rights |
| `humanitarian-assistance` | Humanitarian Assistance |
| `zakat` | Zakat Programme |
| `education` | Education & Library |
| `partnerships` | Networking & Partnerships |

### Planned (from `resources/info.txt`, not yet built)

These sections exist in the wireframe and should remain blank or deferred until real content/assets exist:

- Hero slider / Donate / Sponsor Surgery / Emergency Appeal
- Success stories, upcoming events, news, newsletter
- Eye Hospital clinical service pages (Retina, Cornea, Glaucoma, etc.)
- Get Involved (Volunteer, Internship, Membership, CSR, Sponsor a Child)
- Media Centre (gallery, video, press, publications, downloads)
- Research (reports, policy briefs, journal articles)
- Full About subsections (Chairman’s message, ED message, org chart, annual reports)
- Contact form, WhatsApp, LinkedIn, YouTube, Google Map

**Rule used in the rebuild:** do not invent demo content. If data is missing, leave the structure empty or omit the section.

---

## 6. Content sources and reliability

### `resources/info1.txt` (primary)

Authoritative programme and organisation copy:

- Eight programmes with taglines and summaries
- Eye-care model, USD 40 cataract surgery framing
- Impact figures since 2016
- Partner names (Tilganga, Rotary Dhanmondi Central, CARE Bangladesh, UBER Bangladesh, Telenor Health, ASEAB)
- Registration numbers and contact block

**Known data note:** OPD line appears as `18,0000+` in the source file; the website uses **180,000+** (consistent with `info.txt` and intended meaning).

### `resources/info.txt` (sitemap / wireframe)

Use for **navigation planning**, not as verified partner or marketing facts. Partner names listed there (UNDP, WHO, BRAC, LGED, DGHS, Sightsavers) do **not** overlap with `info1.txt` and were not added as confirmed partners on the new site.

### `ci_1.0` (legacy)

Useful for verified operational details present on the live old site:

- Email and Facebook URL
- Bank / donation letter
- Gallery assets, favicon (`visitor/images/vaf.png`)
- Historical DB-backed events and older impact counters

Legacy caveats: ThemeMascot demo text, Vision Eye Hospital naming leftovers, unused admin banner wiring, and empty video gallery.

---

## 7. Design system

### Brand direction

- Deep teal primary (`#0d706d` / `#073e3e`)
- Coral accent (`#f26f5b`)
- Warm paper/cream backgrounds
- Expressive sans display + clean body fonts
- Full-bleed hero with abstract eye visual (no inset hero cards)
- Grid-based programme and impact sections (not generic card stacks in the hero)

### Typography (updated for readability)

| Role | Size |
|------|------|
| Body | **18px** base, line-height 1.7 |
| Navigation | ~16px |
| Eyebrows / labels | ~13–14px (was ~10–12px) |
| Lead paragraphs | ~21–22px |
| Section headings | Fluid clamp (~2.4rem–4.6rem) |
| Hero title | Fluid clamp (~3.7rem–6.2rem) |

Body and UI label sizes were increased after review because the first build read small on desktop and mobile.

---

## 8. Data model

Shared content lives in `src/data/site.ts`:

- `programmes[]` — title, slug, summary, details, CTA, icon, tone
- `impact[]` — public counters for the homepage
- `contact` — address, hotline, email, Facebook, chairman

Update this file when verified content changes. Pages import from it so copy stays consistent.

---

## 9. SEO & metadata

- Site metadata base: `https://visionaidfoundation.org`
- Per-page titles via Next.js `metadata` / `generateMetadata`
- `src/app/sitemap.ts` lists home, about, contact, and all programmes
- `src/app/robots.ts` allows all crawlers and points to the sitemap

---

## 10. Testing

Smoke tests (`scripts/smoke-test.mjs`) start the production server and assert:

1. HTTP 200 for all public pages
2. Expected copy appears on each page
3. `/robots.txt` and `/sitemap.xml` are valid
4. Unknown programme slug returns **404**

Run:

```bash
cd /home/veh/visionaidfoundation.org/visionaid-web
npm run check
```

---

## 11. Local development

```bash
cd /home/veh/visionaidfoundation.org/visionaid-web
npm install
npm run dev
```

Open [http://localhost:3000](http://localhost:3000).

Production preview:

```bash
npm run build
npm start
```

---

## 12. Migration notes (ci_1.0 → visionaid-web)

| Legacy | New status |
|--------|------------|
| CodeIgniter 3 + ThemeMascot | Next.js App Router |
| DB events / counters | Static verified figures for now; CMS later if needed |
| Volunteer form | Not ported yet |
| Donate bank page | Content documented; page not built yet |
| Photo gallery assets | Migrated selected VAF photos into `visionaid-web/public/` |
| Admin CMS | Out of scope for public rebuild v1 |
| Demo/lorem template text | Intentionally excluded |

Suggested next migration steps:

1. Expand gallery with remaining verified field photos
2. Build Donate page with bank details + PDF
3. Add blank structural stubs for Media / Get Involved if navigation requires them
4. Wire a real contact form backend when email delivery is ready

---

## 12a. Media assets in use

Copied from `ci_1.0` into `visionaid-web/public/`:

| Folder | Contents |
|--------|----------|
| `public/brand/` | VAF logo (`logo.png`, `vaf.png`) |
| `public/hero/` | Homepage/about hero photos from legacy slider backgrounds |
| `public/gallery/` | `vaf-1.jpg` … `vaf-12.jpg` patient/field photos |
| `public/about/` | Community programme and clinic outreach photos |
| `public/partners/` | Dristi, Tilganga, Rotary, Telenor logos |
| `public/favicon.png` | Legacy VAF favicon |

Theme/demo stock images (e.g. generic Western volunteer photos) were intentionally excluded.

---

## 13. Impact figures (published on new site)

| Metric | Value |
|--------|-------|
| OPD consultations | 180,000+ |
| Cataract & phaco surgeries | 32,000+ (98% success rate referenced in copy) |
| Outreach eye camps | 240+ |
| Corneal transplants | 150+ |
| Schools screened | 37+ |
| Ready glasses distributed | 8,000+ |
| Cataract surgery package | About USD 40 per patient |

---

## 14. Eight programmes (summary)

1. **Eye Health** — Screening to surgery via DEH partnership and mobile camps  
2. **Women’s Empowerment** — Handicraft vocational training  
3. **Occupational Health & Safety** — Education/advocacy for vulnerable labourers  
4. **Food Safety & Consumer Rights** — Community awareness  
5. **Humanitarian Assistance** — Food and cash aid  
6. **Zakat Programme** — Structured, transparent distribution  
7. **Education & Library** — Md. Moslemuddin Memorial Library  
8. **Partnerships** — Government, NGO, and private-sector collaboration  

---

## 15. Document control

| Item | Detail |
|------|--------|
| Project path | `/home/veh/visionaidfoundation.org/visionaid-web` |
| Source brief | `resources/info.txt`, `resources/info1.txt` |
| Legacy reference | `ci_1.0` |
| Audience | Developers, content owners, deployment team |
| Status | Public site structure live in codebase; content-complete for available verified data |

---

*End of documentation.*