Marn's website

Marn is a Saudi point-of-sale platform for restaurants, cafés, and retail. I helped replace its WordPress site with an Arabic-first system built around reusable page blocks, structured product content, and an English translation workflow.

Client: Marn
Role: Frontend engineer
Year: 2025
Timeline: 8 weeks

The situation

Marn’s marketing site had grown page by page on WordPress. Layouts drifted, Arabic and English content fell out of sync, and publishing a new solution meant repeating work across templates and languages.

The rebuild treated the website as a product system: one information architecture, one reusable visual language, and one content model shared by the marketing team and engineers.

The work

I mapped the site into a small set of repeatable page and section patterns, then implemented those patterns as composable Payload blocks. Ten solution pages now share one underlying structure while retaining their own content, accent colour, and product imagery.

The site is Arabic-first and supports a complete RTL-to-LTR layout change. An AI-assisted translation workflow drafts the English mirror for editorial review, reducing duplicated publishing work without removing human oversight.

Marn Cashier product page — One reusable solution template supports distinct products through content and accent colour.

Marn Analytics product page — The same solution structure adapts to Analytics through its content, imagery, and accent colour.

Marn product ecosystem overview — Products are grouped by sales, operations, and management needs.

Marn business segments section — A shared section reframes the product suite around different business types.

Marn Inventory product page — The Inventory page extends the shared solution template with its own amber visual language.

Marn Inventory feature section — Product imagery and supporting copy explain the operational workflow within the same page system.

The system

Next.js renders the public site, while Payload manages pages, solutions, integrations, marketplace entries, posts, and forms. Shared schemas connect those records so an integration or customer logo can appear across the site without being copied into individual pages.

Custom form work connects Payload with HubSpot while preserving the site’s design system and RTL behaviour. The deployment runs on Cloudflare Workers, with media stored in R2.

Technology

Next.js 15 (App Router): Server components for the marketing pages, with Payload's content fetched at the edge per locale.
TypeScript: Types generated from the Payload schema flow straight through to the block renderers.
Payload CMS 3: The whole site is a block-based layout builder — pages, solutions, integrations, posts, and the marketplace are all editable documents.
PostgreSQL: Payload's database, holding the bilingual content tree and the collection relationships between solutions, integrations, and categories.
Cloudflare (OpenNext + R2): Deployed to Cloudflare Workers via OpenNext, with media stored in R2 and served through Payload's media endpoint.
next-intl: Arabic-first routing with a full English mirror. Layout flips to RTL for /ar and LTR for /en.
AI SDK (Google Gemini): A Payload translator plugin drafts the English mirror from the Arabic source so editors review rather than retype.
HubSpot (custom Payload plugin): A plugin I built on top of the form-builder that pulls form definitions from HubSpot and renders them in the site's design system instead of as an embed; submissions create HubSpot contacts and are persisted back to Payload.
Tailwind CSS v4: Design tokens for the brand palette and the per-module accent colors used across the solution pages.
Motion: Restrained reveals on section entry and the integrations logo grid.

Marn marketplace integration grid — The marketplace exposes compatible services as structured, filterable records.

Integration records are managed as content rather than embedded in page templates.

Features

Bilingual Arabic/English with full RTL support and locale-aware routing
Arabic-first content with an AI-drafted English mirror editors review in Payload
Block-based layout builder — every page composed from a shared set of ~20 blocks
10 solution pages (Cashier, PaySync, Kiosk, Order Station, Products, Inventory, Analytics, Branches, Customers, Accounting) on one template
Per-module accent colors carried through hero illustrations and section cards
Marketplace with search and category/ecosystem/sort filtering
Integrations, testimonials, customers, and logos managed as Payload collections
Form builder powering the contact and lead-capture forms
Custom Payload plugin extending the form-builder to pull HubSpot form definitions and render them in the site’s design system
Form submissions sync to HubSpot as contacts while persisting to Payload
In-progress form entries auto-saved so visitors resume where they left off
Draft preview and live preview for content editors
SEO, redirects, nested-docs, and search plugins wired into the CMS
Migrated off WordPress + WPML onto a single content model

Marn pricing page — Pricing packages remain legible in Arabic while accommodating payment-method detail.

Marn article index — The editorial system carries the same visual language into the article archive.

Marn product spot illustrations — A reusable illustration family gives feature-heavy sections a consistent rhythm.

The footer closes the site with navigation, contact paths, regulatory links, and the Marn identity.

The result

The shipped site replaces WordPress and WPML with a single bilingual publishing model. Marketing can assemble pages and manage product records without code changes, while the design and engineering systems remain aligned through the same block vocabulary.