Frontend implementation·2025

Flo Auto Lease

Car-leasing storefront where buyers filter live stock, simulate financing per vehicle and order, reserve or sell a car online.

JavaScript
CSS
JSP
reCAPTCHA

Visit live site

4 filtersMake · model · year · price

3 inputsTerm, down payment, interest

4 formsOrder · reserve · sell · offer

PNG/JPG/PDFClient-side document upload

01 — Context

The brief

Flo Auto Lease sells and leases cars online. They needed a storefront where buyers can browse the live inventory, configure financing on each car and complete orders, reservations and sell-your-car requests.

02 — Challenge

What made it hard

Buyers need to price a car on the spot and complete the whole journey online, not just browse a catalogue.

Financing per car. Each vehicle page carries a live financing simulator: term, down payment and interest drive the monthly rate.
Deep vehicle pages. A full spec sheet and an image gallery with a full-screen lightbox on every car.
Form-driven flows. Order a car, reserve one, or sell your own with document upload, all form-driven and validated.

03 — Contribution

What I did

I built the storefront frontend: the stock listing, the vehicle pages with their simulator, and the lead forms.

Stock browsing. The filterable stock listing with make, model, year and price filters, NET/BRUT pricing and discount badges on every card.
Vehicle page & simulator. The image gallery with full-screen lightbox, the spec grid, and the leasing/credit simulator: the monthly rate recalculates live as you change term, down payment and interest.
Lead-capture forms. The order, reserve and sell-your-car forms, including the client-side document upload.
Responsive dark theme. The dark look kept consistent and readable across the whole site, desktop to phone.

What it looks like

09 items

Stock listing with make/model/year/price filters and vehicle cards — Stock listing: the full live stock, filterable by make / model / year / price, with NET/BRUT pricing and discount badges. Screens are in Romanian, the dealer's home market.

Vehicle detail page with gallery, spec grid and leasing simulator — Vehicle detail: the full page, an image gallery with a full-screen lightbox up top, spec grid and simulator below.

Vehicle detail page on mobile — Vehicle detail: the full page, an image gallery with a full-screen lightbox up top, spec grid and simulator below.

Vehicle specifications on mobile — Specifications: the full spec sheet in an at-a-glance grid.

Vehicle specifications grid on a vehicle page — Specifications: the full spec sheet in an at-a-glance grid.

Leasing simulator on a vehicle page — Leasing simulator: term, down payment and interest recalculate the monthly rate as you change them.

Leasing simulator on mobile — Leasing simulator: term, down payment and interest recalculate the monthly rate as you change them.

Request-an-offer modal on mobile — Request-an-offer modal: a lead-capture path straight from the vehicle page.

Request-an-offer modal on a vehicle page — Request-an-offer modal: a lead-capture path straight from the vehicle page.

Sell-your-car form with a document-upload dropzone — Sell-your-car form with client-side document upload (photos and registration papers, PNG/JPG/PDF).

Contact page: hours, locations, and direct channels (phone, WhatsApp, email).

Outcome

Live at floautolease.ro: the whole journey works on any screen, from filtering the stock to submitting an order, reservation or sale, with validation on every form.