Case study · bilingual landing page

AL-Shamaa Engineering

We designed and built a bilingual English/Arabic landing page for an engineering consultancy that does reinforcement detailing, BIM and structural design. Every illustration on it is drawn as SVG rather than sourced from stock.

UI/UXLanding page

Start a project See more work

AL-Shamaa Engineering bilingual landing page designed and built by kaprera — AL-Shamaa Engineering bilingual landing page, built by kaprera

/ Overview

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. 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.

/ What we built

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, a solar support frame. 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

/ Specs

Type: Bilingual landing page
Stack: Static HTML, CSS & vanilla JS, no build step
Type system: IBM Plex Sans / Mono / Sans Arabic
Client: Engineering consultancy in reinforcement detailing & BIM
Languages: English & Arabic, full RTL
Scope: UI/UX design, illustration & front-end build

/ Measured

Numbers anyone can re-run.

Every figure below is a real reading from a standard tool anyone can re-run: Google Lighthouse for speed and quality, the W3C validators for the code itself. Each one says what it means for you in plain language.

Google Lighthouse scores out of 100

100PerformanceHow quickly the page becomes usable. Google scores it out of 100, and 90 or above counts as fast.

100Accessibility A11Y · WCAGHow well the page works for people using a screen reader, a keyboard, or high-contrast settings, checked against the WCAG standard.

100Best practices BPWhether the site follows the modern rules of the web: HTTPS everywhere, safe libraries, and a browser console with nothing thrown into it.

100SEOHow readable the page is to search engines: titles, descriptions, crawlable links and valid robots rules.

Loading & responsiveness Core Web Vitals

0.4 sFirst contentful paint FCPHow long before the visitor sees anything at all. Under 1.8 seconds is the target.

0.5 sLargest contentful paint LCPWhen the main image or headline has finished loading, which is the moment the page looks ready. Google wants this under 2.5 seconds.

0 msTotal blocking time TBTHow long the page ignores taps and clicks because it is still busy loading. Zero means it never freezes on the visitor.

0Cumulative layout shift CLSHow much the page jumps around while it loads. Zero means nothing moves under the reader's finger mid-tap.

0 msInteraction to next paint INPHow fast the page answers a tap. It is measured on real visitors over time; the lab stand-in shown here is total blocking time.

Code quality & weight standards, size, dependencies

9.5 KBHTML, compressed GZIP / BRThe weight of the page's own code as it actually travels over the network. Smaller is cheaper and faster on mobile data.

3 of 5Font preloadWhether the custom typefaces are requested up front, so text never flashes in a fallback font before settling.

0W3C HTML errorsErrors found by the W3C's official markup validator. Zero means the code is standards-clean, which is what keeps a site working through future browsers.

0W3C CSS errorsThe same official check applied to the stylesheets. Invalid CSS is where most cross-browser display bugs begin.

0Third-party originsHow many outside servers the page pulls from. Every one is another company that can slow the page down, break it, or track your visitors.

Measured on the production build with Google Lighthouse 12.8.2 (desktop) and the W3C validators, August 2026. The domain was not yet serving at the time of the run.

/ More work

More case studies.

Oplinx Solutions Bilingual landing page

Ana Arabia Event landing page

Bayader Investments case study by kaprera

Bayader Investments Corporate website

/ Let's build something

Want results like these?

Book a call See more work