Glushion — Bilingual Cross-Border Agency Site — Work

ALL PROJECTS/GLUSHION — BILINGUAL CROSS-BORDER AGENCY SITE

Overview

Glushion is a cross-border software agency connecting Pakistan and Mexico, and this is its marketing site — built end-to-end from a design source into a production Next.js 15 (App Router, React 19) app. It runs fourteen richly composed sections: a bilingual hero with an animated Pakistan↔Mexico map, a services grid, an industries grid, a filterable project showcase, a global-stats band, a tech-stack, testimonials, a contact form and a footer.

The defining requirement is that the whole experience ships in two languages — English and Español — through a single toggle. Copy lives in typed content modules with both languages side by side, so a non-developer can edit headlines, stats and labels without ever touching component code.

Problem

The starting point was a design export: files that looked correct and were, structurally, a dead end. Nothing was reusable — colours inlined at every call site, copy welded into markup, artwork unoptimised, and layouts that held together only at the artboard's exact dimensions. Shipping that would have produced a site that renders once and then resists every change.

On top of that sat two harder problems. The site had to speak to two markets at once — every headline and label needed to exist in English and Español without duplicating the markup — and it had to stay fast while carrying a lot of illustration and photography for visitors on both sides of the world.

System Design

How It Works

01/03

Design-source to production components

How the preserved design export becomes tokens, typed content and single-purpose React components.

1The design export is preserved verbatim as the reference artefact
2Repeated colours, radii, shadows and type are extracted once as Tailwind design tokens
3The design is decomposed into 42 single-purpose components across fourteen section folders
4Literal copy, nav items and metrics are lifted into 15 typed content modules
5The build type-checks and compiles under strict TypeScript, gating the result

One page, two languages

How the same markup renders in English or Español without any hard-coded copy.

1Every section reads its text from a typed content module that holds English and Español together
2The language toggle sets the active locale as a small client island
3Components select the matching string for the active language at render time
4The hero, nav, sections and forms all switch in place — one layout, two languages

Static build to global edge

How a media-rich, bilingual page still loads fast for visitors on both sides of the world.

1The App Router composes the page from ordered, mostly-static server components
2next/image optimises artwork and next/font self-hosts Inter + Playfair
3The build statically generates the pages and deploys to Vercel
4Visitors are served from the nearest edge, keeping first paint fast far from the origin

Key Features

Bilingual English / Español across all fourteen sections, switched by a single language toggle with copy held in typed content modules
Cross-border hero — an animated Pakistan↔Mexico map with location pins, landmarks and a bilingual headline
Fully modular architecture — 42 single-purpose components and 15 typed data modules keep content and code cleanly separated
Centralised Tailwind design tokens with self-hosted Inter + Playfair (next/font) and optimised next/image throughout
Rich section system — industries grid, filterable project showcase, global-stats band, tech-stack, testimonials and a contact form
Mostly-static server components with only the navbar and toggle as client islands, for fast, cheap delivery
Responsive by design — the hero preserves its artboard proportions on desktop and reflows into a mobile stack below 680px
Statically generated and served from Vercel's global edge for quick loads on both sides of the border

Outcomes

Shipped a design as maintainable, scalable code — 42 components and 15 typed content modules, not a one-off page
Made the whole site bilingual (English / Español) from a single toggle, with zero copy hard-coded in the markup
Kept a media-rich page fast via static generation, self-hosted fonts, optimised images and Vercel edge delivery
Preserved the design's intent pixel-for-pixel on desktop while reflowing cleanly to mobile