暑假平日優惠已經上線了。站頂有橫幅在跑，促銷卡也把條件寫得清清楚楚。但廣告點擊真正落地的那兩頁——房型頁——上面什麼都沒有。
這次補的就是這個缺口。聽起來像一行就能修好的東西，實際上修它的 commit 每頁也真的只有一行：把 PromoCardList 這個元件掛到房型落地頁上。但值得做的理由、還有為什麼要一套小系統才能把它做對，才是重點。
廣告和促銷本來是兩條沒接起來的線
這個站存在的意義，就是讓客戶自己握住訂單，而不是用佣金遠比外界想像的高的代價向 OTA 租客人。跑 Google Ads 導到自營訂房站，前提就是那筆點擊的錢得落在一個會轉換的地方。如果廣告是在競價把人導到房型頁，那對這筆花費來說，房型頁就是唯一重要的頁。
所以有件事悄悄地錯了：客戶有一檔暑假平日連住優惠，7/11 到 7/31。它用兩種方式公告——一條排程橫幅在站頂，還有一張把條件、可用日期、行動呼籲都寫齊的促銷卡。這兩樣都是自助的，業主從後台自己發，不用工程師碰。對他們來說，多開一檔促銷的邊際成本早就趨近於零。
但這些促銷卡是渲染在一般頁面上，不是在廣告 campaign 實際指向的那兩個房型落地頁上。付費進來的訪客，落在那個為了轉換他們而蓋的頁——上面卻沒有這檔正在跑的促銷。橫幅是有在站頂跑沒錯，可是那張真正說明「第一晚原價、第二晚起 8 折」還附訂房 CTA 的卡，不在動線裡。
把 <PromoCardList locale={locale} /> 掛上兩個房型頁，就是把促銷放回錢已經在導人去的地方。整個宏觀故事就這麼一句：廣告花費、落地頁、促銷是同一條訊號路徑上的三段，其中一段斷了。
為什麼用卡片列表，而不是在頁上寫死一條橫幅
這些卡宣告在單一個 JSON 檔裡，新的在上、舊的在下，由一個元件渲染。「新的在上」這個排序規則是刻意的。業主加一檔促銷，它會自動跑到堆疊最上面，他們永遠不用去動排版順序。原始碼裡的註解就是這份契約：最新宣告的排最上面。
這件事重要，是因為另一條路——把當前促銷寫死進每個房型頁——意味著促銷每換一次就要工程師改一次。對一個核心價值就是「內容不用找我」的客戶來說，那是錯的設計。卡片列表是一個渲染視圖，蓋在業主本來就在管的資料檔上面。
沒人要求的那一段：可換主題的底色面板
判斷力就展現在這裡，超出需求本身。照片卡的圖片後面有一塊帶顏色的底色面板——就是框住照片、放小標籤（「24 罐」那種）的那塊。它一開始是一整片寫死在元件 CSS 裡的深紅漸層。
那個紅是個問題，而且是那種要等到你有超過一檔促銷才會浮出來的問題。深紅底配一張烤肉卡沒事。但配一檔明亮的暑假海邊促銷，它就跟內容打架——一個賣私人泳池、賣海岸線的頁面，套了個又冬又重的框。第一版修法很務實：把打架的深紅換成暖金。但把一個寫死的顏色換成另一個寫死的顏色，只是把問題推到下一季。
所以真正的修法，是把面板顏色變成一個「選項」，綁在卡上、從後台可編輯。我把主題抽成一份有型別的小目錄——暖金（預設，烤肉／美食／通用）、喜慶紅金（過年、聖誕、節慶）、玫瑰粉（母親節、情人節）、品牌青綠（夏日海洋、全年適用）、春綠——後來又加了一個明亮的陽光沙灘漸層，專門對應墾丁海邊那種清爽夏日感。每個主題都帶自己的漸層「以及」一個搭配的標籤顏色，這樣那個小標籤才會維持清楚，而不是溶進背景裡消失。這個「標籤顏色配對」的細節，是單純一個選色器會漏掉的東西。
主題 id 存在卡片的照片資料上，沒設就預設暖金，存檔時會驗證——不明的主題 id 會被擋下來、給一句清楚的錯誤訊息，而不是默默渲染出一個壞掉的漸層。到了頁面上，一個 helper 把 id 解析成它的漸層和標籤顏色；id 壞掉的話它會退回預設，而不是直接爆掉。
那個把下拉選單變成業主真的能用的色塊
一排主題名字的下拉選單——「暖金」「喜慶」「玫瑰」——是工程師的心智模型，不是業主的。業主不是用主題 id 在想事情；他想的是「這個顏色跟海邊照片搭不搭」。
所以我在下拉選單旁邊放了一個即時色塊，選項一換它就立刻更新。每個選項把自己的漸層帶在 data 屬性上；選單旁的色塊元素就重繪成對應的顏色。業主是用看的來挑，不是靠解讀一個標籤。這就是「技術上存在的功能」和「真的會被用的功能」之間的差別——也正是這種降低摩擦的細節，在決定整套自助層撐不撐得過幾個月。
實際結果是：業主現在可以開一檔季節促銷、把它放到廣告真正指向的頁上、再把顏色調到跟照片搭——橫幅、卡片、落地頁的位置、主題——完全不用寫任何一行程式，也不用傳訊息給我。一季一季下來，多開一檔促銷的邊際成本維持在零。
還需要我的，是我刻意畫的那條線：新的卡片版型、新的頁面型別、結構性的排版變動。新的「顏色選項」現在落在自助那一側，因為我把這份目錄設計成用資料就能擴充，不用工程師去碰 CSS。這條界線——內容和主題選擇交給業主，結構和新能力留給工程師——就是讓一個靜態站維持便宜好養、又能安心交接出去的那條線。
促銷貼滿了全站，唯獨沒貼在廣告預算正花錢要填滿的那一頁上。