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
- Netlify
[ 01 ]Overview
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 brief
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 response
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.
[ 04 ]Capabilities
- 01Bilingual Arabic / English with true right-to-left layout
- 02Cinematic scroll & motion (Framer Motion + Lenis smooth scroll)
- 03Card-free, custom section treatments — expanding panels, bento, typographic index
- 04Multi-page architecture with fast SSR / SSG (Next.js App Router)
- 05Accessibility-minded — WCAG AA, keyboard nav, reduced-motion, semantic markup
- 06SEO-ready — per-page metadata, JSON-LD, sitemap, Open Graph
- 07Optimized imagery & Core Web Vitals (next/image, compression)
- 08Self-hosted brand typography (Arabic serif-display + sans pairing)
- 09Lead capture via consultation form (Netlify Forms)
- 10Deployed end-to-end — custom domain, automatic HTTPS, continuous deploy
[ 05 ]Field gallery
