AJ Cleaning London
A 39-page responsive marketing website for a London steam cleaning company. Built as a static HTML/CSS/JS site from a full Figma redesign, with a shared design system, mega-menus, service & area pages, and a Matter.js-powered interactive CTA.
Details
The Journey
Overview
AJ Cleaning London offers specialist steam cleaning for sofas, carpets, mattresses, rugs, curtains and more across Greater London. The website was redesigned end-to-end to match an approved Figma system: cream and teal brand palette, custom display typography, shared header/footer, service pages, area pages, pricing, landlords, FAQ, contact, and legal pages.
Scope: 39 pages, fully responsive, design-system driven — static HTML/CSS/JS with no React or bundler, shared header/footer partials, and custom motion including Matter.js physics on the homepage CTA.
Overview
AJ Cleaning London offers specialist steam cleaning for sofas, carpets, mattresses, rugs, curtains and more across Greater London. The website was redesigned end-to-end to match an approved Figma system: cream and teal brand palette, custom display typography, shared header/footer, service pages, area pages, pricing, landlords, FAQ, contact, and legal pages.
Scope: 39 pages, fully responsive, design-system driven — static HTML/CSS/JS with no React or bundler, shared header/footer partials, and custom motion including Matter.js physics on the homepage CTA.
The Challenge
The brand needed a large multi-page marketing site that stayed pixel-true to an approved Figma system across services, areas, pricing, and landlord flows — with custom interaction that never broke page scroll.
The Challenge
The brand needed a large multi-page marketing site that stayed pixel-true to an approved Figma system across services, areas, pricing, and landlord flows — with custom interaction that never broke page scroll.
Key Highlights
- 1Figma-faithful redesign — layout, typography, spacing, and imagery matched to design frames
- 2Services and Areas mega-menus with hover panels that stay open while moving to links
- 3Core service pages plus regional and borough-level area coverage across London
- 4Landlords & letting agents enquiry flow, pricing, FAQ, about, contact, and legal pages
- 5Matter.js CTA physics — falling, draggable service badges with scroll-safe pointer handling
- 6Sticky rising CTAs and icon motion reused across redesigned pages
Key Highlights
- 1Figma-faithful redesign — layout, typography, spacing, and imagery matched to design frames
- 2Services and Areas mega-menus with hover panels that stay open while moving to links
- 3Core service pages plus regional and borough-level area coverage across London
- 4Landlords & letting agents enquiry flow, pricing, FAQ, about, contact, and legal pages
- 5Matter.js CTA physics — falling, draggable service badges with scroll-safe pointer handling
- 6Sticky rising CTAs and icon motion reused across redesigned pages
The Approach
Implemented a static multi-page architecture with shared redesign partials, CSS design tokens, and page-specific stylesheets. Built mega-menus, service/area patterns, and a Matter.js physics CTA with sticky/scroll motion that keeps wheel and pointer events safe.
The Approach
Implemented a static multi-page architecture with shared redesign partials, CSS design tokens, and page-specific stylesheets. Built mega-menus, service/area patterns, and a Matter.js physics CTA with sticky/scroll motion that keeps wheel and pointer events safe.
The Outcome
A production-ready 39-page cream/teal marketing site — cohesive across devices, SEO-oriented in structure, and distinctive for its interactive homepage CTA without sacrificing responsiveness or scroll UX.
The Outcome
A production-ready 39-page cream/teal marketing site — cohesive across devices, SEO-oriented in structure, and distinctive for its interactive homepage CTA without sacrificing responsiveness or scroll UX.
More work
Let's talk
Building something similar?
If you need front-end implementation, MERN-style delivery, or a focused product slice, reach out from the contact section.
Go to contact