Mallath — Luxury Desert Resorts
Bilingual brand site for a Saudi luxury mud-brick resort & villa builder — cinematic, credible, and built to turn visitors into booked consultations.
Role
Design & development (end-to-end)
Stack
- Next.js
- React
- TypeScript
- Tailwind
- Framer Motion
What it is
A bilingual (Arabic-first, RTL) marketing site for Mallath, a luxury desert-resort and villa developer in Saudi Arabia specializing in heritage mud-brick architecture, pools, and landscapes. Service pages, a project portfolio, a company story, and a consultation flow — designed to feel cinematic and heritage-luxury while loading fast and converting interest into enquiries. I handled it end to end: brand design system, motion language, multi-page build, accessibility, SEO, and deployment to a custom domain.
The ask
Present an established, high-end Saudi resort builder to discerning clients in both Arabic and English. It had to feel like a studio made it — cultural, premium, and trustworthy — never a generic template, and clearly guide visitors toward requesting a private consultation.
The answer
A cinematic, Arabic-first experience rooted in Najdi / AlUla heritage: a single-screen hero built around the brand arch, card-free section treatments (expanding image panels, an editorial stats ledger, a typographic project index), and a calm light/dark rhythm. Built as a real multi-page site with true RTL, reduced-motion support, and a consultation form wired for lead capture — then shipped on a custom domain with HTTPS.
What it does
- Bilingual Arabic / English with true right-to-left layout
- Cinematic scroll & motion (Framer Motion + Lenis smooth scroll)
- Card-free, custom section treatments — expanding panels, bento, typographic index
- Multi-page architecture with fast SSR / SSG (Next.js App Router)
- Accessibility-minded — WCAG AA, keyboard nav, reduced-motion, semantic markup
- SEO-ready — per-page metadata, JSON-LD, sitemap, Open Graph
- Optimized imagery & Core Web Vitals (next/image, compression)
- Self-hosted brand typography (Arabic serif-display + sans pairing)
- Lead capture via a consultation form
- Deployed end-to-end — custom domain, automatic HTTPS, continuous deploy
Prints
