One Page, Three UX Styles

簡報模式：同一頁不跳轉，一鍵切換 Forest / Block / Vivir 三種風格。內容保持一致，方便你直接比較視覺語言與操作體驗。

目前風格: Forest

官網首頁、品牌理念、詩詞切字主題房、AI 智慧物聯

完整保留原本官網主題內容，且每個主題都配有風格照片，便於提案時先講品牌，再進入功能流程。

官網首頁風格照片

首頁視覺以空間感與品牌標題建立第一印象，對應你官網展示版需要的沉浸式開場。

品牌理念

傳達易居空間「順應自然、溫暖庇佑」的核心，並把品牌語氣落在內容敘事與 UI 節奏中。

詩詞切字主題房

將採蓮曲、長恨歌等詩意轉化為房型特色，展示「戶間介紹/照片/設備/注意事項」內容框架。

AI 智慧物聯

呈現 AI 管家 + IoT 控制情境：燈光、空調、門鎖與場景模式，用於說明智慧住宿體驗。

訂房流程優化

先給使用者可見的價格拆解，避免結帳才發現加購費用。每一步都可預期、可回頭。

入住日期

退房日期

入住人數

入住夜數

1 晚

加購早餐 (每人每晚 NT$180) 延後退房 (固定 NT$500)

房價小計

NT$ 0

早餐加購

NT$ 0

延後退房

NT$ 0

總金額NT$ 0

UX: 價格即時計算

第三方登入 Callback

在純靜態環境模擬 OAuth callback 回流，檢視 provider、code、token 與登入狀態更新。

尚未登入

Auth Session

{}

Latest Callback

尚未接收 callback。

支付閘道整合 Demo

展示 LINE Pay、綠界、Stripe 的前端結帳體驗與 callback payload 結構，方便後續接真實金流。

LINE Pay

行動支付流暢動線

綠界 ECPay

在地常用支付整合

Stripe

國際信用卡流程

目前訂單: 尚未建立

應付金額: NT$ 0

尚未觸發支付

郵件通知

同一份資料渲染兩種通知：訂房確認、付款成功。可直接對接 Email API。

房間照片上傳

支援拖拉與點擊選檔，多圖預覽 + 假上傳進度，便於先做管理流程驗證。

拖曳照片到這裡，或點擊選擇

報表模塊

營收統計 + 訂房趨勢雙圖，採可讀性優先設計，適合在管理後台快速決策。

訂單數

已付款

營收 (NT$)

訂房趨勢

營收趨勢