System Requirements Document for website-ngo

Introduction

The project "website-ngo" aims to create a webpage to spread awareness about the NGO's projects and initiatives. This document outlines the system requirements for developing a basic awareness webpage for the NGO, inspired by the structure and content of the InAmigos Foundation website.

System Overview

The website-ngo project is designed to inform and engage visitors about the NGO's mission, ongoing projects, and social impact. The webpage will serve as a platform to attract volunteers, supporters, and donors by providing comprehensive information and a compelling call-to-action.

Functional Requirements

• As a Visitor, I should be able to read an introduction about the NGO.
• As a Visitor, I should be able to view details of the NGO's ongoing projects.
• As a Visitor, I should be able to understand the social impact and purpose of the projects.
• As a Visitor, I should be able to see images or visuals related to the NGO's work.
• As a Visitor, I should be able to interact with a call-to-action to join, volunteer, or support the NGO.

User Personas

• Visitor: An individual interested in learning about the NGO and potentially supporting its initiatives.

Core User Flows

• Visitor lands on the homepage -> Reads the introduction about the NGO -> Views ongoing projects and their details -> Understands the social impact -> Sees related images or visuals -> Interacts with the call-to-action to join, volunteer, or support.

Visuals Colors and Theme

• primary: #2A9D8F (Teal)
• primary_light: #A8DADC (Light Teal)
• secondary: #E63946 (Crimson)
• accent: #F4A261 (Orange)
• highlight: #E9C46A (Gold)
• bg: #F1FAEE (Off White)
• surface: rgba(255, 255, 255, 0.8) (White)
• text: #1D3557 (Dark Blue)
• text_muted: #457B9D (Muted Blue)
• border: rgba(69, 123, 157, 0.2) (Light Blue)

Signature Design Concept

The homepage will feature an interactive "Impact Map" using @react-three/fiber and @react-three/drei. Visitors can explore a 3D globe where each pin represents a project location. Clicking a pin reveals a project card with details, images, and a call-to-action. The map will rotate gently, and hovering over pins will highlight them with a glowing effect. This concept will provide an engaging way to visualize the NGO's global impact.

Interaction Model & Motion Direction

• Interaction Model: Parallax
  • The homepage will feature layered depth with scroll-triggered animations. The 3D Impact Map will be the central interactive element, with other sections smoothly scrolling into view.
• Internal Pages: Static
  • Focus on clarity and readability for project details and information pages.

Non-Functional Requirements

• The webpage must be responsive and accessible on various devices and screen sizes.
• The design should be clean, structured, and easy to navigate.
• Content must be accurate and sourced from official channels.

Tech Stack

• Frontend: HTML & CSS (basic level)
• Libraries for 3D and animations: @react-three/fiber, @react-three/drei

Assumptions and Constraints

• The webpage will be developed using basic HTML and CSS.
• The project must be completed within 3 days.
• Content accuracy is paramount, and information must be sourced from official NGO channels.

Glossary

• NGO: Non-Governmental Organization
• Call-to-action: A prompt on a webpage that encourages the user to take some specified action.
• Impact Map: A visual representation of the NGO's project locations and their impact.