FalconsGTInteractive websites
FalconsGT SML Isuzu
A site for SML Isuzu trucks and buses in English and Portuguese: a model browser with specifications and comparison, quote requests and campaign pages per market.
Context / scope
Overview and scope
Falcons sells SML Isuzu trucks and buses from Dubai to East and Southern Africa, and through its branch in Angola. The site presents the range and takes quote requests.
Pages: home, trucks, buses, About, Contact, and campaign pages for Tanzania, for Kenya, Uganda, Zambia, Mozambique and Malawi, and for Angola.
Front-end developer: one of two developers on the site in February and March 2025 (88 of its 204 commits: the model browser, the vehicle data, the campaign pages and the About page), then completed it in a second pass on the same code: range pages, comparison, the enquiry flow, Portuguese and phone layouts.
Results
- No results were recorded, so none are claimed.
- The vehicle data and photos are the client's; names, emails and phone numbers in the captures are sample values.
Interface / screens
Walkthrough
Screen 1 of 9: Home page. Real interface, sample data.
Responsive and states
Screen 1 of 1: Bus on a phone. Real interface, sample data.
Behaviour / flows
Features and flows
Choosing a vehicle
- Trucks and buses each have a page; series and model tabs sit over a photo gallery and the model's specification table, and arrow keys move between tabs.
- The chosen model sits in the address, so a link to a truck opens that truck.
- The gallery counts its photos and its buttons are labelled; photos the client marked as illustrative say so.
Comparing and asking for a price
- Up to three models side by side, one row per specification, with an option to show only the differences.
- Ask for Price fills the quote request with the model's type and model, and puts the cursor in the form.
- The form checks each field and explains the problem under it; the quantity must be one or more.
One site, three markets, two languages
- Campaign pages for Tanzania (GS trucks), Kenya, Uganda, Zambia, Mozambique and Malawi, and Angola (S7 buses), each with its own models, country codes, logo and enquiry provider.
- A country link sends visitors to their page, and offers a choice when the country cannot be found.
- Every page in English and Portuguese, for Angola and Mozambique; ?lang=pt opens a campaign link in Portuguese.
- Every page fits a phone, and the map loads from Google only when the visitor asks for it.
Engineering / decisions
Architecture and decisions
A Vite single-page app with React 19, TypeScript, Tailwind CSS 4 and React Router 7; i18next loads English and Portuguese, and Embla runs the stories carousel.
Enquiries use React 19 form actions and Axios; the vehicle data stays in JSON files, read through one catalogue module.
One catalogue for every page
The model data stays in the client's JSON files; one module groups it into categories and series for each page and gives each model an address from its name. The tabs, the form and the comparison all read it.
Ask for Price fills the form
A shared context links every price button on a page to that page's form, so a buyer never picks the model twice.
Each campaign page keeps its settings
Provider, country codes, logos and map sit in one settings object per page; other pages fall back to the main site's. The home page form used to crash because it had no settings.
The map waits for a click
Each page used to load a Google Maps embed. A location card with Show map and Open in Google Maps now loads the map only on request.
Limits / notes
Known limitations
- Enquiries go to the client's Zoho and Privyr endpoints; the captures used a local stand-in, so nothing was sent.
- Specifications are shown as the client supplied them: units are written in several ways and one Executive LX entry has engine text under ground clearance.
- There are no prices: every model is price on request.
Stack / tools
Technologies
- React
- TypeScript
- Vite
- Tailwind CSS
- React Router
- i18next
- Embla Carousel
Part of FalconsGT
The FalconsGT work spans three automotive front ends: Motors, SML commercial vehicles and Luxury vehicles.
Motors is a car trading and export site in Arabic, English and French, with a filterable vehicle list, vehicle pages and export enquiries. SML presents SML Isuzu trucks and buses with a model browser, comparison and campaign pages per market, while Luxury is a showroom site in English and Arabic with filters, comparison and campaign pages. My role across these sites was front-end development.