AGAMY.

Case study 02

Arabic landing pageLive

Mohamed Askar.

A right-to-left course page for Gulf professionals that sells a two-hour Agile course the way a good trainer teaches: name the pain, show a better way, then make enrolling obvious.

Client
Mohamed Askar, PM trainer
Language
Arabic · RTL
Scope
Landing page design & build
Year
2026
Visit live site
mohamedaskar.com
The course page on a phone
Desktop · 1440 — Mobile · 390Captured from the live site

The brief

An expert with eighteen years of experience and a short, practical course. The page had to earn trust in Arabic, in under a minute, and turn it into a purchase.

Challenge

Online course pages in the region often read as translated templates — left-to-right layouts flipped at the last minute, cramped Arabic type, and prices hidden behind buttons. The audience is busy professionals who decide fast.

Approach

Design right-to-left from the first sketch. Structure the page like a short lesson: why projects fail, why Agile helps, why now, what you’ll learn, who teaches it, what it costs — with the same gold call to action always within reach.

Result

A calm, dark-and-gold page with a trailer video up front, hand-drawn highlights on key phrases, an animated Agile cycle, a real certificate preview and a transparent price with a 30-day guarantee.

Scroll the whole page

Structured
like a lesson.

  1. Promise & priceThe outcome, the time it takes and the price — all above the fold.
  2. Course trailerMeet the instructor on video before reading another word.
  3. Why projects failThree familiar symptoms, numbered like a diagnosis.
  4. A better wayAgile framed as a mindset with three clear benefits.
  5. What you’ll learnEight outcomes with custom illustrations.
  6. Details & curriculumNine lessons, 2:05 hours, and an animated Agile cycle.
  7. Certificate & instructorProof you can hold, from someone who’s done it.
  8. Price & questionsOne card, one button, then the objections answered.
mohamedaskar.com
Full-length capture of the Mohamed Askar course page, from hero to footer

Inside the build

Decisions,
up close.

Six moments from the page and the reasoning behind them. Click any screen to see it at full resolution.

/ تعرّف على الدورة — Meet the course
01

A face before a feature list.

The second thing visitors see is the instructor himself. A Plyr-powered trailer opens in a focused modal, styled to match the page, so people can hear how he teaches before deciding anything. A ticker of short promises runs underneath: practical from day one, no jargon, real examples.

  • Video loads only when asked for
  • Custom player skin instead of a default embed
/ لماذا تفشل المشاريع؟ — Why projects fail
02

Start with the reader’s pain.

Deadlines slip. Priorities change. Control gets harder. Three large gold numerals make it read like a diagnosis, and the side card turns it around: the problem isn’t you, it’s the traditional method. That reframing is the hinge of the whole page.

  • Numerals and gold do the hierarchy, not boxes
  • Key phrases get hand-drawn highlights as they scroll in
/ ماذا ستتعلم؟ — What you’ll learn
03

Eight outcomes, one glance.

Each learning outcome gets its own illustration in a consistent warm style, laid out in a four-by-two grid that’s easy to scan in Arabic reading order. Bright artwork against the dark page gives the section energy right where attention usually drops.

/ شهادة معتمدة — The certificate
04

Show the reward you can hold.

Rather than a badge icon, the page shows the actual certificate issued through the Tadarab platform, tilted like a document on a desk. The checklist beside it answers the practical questions: it’s official, it goes on LinkedIn, and it has a QR code for instant verification.

/ عن المحاضر — About the instructor
05

Credentials, made scannable.

Two numbers carry the section — 18+ years and seven international certifications — with the PMI credentials set as compact badges. A gold-ruled note mentions his contribution to PMI publications, the kind of detail that converts a sceptical professional.

/ احصل على الدورة الآن — Get the course
06

One price, nothing hidden.

A single card: 229 SAR, the original price struck through, three things you get, and one white button that stands out from every gold one above it. The FAQ follows straight after to catch last-minute doubts about length, experience and refunds.

  • Price shown in the hero too — no surprises at checkout
  • 30-day money-back guarantee repeated near every ask

On the phone

Where most
buyers decide.

Course buyers usually decide on their phones, so the mobile layout was treated as the main design: a sticky gold call to action, full-width cards and Arabic type sized for comfortable reading.

Mobile: hero with price and enrol button

Hero

Mobile: certificate preview

Certificate

Mobile: pricing card

Pricing

Craft notes

Under the surface.

  • HTML & vanilla JS
  • Tailwind CSS
  • Plyr
  • Rough Notation
  • Almarai
  • Space Grotesk
  • Tadarab
01

RTL from the start

Layout, icons, numerals and motion all read right-to-left — nothing is a mirrored afterthought.

02

Hand-drawn emphasis

Rough Notation underlines and boxes key Arabic phrases as they appear, like a trainer marking a whiteboard.

03

Animated Agile cycle

The eight stages of the course loop around a ring, teaching the idea before the first lesson.

04

One action, everywhere

The same gold “start learning” button follows the reader, so enrolling never takes more than one tap.

Next case study · 03 / 06

WSS

An AI-assisted system that turns raw consumer feedback into grounded, reviewable insight.

Mohamed Askar · 0:22 tour captured from the live site