SPA 養生按摩品牌形象官網
2024
業主是位於台北的高品質 SPA 養生會館——享天堂（Heaven Spa），提供專業按摩、美容護膚、熱蠟除毛等服務，營業時間為下午一點至午夜，主打舒適放鬆的頂級體驗。
客戶希望打造一個支援繁中與英文雙語的品牌形象官網，讓國內外客群都能方便了解服務項目與預約資訊。同時要求前端具備黑夜白晝模式，讓使用者可依偏好自由切換。
前端使用 Astro 框架開發，後端以 Filament 建構管理後台，資料透過 GraphQL API 串接前端，整體架構清晰、效能優異。網站涵蓋品牌介紹、服務項目、團隊成員、最新消息、FAQ、加入我們、異業合作等完整頁面。
完整支援繁體中文與英文雙語切換，所有頁面內容、導航、SEO meta 皆可依語系動態呈現，讓國際客戶也能輕鬆瀏覽
前端內建 Dark / Light 主題切換，使用者偏好自動儲存至 localStorage，搭配 CSS 自訂屬性實現無閃爍的主題轉場效果
後端採用 GraphQL 作為 API 協議，前端透過 query 精確取得所需資料，減少不必要的資料傳輸，提升整體效能
多組輪播元件涵蓋服務項目、團隊介紹、最新消息等區塊，支援自動播放、手勢滑動、觸控操作，提供流暢的瀏覽體驗
前端採用 Astro 框架開發，以靜態生成為主，搭配島嶼架構（Islands Architecture）只在需要互動的元件載入 JavaScript，大幅提升首屏載入速度與 SEO 表現。
網站完整支援繁體中文與英文雙語切換，包含所有頁面內容、導航選單、meta 標籤等。語系偏好會自動記憶，確保使用者回訪時維持上次的語言設定。
透過 CSS 自訂屬性搭配 localStorage 實作主題切換，使用者偏好會被記住。整個切換過程無頁面閃爍，確保視覺體驗的流暢性。
後端採用 Filament 建構內容管理後台，提供直覺的管理介面，讓業主可以自行維護服務項目、團隊成員、最新消息等網站內容。
資料層採用 GraphQL 作為 API 協議，前端可透過精確的 query 語法取得所需欄位，避免 REST API 常見的 over-fetching 問題，讓資料傳輸更加高效。
享天堂鎖定國內外雙客群，雙語系讓外語客人也能了解服務項目與預約資訊。黑夜白晝模式則呼應 SPA 品牌強調的放鬆體驗——前端以 CSS 自訂屬性搭配 localStorage 記住使用者偏好，切換過程無頁面閃爍，讓瀏覽網站本身也是一種舒適體驗。
本專案於 2024 年完成，涵蓋雙語系切換、日夜模式、GraphQL API 資料層與 Filament 管理後台，並包含品牌介紹、服務項目、團隊成員、最新消息、FAQ 等完整頁面。這類含後台管理系統的品牌官網，開發時程一般落在 6–10 週。
可以。i18n 多語系機制與黑夜白晝主題切換都是與業務邏輯無關的通用基礎建設，搭配 Astro 靜態生成與 Filament 後台，換掉品牌視覺與內容即可套用在美容美髮、飯店、餐飲等各類需要雙語與品牌質感呈現的形象官網。
