我已經添加了一個在用戶瀏覽頁面5秒後自動彈出的促動彈窗！
促動彈窗功能完成
自動觸發機制
- 5秒定時器: 用戶進入頁面5秒後自動顯示彈窗
- 一次性顯示: 關閉後不會重複彈出
- 自動清理: 組件卸載時清理定時器
彈窗設計特色
- 位置: 畫面偏下方居中顯示
- 動畫效果:
animate-bounce 吸引注意力 - 配色: 使用品牌黃色漸層背景，深藍色文字
- 邊框: 橙色邊框增加視覺衝擊力
響應式設計
- 手機優化:
max-w-sm 確保在小螢幕上適當大小 - 全寬按鈕:
w-full 讓按鈕在手機上易於點擊 - 安全區域:
p-4 確保彈窗不會貼邊
互動功能
- 關閉按鈕: 右上角 ✕ 按鈕可關閉彈窗
- LINE導引: 點擊按鈕直接跳轉到官方LINE
- 追蹤整合: 保持原有的Facebook Pixel追蹤功能
用戶體驗
- 非侵入式: 使用
pointer-events-none 讓背景可點擊 - 視覺引導: 明確的「我想報名」文案和圖示
- 即時回饋: 按鈕hover效果和縮放動畫
這個彈窗會在用戶瀏覽頁面5秒後自動出現，有效提醒用戶進行報名行動！