法國潤滑油品牌官網 + 產品目錄
2025
HAFA 是創立於 1946 年的法國潤滑油品牌，擁有超過 75 年研發製造經驗，產品行銷全球 60 餘國。台灣總代理為了正式推廣 FREEWAY 全系列汽機車與工業用油，重新打造品牌官網，整合產品目錄、油品適用查詢、報價索取與賽事曝光功能。
前端採用 Astro 5 SSR 搭配 Vue 3 互動元件，重現法國品牌的精緻視覺與紅黑主色調，並以時間軸動畫呈現品牌 70 餘年沿革，強化專業與信任感。
後端以 Laravel + GraphQL 架構，管理後台使用 Filament 建構，讓代理商可自行維護產品資料、認證、賽事新聞與報價單收件，全面支援經銷與採購業務日常運作。
以「法國的極致潤滑科技」為主視覺，搭配 1953 / 1978 / 1995 / 2023 品牌沿革時間軸動畫，強化品牌歷史與專業形象
FREEWAY 全系列汽車、機車、商用、工業用油完整分類，支援規格、SAE 黏度、API 認證等多重欄位查詢與展示
依車型、年份、引擎排氣量快速查詢適用油品，協助消費者與技師選擇正確規格，降低售前諮詢成本
經銷商與企業客戶可填寫品項、數量需求並上傳採購清單，資料寫入後台並寄送 Email 通知業務，加速詢價回應
展示 HAFA 取得的國際機油認證（API、ACEA）、原廠車廠核可，以及台灣在地經銷夥伴與合作品牌
收錄 HAFA 贊助的賽車、車隊、車手活動，以圖文與影片混排呈現，強化品牌在汽車運動領域的專業地位
分類化新聞與公告發布，支援 Markdown 編輯、封面圖、發佈時間排程，前台依類別篩選顯示
以 Filament 建構完整後台，管理產品、認證、賽事、新聞、Hero Banner、SEO 設定與報價單收件，業主可自行維護無需工程師介入
前端以 Astro 5 建構，採用伺服器端渲染（SSR）模式，首屏內容由後端 GraphQL API 即時拉取並預先組裝，確保 SEO 爬蟲與社群分享預覽都能取得完整內容。互動元件以 Vue 3 Islands 架構在需要時才 hydrate，維持極佳的載入效能。
FREEWAY 全系列油品依汽車、機車、商用、工業用油分類，每項產品支援 SAE 黏度、API 認證、ACEA 規格、容量包裝等多重欄位。前台透過 GraphQL 查詢動態載入，使用者可依車型快速篩選，降低人員諮詢成本。
經銷商與企業客戶可於專屬表單填寫品項、數量、聯絡資訊，並上傳採購清單檔案。資料透過 GraphQL Mutation 寫入後台並觸發 Email 通知業務窗口，後台亦提供「未讀置頂」與處理狀態追蹤，避免訊息遺漏。
前後端透過 GraphQL 進行所有資料交換，包含產品目錄、認證、賽事新聞、最新消息、首頁 Banner、SEO 設定。型別安全的 Schema 讓前後端協作順暢，且可精確取得所需欄位，降低行動裝置頻寬消耗。
後台以 Filament 建構，涵蓋產品管理（含分類、規格、圖片庫）、認證與合作品牌維護、賽事與最新消息排程、Hero Banner 管理、SEO 欄位、報價單收件與處理狀態追蹤、活動日誌等完整功能，業主可自行維運。
首頁包含大型 Hero 視覺、品牌沿革時間軸（1953 / 1978 / 1995 / 2023）動畫、滾動觸發的 IntersectionObserver 動效、與固定側邊「索取報價」CTA，提升整體品牌質感並引導關鍵轉換。
