A patient-facing site for a mental-health clinic: warm, calm, and easy to act on. I designed and built the front end in Next.js and Tailwind, then containerised it so the clinic can host it anywhere without giving up a single Next.js feature. Figma design with Hamail Hassan.
- Client
- Emerald PsychiatryMental-health clinic
- Year
- 2025Front end shipped
- Role
- Front-EndDesign & development
- Stack
- Next · TailwindDocker · self-host
- Status
- ShippedHanded to client
Emerald Psychiatry is a mental-health clinic that needed a website to match the care it gives: calm, clear, and human. What it had was a generic template that made a careful practice look like everyone else.
The brief was front-end only. They had the words and the clinical credibility; what they lacked was a face. One patient-facing site, fast and reassuring, that turns a nervous first click into a booked appointment.
Hamail Hassan and I worked the design in Figma: warm greens, soft type, real photography over stock gloss. I built the whole front end from there in Next.js and Tailwind.
Because the clinic wanted to own its hosting, I shipped the site as a container. It runs anywhere a Docker host does and keeps every Next.js advantage, server rendering, routing, image handling, wherever it lands.
A first click
that feels safe.
Two ideas shaped every screen. One: lower the temperature. People arrive here anxious, sometimes for the first time. Generous space, soft greens, and plain language do more than any hero animation to make reaching out feel possible.
Two: make the next step obvious. Book, learn, or call is never more than one clear button away. The site has a single job, to carry someone from worried to booked, and every section is measured against it.
Built to load,
built to convert.
The front end is a handful of considered sections, not a page builder's junk drawer. Every block earns its place: hero, services, the people behind the care, proof, and a clear path to book. Real photography carries the warmth; the type and spacing carry the calm.
Under the surface it's a typed Next.js app styled with Tailwind, tuned for speed and accessibility. Containerised from day one, it ships as a single image the clinic can run on its own infrastructure, no rebuild, no lock-in, no lost Next.js features.
All 9 screens.
Made with a small circle.
- Front-End
- Mohed Abbas
- Design & development · Next, Tailwind, Docker
- Design
- Hamail Hassan
- Figma · UI
Mohed Abbas is a full-stack web engineer who designs as readily as he ships. He builds web products end to end, from the interface to the containers it runs in.
Emerald Psychiatry was a front-end engagement: brand-led UI in Figma with Hamail Hassan, built in Next.js and Tailwind, and handed over as a portable container. Currently open to full-time roles and freelance builds.