The story
The business need
Syed Zain Kazmi serves at Astana Alia Khanoharni Sharif in Lahore and wanted one calm, dignified place that introduces the Astana and its values, keeps its gatherings (Shab-e-Milad, 12 Rabi ul Awal, Mehfil-e-Naat, Urs Mubarak, the Mela, Langar and Ziyarat) preserved as a living album, and reminds visitors of the blessed days ahead. It is a devotional site, not a product, so the work was in tone: respectful, unhurried and readable in Urdu, Arabic and English.
The approach
I designed the site around one visual language of deep green and gold, hand-drawn SVG artwork (lanterns, a crescent moon, a mihrab arch and a mosque skyline) and Arabic calligraphy. The home page opens with a door-opening intro and a hero arch you scroll through, then moves through a salawat marquee, a scroll-lit Qur'an verse, a pinned horizontal rail of gatherings, a live countdown to 12 Rabi ul Awal, the latest albums, a hadith carousel, a live Hijri calendar and a durood counter.
Content structure
Seven gathering pages each explain the meaning, flow and scripture of the gathering and show its albums. The gallery has filterable albums, masonry photo layouts and a shared-element lightbox that works with keyboard and swipe. A Noor section collects Qur'an, hadith, durood, the 99 Names of Allah, Sufi kalam and Tasbih-e-Fatima, and an Astana page covers the annual gatherings and the adab of ziyarat. Everything editable (the gatherings, verses, calendar and site details) lives in plain content files.
Admin and albums
A password-protected admin panel lets the owner create, edit and delete albums without touching code. Album records are stored in Turso (libSQL) and photo files in Vercel Blob; photos are resized in the browser to a maximum of 2400px and uploaded directly, so large phone photos work, and pages refresh as soon as an album is saved.
Built with
Next.js 16 (App Router) with React 19, Tailwind CSS 4, Motion for animation and Lenis for smooth scrolling, Cormorant Garamond for the display type, Turso and Vercel Blob for content, deployed on Vercel. Built in October 2026.
What made it hard
Three scripts, one page
Setting Urdu, Arabic calligraphy and English together so each reads naturally without any language feeling like a translation of another
Reverent but alive
Using scroll-driven motion, a countdown and live calendar to keep the site engaging while staying calm and free of anything that distracts from the content
Albums without a developer
Letting the owner add photo albums from a phone: in-browser resizing, direct upload to Vercel Blob and pages that refresh the moment an album is saved