liildev

Work detail

B2B product website

Internationalized B2B SaaS website with edge deployment, custom design system, and Framer Motion.

B2B product website and SaaS automation direction. Premium UI, internationalization, Cloudflare edge deployment, and design system foundation.

Role
Frontend Engineer
Year
2026
Status
active
Website
Visit site →

01

Problem

Prodexa needed a high-quality B2B marketing and product website serving multiple language markets, with fast global load times and a credible visual foundation — not a generic SaaS template, but something that communicates quality and product seriousness.

02

What I built

  1. 1.Multi-language routing with next-intl: locale detection, a language switcher with cookie persistence, and structured translation management via JSON message files.
  2. 2.Custom design system on top of shadcn/ui: brand color tokens, typography scale, border radii, and shadow system — all overriding shadcn defaults while staying compatible with future component updates.
  3. 3.Scroll-triggered section animations using Framer Motion: hero entrance, feature section reveals, and CTA sequences — with spring physics and prefers-reduced-motion support at the provider level.
  4. 4.Cloudflare Pages deployment: custom domain setup, caching rules for static assets, and Cloudflare Workers middleware for locale detection and redirect logic.

03

Architecture

  1. 1.Next.js App Router with next-intl for locale-prefixed routing — static generation for all pages, no server-side data fetching at runtime, content embedded at build time.
  2. 2.Cloudflare Workers middleware handles locale detection and redirect before the Next.js runtime, keeping locale logic at the edge without Next.js middleware overhead.
  3. 3.shadcn/ui with CSS variable override: all component tokens mapped to brand palette, allowing shadcn version updates without losing brand customization.
  4. 4.Framer Motion AnimatePresence for route transitions — layoutId on shared elements enables smooth cross-page transitions without coordination between route components.

04

UX decisions

  1. 1.Language switcher persists locale in a cookie — no flash of wrong locale on return visits, since the Cloudflare Worker reads the cookie before the redirect decision.
  2. 2.Animation sequencing is content-aware: hero content enters first, navigation after, CTAs reveal only after the hero section is visible — enforces reading order without JavaScript orchestration.
  3. 3.All motion configured at the Framer Motion provider level with prefers-reduced-motion — a single config change disables all animations, not per-component conditional checks.
  4. 4.shadcn/ui components kept structurally close to their defaults — all brand differentiation is in tokens and styles, not in component logic, keeping future updates non-breaking.

05

Challenges

  1. 1.Next.js App Router with Cloudflare Workers: RSC streaming was not fully compatible with Cloudflare's module bundler at the time of deployment — migrated to static output mode with client-side hydration for dynamic content.
  2. 2.Design token synchronization: shadcn uses CSS variables, Tailwind uses generated utility classes — aligned both by feeding a shared CSS variable set into both the Tailwind config and shadcn's component token layer.
  3. 3.next-intl locale routing with Cloudflare edge middleware required careful handling of both server-side locale resolution and the client-side language switcher — cookie-based state with SSR fallback resolved the inconsistency.

06

Outcome

Deployed to production on Cloudflare edge. Multi-language support live across 2 locales with sub-100ms TTFB globally via Cloudflare CDN.

Discuss a project→