Kairo Autos

A high-end automotive showcase where each vehicle is a full listing — gallery, spec table, mileage, drivetrain and price — backed by an inventory model that lets the dealer add or retire stock without touching layout code.

Stock was being advertised across social posts and a spreadsheet. Buyers could not compare vehicles, specs were inconsistent between posts, and every serious enquiry arrived without knowing which car it referred to.

1. 01Modelled the inventory as typed vehicle records: make, model, year, mileage, transmission, price band and gallery.
2. 02Built a filterable listing grid (price, body type, year) with the filter state reflected in the UI so the dealer can share a view.
3. 03Designed a cinematic detail page: full-bleed hero image, spec table in monospace, and an enquiry CTA bound to the specific vehicle.
4. 04Optimised the galleries with responsive sizing and lazy loading so a 20-image listing still opens instantly on mobile data.

• A dealer's inventory is scanned, not read — so the grid uses a wide image ratio with price and mileage locked to a fixed position, letting a buyer compare five cars in one glance.
• Spec data is set in monospace so numbers align column-to-column; the buyer's eye can run down the sheet instead of hunting for the figure.
• The enquiry CTA is bound to the vehicle record and repeats after the gallery, because high-ticket intent forms at the bottom of the page, not the top.

• Large automotive photography versus mobile performance — resolved with aspect-ratio boxes, compression and deferred loading.
• Spec fields differ per vehicle; the spec table had to render gracefully with missing values instead of empty rows.
• Keeping a luxury visual tone while still surfacing price and availability clearly above the fold.

• →In high-ticket sales the detail page is the whole product — the listing grid only needs to get people there.
• →Typed inventory records turn 'add a new car' into a data edit, which is what a dealer can actually maintain.
• →Enquiries that carry the vehicle context convert far better than a generic contact form.

• React
• TypeScript
• Tailwind CSS
• Typed inventory model
• Filtered listings
• Responsive galleries

• Full inventory browsable and comparable on mobile.
• Every enquiry arrives tied to a specific vehicle and price.
• Dealer updates stock in minutes with no developer involvement.