醫美生技企業官網 + 產品目錄
2025
全美生技（UNISON BIO）是台灣醫美生技產業代理商，代理多項國際知名醫美設備與耗材品牌，服務上千家合作診所與醫療院所。因應品牌國際化與數位轉型需求，重新打造官方網站，整合品牌形象、產品目錄、合作診所、最新消息與預約 DEMO 功能。
前端採用 Astro 5 SSR 搭配 Vue 3 互動元件，實現中英雙語路由、首頁 Hero 輪播、明星產品區塊、合作診所網絡、動態數字計數等動畫效果，符合企業級形象網站的視覺質感。
後端以 Laravel + GraphQL 架構，管理後台使用 Filament 建構，讓品牌端可自行維護產品資料、新聞公告、合作診所、Banner、SEO 設定與多語系翻譯，全面支援業務日常營運。
大型 Hero Banner Carousel 呈現品牌視覺與主打產品，支援多語系圖片與動態標題，強化首屏品牌記憶點
以卡片式動態載入後台商品資料，首頁精選展示核心設備與耗材，點擊可深入至產品分類頁查看完整規格與應用
Dermapen、DeMD、Soleo、Carbon Wave、CryoPen、Celluma、Cytoderma 等多個產品線分類，支援分類切換與圖文介紹
以縣市分區列出上千家合作診所，方便消費者就近查詢，後台可批次匯入維護
分類化的新聞與公告發布，支援 Markdown 編輯、封面圖、發佈時間排程，前台依類別篩選顯示
以 Filament 建構完整後台，管理商品、品牌、新聞、合作診所、首頁 Banner、SEO 設定與多語系翻譯
Astro 伺服器端渲染搭配 i18n 路由（/ 中文、/en 英文），前後台翻譯欄位全面對應，符合國際 SEO 要求
首頁浮動預約按鈕可直接填寫 DEMO 預約表單，資料寫入後台並寄送通知給業務，縮短客戶轉換路徑
前端以 Astro 5 建構，採用伺服器端渲染（SSR）模式部署於 Netlify，首屏內容由後端 GraphQL API 即時拉取並預先組裝，確保 SEO 爬蟲與社群分享預覽都能取得完整內容。互動元件使用 Vue 3 Islands 架構，只在需要時 hydrate，維持極佳的載入效能。
以 URL prefix 路由實作多語系，中文位於 /、英文位於 /en。所有頁面皆建立對應翻譯，搭配 hreflang 標籤與 Open Graph 多語資訊，符合國際 SEO 標準。i18n 翻譯欄位從後台動態載入，讓品牌端可即時維護。
前後端透過 GraphQL 進行所有資料交換，包含首頁 Banner、明星產品、產品分類、合作診所、新聞公告、關於我們、SEO 設定等。型別安全的 Schema 設計讓前後端協作更加順暢，且可精確取得所需欄位，降低行動裝置頻寬消耗。
後台以 Filament 建構，涵蓋商品管理（含分類、品牌、規格、圖片庫）、合作診所批次匯入、新聞公告排程、Hero Banner 管理、SEO 欄位設定、多語系翻譯切換、活動日誌等完整功能，讓品牌端無需工程師介入即可自行維運。
首頁包含大型 Hero 輪播、絲帶緞帶裝飾動畫、合作診所跑馬燈、關於我們數字動態計數（IntersectionObserver + easeOutExpo）、固定側邊導覽列等精緻互動元素，提升整體品牌質感與使用者停留時間。
網站右下角常駐預約 DEMO 按鈕，點擊後開啟預約表單填寫需求，資料透過 GraphQL Mutation 寫入後台並觸發 email 通知，縮短業務接觸客戶的回應時間。
