AL-Shamaa Engineering
We designed and built a bilingual English/Arabic landing page for an engineering consultancy — reinforcement detailing, BIM and structural design — with every illustration drawn as SVG rather than sourced from stock.
The challenge
A detailing and BIM practice needed a first presence that reads as technical rather than generic — one page that explains reinforcement detailing, BIM modelling and structural design to contractors and consultants across the region, in both English and Arabic, without any of it sounding like stock corporate copy.
The solution
A single self-contained landing page built around hand-drawn technical artwork — a reinforcement cage, a beam elevation, an isometric BIM frame — so the visuals are the discipline itself. One button converts the whole page to Arabic and flips it right-to-left, and the palette and typeface are chosen to sit in an engineering context rather than a luxury one.
Inside the project.
- Ten sections in one page — hero, capability marquee, practice profile, three service cards, a capabilities bento, a five-step process, sectors, standards and a closing enquiry block
- Every illustration drawn as inline SVG — a reinforcement cage, a beam elevation, an isometric BIM frame and a solar support frame — so nothing depends on stock photography and everything stays sharp at any size
- Full English/Arabic conversion from one button: the two languages never coexist in the markup, the choice persists between visits, and the layout mirrors through logical properties rather than a duplicate stylesheet
- Arabic typography handled properly — tracking and uppercasing neutralised because they break Arabic shaping, looser line heights, and figures isolated so bidi cannot reorder "2D + 3D"
- A hero locked to the viewport with svh rather than vh, so mobile browser chrome cannot cause a jump — with a floor for short screens and a ceiling so it never becomes a void on tall ones
- Scroll-driven reveals, count-up figures, stroke-drawn blueprint lines and a scroll progress bar — the whole set collapsing to a static page for visitors who ask for reduced motion
- Type
- Bilingual landing page
- Stack
- Static HTML, CSS & vanilla JS — no build step
- Type system
- IBM Plex Sans / Mono / Sans Arabic
- Client
- Engineering consultancy — reinforcement detailing & BIM
- Languages
- English & Arabic, full RTL
- Scope
- UI/UX design, illustration & front-end build
