service@tsu.com.tw
Website · 2026

Nanzhuang Mountain Water Tour 2026

路跑 + 自行車活動官網,整合路線地圖、線上報名系統、獎勵兌換機制與 FAQ

Type

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 處理地圖圖資的視覺化——這與憲動工作室過往開發賽事官網的技術基礎一致,只是這次多了地方創生與觀光導客的角色,讓一場戶外活動的官網,同時也成為串連在地店家的一個小型入口。