Dr. Wash · Layout proposals

2 sections re-imagined per /frontend-dev brainstorm. Dark mode preserved. Hero (3D logo video) and brand tokens untouched. Mockups show end-of-scroll state for each section — actual implementation includes GSAP scroll-driven transitions (B) and drag-slider interactions (C).

Option B · Process Timeline (Pin-Scroll)
Replaces 三步預約 · 1440 × 1800 · GSAP ScrollTrigger
HOW IT WORKS · 三步預約

由 WhatsApp 到師傅上門 · 3 步搞掂

由 WhatsApp 影部冷氣，到師傅上門落地清洗，三步落實。唔使打電話，唔使填表 confirm。

SYNCED · 03 / 03
▌ 完成清洗 · 同新機一樣
STEP 01 · WHATSAPP

影部冷氣 send 過嚟

影機身 + 大概數量 + WhatsApp 過嚟。唔使填表唔使打電話，10 秒搞掂。

STEP 02 · QUOTE

即日回覆報價

師傅睇到相，當日 WhatsApp 回覆每一項收費清晰講明，唔會臨場加錢。

STEP 03 · ARRIVE

排期上門

確認時間後按時上門。最早 3 日後可以做，急單 24 小時內安排。

⟵ sticky position: top 0, height 80vh
image morph at each scroll trigger ⟶
active step highlight (border-top accent)
inactive (white/12 border)
tool: GSAP ScrollTrigger · pin trigger
Option C · Before / After Slider Gallery
Replaces 我們的服務 · 1440 × 1100 · drag-slider per tile
WORK · 我們的服務

洗完 vs 洗前 · 拖動 slider 對比

真實客戶機型，唔係 stock 圖。drag 中間 handle 揭示前後對比 — 一張相講盡晒服務質素。

BEFORE
AFTER
分體機 · 灣仔01
BEFORE
AFTER
窗口機 · 葵涌02
BEFORE
AFTER
天花機 · 中環03
BEFORE
AFTER
商業機 · 觀塘04
BEFORE
AFTER
浴室寶 · 元朗05
BEFORE
AFTER
分體機 · 沙田06
每個 tile 中央 handle 預設停 50%，hover 自動 sweep 一次 → 需要: 6 對真實 before / after 配對相 (要 Nam 補 after shots)
before pane (warm dirt tone)
after pane (cool clean tone)
tool: react-compare-slider · drag interaction