Rameem Medical
A 500+ product medical catalog — in two languages, without dropping a frame
- Type
- Client project
- Year
- 2025
- Status
- Live
- Scope
- 500+ products · 2 languages
- Stack
- React · Vite · Framer Motion · i18n
A medical-devices company needed a showcase worthy of its products: a large catalog, an audience that reads Arabic first, and international clients expecting an English version of equal quality — all on devices ranging from desktops to mid-range phones.
The challenge
A catalog of 500+ products with heavy imagery, two languages running in opposite directions, and interface motion the client wanted to feel alive without becoming a performance tax. Most off-the-shelf solutions treat Arabic as a translation pasted over an English layout — exactly what the client wanted to avoid.
The engineering approach
I built the interface with React and Vite on a bilingual foundation from day one: layout in CSS logical properties that mirrors automatically with direction, and a single content layer feeding both languages. All motion runs on transform and opacity only — no properties that force layout — with lazy-loaded imagery and respect for reduced-motion preferences.
The result
A live site serving the full catalog with motion steady at 60fps and Lighthouse scores above 90 — and Arabic and English versions of identical quality, with layout, type and interaction mirroring cleanly both ways.
