Osman and Khadijah Foundation

What we built

• 01Six initiatives, each one typed record: its page, index card, footer link and sitemap entry all follow from it
• 02A status on every initiative, from Planned to Operational, with a timeline of what is done and what is still to come
• 03Impact figures shown as Pending verification until checked against records, never as zero or an estimate
• 04Registration, tax status, bank details and reports held as empty fields, each marked on the page until it is issued
• 05Contact, volunteer, partnership and donation pledge forms, validated in the browser and again on the server, with a honeypot and a per-IP rate limit
• 06Forms that stay closed until there is somewhere to store what people send, so no message is accepted and then lost
• 07Pledges behind a payment provider interface, so a licensed gateway can be added without touching the form
• 08Per-page canonicals, a generated sitemap, and NGO, breadcrumb and FAQ structured data

Stack

• Next.js 16 (App Router)
• React 19
• TypeScript
• Tailwind CSS v4
• cva + Radix Slot
• Framer Motion
• React Hook Form
• Zod
• JSON-LD structured data
• Vercel

A note on these screens. The photographs are illustrative stock images and do not show the foundation's beneficiaries or services. The foundation is still being established and its first initiative, an ambulance service for Karachi, is not yet operating, so the impact figures are deliberately empty. The forms and donation pledges are built but switched off until storage is connected, and no money is taken on the site.