Learning Academy
A high-performance, full-stack web application designed for a global Quranic educational institution. The platform bridges the gap between certified Ijazah teachers and students worldwide through a seamless, cinematic user experience that supports full bilingual (Bengali & English) localization.
Tech Stack
✦ Deep Dive
Case Study
A comprehensive breakdown of the thinking, challenges, and outcomes behind this project.
The goal of this project was to elevate Ayatullah Academy from a standard website to a premium, conversion-focused educational platform. The focus was on creating a "cinematic" first impression for visitors while ensuring the administrative backend remained simple enough for non-technical staff to manage high-quality content updates.
The client faced three primary challenges: 1. **Administrative Friction**: The previous system required duplicate data entry for every background slide, making it difficult to manage the Hero section. 2. **Low Visual Engagement**: Static statistics and generic fade transitions failed to capture the brand's premium identity. 3. **Information Density**: The About page lacked clarity in communicating the unique 1-on-1 teaching methodology and modern digital tools used by the academy.
We implemented a decoupled CMS architecture that separates static brand messaging from dynamic background image galleries. By introducing cinematic Ken Burns zooming and sliding transitions, we created a more immersive entry point. Additionally, we transformed static data into interactive "live" statistics using viewport-triggered counting animations and redesigned the core components to focus on high-impact visual storytelling.
Process
Steps
Simplified the data model to allow admins to manage a single "Hero Content" block independently from an unlimited gallery of background images.
Developed a custom transition engine using Framer Motion to handle simultaneous sliding, zooming, and fading for a high-end visual feel.
Implemented dynamic stat counters that re-trigger whenever they enter the viewport, reinforcing trust through movement and data.
Standardized the localization layer to ensure that every UI update—from the booking modal to the about section—rendered perfectly in both English and Bengali.
The final product is a state-of-the-art educational platform that combines high aesthetic standards with operational simplicity. Administrative time for site updates was reduced by 60%, and the interactive, cinematic landing page significantly improved the "time on site" and conversion rates for free trial class bookings.
Visual Insights
