Forest Calm Booking Journey

慢節奏旅宿體驗：先感受空間，再完成預訂。這個版本將訂房、登入、支付、通知、上傳、報表整合為一條順暢動線。

自然敘事導向

柔和視覺層次

低壓決策流程

官網首頁與品牌核心內容

以下保留你原本官網的三大主軸，並融入 Forest Calm 風格示意。每個區塊皆提供風格照片，方便你在同場景切換不同 UX 版本比較。

官網首頁風格照片

以自然採光與木質肌理建立首頁第一印象，呼應易居空間「順應自然、放鬆無壓」的視覺語調。

品牌理念

以「易」為核心，強調變通與庇佑；前端文案與版面節奏呈現溫暖、可信任、可陪伴的品牌體驗。

詩詞切字主題房

結合採蓮曲、長恨歌等意象，透過字體與色彩切換房型情緒，讓每間房都有獨立故事性。

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$)

訂房趨勢

營收趨勢