Project Overview
A consultant urologist in Zakho needed a web presence that works for the patients he actually sees: Kurdish Badini and Arabic speakers first, English readers second. Most medical sites in the region are single-language or bolt translation on as an afterthought; here the three languages were the requirement the whole build was shaped around. The goal was one fast page that carries his credentials (Kurdistan Board for Medical Specialties, EAU membership), explains four service areas in plain terms, answers the questions new patients ask, and makes calling the clinic a single tap. Delivered: a trilingual single-page site with full RTL support, a Docker deployment setup, and content matching the clinic's own promotional material.
Features & Functionality
The header language switcher flips the site between English, Arabic and Kurdish instantly — no page reload — and remembers the choice in localStorage. Arabic and Kurdish render fully right-to-left: navigation, cards, arrows and scroll effects all mirror. Visitors get an animated hero with the doctor's photo and credential badges, a scrolling marquee of memberships that pauses on hover, a gradient stats band, four service cards, and an eight-question FAQ accordion with the first answer open by default. Every call to action is a tel: link to the clinic, backed by a floating call button that slides the number out on hover. A slide-down drawer serves navigation on mobile, and all animation respects the visitor's reduced-motion preference.
Development & Technology
Next.js 15 App Router with React 19, a single route, and client components for everything interactive. Translations live in one dictionary module served through a custom React context provider; a t() lookup keyed by language covers every string, and an effect sets the document's lang and dir attributes so the browser handles bidirectional text natively. Styling is Tailwind CSS 3.4 using logical properties and ltr:/rtl: variants, so the RTL mirror comes from markup, not duplicate CSS. Scroll reveals and staggered entrances are Framer Motion whileInView animations with a shared easing curve. Type is loaded through next/font: Figtree and Noto Sans from Google, IBM Plex Sans Arabic self-hosted for the RTL languages. Icons are lucide-react.
Performance, SEO & Deployment
The page is fully static — Next.js prerenders it at build time, with 160 kB first-load JavaScript and no server rendering or database at runtime. Fonts load with display swap through next/font, so text never blocks on a font download. Metadata includes a descriptive title and description for search, plus a theme colour matched to the brand blue. Deployment is a multi-stage Dockerfile on node:22-alpine: dependencies installed with npm ci, the app built with Next's standalone output, and the final image running only the self-contained server bundle as an unprivileged user on port 3000. Telemetry is disabled at build and runtime, and the whole image carries no dev dependencies.
