Projects

Amr & Suzan — Wedding Invitation

2026·1 min read

Next.js
TypeScript
Tailwind CSS
shadcn UI
Motion
LinkGitHub

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.

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:

  1. Drop images into public/gallery/ (e.g. 1.jpg, 2.jpg).
  2. In gallery.tsx, set the src field 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