faithfulgodwinc/nAIJA-Voice

# Naija Voice MVP Welcome to the **Naija Voice MVP**, a modern, high-fidelity front-end prototype for a cultural preservation application dedicated to recording, translating, and sharing indigenous oral histories and dialects. ## 🎨 Design Aesthetic The application utilizes a bespoke **"Modern Afro-Minimalist"** design system. - **Color Palette:** Deep forest greens, burnt oranges, soft mustards, and clean cream backgrounds. - **Typography:** Premium serif (`Lora`) for headings to evoke a storytelling feel, paired with modern sans-serif (`Inter`) for clean UI text. - **Dark Mode:** A sophisticated "night-time campfire" aesthetic that transforms the layout seamlessly. - **Layouts:** Rounded bento-box UI elements adorned with glassmorphism components. ## 🛠 Tech Stack - **Framework:** React 18 - **Build Tool:** Vite (TypeScript) - **Styling:** Vanilla CSS (custom CSS Variables for comprehensive theme management) - **Animations:** Framer Motion (for fluid screen transitions, micro-interactions, and visualizers) - **Icons:** Lucide React ## 📂 Architecture & Project Structure The project is structured as a lightweight, state-routed mobile-first web app: ```text src/ ├── assets/ # Static assets (images, fonts, etc.) ├── components/ # Reusable UI elements │ ├── BottomNav.tsx # Glassmorphism main navigation bar │ └── BottomNav.css ├── screens/ # Main application views │ ├── Home.tsx # Dashboard & Featured Stories │ ├── Vault.tsx # Audio Player & Transcripts │ ├── Vault.css # Waveform visualizer styles │ ├── Record.tsx # Voice Capture & AI Simulation │ └── Profile.tsx # Gamified Learning Lab & Flashcards ├── App.tsx # Root component handling routing & Dark Mode state ├── index.css # Core Design System (Variables, dark mode, utilities) └── main.tsx # Vite/React entry point ``` ## ✨ Current Features (Front-End Prototype) 1. **Dashboard (`Home`)** - Highlights a "Sto …