Besterra Group
The flagship site of Besterra Group, designed and built from scratch: a trilingual, fully static landing page for a 14-unit business ecosystem, built with Next.js 16 in a Turborepo monorepo.
Career
Tech Stack :
1 / 3
Project Overview
Besterra Group sits above a fourteen-unit business ecosystem spanning media, software, research, training, security and trade. Its site has one job: to make that scale feel coherent the moment a partner, investor or candidate arrives, in their own language.
The page opens on a living map of the ecosystem, the group mark wired to every unit by signal lines that pulse across the screen. From there it walks visitors through the operating structure, the units, capabilities, twelve sectors, the operating model, regional presence and the partnership tracks, reading natively in Arabic, English and Turkish, each on its own domain.
I designed and built it from scratch. The visual language pairs a deep dark ground with light paper sections, IBM Plex type in Arabic and Latin, and an accent color for every unit, so fourteen brands keep their identity inside one calm, precise system. Underneath, it is a fully static Next.js 16 app inside Besterra's Turborepo monorepo, on the same shared design system, SEO and navigation packages as every other Besterra site.
Key Features
- Ecosystem hero: an SVG network connecting the group to all fourteen units, with animated signal lines in each unit's color and three purpose-built layouts for wide, compact and narrow screens
- A page with rhythm: dark and paper sections alternate down the page, and the fixed header re-tones itself to match the section beneath it
- Operating structure map: a three-tier diagram (ecosystem, structure, unit bands) that unfolds outward from each band as it scrolls into view
- Business units directory: fourteen units in three bands, each with its mark, discipline, description and a link to its own site
- Sectors, model and presence: twelve market sectors, a four-step operating model, and market cards for the United Kingdom, Türkiye and Palestine
- Partnership paths: separate tracks for strategic partners and investors, plus a direct route to careers
- Three languages, three domains: Arabic (right to left), English and Turkish, each on its own host, with a language switcher that moves between them
Technical Highlights
- Static by design: every language is prerendered and every section is a React Server Component; the page's only client code of its own is a small observer that drives the header
- Motion in CSS: section reveals use scroll-driven animations, the hero signals use SVG stroke animation, and no animation library is involved
- Content always visible: reveals run only when the browser supports them and the visitor hasn't asked for reduced motion; otherwise everything is shown at rest
- Host-based localisation: a proxy maps each domain to its language, type-checked translations make a missing string a build error, and reciprocal hreflang links tie the three hosts together
- Shared foundations: tokens, typography, header, footer, SEO and routing come from the monorepo's shared packages, the same ones behind the other Besterra sites
- Search-ready: per-language metadata and Open Graph, Organization, WebSite and WebPage structured data, a sitemap covering all three hosts, and a web manifest
- Accessible structure: a skip link, a single h1, labelled sections, semantic lists, localised labels for the network, and a visible focus ring on every interactive element
My Contributions
- Designed and built the page from scratch, from the hero network to the closing section
- Designed the visual language: the dark and paper rhythm, the per-unit color system and the typography in Arabic and Latin
- Designed and implemented the ecosystem network and the operating-structure diagram in SVG and CSS, with separate layouts for each screen size
- Set up host-based routing for three languages, including permanent redirects from the old path-based URLs
- Wired the page into the shared design system, header, footer and SEO packages
- Wrote the scroll-driven motion with reduced-motion and browser-support fallbacks
- Kept all content in typed modules, so every unit, sector and section exists in all three languages
Challenges & Solutions
Challenge: Fourteen units, twelve sectors and three markets could easily become a wall of logos.
Solution: Lead with structure: a live network in the hero, then a three-tier structure map and banded unit rows that show how the pieces relate.
Result: The group reads as one connected system, and every unit is one click from its own site.
Challenge: Rich motion usually means heavy JavaScript, and it can leave content hidden when it doesn't run.
Solution: CSS scroll-driven animations on server-rendered sections, gated behind both reduced motion and browser support.
Result: The page moves where the browser supports it and stays fully readable everywhere else, without an animation library.
Tech Stack
Frontend: Next.js 16, React 19, TypeScript, Tailwind CSS 4, CSS scroll-driven animations, SVG, Lenis
Monorepo: Turborepo, pnpm workspaces, shared packages for design tokens, typography, UI, SEO, routing and i18n
Infrastructure: Vercel, Vercel Analytics
Tools: ESLint, Vitest, sharp
Need something like this?Tell me about your project