# ANED - Association Nutrition Et Développement

## 🌍 About ANED

**Association Nutrition Et Développement (ANED)** is a pioneering Mauritanian non-profit organization founded in 2002, dedicated to fighting malnutrition and food insecurity. We are a national humanitarian and development organization working to ensure every child, woman, and household achieves sustainable food and nutritional security.

### Official Registration
- **Registration Number**: N°086/DAPLP/SLP
- **Authority**: Ministère de l'Intérieur des Postes et Télécommunications, Mauritania
- **Founded**: 2002
- **Contact**: anedong94@gmail.com

### Core Mission
To combat malnutrition and food insecurity, particularly among children under five and vulnerable women, through innovative, community-based, and sustainable interventions.

## 🎯 Core Values

All development must reflect and uphold ANED's fundamental values:

1. **Professionalism** (Professionnalisme) - Excellence in execution, evidence-based approaches
2. **Innovation** (Innovation) - Creative solutions adapted to local contexts
3. **Integrity** (Intégrité) - Transparency, honesty, and ethical conduct
4. **Accountability** (Redevabilité) - Responsibility to beneficiaries, partners, and stakeholders

## 🌟 Areas of Expertise

ANED specializes in the following domains:
- **Nutrition** - Malnutrition prevention and treatment
- **Food Security** (Sécurité Alimentaire) - Sustainable food access
- **Research** (Recherche) - Evidence-based studies and surveys
- **Gender** (Genre) - Women's empowerment and socioeconomic status
- **Advocacy** (Plaidoyer) - Policy integration and systemic change
- **Innovation** - Pilot programs and adaptive solutions
- **Surveys & Analysis** (Enquêtes et Analyses) - SMART surveys, CAP, DDS
- **Monitoring & Evaluation** (Suivi-Évaluation) - M&E systems and impact assessment

## 🗺️ Intervention Zones

### Priority Intervention Areas
- Brakna
- Gorgol
- Guidimakha
- Les 2 Hodhs (East and West)
- Assaba
- Nouakchott (capital)

### Relationship Zones
- Trarza
- Tagant
- Inchiri

## 👥 Target Beneficiaries

1. **Children under 5 years** - Malnutrition prevention and treatment
2. **Vulnerable women** - Pregnant and lactating women (FEFA)
3. **Poor households** - Food security and income generation
4. **Communities** - Resilience building and sustainable development

## 🤝 Key Partnerships

ANED collaborates with:
- **UN Agencies**: WHO, UNICEF, WFP (PAM), USAID, OFDA
- **International NGOs**: World Vision, OXFAM, MSF, ACF, Caritas, GRET, ACORD
- **Government**: National authorities and ministries (Mauritania)
- **Private Sector**: Kinross/Tasiast mining company
- **International Partners**: Monaco Princely Government, US Embassy, European Union
- **Networks**: ROSA (Food Security Advocacy Network - lead on Nutrition), SUN Initiative

## 🏗️ Website Development Guidelines

### Project Purpose
This Next.js website serves as ANED's digital presence to:
- Showcase our humanitarian mission and impact
- Provide transparency about our projects and partnerships
- Share knowledge and research findings
- Recruit talent and volunteers
- Advocate for nutrition and food security
- Facilitate partnership engagement and collaboration

### Design Principles

#### 1. Humanitarian-Centered Design
- **Empathy First**: Content should evoke empathy while maintaining dignity of beneficiaries
- **Impact-Driven**: Highlight tangible outcomes and community transformation
- **Trust & Transparency**: Clear reporting, accountability, and evidence-based results
- **Accessibility**: WCAG 2.1 AA compliant - our mission is inclusive

#### 2. Visual Identity
- **Colors**:
  - Primary: Earth tones, greens (agriculture/nutrition), warm oranges (hope/energy)
  - Accent: ANED logo colors (blue, green, orange from "A.N.E.D." letters)
  - Avoid: Red (associated with emergency/danger unless contextual)
- **Typography**: Clean, readable fonts suitable for multilingual content
- **Imagery**: Authentic photos from field projects (children, women, communities in Mauritania)
- **Icons**: Simple, universally understood symbols for nutrition, food security, health

#### 3. Content Strategy
- **Bilingual**: French (primary) and English (secondary)
- **Storytelling**: Balance data/facts with human stories
- **Tone**: Professional yet warm, hopeful yet realistic, action-oriented
- **Technical Terms**: Explain acronyms (SMART, CREN, CAP, DDS, M&E, FEFA, etc.)

### Technical Architecture

#### Stack
- **Framework**: Next.js 15+ with App Router
- **Language**: TypeScript (type safety critical for NGO data)
- **Styling**: Tailwind CSS (rapid development, consistent design system)
- **State Management**: React Context API or Zustand (if needed)
- **Forms**: React Hook Form + Zod validation
- **Internationalization**: next-intl or next-i18next
- **Analytics**: Privacy-respecting (Plausible or similar, not Google Analytics)
- **CMS** (future): Sanity, Strapi, or Payload CMS for content management

#### Current Project Structure
```
src/
├── app/
│   ├── page.tsx              # ✅ Homepage (hero, mission, map, projects, partners)
│   ├── layout.tsx            # ✅ Root layout with Navbar & Footer
│   ├── mission/
│   │   └── page.tsx          # ✅ Mission & Vision page
│   ├── projets/
│   │   └── page.tsx          # ✅ Projects & Activities page
│   ├── actualites/
│   │   └── page.tsx          # ⚠️ News page (placeholder - needs content)
│   ├── contact/
│   │   └── page.tsx          # ✅ Contact form page
│   └── api/                  # Future: API routes (form submissions, etc.)
├── components/
│   ├── Navbar.tsx            # ✅ Main navigation with dropdown menus
│   ├── Footer.tsx            # ✅ Footer with links and contact info
│   ├── MauritaniaMap.tsx     # ✅ Interactive SVG map of intervention zones
│   ├── ProjectsCarousel.tsx  # ✅ Featured projects carousel
│   └── LordIcon.tsx          # ✅ Animated icon component
├── lib/                      # Future: Utils, constants, data
├── types/                    # Future: TypeScript type definitions
└── styles/                   # Tailwind CSS configuration
```

**Status**: Phase 1 (Foundation) mostly complete. Ready for Phase 2 (Content expansion).

### Implementation Status & Roadmap

#### Phase 1 - Foundation ✅ COMPLETE
- [x] Homepage with mission statement and impact overview
- [x] Mission & Vision page: history, values, domains, timeline
- [x] Projects showcase with 6 featured projects
- [x] Contact page with functional form
- [x] Responsive navigation (mobile-first) with dropdown menus
- [x] Interactive Mauritania map of intervention zones
- [x] Partner logos section (12+ partners)
- [x] Mobile-responsive design across all pages
- [x] Basic SEO optimization (metadata, titles, descriptions)
- [ ] French/English language switcher (planned)

#### Phase 2 - Content Enhancement 🚧 IN PROGRESS
- [x] Interactive map of intervention zones
- [x] Impact stats display (years, zones, beneficiaries, projects)
- [x] Partner logos and network memberships
- [ ] **Actualités/News page** - Currently placeholder, needs blog content
- [ ] Publications/resources library
- [ ] Photo gallery from field projects
- [ ] Project filtering functionality (tags exist but not interactive)
- [ ] Team & governance section
- [ ] Annual reports download section

#### Phase 3 - Engagement & Features 📋 PLANNED
- [ ] Volunteer application form
- [ ] Newsletter subscription
- [ ] Social media integration
- [ ] Success stories/testimonials carousel
- [ ] Contact form API integration (SendGrid/Resend)
- [ ] Search functionality across site

#### Phase 4 - Advanced 🔮 FUTURE
- [ ] CMS integration for non-technical staff (Sanity/Strapi)
- [ ] Full bilingual support (French/English)
- [ ] Project database with search/filter
- [ ] Data visualization dashboard (nutrition statistics)
- [ ] Member portal (for partners/staff)
- [ ] Multi-stakeholder feedback system
- [ ] Analytics integration (privacy-respecting)

### Content Guidelines

#### Writing Style
- Use active voice: "ANED provides nutrition services" not "Nutrition services are provided"
- Lead with impact: "2,000 children treated for malnutrition" before "through our CREN centers"
- Respect beneficiaries: "vulnerable families" not "poor people", "communities we serve" not "recipients"
- Data-driven: Include statistics, percentages, concrete numbers when possible
- Solution-focused: Highlight resilience, empowerment, sustainability

#### Key Messaging
- **Tagline Ideas**:
  - "Nourrir l'avenir de la Mauritanie" (Nourishing Mauritania's Future)
  - "Pour chaque enfant, une chance de grandir" (For every child, a chance to grow)
  - "De la malnutrition à la résilience" (From malnutrition to resilience)

#### Required Pages Content

**Homepage** ✅ IMPLEMENTED:
- Hero: Compelling image + mission statement with animated stats
- Impact stats: 20+ years, 7 zones, 20+ partners, 50K+ beneficiaries
- Core values: Professionalism, Innovation, Integrity, Accountability (with animated icons)
- Interactive Mauritania map showing intervention zones
- Featured projects carousel (6 projects)
- Partner logos grid (12+ organizations)
- Network memberships (ROSA, SUN Initiative)
- CTA: Contact Us, View Projects

**Mission & Vision Page** ✅ IMPLEMENTED:
- Mission statement and vision cards
- Core values (4 values with detailed descriptions)
- Domains of expertise (7 domains: Nutrition, Food Security, Research, Gender, M&E, Innovation, Advocacy)
- Timeline: 20+ years of milestones (2002-2024)
- CTA: Contact Us, View Projects

**About/Team Page** ⚠️ PLANNED:
- Detailed organizational history (since 2002)
- Team members and expertise (nutritionists, agronomists, food technologists, etc.)
- Governance structure and leadership
- Registration details and certifications
- ROSA network leadership role

**Projects Page** ✅ IMPLEMENTED:
Six featured projects with complete information:
1. **Production d'aliments de complément** (UNICEF/OMS, 2005-2010)
2. **NUTRIRIM - Cash Transfer** (GRET/EU, 2012-2015)
3. **PAISA-BG - Surveillance alimentaire** (OXFAM/EU, 2010-2014)
4. **Entrepreneuriat féminin** (World Vision, 2016-2019)
5. **Système de Suivi-Évaluation** (PAM, 2014-present)
6. **Les 1000 premiers jours** (Monaco Government, 2018-2022)

Each project includes:
- Title, partner, and period
- Category tag (Nutrition, Resilience, Food Security, Gender, M&E)
- Location (intervention zones)
- Detailed description
- Key outcomes (3 bullet points per project)
- Featured image

**Project Filtering** ⚠️ PARTIALLY IMPLEMENTED:
- Filter tags are visible but not yet interactive
- Tags: Tous, Nutrition, Sécurité alimentaire, Résilience, Genre, Suivi-Évaluation, Nutrition maternelle

### Development Best Practices

#### Code Quality
- **TypeScript strict mode**: Enabled for type safety
- **ESLint + Prettier**: Consistent code formatting
- **Component-driven**: Reusable, modular components
- **Semantic HTML**: Proper heading hierarchy, ARIA labels
- **Performance**: Image optimization (next/image), lazy loading
- **Security**: Sanitize user inputs, HTTPS only, CSP headers

#### Accessibility (Critical for NGO)
- Keyboard navigation support
- Screen reader compatibility
- Color contrast ratios (WCAG AA minimum)
- Alt text for all images (describe context, not "photo")
- Form labels and error messages
- Skip navigation links
- Responsive text sizing

#### SEO & Discoverability
- Semantic meta tags (Open Graph, Twitter Cards)
- Structured data (JSON-LD) for organization, projects
- XML sitemap
- Multilingual SEO (hreflang tags)
- Fast page loads (Core Web Vitals)
- Descriptive URLs (slugs in French/English)

#### Data Privacy & Ethics
- GDPR/privacy-compliant contact forms
- No tracking without consent
- Secure storage of sensitive data (beneficiary info)
- Photo consent policies (especially children)
- Anonymous statistics where possible

### Environment Variables
```env
# Required
NEXT_PUBLIC_SITE_URL=https://aned.org
NEXT_PUBLIC_CONTACT_EMAIL=anedong94@gmail.com

# Optional
NEXT_PUBLIC_GOOGLE_MAPS_API_KEY=
DATABASE_URL=
SENDGRID_API_KEY=
STRIPE_PUBLIC_KEY=
STRIPE_SECRET_KEY=
CMS_API_TOKEN=
```

### Deployment
- **Platform**: Vercel (recommended for Next.js) or Netlify
- **Domain**: aned.org or aned.mr (Mauritania TLD)
- **SSL**: Mandatory (Let's Encrypt via platform)
- **CDN**: Automatic via platform
- **Monitoring**: Uptime monitoring, error tracking (Sentry)

### Important Terminology (French-English)

| French | English | Abbreviation |
|--------|---------|--------------|
| Sécurité Alimentaire | Food Security | SA |
| Malnutrition Aiguë | Acute Malnutrition | MAM/SAM |
| Centre de Récupération Nutritionnelle | Nutritional Recovery Center | CREN |
| Femmes Enceintes et Femmes Allaitantes | Pregnant and Lactating Women | FEFA |
| Activités Génératrices de Revenus | Income Generating Activities | AGR |
| Transfert Monétaire | Cash Transfer | - |
| Enquête SMART | SMART Survey | SMART |
| Aliments de Complément | Complementary Foods | - |
| Diversification Alimentaire | Dietary Diversification | - |
| Les 1000 premiers jours | First 1000 Days | - |

## 🚀 Getting Started

### Initial Setup
```bash
cd aned-website
npm install
npm run dev
```

### Development Workflow
1. Create feature branches: `feature/project-gallery`, `feature/french-i18n`
2. Write semantic commit messages: "feat: add nutrition statistics dashboard"
3. Test accessibility before PR: `npm run lint:a11y` (to be configured)
4. Preview builds before production

### Key Commands
- `npm run dev` - Development server
- `npm run build` - Production build
- `npm run start` - Production server
- `npm run lint` - ESLint check
- `npm run type-check` - TypeScript validation

## 📋 Current Implementation Status

### ✅ Completed (Ready for Launch)
1. ✅ Homepage with mission and impact (hero, stats, values, map, projects, partners)
2. ✅ Mission & Vision page (mission/vision cards, values, domains, 20-year timeline)
3. ✅ Projects page with 6 featured projects (complete information and outcomes)
4. ✅ Partner organizations section (12+ partners, ROSA/SUN networks)
5. ✅ Contact page with functional form
6. ✅ French language (primary and complete)
7. ✅ Mobile-responsive design across all pages
8. ✅ Interactive Mauritania map showing intervention zones
9. ✅ Responsive navigation with dropdown menus
10. ✅ Clean, humanitarian-focused design system

### 🚧 In Progress / Needs Work
- ⚠️ **Actualités (News) page** - Currently shows placeholder "coming soon" content
- ⚠️ Project filtering functionality (UI exists but not interactive)
- ⚠️ Contact form API integration (currently client-side only)

### 📋 Planned for Future Versions
- About/Team page with team members and governance
- English translation (bilingual support)
- Publications/resources library
- Photo gallery from field projects
- Newsletter subscription
- Blog/news content management
- CMS integration for easy content updates
- Analytics integration (privacy-respecting)

## 🎨 Brand Assets

### Logo
- Available in PDF document (colorful "A.N.E.D." with symbol)
- Extract high-resolution versions (PNG, SVG)
- Use in header, footer, favicons

### Color Palette Suggestion
```css
/* Based on ANED's mission and Mauritanian context */
--primary-green: #4A7C59;      /* Nutrition/agriculture */
--primary-orange: #E67E22;     /* Hope/energy */
--primary-blue: #2C3E50;       /* Professionalism */
--accent-sand: #D4A574;        /* Mauritanian desert */
--neutral-gray: #7F8C8D;       /* Text/backgrounds */
--success-green: #27AE60;      /* Positive outcomes */
--white: #FFFFFF;
--dark: #2C3E50;
```

## 📞 Key Contacts & Resources

- **Email**: anedong94@gmail.com
- **PDF Reference**: `A propos d'ANED.pdf` (in project root)
- **Partnerships**: WHO, UNICEF, WFP, World Vision, OXFAM, etc.
- **Networks**: ROSA (lead on Nutrition), SUN Initiative

## 🌱 Long-term Vision

This website should evolve into:
- **Knowledge hub**: Research findings, best practices, toolkits, publications library
- **Collaboration platform**: Partner coordination, project updates, news/blog
- **Transparency platform**: Annual reports, impact data, project outcomes
- **Advocacy tool**: Policy briefs, data visualization, success stories
- **Recruitment portal**: Attracting nutrition experts, volunteers, and partnerships

## 🎯 Current Focus & Priorities

### Immediate Next Steps
1. **Build out Actualités/News page** with actual blog/news content structure
2. **Make project filtering interactive** (currently visual only)
3. **Integrate contact form API** (SendGrid, Resend, or similar)
4. **Create About/Team page** with organizational details and team members

### Technical Debt & Improvements
- Add image optimization for partner logos
- Implement proper TypeScript types for all data structures
- Add unit tests for components
- Set up CI/CD pipeline for automated deployments
- Configure proper error handling and logging

### Content Needs
- Gather real news articles and updates for Actualités page
- Collect team photos and bios for About page
- Obtain high-quality field photos for project gallery
- Prepare annual reports for download section
- Write detailed partner descriptions

---

## Final Notes for Claude

When working on this project:
1. **Always prioritize accessibility** - This is a humanitarian organization serving vulnerable populations
2. **Respect beneficiary dignity** - No exploitative imagery or language
3. **Data accuracy** - Verify all statistics and project details
4. **Bilingual support** - French is primary, but plan for English
5. **Mobile-first** - Many users in Mauritania access via mobile
6. **Performance matters** - Low bandwidth considerations
7. **Security & privacy** - Handle beneficiary data with extreme care
8. **Sustainability** - Code for maintainability by non-technical staff eventually

**Remember**: This website represents ANED's commitment to saving lives and building resilient communities. Every line of code contributes to their humanitarian mission.

---

## 📝 Recent Changes (February 2026)

### Latest Updates
- ✅ Enabled all navigation links (removed "Bientôt" badges)
- ✅ Removed all donation-related buttons and CTAs (per organizational decision)
- ✅ Completed homepage with full feature set
- ✅ Built Mission & Vision page with timeline
- ✅ Created Projects page with 6 detailed case studies
- ✅ Implemented interactive Mauritania map
- ✅ Added responsive navigation with mobile menu
- ✅ Integrated LordIcon animated icons throughout site

### Known Issues
- Contact form is client-side only (needs backend integration)
- Project filters are visual but not functional
- Actualités page shows placeholder content
- No English translation yet (French only)

---

**Version**: 1.1
**Last Updated**: February 19, 2026
**Maintained by**: ANED Development Team with Claude Code assistance