Description

The GRACE PHARMA & SERVICES (Farmácia Grace) website is a corporate platform developed for a pharmaceutical importing and distribution company based in Pemba, Mozambique. The website showcases the company's services, global partnerships, regulatory compliance, and mission to bridge international pharmaceutical innovation with local healthcare needs. It features rich scroll-driven animations, interactive SVG visuals, and an integrated contact system with automated email delivery.

My Role and Contributions

• Full Website Development: Designed and developed the entire website from scratch using Next.js and Tailwind CSS, ensuring a modern, responsive layout optimized for all devices. 

• Advanced Animations: Implemented scroll-driven animations and interactive visual elements using GSAP and Framer Motion, including an animated SVG globe, global supply chain map, and animated number counters. 

• Email Integration: Built the contact form system with server-side email delivery via PHPMailer SMTP, including rate limiting, honeypot anti-spam protection, and input validation. 

• SEO & Compliance Pages: Configured full SEO metadata, Open Graph tags, sitemap, and developed dedicated legal pages for Privacy Policy, Terms of Service, and Regulatory Compliance. 

Key Features

• Interactive SVG Global Map: Animated world map showing pharmaceutical supply chain paths from Europe, Asia, and the Americas converging on Mozambique, with pulsing connection points and floating info cards. 

• Scroll-Driven Animations: Rich motion design with GSAP ScrollTrigger and Framer Motion, including section reveals, animated counters, expandable cards, and a rotating SVG globe in the hero section. 

• Contact Form with Email Delivery: Integrated contact system with automated SMTP email notifications, rate limiting, spam pattern detection, and honeypot anti-spam protection. 

• Responsive Design: Fully responsive interface built with Tailwind CSS, optimized for desktop, tablet, and mobile devices with an adaptive navigation menu. 

• SEO Optimized: Comprehensive SEO setup with metadata, Open Graph, Twitter cards, structured sitemap, and robots configuration for maximum search engine visibility. 

Technology Stack

• Frontend Framework: Next.js 16 with React 19 and TypeScript for a modern, performant, and type-safe application architecture. 

• Styling: Tailwind CSS for utility-first responsive design with custom theme configuration and Google Fonts (Inter, Montserrat). 

• Animations: GSAP with ScrollTrigger for scroll-based animations and SVG path drawing, combined with Framer Motion for component transitions and interactive UI elements. 

• Email Services: PHPMailer with SMTP integration (SMTPS on port 465) for secure and reliable contact form email delivery. 

• Deployment: Static export deployed on Hostinger hosting with PHP backend API for contact form processing.