婚禮邀請頁
單頁婚禮邀請：倒數、故事時間軸、流程、地點、出席回覆
Pro產業wedding7 個區段
安裝
npx webberui@latest add "https://webberui.com/r/wedding-invitation.json?t=<安裝 token>"整頁原始碼會落在 app/templates/wedding-invitation/。也可以改用長效授權金鑰：在 components.json 的 registries 設定 Authorization: Bearer <key>，適合 CI 或多人共用的專案。使用範圍見授權條款。
包含的區段
同一套模板內的區段共用設計 token，所以抽換、重排之後配色、間距與動畫節奏仍然一致。可在區段組裝器裡挑選組合。
- 1
封面與婚期倒數
導覽列與新人姓名封面，含婚禮日期、即時倒數計時與回覆出席按鈕。
hero - 2
誠摯的邀請
以喜帖語氣書寫的邀請文，附雙方家長署名與服裝色系建議。
content - 3
我們的故事
左右交錯的時間軸，記錄新人從初次相遇到求婚的七年歷程。
timeline - 4
婚禮流程
證婚儀式與喜宴晚宴兩張時刻表卡片，逐項列出當日時間與說明。
features - 5
婚宴地點
手繪風示意地圖搭配場地介紹，並列出地址、交通接駁與停車資訊。
contact - 6
出席回覆
可互動的 RSVP 表單，包含出席意願、人數、飲食偏好與祝福留言。
form - 7
感謝頁尾
花枝裝飾的致謝結尾，附上聯絡信箱、婚禮秘書電話與婚禮標籤。
footer
一套 React 婚禮邀請網頁模板：單頁包含婚期倒數、相識故事時間軸、當日流程、婚宴地點與出席回覆表單。以 Next.js App Router、Tailwind CSS 與 Motion 製作。
適用情境
- 新人自己的線上喜帖與婚禮資訊頁
- 婚禮顧問或喜帖設計工作室提供給客人的範本
- 訂婚宴、歸寧宴等需要倒數與回覆的單頁邀請
- 週年派對或其他需要流程與地點說明的私人活動頁
拿到後要改哪裡
- 把 page.tsx 開頭的 `WEDDING_TS` 改成你們的婚期，倒數計時會依這個時間每秒更新。
- 新人姓名出現在 `Navbar`、`Hero`、`Invitation` 與 `Footer` 等多處，建議用搜尋取代一次改完；故事、流程與地點分別在 `STORY_EVENTS`、`CEREMONY_SCHEDULE`／`BANQUET_SCHEDULE`、`VENUE_INFO` 陣列，逐一換成你們的內容。
- 地點區的地圖是 SVG 繪製的示意圖，不是真的地圖；需要的話換成你的地圖嵌入或截圖。
- 出席回覆表單只在前端切換成「已送出」畫面，不會寄出任何資料；`RsvpForm` 的 `handleSubmit` 要接上你自己的表單服務或 API。人數與餐點選項在 `GUEST_COUNTS`、`DIET_OPTIONS`。
- 配色是寫在 Tailwind class 裡的色碼（例如 `#B06A73`、`#4A3F3C`），用搜尋取代就能整頁換色。
你拿到的是原始碼
不是 npm 套件、不是 zip 檔。安裝之後整頁的 TypeScript 原始碼就在你的 repo 裡，可以任意修改、無執行期相依、沒有到期失效機制——我們的網站故障不會影響你已上線的網站。
瀏覽其他 103 套模板 →