黑金質感品牌官網 + 會員點數經濟系統
2026
潔藝汽車美容 JE Auto Detail（潔藝車體美研）是台中西屯的汽車美容品牌，源自一位中古車商的職人堅持 — 老闆深耕中古車業，每台上架車都須通過自己雙手驗收，這份近乎挑剔的標準催生了潔藝。核心服務涵蓋手工洗車、精緻美容、鍍膜護理與犀牛皮包膜，官網預約表單共提供 9 項專業服務。
視覺以 Lamborghini 黑金風格為靈感：純黑舞台 + 香檳金點綴、零圓角、六角形品牌語彙、表面色階分層，前端以 Astro 5 SSR 搭配 Vue 3 互動元件實作，完整重現職人等級的精緻質感。
本案最大特色是不只做形象官網，還內建完整「會員點數經濟系統」：JWT 會員登入（Email + LINE / Facebook / Google 三種社群 OAuth）、到店出示 QR 識別碼掃描累點、點數 1:1 折抵的兌換商城、三層推薦回饋（推薦碼 + 推薦連結 + QR 下載，好友首次消費上線獲 200 點獎勵），以及多偏好時段的線上預約系統，後端以 Laravel + GraphQL + Filament 全後台管理。
Lamborghini 風格啟發的純黑 + 香檳金設計系統，零圓角、六角形語彙、金屬拉絲卡片，襯托職人質感
後台可管理的 Banner 輪播，疊加四大服務入口（手工洗車・精緻美容・鍍膜護理・犀牛皮包膜）
服務詳情頁 + 施工前後對比作品集，「真實對比，看得見的差異」
Email 註冊與 LINE / Facebook / Google 社群登入，JWT 認證，會員中心含消費、兌換、預約紀錄
會員專屬 QR 識別碼，到店消費由店員掃描即累點，線上線下閉環
分類瀏覽商品與服務，點數 1:1 折抵不補差額，兌換狀態追蹤
專屬推薦碼、推薦連結與 QR 下載，好友註冊綁定、首次消費回饋上線點數
多偏好時段預約由店家確認排程；服務、作品、Banner、商品、會員、預約全後台管理
前端以 Astro 5 建構，採用伺服器端渲染（SSR）模式，首屏內容由後端 GraphQL API 即時拉取並預先組裝，確保 SEO 爬蟲與社群分享預覽都能取得完整內容。互動元件以 Vue 3 Islands 架構搭配 client:idle 延遲 hydrate，SEO 與載入效能優先。
前後端透過 GraphQL 交換資料，並以 Astro API Routes 作為 BFF（Backend for Frontend）層：登入、註冊、預約、兌換等敏感操作皆走 /api/* 端點，token 存放於 httpOnly cookie，完全不暴露於前端 JavaScript，兼顧安全與開發體驗。
會員系統以 JWT 認證為核心，透過 memberLogin mutation 完成 Email 登入，並整合 LINE / Facebook / Google 三種社群 OAuth。OAuth 流程以 astro-cookie-session 實作 state CSRF 防護，middleware 依 originCheck → guest → auth 順序層層把關，確保會員中心頁面的存取安全。
點數來源涵蓋消費累點、推薦回饋、生日禮：到店出示會員 QR 識別碼由店員掃描累點，myPointTransactions 提供完整點數明細，productRedeem 處理兌換商城的 1:1 折抵流程，myReferralTree 則呈現三層推薦樹 — 好友透過推薦碼或連結註冊綁定、首次消費即回饋上線 200 點，形成線上線下閉環的點數經濟。
以 Tailwind CSS 4 @theme 定義黑金設計 token：純黑 #000000 為舞台、香檳金為點綴，深色表面依 #000 → #181818 → #202020 色階分層堆疊，搭配零圓角與六角形品牌語彙，讓卡片、按鈕、表單在全站維持一致的 Lamborghini 式精品質感。
整合 GA4、GTM、LINE Tag、Microsoft Clarity、Facebook Pixel 五種行銷追蹤工具，全部以環境變數管理注入，方便業主依行銷活動需求開關與更換追蹤 ID，完整掌握預約轉換與廣告成效。
