FalconsGTInteractive websites
Falcons GT Motors
A car trading and export site in three languages: vehicle search, a filterable list, vehicle pages with an export enquiry, and company pages.
Context / scope
Overview and scope
Falcons GT Motors trades and exports cars from Belgium and Dubai. The site presents the vehicles in stock and takes export enquiries.
Pages: home, vehicles, each vehicle, About Us and Contact Us, in Arabic, English and French.
Front-end developer: wrote 28 of the site's 29 commits in March 2025 (the first is the client's empty repository), then completed it in a second pass on the same code: the catalogue, the vehicle pages, the inner pages, translations and phone layouts.
Results
- No results were recorded, so none are claimed.
- Vehicles, contact details and enquiry values in the captures are sample data; the vehicle photos are the ones the design supplied.
Interface / screens
Walkthrough
Screen 1 of 9: Home page. Real interface, sample data.
Responsive and states
Screen 1 of 1: Vehicle page on a phone. Real interface, sample data.
Behaviour / flows
Features and flows
Finding a vehicle
- The home search offers maker, then that maker's models, year and cylinders from the vehicles in stock, and opens the list with those filters.
- Browse-by-type and brand tiles show how many vehicles each holds; tabs show the newest three of each type.
- The vehicle list filters by type, maker, model, years, cylinders, gearbox, fuel and Belgium or Dubai, and sorts by year, mileage or name.
- Filters live in the address and show as removable chips, so a filtered list can be shared or reloaded; an empty result offers to clear or ask.
Vehicle pages and enquiries
- Each vehicle has key facts, full specifications, price on request and similar vehicles of the same type first.
- An export enquiry asks for the destination country and shipping by sea, land or air, checks every field and confirms with the vehicle, country and method.
- WhatsApp, phone and email links appear when their settings are given; the Luxury site is linked the same way.
Three languages, any screen
- Every page in Arabic (the default, right to left), English and French, with a language switch that keeps the page and its filters.
- Phones get a menu, a search under the slider and filters that fold away; the selects, tabs and forms work with a keyboard.
- Unknown addresses show a 404 inside the site's layout in the visitor's language.
Engineering / decisions
Architecture and decisions
Next.js 15 App Router with React 19 and TypeScript, Tailwind CSS 4 with the brand's blue and gold, next-intl for three languages and Swiper for the hero.
The catalogue, its filters and the enquiry each sit behind one module, so an API can replace the sample data without touching the pages.
One set of filtering rules
The home search, the type tabs, the tiles and the vehicle list all go through one module that filters and sorts the catalogue, so a count on a tile always matches the list it opens.
The address holds the filters
Filters are query parameters read on the server, so the list renders filtered on first load. Changes go through one hook that keeps the latest filters, so two quick clicks both count before the page re-renders.
Only pages with content
The navigation listed nine pages that did not exist. It now holds the pages that do, and Luxury, a separate site, is linked from a setting instead of a dead route.
Mirrored layouts, not copies
Spacing and positions use start and end instead of left and right, and Arabic pages switch to Cairo, since the Latin font has no Arabic letters, so one set of components serves all three languages.
Limits / notes
Known limitations
- There is no vehicles API yet: the list is a sample catalogue built on the design's own photos, and enquiries are not sent anywhere. Both sit behind one module each, ready to be connected.
- The brand names, contact details and prices in the captures are sample data; makers appear as names, not logos, and there are no prices, only price on request.
Stack / tools
Technologies
- Next.js
- React
- TypeScript
- Tailwind CSS
- next-intl
- Swiper
- React Icons
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.