Website · 2026
Nanzhuang Mountain Water Tour 2026
路跑 + 自行車活動官網,整合路線地圖、線上報名系統、獎勵兌換機制與 FAQ
Published onType
Website
Year
2026
Client
南庄鄉公所
Tech Stack
Next.jsTypeScriptTailwind CSSMapbox
Key Features
互動路線地圖
整合 Mapbox 地圖
線上報名系統
串接金流的報名流程
獎勵兌換機制
QR Code 兌換優惠券
FAQ 智能搜尋
分類式常見問答
南庄山水悠遊行不是一場單純的路跑,而是路跑加自行車雙項目的複合式活動,由南庄鄉公所主辦,官網的核心任務是讓不同項目、不同程度的參加者都能在同一個入口,找到自己需要的資訊。
活動路線橫跨南庄山區地形,官網因此整合了 Mapbox 打造的互動路線地圖,讓參加者能提前掌握上坡下坡與補給站位置,不用等到現場才第一次看到路線長什麼樣子。報名的部分串接了金流,選手可以直接在網站完成線上報名與繳費,不需要另外跑一次匯款或臨櫃流程。
比較特別的是獎勵兌換機制——透過 QR Code 讓完成任務的參加者,直接在手機上兌換優惠券。另外還有分類式的 FAQ 智能搜尋,把常見問題依主題分類,減少活動單位在報名期間被重複詢問同樣問題的負擔。
技術上採用 Next.js 搭配 TypeScript 與 Tailwind CSS 打造前台介面,並用 Mapbox 處理地圖圖資的視覺化——這與憲動工作室過往開發賽事官網的技術基礎一致,只是這次多了地方創生與觀光導客的角色,讓一場戶外活動的官網,同時也成為串連在地店家的一個小型入口。