The Mozambique Capacity Building (MCB) website is a modern landing page developed for a non-profit organization in Mozambique focused on community development. It features bilingual support (PT/EN), a Cloudinary-powered photo gallery, animated sections, contact form with email delivery, and SEO optimization all built with Next.js 15 and TypeScript.
Cliente
Website
The Mozambique Capacity Building (MCB) website is a digital platform developed for a non-profit organization in Mozambique dedicated to community development and capacity strengthening. The website was built to present the organization's mission, projects, strategic pillars, partners, and team — offering a modern, responsive, and bilingual experience for both local and international visitors. It includes a cloud-based photo gallery, animated UI sections, and a secure contact system with email delivery.
Full Website Development: Designed and developed the complete landing page with multiple sections (Hero, About, Strategic Pillars, Organizational Structure, Projects, Gallery, Testimonials, Partners, Services, and Contact), ensuring a responsive and visually engaging experience across all devices.
Email Integration: Implemented a secure contact form system using Nodemailer with SMTP configuration, honeypot spam protection, input sanitization, and rate limiting to prevent abuse.
Bilingual System (PT/EN): Built a custom internationalization (i18n) system with a React context provider that allows visitors to switch between Portuguese and English, making the platform accessible to both local and international audiences.
Cloud-Based Gallery: Developed a dynamic photo gallery integrated with Cloudinary, featuring category filtering, lightbox navigation, lazy loading, and automatic image metadata parsing from filenames.
SEO Optimization: Configured metadata, Open Graph tags, sitemap generation, and robots.txt to maximize the organization's visibility on search engines.
Bilingual Website (PT/EN): Custom language switcher allowing visitors to navigate the entire website in Portuguese or English.
Contact Form with Email Delivery: Secure contact system with automated email notifications via SMTP, honeypot spam protection, and IP-based rate limiting.
Dynamic Photo Gallery: Cloudinary-powered gallery with category filtering, image lightbox, pagination, and optimized image delivery with blur placeholders.
Smooth Animations: Entrance animations and micro-interactions powered by Framer Motion and GSAP ScrollTrigger for parallax and reveal effects.
Responsive Design: Mobile-first, fully responsive interface optimized for desktop, tablet, and mobile devices.
SEO Ready: Sitemap generation, Open Graph metadata, structured keywords, and robots.txt configuration for improved search engine ranking.
Frontend Framework: Next.js 15 (App Router) with React 18 and TypeScript for a modern, type-safe, and performant application.
Styling: Tailwind CSS for utility-first responsive styling with custom design tokens (earth-tone color palette).
Animations: Framer Motion for component animations and GSAP with ScrollTrigger for scroll-based parallax and reveal effects.
Image Management: Cloudinary for cloud-based image storage, optimization, and delivery with automatic format and quality adjustments.
Email Services: Nodemailer with SMTP integration for handling contact form submissions, with LRU cache-based rate limiting.
Internationalization: Custom React Context-based i18n system supporting Portuguese and English with dynamic language switching.
Seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *