Yasmin is a modern, modular emergency dispatch platform built with React. It provides an intuitive interface for public safety agencies and responders to manage emergency communication, partner coordination, resource tracking, and public queries.
- ⚡ Real-time dispatch coordination interface
- 📱 Mobile-first responsive design
- 🧩 Modular React component structure
- 🤝 Integration with local emergency partners
- ❓ Expandable FAQ section
- 🧭 Accessible navigation across all sections
- React + Vite
- React Router DOM
- Custom CSS with CSS variables
- Deployed on Vercel
The UI uses a custom palette defined in CSS variables, selected to meet WCAG AA accessibility standards:
- Primary blues (
--royal-blue#0A2463,--sapphire#1E3888,--cobalt#144385) establish trust and professionalism - Semantic colors for success (#0D8969), warning (#F0B429), error (#E12D39), and info (#2C7EA1) states
- Metallic accents (gold/silver) for highlights and dividers
- Typography:
Montserratprimary,Latosecondary
| Breakpoint | Max Width | Behavior |
|---|---|---|
| LG (Desktop) | > 1024px | Full layout, visible navigation |
| MD (Tablet) | ≤ 1024px | Hamburger nav, flex grid |
| SM (Mobile) | ≤ 768px | Stacked sections, scaled typography |
| XS (Small) | ≤ 480px | Minimalist cards, tighter spacing |
yasmin/
├── public/
│ └── index.html
├── src/
│ ├── sections/
│ │ ├── AboutSection.jsx
│ │ ├── ContactSection.jsx
│ │ ├── FAQSection.jsx
│ │ ├── FooterSection.jsx
│ │ ├── HeaderSection.jsx
│ │ ├── HeroSection.jsx
│ │ ├── CommunitySection.jsx
│ │ ├── PartnerSection.jsx
│ │ ├── ResourcesSection.jsx
│ │ ├── ServiceSection.jsx
│ │ └── TestimonialsSection.jsx
│ ├── App.jsx
│ ├── App.css
│ └── main.jsx
└── package.json
git clone https://github.com/vicenet/Yasmin.git
cd Yasmin
npm install
npm run dev- Customize partner data in
PartnerSection.jsx - Update FAQ items in
FAQSection.jsx - Styling is handled via
App.cssand scoped component classes
MIT
Made by Brian Gitau for emergency response modernization.