Prime Garage

Prime Garage sells pre-owned cars in very good condition from a showroom in New Cairo. The owner arrived with a finished brand kit — logo, colour system, an iconography sheet — a reference homepage, and a set of photographs: twelve cars shot from one fixed camera position in the showroom, plus six scenes of the space and the team. What they did not have was a website.

The ask was specific about size. Not a landing page with a photo and a headline, and not a large system either — a clean first release that lets a visitor understand the business quickly, find a car and reach a person in as few steps as possible, built so that favourites, accounts, financing or an admin panel can be added later without starting again. Most of their buyers already finish the conversation on WhatsApp, so WhatsApp had to be part of the purchase path, not a floating icon.

The visual direction was refined twice on the way. A dark, gold-accented first pass read too close to another project in this portfolio; a plain light version lost the sense of occasion. The final direction had to be light, feel made for business owners, and look like nothing else in the studio's work.

• Home, the collection, a page for each car, sell your car, why Prime, contact and 404
• A showroom hero where the cars rotate on the stand, with a catalogue card showing year, mileage, power and price
• Collection filters by body type, make, budget and year, with four sort orders — all held in the URL
• Car pages with a four-frame gallery, grouped specifications, equipment, a sticky price card and related cars
• Book-a-viewing and sell-your-car forms with Egyptian mobile validation, handed to WhatsApp pre-filled
• Live showroom status on Cairo time; per-page metadata, a sitemap, and AutoDealer and Car structured data

car pages, prerendered

12car pages, prerendered

lines of TypeScript

4,400+lines of TypeScript

web images, from 23 supplied files

56web images, from 23 supplied files

MB of imagery, after the pipeline

43 → 6MB of imagery, after the pipeline

Anyone can list a stack. The useful part of a case study is the calls that had a real alternative — so each of these says what the tradeoff was, not just what was chosen.

1. 01

   Leads go to WhatsApp, not to a server

   Forms validate, then open WhatsApp with the message already written.

   The dealer's buyers already close in WhatsApp. A viewing request carries the car, its link, the name, the number and the preferred day; a sale request carries make, model, year and mileage. Nothing is sent until the customer presses send, and no personal data sits in a database nobody is watching.

   Tradeoff · The conversation lives in the dealer's own WhatsApp rather than on the site. The message fields are already the payload, so pointing them at a server later is a small change, not a rebuild.

2. 02

   The hero is a turntable, not a slideshow

   Cars cross-fade in place because every photograph shares one camera position.

   The supplied photography was shot from a fixed point in the showroom, so the floor, the wall and the light match from car to car. Cross-fading in place reads as one car being swapped for another on the stand. A catalogue card on the corner of the frame changes with each car, with a progress bar and a pause control.

   Tradeoff · The effect relies on consistent photography, so the camera position is now part of the brief for every new listing — which also keeps the whole collection looking like one showroom.

3. 03

   One photograph per car became a four-frame gallery

   Front, flank and stance views are cropped from the master shot at build time.

   Each car arrived as a single image, and a detail page with one photograph looks unfinished. The image pipeline cuts three framed crops from each master alongside the full view, writes alt text that describes the actual view, and generates a blur placeholder for every file. 23 supplied PNGs totalling 43.3 MB became 56 WebP files totalling 6.1 MB.

   Tradeoff · The frames come from one master shot, and dedicated multi-angle photography slots straight into the same gallery the day it arrives.

4. 04

   The supplied gold was left out

   Black Sapphire ink and a bordeaux accent replaced the brand book's gold.

   The colour system specified Prime Gold #C9A96A. Set on a dark ground it read as a sibling of another project in this portfolio, and the owner chose to move away from it. The ink became #161B22 — a blue-black taken from a real paint colour rather than a default near-black — and bordeaux #7A1C2C is kept to indicator lamps and small details. Every text colour was measured against the surface it actually sits on.

   Tradeoff · The palette is a handful of named tokens, so any accent from the brand guide can come back in a one-line change.

5. 05

   Luxury from material, not from darkness

   Buttons are finished like piano-black trim, with an indicator lamp that lights on hover.

   A light theme removes the easy drama of a black page. It came back through finishes: a lacquer primary button with a soft top light, a porcelain secondary, a lamp that lights like a tell-tale on an instrument cluster, and a thin line of ambient light that spreads along the lower edge. Pressing sinks the button a pixel rather than shrinking it.

   Tradeoff · The finishes live in one place, so every button, the WhatsApp dock and the active filter chips share exactly the same material.

6. 06

   Filters live in the URL

   Every filter combination is a server-rendered page you can share.

   A buyer who finds “SUVs under 3.5M” can send that exact view to a partner. The dropdown options are derived from the stock itself, so no option can return an empty page — and when a combination does match nothing, the page says so and offers to source the car.

   Tradeoff · Each filter change is a page navigation rather than an instant client-side swap, and with a collection this size that is imperceptible.

7. 07

   The data layer is async from day one

   Pages call inventory functions, never the car list directly.

   The brief asked for a first release that can grow into favourites, accounts, financing or an admin panel. Every page reads cars through async functions — collection, single car, search, related, facets — that currently read a local file. Replacing that file with a CMS or an API changes one module and no components.

   Tradeoff · One thin layer of indirection today — and it is the part that makes “add an admin later” a small job rather than a rebuild.

8. 08

   Accessibility was measured, not assumed

   19 automated checks run against the real pages on desktop, phone and reduced motion.

   The checks cover filters, sorting, the gallery, form validation, keyboard focus, text contrast against each element's real background, 44-pixel touch targets, sideways scrolling and the mobile menu. They earned their place before launch: they caught a header button crowding the menu off small screens, a brand grey below AA contrast, and footer links too small to tap comfortably — all fixed.

   Tradeoff · The checks run against a real build rather than the source — which is the point: they test what a visitor gets, not what the code intends.

The brief asked for motion that feels expensive rather than busy: hover on car images, smooth transitions, search feedback, button feedback and gallery transitions. The site spends its boldness in one place — the arrival — and keeps everything after it quiet.

On load, the two headline lines rise out of their own masks, and the showroom stage opens from a thin slit to a full 2.39:1 frame — the aspect ratio car films are shot in — the way a cover comes off a car at a launch. The catalogue card rises in last. After that the cars rotate every 6.5 seconds with a 1.4-second cross-fade, pausing on hover, on keyboard focus and whenever the tab is hidden.

Everything below the hero moves only when it is reached: sections rise 18 pixels over 0.7 seconds, car photographs drift a few pixels inside their frames on desktop, hovering a car draws a single accent rule under it, a focused form field draws its underline from left to right, the header lifts into a floating frosted capsule once the page moves, and on phones the menu rolls down like a garage door. Every transition shares one easing curve, cubic-bezier(0.16, 1, 0.3, 1), so the whole site decelerates with a single personality.

prefers-reduced-motion is honoured properly: animations resolve to their final frame, smooth scrolling and parallax are removed, and the rotating hero stops on its first car. And because motion only sets its starting position after the page has hydrated, the markup a search engine or a browser without JavaScript receives is always complete and readable.

Scope discipline is part of the work. Each of these was considered and cut for a stated reason.

Customer accounts and favourites

A buyer here looks at a handful of cars once; a shareable link does the job without a login.

A financing calculator

Egyptian car finance depends on the bank and the buyer — a generic calculator gives numbers nobody can rely on.

Online payment

Nobody pays for a car of this price without seeing it. The conversion is the viewing.

A dealer dashboard

Twelve cars change slowly; the data layer is ready for one when the stock grows.

Live chat

WhatsApp is where these buyers already are. A second chat channel splits the conversation.

The contact details on the demo are placeholders, and the twelve cars are demo stock built from the supplied photography.