Wazen's website
A bilingual, content-driven product website for a Saudi cloud ERP platform.
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 structure the team could publish through independently.
- Client
- Wazen
- Role
- Frontend engineer
- Year
- 2024
- Timeline
- 6 weeks
The brief
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 engineering after launch.
I focused on three things:
- Narrative clarity — every section answers one question in sequence: who is this for, what does it do, what does it integrate with, and who already trusts it?
- Bilingual without compromise — Arabic is the primary language. The English mirror is a real translation rather than a fallback, and the layout flips fully to LTR.
- Operator self-service — products, solutions, testimonials, integration logos, and the blog are editable in Sanity without a pull request.
The approach
I mapped every page in the information architecture—home, four products, roughly twenty solutions, pricing, integrations, blog, help center, contact, and legal—and grouped them by template. That reduced the site to a few repeatable patterns: hub pages, leaf pages, and the homepage as a one-off.
From there I built a small component kit: hero, section header, capability strip, card grid, testimonial slider, FAQ accordion, and footer. The Sanity schema uses the same vocabulary, giving editors and engineers one shared model of the site.
The system
The public site uses static generation for core marketing pages and incremental regeneration for CMS-driven products, solutions, and articles. Sanity holds the bilingual content and structured relationships; next-intl handles locale-aware routes and the complete RTL-to-LTR layout change.
Technology
- Next.js (App Router)
- Static generation for marketing pages and incremental regeneration for CMS-driven products, solutions, and articles.
- TypeScript
- End-to-end types from the CMS schema through to the React components.
- Tailwind CSS
- Design tokens for the brand palette and a small set of typographic primitives reused across pages.
- Sanity CMS
- Powers products, solutions, testimonials, integration logos, and the blog through bilingual structured content.
- next-intl
- Arabic-first routing with an English mirror, RTL layout, and locale-aware content fallbacks.
- Motion
- Restrained motion for the hero, rotating capability chips, animated product motifs, and section reveals.
- Vercel
- Hosting, image optimization, and preview deployments for each 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 four ERP modules: accounting, HRM, CRM, and POS
- Solution sub-pages for roughly twenty verticals, including manufacturing, retail, Hajj, and hospitals
- Testimonials carousel sourced from Sanity references
- Pricing page with currency-aware billing toggles
- Help center and developer documentation linked from the global navigation
- Optimized for slow 3G with a sub-1.5-second LCP target on the homepage
- Accessible navigation, focus management, and keyboard support
- Open Graph and JSON-LD metadata on every page
Editorial system
The blog uses the same CMS-driven approach as the product pages. Its archive, article template, and interactive table of contents all render from structured Sanity documents.
The result
The site ships dozens of pages from a few templates and runs entirely from Sanity content. The marketing team has published new vertical pages and articles without engineering involvement since the first week after launch.
