A&D Voyage — Northern Morocco Tours

The problem

A&D Voyage is a Northern Morocco tour operator specializing in authentic regional circuits through Tangier, Chefchaouen, Tetouan, Akchour, and Al Hoceima. Their audience spans three distinct linguistic groups: domestic Moroccan travelers who read Arabic, French-speaking Moroccan diaspora and Francophone visitors, and international English-speaking travelers. The site needed proper Arabic typography and bidirectional (RTL) layout, and had to stay light for phones on weak mobile connections, so I built it without an off-the-shelf agency theme.

My role

I served as the sole developer and UI designer for the project, creating the bespoke brand design system ("Rif & Strait Field Atelier"), architecting a custom server-side static prerendering engine, implementing the trilingual content and RTL layouts, and building an automated build-time SEO verification test suite.

What I built

Lightweight React 19 & Tailwind CSS v4 architecture: Avoided third-party UI component and icon library bloat by handcrafting accessible, reusable UI primitives (Button, SectionHeading, Chip, FaqAccordion, ItineraryAccordion, inline SVG icons). No third-party UI or icon libraries are loaded, so the browser has less code to download before the page is usable.
Custom SSR static prerendering pipeline: Built an in-house static generator using react-dom/server's renderToString (entry-server.tsx) that compiles every route across all three locales into static HTML files at build time (scripts/prerender.tsx), injecting route-specific canonical tags, hreflang alternates (ar, fr, en, and x-default), and Schema.org JSON-LD before deployment to Vercel.
Automated build-time SEO verification gate: Created scripts/verify-seo-build.ts to re-parse generated static output as a hard build gate. It validates single H1 and canonical presence, tests for complete hreflang parity, asserts zero fake review schema, verifies image alt attributes, and fails the build if it finds a broken internal link.
Native bidirectional RTL/LTR internationalization: Implemented a zero-dependency typed i18n dictionary system with full right-to-left layout flipping (dir="rtl") powered by Tailwind v4 CSS logical properties (ms/me, ps/pe, start/end), pairing Noto Kufi Arabic typography for Arabic with Fraunces and Plus Jakarta Sans for Latin scripts.
Interactive departures calendar & pricing matrix: Built a structured tour departure calendar and multi-tier pricing calculator supporting seasonal date variants, per-person rates, and group travel options.
Direct booking-request flow: Designed a streamlined inquiry flow connecting Formspree form submission with an immediate prefilled WhatsApp conversation handoff.

Results

Because I do not have direct access to A&D Voyage's private Google Analytics or booking records, no unverified traffic or reservation figures are claimed here.