A single-page wedding invitation for Amr and Suzan's Katb El-Kitab, built as a gift rather than as a product.
The brief was emotional rather than functional. It had to feel warm and hand-made on a phone screen, in a bilingual context where the Arabic Bismillah centrepiece carries at least as much weight as the English copy — which rules out most of the reflexes a web app brings to layout. The gold arch draws itself on load as an SVG stroke animation, each section enters on a scroll trigger, and a live countdown runs to the date.
Content is deliberately centralised: names, venue, verse, story and RSVP link all live in a single wedding.ts, so details could be corrected without opening a component.
Next.js App Router with Tailwind 4, shadcn/ui and Motion, typeset in Cormorant Garamond, Tangerine, and Amiri for the Arabic.
An elegant, fully-animated single-page invitation website for Amr & Suzan's Katb El-Kitab on Friday, June 12, 2026 at El-Mosheer Tantawy Mosque.
Built with care: a warm watercolor-and-gold aesthetic, a self-drawing gold arch, an Arabic Bismillah centerpiece, scroll-triggered motion on every section, a live countdown, and an RSVP call-to-action.
Tech stack#
- Next.js 16 (App Router) + TypeScript
- Tailwind CSS 4
- shadcn/ui (button, card, carousel, dialog, separator)
- Motion for animation
- Fonts: Cormorant Garamond, EB Garamond, Tangerine, Amiri (Arabic)
Editing content#
All wedding details (names, date, venue, RSVP link, story, verse) live in a
single file: src/lib/wedding.ts. Edit there — nothing else needs to change.
Adding real photos#
The gallery (src/components/sections/gallery.tsx) uses tasteful watercolor
placeholders. To use real photos:
- Drop images into
public/gallery/(e.g.1.jpg,2.jpg). - In
gallery.tsx, set thesrcfield on each photo (e.g.src: "/gallery/1.jpg").
Sections#
Hero (Bismillah + names) · Quran verse · Our Story · Countdown · Event Details · Location & Map · Gallery · RSVP · Footer