French Lubricants Brand Site + Product Catalog
2025
HAFA is a French lubricants brand founded in 1946 with over 75 years of R&D and manufacturing heritage, distributing to more than 60 countries worldwide. The Taiwan distributor commissioned a brand-new official site to formally promote the FREEWAY automotive, motorcycle, and industrial oil range — integrating product catalog, oil compatibility search, quote request, and motorsport coverage.
The frontend is built with Astro 5 SSR and Vue 3 interactive components, delivering the refined French brand aesthetic in a red-on-black palette. A timeline animation showcases over 70 years of brand history to reinforce trust and professionalism.
The backend uses Laravel + GraphQL with a Filament admin panel, allowing the distributor to maintain product data, certifications, motorsport news, and quote inbox without engineering support — fully covering daily distribution and procurement operations.
A bold "Premier French Lubrication Technology" hero paired with a 1953 / 1978 / 1995 / 2023 brand timeline animation reinforces the heritage and professional positioning.
Complete classification of the FREEWAY range — automotive, motorcycle, commercial, and industrial oils. Each product supports SAE viscosity, API certification, and ACEA spec fields.
Quickly find compatible oils by vehicle model, year, and engine displacement. Helps consumers and technicians select the correct grade and reduces pre-sales support load.
Distributors and corporate customers can submit items, quantities, and contact details, with file upload for purchase lists. Data is written to the backend and triggers email notifications to sales.
Showcases HAFA's international oil certifications (API, ACEA), OEM approvals, and Taiwan distribution partners.
Features HAFA-sponsored racing teams, drivers, and events — mixing photography and video to reinforce the brand's motorsport credentials.
Categorized news and announcements with Markdown editing, cover images, and scheduled publishing. The frontend filters and displays by category.
Built with Filament, the comprehensive admin panel manages products, certifications, motorsport content, news, hero banners, SEO settings, and quote inbox tracking — operable by the client without engineering involvement.
The frontend uses Astro 5 with server-side rendering. First-screen content is fetched live from the backend GraphQL API and pre-assembled, ensuring SEO crawlers and social previews receive complete content. Interactive components use Vue 3 Islands and only hydrate when needed, keeping load performance excellent.
FREEWAY oils are organized by automotive, motorcycle, commercial, and industrial categories. Each product supports SAE viscosity, API certification, ACEA spec, and packaging size fields. The frontend dynamically loads via GraphQL queries, letting users filter by vehicle type and reducing pre-sales inquiry load.
Distributors and corporate customers fill out items, quantities, and contact details on a dedicated form, with file upload for purchase lists. Data is submitted via GraphQL Mutation, written to the backend, and triggers email notifications. The admin shows unread requests at the top with status tracking to prevent missed leads.
All data exchange between frontend and backend uses GraphQL — covering product catalog, certifications, motorsport news, announcements, hero banners, and SEO settings. Type-safe schema design streamlines frontend-backend collaboration and lets clients fetch exactly the fields they need, reducing mobile bandwidth.
The admin is built with Filament, covering product management (categories, specs, image library), certifications and partner brands, motorsport and news scheduling, hero banner management, SEO fields, quote inbox tracking, and activity logs — making it fully self-serve for the client.
The homepage features a large hero visual, brand timeline animation (1953 / 1978 / 1995 / 2023), scroll-triggered IntersectionObserver effects, and a sticky "Request Quote" CTA — elevating brand quality while guiding key conversions.
CONTACT US
Whether it's a brand site, product catalog, quote inbox workflow, or a Filament admin panel, we can tailor the right solution for you.
Contact Us
