A beautiful, responsive website for BrightHope, a non-profit organization dedicated to providing loving care, quality education, and safe homes to orphaned children.
- 🎨 Playful & Artistic Design - Unique, warm aesthetic with paint splash effects and organic shapes
- 🌍 Bilingual Support - Full English and French translations with smooth language switching
- 📱 Fully Responsive - Optimized for all devices from mobile to desktop
- ♿ Accessible - Built with accessibility best practices
- 🎯 SEO Optimized - Proper metadata and semantic HTML
- 🖱️ Custom Cursor - Unique interactive cursor experience
- 🎠 Project Carousel - Showcase impact with an elegant carousel
- ⚡ Performance - Built with Next.js for optimal speed and SEO
BrightHope is committed to transforming the lives of orphaned children through three core pillars:
- Education - Quality education and learning opportunities
- Care & Support - Healthcare, nutrition, and emotional support
- Safe Home - Loving, family-like environments
- Framework: Next.js 16 (App Router)
- Language: TypeScript
- Styling: CSS Modules + Vanilla CSS
- Fonts: Google Fonts (Patrick Hand, Nunito, Pacifico)
- Images: Next.js Image Optimization
- Deployment Ready: Vercel, Netlify, or any static hosting
# Clone the repository
git clone https://github.com/othmaneataallah/brighthope.git
# Navigate to project directory
cd brighthope
# Install dependencies
npm install
# Run development server
npm run devOpen http://localhost:3000 to view the website.
npm run dev # Start development server
npm run build # Build for production
npm run start # Start production server
npm run lint # Run ESLintsrc/
├── app/ # Next.js app directory
│ ├── layout.tsx # Root layout with providers
│ ├── page.tsx # Homepage
│ └── globals.css # Global styles
├── components/ # React components
│ ├── Navbar.tsx # Navigation with language switcher
│ ├── Hero.tsx # Hero section
│ ├── About.tsx # About section
│ ├── Mission.tsx # Mission section
│ ├── Projects.tsx # Projects carousel
│ ├── Donation.tsx # Donation section
│ ├── Footer.tsx # Footer
│ └── CustomCursor.tsx # Custom cursor component
├── contexts/ # React contexts
│ └── LanguageContext.tsx # Language management
└── lib/
└── translations.ts # i18n translations
- Primary: Warm orange (#F18F43)
- Secondary: Soft yellow (#FFD166)
- Accent: Coral (#FF6B6B)
- Dark: Rich brown (#2C1810)
- Surface: Cream (#FFF8F0)
- Headings: Patrick Hand (playful, handwritten)
- Body: Nunito (clean, readable)
- Logo: Pacifico (unique, artistic)
- Paint splash title effects
- Organic button shapes
- Smooth section transitions
- Custom cursor interactions
- Language switch animations
Edit translations in src/lib/translations.ts for both English and French content.
Replace project images in src/components/Projects.tsx (lines 37, 52, 67). See PROJECTS.md for image suggestions.
Update CSS variables in src/app/globals.css (lines 1-10).
This project is open source and available under the MIT License.
This is a portfolio project, but feel free to fork and customize for your own use!
For questions or feedback about this project, feel free to reach out!
Note: This is a portfolio/demonstration website. BrightHope is a fictional organization created for showcase purposes.
Built with ❤️ using Next.js and TypeScript