Case Study: Building Grosu Aesthetics — A Medical Clinic Website

May 20, 2025|4 min read
next.jscase-studymdxi18nfreelance

The Client

Grosu Aesthetics is a medical aesthetics clinic based in Timisoara, Romania. They offer treatments like Botox, dermal fillers, PRP therapy, and skin rejuvenation. The clinic needed a professional online presence that would:

  • Showcase their treatments with detailed, medically accurate descriptions
  • Build trust with potential patients through professional design
  • Work entirely in Romanian (their patient base is local)
  • Load fast on mobile — most patients browse on their phones

The Challenge

Medical websites have unique constraints. The content needs to be informative without making medical claims. Images need to feel professional and trustworthy, not generic. And Romanian localization isn't just translation — it's date formats, currency, cultural expectations around medical authority.

The previous site was a basic WordPress template that loaded slowly, wasn't mobile-optimized, and had inconsistent Romanian text (some sections were still in English placeholder text).

Technical Decisions

Next.js 15 with App Router

I chose Next.js 15 with the App Router for several reasons:

  • Static generation for all treatment pages — a clinic's treatment list doesn't change daily
  • Server Components to keep the JavaScript bundle minimal
  • next/image for automatic WebP conversion and lazy loading of treatment photos
  • Metadata API for proper SEO on every page

MDX for Treatment Content

Each treatment page is an MDX file with structured frontmatter:

---
title: "Acid Hialuronic"
slug: "acid-hialuronic"
category: "injectabile"
duration: "30-45 min"
recovery: "24-48 ore"
price_from: 500
description: "Tratament cu acid hialuronic pentru..."
---

This approach means the clinic can update treatment descriptions without touching code. The MDX files support embedded components for before/after galleries, pricing tables, and FAQ accordions.

Full Romanian Localization

Every string in the interface is in Romanian:

  • Navigation: "Tratamente", "Despre Noi", "Contact", "Programare"
  • Date formatting: "15 iunie 2025" instead of "June 15, 2025"
  • Number formatting: "1.500 RON" instead of "1,500 RON"
  • Medical terminology reviewed by the clinic staff

I used a simple constants file for UI strings rather than a full i18n library — with a single-language site, the overhead of next-intl or react-i18next wasn't justified.

Appointment Flow

The appointment CTA appears on every treatment page and in the sticky header. Rather than building a full booking system (which would need calendar integration, payment processing, and GDPR-compliant data handling), I implemented a streamlined flow:

  1. CTA button opens a modal with treatment pre-selected
  2. Patient fills in name, phone, preferred date range
  3. Form submits to the clinic's existing booking email
  4. Confirmation message with expected response time

This keeps the scope manageable while giving patients a clear path to action.

Design Approach

The design language needed to communicate three things: medical competence, modern aesthetics, and approachability. I used:

  • A muted, warm color palette (soft whites, gentle grays, touches of rose gold)
  • Large, high-quality treatment photos with consistent lighting
  • Generous whitespace and clear typography hierarchy
  • Subtle Framer Motion animations — fade-ins on scroll, not flashy effects

The hero section features a full-bleed image with a clear value proposition and CTA. Treatment pages use a consistent layout: hero image, description, key details (duration, recovery, price range), FAQ section, and CTA.

Performance Results

The final site scores:

  • Lighthouse Performance: 95+
  • First Contentful Paint: ~0.8s
  • Largest Contentful Paint: ~1.2s
  • Cumulative Layout Shift: 0

Key optimizations:

  • All treatment images are next/image with priority on above-fold images
  • Zero client-side JavaScript on static treatment pages (pure Server Components)
  • Fonts loaded with next/font to eliminate layout shift
  • CSS modules with no external stylesheet dependencies

Lessons Learned

MDX is perfect for this use case. Treatment pages need rich formatting (headings, lists, callouts, images) but also structured data (price, duration, category). MDX gives both — Markdown for content, frontmatter for metadata, and embedded React components for interactive elements.

Single-language sites are simpler than you'd think. Without i18n routing, locale detection, or translation management, the codebase stays clean. Just write everything in the target language from the start.

Medical compliance matters. Every treatment description was reviewed by the clinic. I learned to write content that's informative ("this treatment typically takes 30-45 minutes") rather than promissory ("this treatment will make you look 10 years younger").

Mobile-first is non-negotiable for local businesses. Analytics from the first month showed 78% of traffic was mobile. Every design decision was made on a 375px viewport first.

The Result

The site launched at grosuaesthetics.com and has been live since early 2025. The clinic reported a noticeable increase in appointment inquiries through the website form, and the staff can update treatment information by editing MDX files.

Check out the live site or explore the code architecture in my portfolio.