Overview
BEKAS LOGISTICS is a Kyiv-based customs brokerage and freight forwarding company operating since 1998 — 1,200+ customs operations and 9.9 million kilograms of cargo per year, 150+ vehicles imported from the USA monthly. We built their first website back in 2018 on WordPress. In 2026 we rebuilt it from scratch as a full product: Next.js 16, Payload CMS and PostgreSQL, positioned around one idea — a broker working since 1998 that operates like a 2026 tech company.
Challenge
The old site had aged into a liability: a 2015-era template with stock photos, a footer copyright frozen at "1998–2021" and content untouched for five years. The Ukrainian customs broker market is visually dead — competitors sit on the same templates — so the bar was set by global forwarders like Flexport, Maersk and DSV instead. The audience is B2B importers and auto dealers who live in dashboards, which made a real dark theme half the product, not a feature. Seven service directions, two languages, and the client had to keep full control of every string of content.
Solution
The site runs on Next.js 16 with the App Router — every page is a React Server Component, so the full text, phone numbers and figures (9 900 000 kg of cargo, 1 200 customs operations) are in the HTML before a single line of JavaScript executes. Content lives in Payload CMS on PostgreSQL: the client edits every string, price and FAQ entry in both languages without a developer. Each of the 15 routes generates its own Open Graph image in code through Next.js ImageResponse — 30 unique 1200×630 cards across two languages, built from live CMS data instead of drawn by hand, so a link to any service page previews correctly in Telegram, Viber, LinkedIn and Messenger. SEO is wired at framework level: hreflang for uk/en with x-default, a generated sitemap, and JSON-LD — LocalBusiness on the home page, Service and BreadcrumbList on every service page. The design system lives in code as a single tokens file, which is what lets the three themes (light, system, dark) apply before first paint with no flash of wrong colors. Motion is one orchestrated scene per page, and every scene collapses to a plain fade under prefers-reduced-motion.
Key Features
- PageSpeed 99 on mobile and 100 on desktop, measured on the live site: LCP 1.8 s / 0.5 s, CLS 0.018 / 0.004, TBT 50 ms / 0 ms
- 30 dynamic Open Graph images — every route in every language generates its own preview card from CMS content, with no manual design step
- Server-rendered content: full page text, contacts and figures sit in the HTML, so search engines and AI crawlers read the page without executing JavaScript
- Structured data on every template — LocalBusiness, Service, BreadcrumbList, FAQ — so the site qualifies for rich results, not just indexing
- Payload CMS on PostgreSQL: seven service pages on one template, every field bilingual and editable by the client
- 100/100 on Best Practices and SEO, 97 on accessibility — HSTS, granular cookie consent, WCAG 2.2 contrast verified across both themes
Result
Fifteen bilingual routes shipped in one week. On the live site Google PageSpeed returns 100 / 100 / 100 / 100 on desktop and 99 performance, 97 accessibility, 100 best practices, 100 SEO on mobile (measured 10 August 2026) — every Core Web Vital sits inside the "good" band with room to spare. All fifteen routes are in the sitemap with uk/en hreflang, each carries its own generated preview card, and the BEKAS team edits every one of them from Payload CMS without touching code. The before/after slider above shows what changed visually. The numbers show what changed underneath.
