Wazen
Marketing site for a Saudi cloud ERP platform — bilingual, content-driven, and built around the product narrative.
- Year
- 2024
- Client
- Wazen
- Role
- Frontend engineer
- Timeline
- 6 weeks from kickoff to launch
Overview
Wazen needed a marketing site that could carry an enterprise narrative in two languages and surface dozens of product, solution, and integration pages without feeling heavy. The build focused on a calm visual system, fast first paint on slow networks, and a CMS-driven structure so the team can keep shipping pages on their own.
Goals
The brief was straightforward but the scope was wide: tell the story of a full ERP suite to an Arabic-first audience, surface every product and industry vertical clearly, and keep the team unblocked from marketing after launch.
I focused on three things:
- Narrative clarity — every section answers one question, in order. Who is this for? What does it do? What does it integrate with? Who already trusts it?
- Bilingual without compromise — Arabic is the primary language. The English mirror is a real translation, not a fallback, and the layout flips fully to LTR.
- Operator self-serve — products, solutions, testimonials, integration logos, and the blog are all editable in Sanity. No PRs needed to add a vertical or rotate a partner logo.
Approach
I started by mapping every page in the IA (home, four products, ~20 solutions, pricing, integrations, blog, help center, contact, legal) and grouping them by template. That collapsed the site into a handful of patterns: hub pages, leaf pages, and the home as a one-off.
From there I built a small component kit — hero, section header, capability strip, card grid, testimonial slider, FAQ accordion, footer — and reused it across every template. The Sanity schema mirrors the same vocabulary so the CMS editor and the engineer share one mental model.
Result
The site ships dozens of pages from a few templates, runs entirely off Sanity content, and the marketing team has been publishing new vertical pages and blog posts without engineering involvement since week one after launch.
Desktop
Global header — locale switcher, primary nav, and the product mega-menu opening in both reading directions.
Pages & sections
Site tour
Product page
All four ERP modules share a single template — sticky sidebar, anchored sections, and inline screenshots swapped per module.
Solutions hub
One template branching into ~20 industry-specific sub-pages — manufacturing, retail, hajj, hospitals, and more.
Pricing
Currency-aware billing toggles layered on the same component kit, with ZATCA and integration perks surfaced inline.
Integrations
A strip of certification and partner logos — STC, SAMA, ZATCA, and others — pulled from Sanity so the team can rotate them without a deploy.
Blog
Three layouts — header, posts grid, and post page — built on the same CMS-driven template the rest of the site uses.
Blog post — table of contents
An interactive table of contents with scroll-spy on every long-form post, rendered from the same Sanity document.
Footer
A mega-footer that doubles as the site's sitemap, exposing the help center, developer docs, and legal pages.
Mobile
Under the hood
Technical details
Stack
- Next.js (App Router)
SSG for marketing pages, ISR for CMS-driven content like products, solutions, and the blog.
- TypeScript
End-to-end types from CMS schema through to React components.
- Tailwind CSS
Design tokens for the brand palette and a small set of typographic primitives reused across pages.
- Sanity CMS (headless CMS)
Powers products, solutions, testimonials, integration logos, and the blog. Bilingual content with structured references.
- next-intl
Arabic-first with English mirror. Locale-aware routing, RTL layout, and content fallbacks.
- Motion
Restrained motion on the hero, the rotating capability chips, and section reveals.
- Vercel
Hosting, image optimization, and preview deployments for every Sanity branch.
Features
- Bilingual Arabic/English with full RTL support and locale-aware routing
- Sanity-driven product, solution, integration, and blog collections
- Draft mode and authenticated live preview for content editors
- Product sub-pages for 4 ERP modules (accounting, HRM, CRM, POS)
- Solution sub-pages for ~20 verticals (manufacturing, retail, hajj, hospitals, etc.)
- Testimonials carousel sourced from Sanity references
- Pricing page with currency-aware billing toggles
- Help center and developer docs linked from the global nav
- Optimized for slow 3G: <1.5s LCP target on the home page
- Accessible navigation, focus management, and keyboard support
- Open Graph + JSON-LD on every page for rich previews
See it live
Open wazen.sa in a new tab.