日式懷石風格餐廳官網 + 三型菜單・線上訂席系統
2026
礁溪膳館 JIAOXI SHAN GUAN 是宜蘭礁溪的「龜山島・日式海鮮燒烤」現撈海鮮餐廳，複合日式燒烤與台式養生料理。品牌核心哲學「鮮・現撈」「天然・新鮮・原味」「預約就是新鮮」— 每日清晨直送基隆崁仔頂漁市與宜蘭大溪漁港現撈海鮮，蔬果選用宜蘭在地當日採收。官網正式網域 039888033.com，網域即訂位專線，一看就記得。
視覺以日式懷石色系鋪陳：墨黑舞台、膳館金點綴、朱紅提味，搭配 Noto Serif TC 特大襯線標題與 Cinzel 拉丁副標，「膳」巨字浮水印貫穿全站。Hero 主標「現撈海鮮／膳食自然鮮甜」，副標「養生料理・特色燒烤・大溪港現流生魚片」，以 Astro 6 SSR 搭配 Vue 3 互動元件實作。
本案不只做形象官網，還內建三型菜單系統（鮮膳桌菜 6,800–12,800 元標準 10 人桌、套餐、單點）與線上訂席表單，另有餐點訂購型錄 — 主廚限量私房料理每日限量 5–8 份需提前 1–3 日預訂，以及南投鹿谷茶園、當季水果訂購分類，後端以 Laravel + GraphQL + Filament 全後台管理。
墨黑 × 膳館金 × 朱紅點綴，Noto Serif TC 特大襯線標題與 Cinzel 拉丁副標，「膳」巨字浮水印貫穿全站
全螢幕 banner 6 秒自動輪播，金色漸入雙行主標與雙 CTA（立即預約訂席・瀏覽菜單）
桌菜（6,800–12,800 四價位）、套餐、單點三分頁切換，菜色、價格、推薦標記全由後台 fetchMenus() 驅動
用餐類型、日期時段、桌數人數完整欄位，GraphQL mutation 寫入後台，並行 LINE 加好友與來電雙軌訂位
主廚限量私房料理（每日限量 5–8 份）、鹿谷茶園、當季水果三大分類，提前預訂洽詢模式
「鮮・現撈」哲學敘事、雙圖疊放圓章設計、YouTube 影片輪播（watch/shorts 網址自動轉 embed）
文章列表分頁 + slug 詳情頁，熱門標記與發布排程
首頁全區文案圖片、公司設定（營業時間、社群 QR、地圖）、菜單、文章、訂席與聯絡收件皆 Filament 後台維護
前端以 Astro 6 建構，採用 output: server + Node adapter 的伺服器端渲染模式，首屏內容由後端即時拉取組裝，確保 SEO 爬蟲與社群分享預覽都能取得完整內容。互動元件（如 MediaCarousel）以 Vue 3 Islands 架構搭配 client:idle 延遲 hydrate，SEO 與載入效能優先。
後台以 Laravel 建構，前端透過 GraphQL 取得資料，共 fetchPageContent、fetchCompanySetting、fetchMenus、fetchArticles 四路資料源，全部備有前端 fallback 預設值 — 即使後台無資料也不破版，穩定呈現品牌內容。
訂席表單經 Astro API route 轉送 submitReservation mutation 寫入後台，並加上 10 秒 timeout 保護避免請求懸置；另提供 LINE 官方帳號加好友與 tel: 一鍵撥號兩條備援訂位管道，線上表單與電話訂位雙軌並行。
全站輸出 Restaurant + BreadcrumbList JSON-LD（含 servesCuisine、priceRange），搭配 canonical 標記；每頁 SEO / OG 欄位皆可由後台維護，sitemap 亦涵蓋訂購子頁，完整支援搜尋引擎與社群分享。
整合 GA4、GTM、LINE Tag、Microsoft Clarity、Facebook Pixel 五種行銷追蹤工具，全部以環境變數管理注入，且僅在 production 環境載入，開發與測試環境不受干擾，方便業主依行銷活動需求開關與更換追蹤 ID。
以 Tailwind CSS 4 @theme 將墨黑、膳館金、朱紅色階與襯線字級全部 token 化，全站卡片、按鈕、表單維持一致的懷石質感；搭配 IntersectionObserver reveal 進場動畫，滾動瀏覽時內容漸次浮現。
