- 登入
- 註冊
Vibe 畫布範本：活動報名頁
從工作坊、講座到品牌活動，一頁網站把報名訊息講清楚。本篇提供活動報名頁的完整 HTML 範本與客製 prompt，含日期欄、議程、講者、票種、FAQ。
這個範本有 11 個區段：Hero（暗夜底 + 編輯式日期欄）、為什麼參加、適合誰參加（含不適合警語）、議程 6 段、3 位講者、往期活動 gallery、學員回饋、3 種票（早鳥/一般/VIP）、合作夥伴、6 題 FAQ、最終 CTA。配色採暗夜墨 + 米白 + copper accent，hero 與 final CTA 用沉穩的深色背景。
這個範本適合什麼情境#
- 線下工作坊 / 講座：限額活動的報名頁，含議程與講者
- 線上講座 / Webinar：純線上活動，可拿掉場地相關區段
- 品牌新品發表：發表會邀請函形式的報名頁
- 限額體驗活動：餐酒會、藝術展、體驗課程
怎麼用：3 個步驟#
- 複製下方的 prompt + code，兩段一起貼進 Claude（或 ChatGPT、Gemini 等 AI 助手）
- 跟 AI 說你的品牌資訊：填上 prompt 裡每個
____對應的內容（公司名、定位、各區段文案） - 把 AI 回給你的完整 code 貼進 Vibe 畫布的 HTML 區塊，儲存後就是你的客製化版本
預估時間：複製 1 分鐘、跟 AI 對話 10-20 分鐘（取決於品牌資訊準備程度）、貼回 Vibe 畫布並調整 5-10 分鐘。第一次完整跑完約 30-40 分鐘。
複製 1：Prompt（給 Claude / AI 的指令）#
這段 prompt 已經寫好給 AI 看的所有規格與限制，你只需要把 ____ 填入你的內容，AI 就能準確改造模板。
完整 Prompt
請幫我把下面這個活動報名頁模板改成我的版本（保留結構，只改文案）。
【請替換的內容】
- 活動類型 tag（hero 上方圓角標籤，例如「2026 春季工作坊」）：____
- 主標題（hero h1，含一句強調字）：____
- 副標（兩句講活動規模、定位、目標客群）：____
- 活動日期 / 時段 / 場地（datebox 三欄）：____
- 名額狀態（限額 / 剩餘 / 截止日）：____
- 4 個「為什麼參加」重點（標題 + 一句描述）：____
- 適合誰參加 3 族群（標題 + 具體描述）+ 不適合警語：____
- 6 段議程（時間 + 標題 + 一段描述 + 講者）：____
- 3 位講者（姓名 + 職稱 + 公司 + bio + 講題）：____
- 累計數據（場次、學員、評分）：____
- 4 則學員回饋（內容 + 姓名 + 職稱）：____
- 3 種票（早鳥 / 一般 / VIP）：名稱、價格、截止、4-5 個內容項目：____
- 5 個合作夥伴 / 贊助 logo 名稱：____
- 6 題 FAQ（問題 + 2-3 句回答）：____
- 報名須知（早鳥優惠、退費政策、含什麼、其他注意事項）：____
【可選色票調整】
- 主色（accent，預設 copper #c4633a）：____
- 暗夜墨（ink hero/final 用，預設 #1a1d2e）：____
- 米白背景（paper，預設 #f4ede0）：____
【技術要求 - 嚴格遵守】
1. 保留所有 class 名稱前綴 .snev-
2. 保留 RWD 斷點 880px
3. 不引入外部字體或 JS library
4. 圖片 src 保留 placehold.co 連結
5. 結構性 HTML 標籤保留
6. 所有 em 標籤保留
【模板 code】複製 2：模板 Code（給 Claude 改的素材）#
完整 HTML 模板，包含所有 scoped CSS 與內容區塊。複製後跟 prompt 一起貼進 AI 對話。
完整模板 Code
<style>
.snev-wrap *,.snev-wrap *::before,.snev-wrap *::after{box-sizing:border-box;}
.snev-wrap{
--ink:#1a1d2e;
--ink-deep:#13162a;
--paper:#f4ede0;
--paper-deep:#ebe1cc;
--line:#e6dcc4;
--line-dark:#2a2d44;
--accent:#c4633a;
--accent-soft:#d97f54;
--text-mid:#5a5147;
--text-soft:#8a7f72;
font-family:-apple-system,BlinkMacSystemFont,"PingFang TC","Noto Sans TC","Segoe UI",Roboto,sans-serif;
color:#1c1917;
background:var(--paper);
line-height:1.75;
-webkit-font-smoothing:antialiased;
font-feature-settings:"kern","liga","calt";
}
.snev-wrap a{color:inherit;text-decoration:none;}
.snev-wrap em{font-style:normal;font-weight:700;color:var(--accent);}
.snev-wrap img{display:block;max-width:100%;height:auto;}
.snev-serif{font-family:Charter,"Iowan Old Style","Hoefler Text",Georgia,"Songti TC","Noto Serif TC",serif;letter-spacing:-.015em;font-feature-settings:"kern","liga","onum";}
.snev-container{max-width:1080px;margin:0 auto;padding:0 32px;}
.snev-container-narrow{max-width:780px;margin:0 auto;padding:0 32px;}
.snev-eyebrow{font-size:12px;font-weight:600;letter-spacing:.18em;color:var(--accent);text-transform:uppercase;}
/* ─── Hero ─────────────────────────────────────────── */
.snev-hero{padding:128px 0 112px;background:var(--ink);color:var(--paper);position:relative;overflow:hidden;}
.snev-hero::before{content:"";position:absolute;top:-30%;right:-10%;width:60%;height:120%;background:radial-gradient(ellipse at center,rgba(196,99,58,.15) 0%,transparent 60%);pointer-events:none;}
.snev-hero-inner{position:relative;z-index:1;text-align:center;}
.snev-hero .snev-eyebrow{color:var(--accent-soft);}
.snev-tag{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.18em;color:var(--accent-soft);background:rgba(196,99,58,.12);padding:8px 18px;border-radius:999px;margin-bottom:32px;text-transform:uppercase;border:1px solid rgba(196,99,58,.25);}
.snev-title{font-size:72px;font-weight:500;letter-spacing:-.025em;line-height:1.05;margin:0 0 28px;color:var(--paper);max-width:880px;margin-left:auto;margin-right:auto;}
.snev-title em{font-weight:700;color:var(--accent-soft);}
.snev-subtitle{font-size:19px;color:rgba(244,237,224,.7);max-width:600px;margin:0 auto 56px;line-height:1.7;}
/* Date display block */
.snev-datebox{display:inline-flex;align-items:stretch;gap:0;background:rgba(244,237,224,.04);border:1px solid rgba(244,237,224,.12);border-radius:6px;backdrop-filter:blur(20px);padding:0;margin-bottom:48px;flex-wrap:wrap;justify-content:center;}
.snev-datebox-cell{padding:24px 32px;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:140px;}
.snev-datebox-cell + .snev-datebox-cell{border-left:1px solid rgba(244,237,224,.12);}
.snev-datebox-lbl{font-size:11px;font-weight:600;letter-spacing:.18em;color:var(--accent-soft);text-transform:uppercase;}
.snev-datebox-val{font-family:Charter,"Iowan Old Style",Georgia,serif;font-size:22px;color:var(--paper);font-weight:500;letter-spacing:-.01em;font-feature-settings:"onum";line-height:1.2;}
.snev-datebox-val small{font-size:14px;color:rgba(244,237,224,.6);font-weight:400;display:block;margin-top:2px;}
.snev-cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.snev-btn{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;border-radius:4px;font-size:15px;font-weight:500;cursor:pointer;transition:all .2s ease;letter-spacing:.02em;border:0;}
.snev-wrap a.snev-btn-primary{background:#c4633a;color:#f4ede0;}
.snev-wrap a.snev-btn-primary:hover{background:#d97f54;color:#f4ede0;}
.snev-wrap a.snev-btn-ghost{background:transparent;color:#f4ede0;border:1px solid rgba(244,237,224,.3);}
.snev-wrap a.snev-btn-ghost:hover{border-color:#c4633a;color:#d97f54;}
.snev-wrap a.snev-btn-light{background:#1a1d2e;color:#f4ede0;}
.snev-wrap a.snev-btn-light:hover{background:#c4633a;color:#f4ede0;}
.snev-spots{margin-top:36px;font-size:13px;color:rgba(244,237,224,.55);letter-spacing:.05em;}
.snev-spots strong{color:var(--accent-soft);font-weight:600;}
/* ─── Section base ─────────────────────────────────── */
.snev-section{padding:112px 0;}
.snev-section-head{text-align:center;margin-bottom:80px;}
.snev-section-head .snev-eyebrow{display:block;margin-bottom:14px;}
.snev-h2{font-size:48px;font-weight:500;letter-spacing:-.025em;margin:0 0 16px;line-height:1.15;color:#1c1917;}
.snev-h2 em{font-weight:700;color:var(--accent);}
.snev-h2-sub{color:var(--text-mid);font-size:17px;max-width:560px;margin:0 auto;line-height:1.7;}
/* ─── Highlights ───────────────────────────────────── */
.snev-hl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line);}
.snev-hl{padding:48px 28px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);}
.snev-hl:last-child{border-right:0;}
.snev-hl-num{font-family:Charter,Georgia,serif;font-size:13px;color:var(--accent);letter-spacing:.05em;margin-bottom:24px;font-feature-settings:"onum";}
.snev-hl-title{font-family:Charter,"Iowan Old Style",Georgia,serif;font-size:21px;font-weight:500;margin:0 0 10px;color:#1c1917;letter-spacing:-.015em;line-height:1.3;}
.snev-hl-desc{font-size:14px;color:var(--text-mid);margin:0;line-height:1.7;}
/* ─── Audience ─────────────────────────────────────── */
.snev-aud{background:var(--paper-deep);}
.snev-aud-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.snev-aud-img{aspect-ratio:4/5;background:linear-gradient(135deg,#d4a890 0%,#c4633a 100%);overflow:hidden;border-radius:2px;position:relative;}
.snev-aud-img img{width:100%;height:100%;object-fit:cover;}
.snev-aud-img::after{content:"";position:absolute;inset:0;border:1px solid rgba(0,0,0,.05);}
.snev-aud-list{list-style:none;padding:0;margin:32px 0 0;}
.snev-aud-item{padding:20px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:60px 1fr;gap:20px;align-items:start;}
.snev-aud-item:first-child{border-top:0;padding-top:0;}
.snev-aud-icon{font-family:Charter,"Iowan Old Style",Georgia,serif;font-size:32px;font-weight:500;color:var(--accent);line-height:1;}
.snev-aud-h3{font-family:Charter,"Iowan Old Style",Georgia,serif;font-size:19px;font-weight:500;margin:0 0 4px;color:#1c1917;letter-spacing:-.015em;}
.snev-aud-desc{font-size:14px;color:var(--text-mid);margin:0;line-height:1.65;}
.snev-aud-not{margin-top:32px;padding:20px;background:var(--paper);border-left:3px solid var(--accent);font-size:14px;color:var(--text-mid);line-height:1.65;}
.snev-aud-not strong{color:#1c1917;font-weight:600;display:block;margin-bottom:6px;font-family:Charter,Georgia,serif;}
/* ─── Agenda ───────────────────────────────────────── */
.snev-agenda-list{max-width:760px;margin:0 auto;}
.snev-agenda-item{display:grid;grid-template-columns:140px 1fr;gap:32px;padding:32px 0;border-bottom:1px solid var(--line);align-items:start;}
.snev-agenda-item:first-child{border-top:1px solid var(--line);}
.snev-agenda-time{font-family:Charter,"Iowan Old Style",Georgia,serif;font-size:24px;font-weight:500;color:var(--accent);font-feature-settings:"onum";letter-spacing:-.015em;line-height:1.3;}
.snev-agenda-h3{font-family:Charter,"Iowan Old Style",Georgia,serif;font-size:21px;font-weight:500;margin:0 0 8px;color:#1c1917;letter-spacing:-.015em;line-height:1.3;}
.snev-agenda-desc{font-size:15px;color:var(--text-mid);margin:0 0 8px;line-height:1.7;}
.snev-agenda-by{font-size:12px;color:var(--accent);letter-spacing:.05em;font-weight:600;text-transform:uppercase;}
/* ─── Speakers ─────────────────────────────────────── */
.snev-sp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;}
.snev-sp{text-align:center;}
.snev-sp-photo{aspect-ratio:1;border-radius:50%;margin:0 auto 24px;background:linear-gradient(135deg,#d4a890 0%,#c4633a 100%);overflow:hidden;max-width:200px;position:relative;}
.snev-sp-photo img{width:100%;height:100%;object-fit:cover;}
.snev-sp-photo::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid rgba(0,0,0,.05);}
.snev-sp-name{font-family:Charter,"Iowan Old Style",Georgia,serif;font-size:24px;font-weight:500;margin:0 0 6px;color:#1c1917;letter-spacing:-.015em;}
.snev-sp-title{font-size:13px;color:var(--accent);font-weight:600;margin:0 0 16px;letter-spacing:.05em;}
.snev-sp-bio{font-size:14px;color:var(--text-mid);margin:0;line-height:1.7;max-width:280px;margin-left:auto;margin-right:auto;}
.snev-sp-meta{margin-top:16px;font-size:12px;color:var(--text-soft);letter-spacing:.05em;}
/* ─── Past events gallery ──────────────────────────── */
.snev-gallery{background:var(--paper-deep);}
.snev-gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.snev-gal-item{aspect-ratio:4/3;background:linear-gradient(135deg,#d4a890 0%,#8a4a25 100%);overflow:hidden;border-radius:2px;position:relative;transition:transform .25s ease;}
.snev-gal-item:hover{transform:scale(1.02);}
.snev-gal-item img{width:100%;height:100%;object-fit:cover;}
.snev-gal-cap{display:block;text-align:center;margin-top:16px;font-size:13px;color:var(--text-soft);letter-spacing:.02em;}
.snev-gal-meta{text-align:center;margin-top:32px;font-size:14px;color:var(--text-mid);}
.snev-gal-meta strong{color:#1c1917;font-family:Charter,Georgia,serif;font-weight:500;}
/* ─── Testimonials (學員回饋) ───────────────────────── */
.snev-tn-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:48px;}
.snev-tn{padding:32px;background:var(--paper);border:1px solid var(--line);border-radius:6px;transition:border-color .2s ease;}
.snev-tn:hover{border-color:var(--accent);}
.snev-tn-rate{font-family:Charter,Georgia,serif;color:var(--accent);font-size:16px;letter-spacing:.15em;margin-bottom:18px;}
.snev-tn-quote{font-family:Charter,"Iowan Old Style",Georgia,serif;font-size:18px;color:#1c1917;line-height:1.6;margin:0 0 24px;letter-spacing:-.005em;}
.snev-tn-author{display:flex;align-items:center;gap:14px;padding-top:20px;border-top:1px solid var(--line);}
.snev-tn-avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#d4a890 0%,#8a4a25 100%);display:flex;align-items:center;justify-content:center;color:var(--paper);font-family:Charter,Georgia,serif;font-size:17px;font-weight:500;}
.snev-tn-name{font-weight:500;font-size:15px;letter-spacing:-.005em;}
.snev-tn-role{color:var(--text-soft);font-size:13px;letter-spacing:.02em;margin-top:2px;}
/* ─── Tickets ──────────────────────────────────────── */
.snev-tk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.snev-tk{padding:36px 28px;background:var(--paper);border:1px solid var(--line);border-radius:6px;display:flex;flex-direction:column;}
.snev-tk-feature{border-color:#1c1917;position:relative;background:#1c1917;color:var(--paper);}
.snev-tk-feature::before{content:"最熱賣";position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--accent);color:var(--paper);font-size:11px;letter-spacing:.15em;padding:6px 14px;border-radius:999px;font-weight:600;}
.snev-tk-name{font-family:Charter,"Iowan Old Style",Georgia,serif;font-size:24px;font-weight:500;margin:0 0 6px;letter-spacing:-.015em;color:#1c1917;}
.snev-tk-feature .snev-tk-name{color:var(--paper);}
.snev-tk-tag{font-size:13px;color:var(--text-soft);margin:0 0 24px;letter-spacing:.02em;}
.snev-tk-feature .snev-tk-tag{color:rgba(244,237,224,.65);}
.snev-tk-price{display:flex;align-items:baseline;gap:8px;margin:0 0 4px;}
.snev-tk-price-curr{font-family:Charter,Georgia,serif;font-size:18px;color:var(--text-mid);}
.snev-tk-feature .snev-tk-price-curr{color:rgba(244,237,224,.7);}
.snev-tk-price-num{font-family:Charter,"Iowan Old Style",Georgia,serif;font-size:48px;font-weight:500;color:#1c1917;letter-spacing:-.03em;line-height:1;font-variant-numeric:oldstyle-nums tabular-nums;}
.snev-tk-feature .snev-tk-price-num{color:var(--paper);}
.snev-tk-deadline{font-size:12px;color:var(--accent);margin:0 0 28px;font-weight:600;letter-spacing:.05em;}
.snev-tk-feature .snev-tk-deadline{color:var(--accent-soft);}
.snev-tk-list{list-style:none;padding:0;margin:0 0 28px;font-size:14px;}
.snev-tk-list li{padding:9px 0 9px 24px;color:var(--text-mid);position:relative;line-height:1.5;}
.snev-tk-feature .snev-tk-list li{color:rgba(244,237,224,.85);}
.snev-tk-list li::before{content:"+";position:absolute;left:0;color:var(--accent);font-weight:600;}
.snev-tk-feature .snev-tk-list li::before{color:var(--accent-soft);}
.snev-tk-cta{display:block;text-align:center;padding:13px;border-radius:4px;font-size:14px;font-weight:500;background:var(--paper-deep);color:#1c1917;transition:all .2s ease;letter-spacing:.02em;border:1px solid var(--line);margin-top:auto;}
.snev-wrap a.snev-tk-cta:hover{background:#1c1917;color:var(--paper);border-color:#1c1917;}
.snev-tk-feature .snev-tk-cta{background:var(--accent);color:var(--paper);border-color:var(--accent);}
.snev-wrap .snev-tk-feature a.snev-tk-cta:hover{background:var(--accent-soft);border-color:var(--accent-soft);}
/* ─── Sponsors ─────────────────────────────────────── */
.snev-sp-section{padding:80px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.snev-sp-label{text-align:center;margin-bottom:32px;color:var(--text-soft);font-size:13px;letter-spacing:.12em;text-transform:uppercase;}
.snev-sp-grid-logo{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;align-items:center;}
.snev-sp-logo{font-family:Charter,"Iowan Old Style",Georgia,serif;font-size:18px;font-weight:500;text-align:center;color:var(--text-mid);opacity:.7;letter-spacing:-.01em;padding:12px 0;transition:opacity .2s ease;}
.snev-sp-logo:hover{opacity:1;color:#1c1917;}
/* ─── FAQ ──────────────────────────────────────────── */
.snev-faq-list{}
.snev-faq-item{border-top:1px solid var(--line);padding:28px 0;}
.snev-faq-item:last-child{border-bottom:1px solid var(--line);}
.snev-faq-q{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:start;}
.snev-faq-q-text{font-family:Charter,"Iowan Old Style",Georgia,serif;font-size:20px;font-weight:500;color:#1c1917;letter-spacing:-.015em;line-height:1.4;margin:0;}
.snev-faq-q-num{font-family:Charter,Georgia,serif;font-size:13px;color:var(--accent);letter-spacing:.05em;padding-top:6px;}
.snev-faq-a{margin:12px 0 0;color:var(--text-mid);font-size:15px;line-height:1.75;}
/* ─── Final CTA ────────────────────────────────────── */
.snev-final{padding:128px 0;background:var(--ink);color:var(--paper);text-align:center;position:relative;overflow:hidden;}
.snev-final::before{content:"";position:absolute;bottom:-50%;left:-10%;width:60%;height:120%;background:radial-gradient(ellipse at center,rgba(196,99,58,.12) 0%,transparent 60%);pointer-events:none;}
.snev-final-inner{position:relative;z-index:1;}
.snev-final .snev-eyebrow{color:var(--accent-soft);}
.snev-final h2{font-family:Charter,"Iowan Old Style",Georgia,serif;font-size:56px;font-weight:500;margin:18px 0 20px;letter-spacing:-.025em;line-height:1.1;color:var(--paper);}
.snev-final h2 em{font-weight:700;color:var(--accent-soft);}
.snev-final p{font-size:17px;color:rgba(244,237,224,.7);margin:0 auto 36px;max-width:520px;line-height:1.7;}
.snev-notes{margin:48px auto 0;padding-top:36px;border-top:1px solid rgba(244,237,224,.15);font-size:13px;color:rgba(244,237,224,.55);line-height:2;max-width:680px;letter-spacing:.02em;}
.snev-notes strong{color:rgba(244,237,224,.85);font-weight:600;}
@media(max-width:880px){
.snev-hero{padding:80px 0 80px;}
.snev-title{font-size:42px;}
.snev-h2,.snev-final h2{font-size:32px;}
.snev-datebox-cell + .snev-datebox-cell{border-left:0;border-top:1px solid rgba(244,237,224,.12);}
.snev-datebox{flex-direction:column;}
.snev-hl-grid,.snev-tn-grid,.snev-tk-grid,.snev-aud-grid{grid-template-columns:1fr;gap:40px;}
.snev-hl{border-right:0;}
.snev-sp-grid{grid-template-columns:1fr;gap:48px;}
.snev-gal-grid{grid-template-columns:1fr;}
.snev-sp-grid-logo{grid-template-columns:repeat(2,1fr);gap:32px;}
.snev-section,.snev-final{padding:72px 0;}
.snev-agenda-item{grid-template-columns:1fr;gap:6px;}
.snev-container,.snev-container-narrow{padding:0 24px;}
}
</style>
<div class="snev-wrap">
<!-- HERO -->
<section class="snev-hero">
<div class="snev-container snev-hero-inner">
<div class="snev-tag">2026 春季工作坊</div>
<h2 class="snev-title snev-serif">活動主標題：<em>用一句話</em>說明參加者帶走什麼</h2>
<p class="snev-subtitle">副標：兩句話講活動規模、定位、目標客群。寫得越具體越好。</p>
<div class="snev-datebox">
<div class="snev-datebox-cell">
<span class="snev-datebox-lbl">Date</span>
<span class="snev-datebox-val">2026.05.20<small>星期三</small></span>
</div>
<div class="snev-datebox-cell">
<span class="snev-datebox-lbl">Time</span>
<span class="snev-datebox-val">14:00 – 17:00<small>含中場休息</small></span>
</div>
<div class="snev-datebox-cell">
<span class="snev-datebox-lbl">Venue</span>
<span class="snev-datebox-val">台北市信義區<small>線上同步</small></span>
</div>
</div>
<div class="snev-cta-row">
<a href="#tickets" class="snev-btn snev-btn-primary">立即報名 →</a>
<a href="#agenda" class="snev-btn snev-btn-ghost">查看完整議程</a>
</div>
<div class="snev-spots">限額 50 人 <strong>· 剩餘 18 個名額 ·</strong> 報名截止 2026.05.15</div>
</div>
</section>
<!-- HIGHLIGHTS -->
<section class="snev-section">
<div class="snev-container">
<div class="snev-section-head">
<span class="snev-eyebrow">Why Join</span>
<h2 class="snev-h2 snev-serif">為什麼<em>你應該</em>參加</h2>
<p class="snev-h2-sub">用 4 個重點說明參加者離開時帶走什麼具體價值。</p>
</div>
<div class="snev-hl-grid">
<div class="snev-hl">
<div class="snev-hl-num">01</div>
<h3 class="snev-hl-title">具體技能</h3>
<p class="snev-hl-desc">會場帶走的具體可實作技能或方法。</p>
</div>
<div class="snev-hl">
<div class="snev-hl-num">02</div>
<h3 class="snev-hl-title">人脈連結</h3>
<p class="snev-hl-desc">會在現場遇到什麼類型的人、產業組合。</p>
</div>
<div class="snev-hl">
<div class="snev-hl-num">03</div>
<h3 class="snev-hl-title">實體與數位資源</h3>
<p class="snev-hl-desc">講義、模板、工具包、課後支援群組。</p>
</div>
<div class="snev-hl">
<div class="snev-hl-num">04</div>
<h3 class="snev-hl-title">真實案例</h3>
<p class="snev-hl-desc">講者親自帶過的實際專案，不是泛泛理論。</p>
</div>
</div>
</div>
</section>
<!-- AUDIENCE -->
<section class="snev-section snev-aud">
<div class="snev-container">
<div class="snev-section-head">
<span class="snev-eyebrow">Who is this for</span>
<h2 class="snev-h2 snev-serif">這場活動<em>適合誰</em></h2>
<p class="snev-h2-sub">幫你判斷自己適不適合參加，避免來了才發現不對胃口。</p>
</div>
<div class="snev-aud-grid">
<div class="snev-aud-img">
<img src="https://placehold.co/520x650/d4a890/8a4a25?text=Audience" alt="目標參加者示意">
</div>
<div>
<ul class="snev-aud-list">
<li class="snev-aud-item">
<div class="snev-aud-icon">A</div>
<div>
<h3 class="snev-aud-h3">族群一</h3>
<p class="snev-aud-desc">具體描述：例如「2-5 年經驗的設計師，想轉型做品牌專案」。</p>
</div>
</li>
<li class="snev-aud-item">
<div class="snev-aud-icon">B</div>
<div>
<h3 class="snev-aud-h3">族群二</h3>
<p class="snev-aud-desc">具體描述：例如「正在自己創業、需要建立行銷打法的創辦人」。</p>
</div>
</li>
<li class="snev-aud-item">
<div class="snev-aud-icon">C</div>
<div>
<h3 class="snev-aud-h3">族群三</h3>
<p class="snev-aud-desc">具體描述：例如「品牌端 PM，想理解講者方法論並帶回團隊」。</p>
</div>
</li>
</ul>
<div class="snev-aud-not">
<strong>不適合：</strong>還在純學習階段、沒有實際案例可帶來討論的人；想找系統性入門課程的初學者建議先參考線上課程。
</div>
</div>
</div>
</div>
</section>
<!-- AGENDA -->
<section id="agenda" class="snev-section">
<div class="snev-container">
<div class="snev-section-head">
<span class="snev-eyebrow">Agenda</span>
<h2 class="snev-h2 snev-serif">當天議程</h2>
<p class="snev-h2-sub">六個段落、3 小時、含中場休息與小組演練。</p>
</div>
<div class="snev-agenda-list">
<div class="snev-agenda-item">
<div class="snev-agenda-time">14:00</div>
<div>
<h3 class="snev-agenda-h3">開場與暖身介紹</h3>
<p class="snev-agenda-desc">講者自介、學員快速互相認識、活動規則說明。</p>
<span class="snev-agenda-by">主持人 · 講者 A</span>
</div>
</div>
<div class="snev-agenda-item">
<div class="snev-agenda-time">14:20</div>
<div>
<h3 class="snev-agenda-h3">主題單元 一：標題</h3>
<p class="snev-agenda-desc">這個單元教什麼、學員會學到的具體 takeaway，建議寫一句結論。</p>
<span class="snev-agenda-by">講者 A</span>
</div>
</div>
<div class="snev-agenda-item">
<div class="snev-agenda-time">15:10</div>
<div>
<h3 class="snev-agenda-h3">中場休息與交流</h3>
<p class="snev-agenda-desc">提供茶點，自由交流。</p>
</div>
</div>
<div class="snev-agenda-item">
<div class="snev-agenda-time">15:30</div>
<div>
<h3 class="snev-agenda-h3">主題單元 二：標題</h3>
<p class="snev-agenda-desc">這個單元教什麼、學員會學到的具體 takeaway。</p>
<span class="snev-agenda-by">講者 B</span>
</div>
</div>
<div class="snev-agenda-item">
<div class="snev-agenda-time">16:20</div>
<div>
<h3 class="snev-agenda-h3">實戰演練與 Q&A</h3>
<p class="snev-agenda-desc">小組練習與講者現場回應問題。</p>
<span class="snev-agenda-by">全體講者</span>
</div>
</div>
<div class="snev-agenda-item">
<div class="snev-agenda-time">17:00</div>
<div>
<h3 class="snev-agenda-h3">結束與自由交流</h3>
<p class="snev-agenda-desc">活動結束，會留 30 分鐘讓學員交換聯絡方式。</p>
</div>
</div>
</div>
</div>
</section>
<!-- SPEAKERS -->
<section class="snev-section">
<div class="snev-container">
<div class="snev-section-head">
<span class="snev-eyebrow">Speakers</span>
<h2 class="snev-h2 snev-serif">講者介紹</h2>
<p class="snev-h2-sub">每位講者都帶過至少 50+ 場類似主題的工作坊或專案。</p>
</div>
<div class="snev-sp-grid">
<div class="snev-sp">
<div class="snev-sp-photo"><img src="https://placehold.co/240x240/d4a890/7a3a1d?text=A" alt="講者 A"></div>
<h3 class="snev-sp-name">講者姓名</h3>
<div class="snev-sp-title">職稱 · 公司</div>
<p class="snev-sp-bio">講者在這個領域的代表作或代表經歷，30 字內。</p>
<div class="snev-sp-meta">講題：主題單元一</div>
</div>
<div class="snev-sp">
<div class="snev-sp-photo"><img src="https://placehold.co/240x240/d4a890/7a3a1d?text=B" alt="講者 B"></div>
<h3 class="snev-sp-name">講者姓名</h3>
<div class="snev-sp-title">職稱 · 公司</div>
<p class="snev-sp-bio">講者在這個領域的代表作或代表經歷，30 字內。</p>
<div class="snev-sp-meta">講題：主題單元二</div>
</div>
<div class="snev-sp">
<div class="snev-sp-photo"><img src="https://placehold.co/240x240/d4a890/7a3a1d?text=C" alt="講者 C"></div>
<h3 class="snev-sp-name">講者姓名</h3>
<div class="snev-sp-title">職稱 · 公司</div>
<p class="snev-sp-bio">講者在這個領域的代表作或代表經歷，30 字內。</p>
<div class="snev-sp-meta">講題：實戰演練主持</div>
</div>
</div>
</div>
</section>
<!-- GALLERY -->
<section class="snev-section snev-gallery">
<div class="snev-container">
<div class="snev-section-head">
<span class="snev-eyebrow">Past Events</span>
<h2 class="snev-h2 snev-serif">往期回顧</h2>
<p class="snev-h2-sub">同系列工作坊已舉辦過 12 場，累計 600+ 學員參與。</p>
</div>
<div class="snev-gal-grid">
<div class="snev-gal-item"><img src="https://placehold.co/480x360/d4a890/8a4a25?text=Event+I" alt="活動照片 1"></div>
<div class="snev-gal-item"><img src="https://placehold.co/480x360/c9826a/8a4a25?text=Event+II" alt="活動照片 2"></div>
<div class="snev-gal-item"><img src="https://placehold.co/480x360/d4a890/8a4a25?text=Event+III" alt="活動照片 3"></div>
<div class="snev-gal-item"><img src="https://placehold.co/480x360/c9826a/8a4a25?text=Event+IV" alt="活動照片 4"></div>
<div class="snev-gal-item"><img src="https://placehold.co/480x360/d4a890/8a4a25?text=Event+V" alt="活動照片 5"></div>
<div class="snev-gal-item"><img src="https://placehold.co/480x360/c9826a/8a4a25?text=Event+VI" alt="活動照片 6"></div>
</div>
<div class="snev-gal-meta">已舉辦 <strong>12</strong> 場 · 累計 <strong>600+</strong> 學員 · 平均評分 <strong>4.8 ／ 5</strong></div>
</div>
</section>
<!-- TESTIMONIALS -->
<section class="snev-section">
<div class="snev-container">
<div class="snev-section-head">
<span class="snev-eyebrow">Testimonials</span>
<h2 class="snev-h2 snev-serif">學員回饋</h2>
<p class="snev-h2-sub">這些是過往場次學員的真實回饋。</p>
</div>
<div class="snev-tn-grid">
<div class="snev-tn">
<div class="snev-tn-rate">★ ★ ★ ★ ★</div>
<p class="snev-tn-quote">「具體回饋：我從這個工作坊帶走的最大收穫是 [具體 takeaway]，回去公司後立刻 [具體應用]。」</p>
<div class="snev-tn-author">
<div class="snev-tn-avatar">王</div>
<div><div class="snev-tn-name">王同學</div><div class="snev-tn-role">XX 公司 行銷</div></div>
</div>
</div>
<div class="snev-tn">
<div class="snev-tn-rate">★ ★ ★ ★ ★</div>
<p class="snev-tn-quote">「具體回饋：講者準備的案例都很扎實，現場 Q&A 也回答得很到位，沒有官腔。」</p>
<div class="snev-tn-author">
<div class="snev-tn-avatar">李</div>
<div><div class="snev-tn-name">李學員</div><div class="snev-tn-role">YY 設計師</div></div>
</div>
</div>
<div class="snev-tn">
<div class="snev-tn-rate">★ ★ ★ ★ ★</div>
<p class="snev-tn-quote">「具體回饋：原本擔心 3 小時太久會悶，結果一晃就過了，最有價值的是後段的實戰演練。」</p>
<div class="snev-tn-author">
<div class="snev-tn-avatar">陳</div>
<div><div class="snev-tn-name">陳學員</div><div class="snev-tn-role">ZZ PM</div></div>
</div>
</div>
<div class="snev-tn">
<div class="snev-tn-rate">★ ★ ★ ★ ★</div>
<p class="snev-tn-quote">「具體回饋：認識了同產業 3 個聯絡人，課後還在 LINE 群繼續交流，比課程本身還超值。」</p>
<div class="snev-tn-author">
<div class="snev-tn-avatar">張</div>
<div><div class="snev-tn-name">張學員</div><div class="snev-tn-role">AA 顧問</div></div>
</div>
</div>
</div>
</div>
</section>
<!-- TICKETS -->
<section id="tickets" class="snev-section">
<div class="snev-container">
<div class="snev-section-head">
<span class="snev-eyebrow">Tickets</span>
<h2 class="snev-h2 snev-serif">票種與價格</h2>
<p class="snev-h2-sub">早鳥優惠 5/1 截止，名額限 30 張。</p>
</div>
<div class="snev-tk-grid">
<div class="snev-tk">
<h3 class="snev-tk-name">早鳥票</h3>
<p class="snev-tk-tag">5/1 前報名享優惠</p>
<div class="snev-tk-price"><span class="snev-tk-price-curr">NT$</span><span class="snev-tk-price-num">1,800</span></div>
<p class="snev-tk-deadline">原價 NT$2,500 · 限額 30 張</p>
<ul class="snev-tk-list">
<li>全程參與 3 小時</li>
<li>講義 PDF</li>
<li>茶點與飲料</li>
<li>線上同步觀看權限</li>
</ul>
<a href="#" class="snev-tk-cta">立即報名</a>
</div>
<div class="snev-tk snev-tk-feature">
<h3 class="snev-tk-name">一般票</h3>
<p class="snev-tk-tag">5/1 後或早鳥售完即啟用</p>
<div class="snev-tk-price"><span class="snev-tk-price-curr">NT$</span><span class="snev-tk-price-num">2,500</span></div>
<p class="snev-tk-deadline">截止 5/15 · 含完整體驗</p>
<ul class="snev-tk-list">
<li>全程參與 3 小時</li>
<li>講義 PDF</li>
<li>茶點與飲料</li>
<li>線上同步觀看權限</li>
<li>課後 30 天 Slack 支援</li>
</ul>
<a href="#" class="snev-tk-cta">立即報名</a>
</div>
<div class="snev-tk">
<h3 class="snev-tk-name">VIP 套票</h3>
<p class="snev-tk-tag">含活動後 1v1 諮詢 30 分</p>
<div class="snev-tk-price"><span class="snev-tk-price-curr">NT$</span><span class="snev-tk-price-num">5,800</span></div>
<p class="snev-tk-deadline">限額 5 名 · 報名後另約</p>
<ul class="snev-tk-list">
<li>一般票所有內容</li>
<li>VIP 前排座位</li>
<li>講者一對一 30 分</li>
<li>講者線上社群終身席位</li>
</ul>
<a href="#" class="snev-tk-cta">立即報名</a>
</div>
</div>
</div>
</section>
<!-- SPONSORS -->
<section class="snev-sp-section">
<div class="snev-container">
<div class="snev-sp-label">主辦與協力夥伴</div>
<div class="snev-sp-grid-logo">
<div class="snev-sp-logo">主辦單位</div>
<div class="snev-sp-logo">夥伴 A</div>
<div class="snev-sp-logo">夥伴 B</div>
<div class="snev-sp-logo">夥伴 C</div>
<div class="snev-sp-logo">媒體夥伴</div>
</div>
</div>
</section>
<!-- FAQ -->
<section class="snev-section">
<div class="snev-container-narrow">
<div class="snev-section-head">
<span class="snev-eyebrow">FAQ</span>
<h2 class="snev-h2 snev-serif">報名常見問題</h2>
</div>
<div class="snev-faq-list">
<div class="snev-faq-item">
<div class="snev-faq-q"><h3 class="snev-faq-q-text">報名後收到什麼？</h3><span class="snev-faq-q-num">01</span></div>
<p class="snev-faq-a">報名成功立即寄出確認信，內含時間地點、線上同步連結（活動前 1 天再次寄送）、行前準備清單。</p>
</div>
<div class="snev-faq-item">
<div class="snev-faq-q"><h3 class="snev-faq-q-text">可以開立發票或收據嗎？</h3><span class="snev-faq-q-num">02</span></div>
<p class="snev-faq-a">可以。報名表單填寫公司抬頭與統編即可，活動結束後 7 個工作天內寄出電子發票。</p>
</div>
<div class="snev-faq-item">
<div class="snev-faq-q"><h3 class="snev-faq-q-text">退費政策？</h3><span class="snev-faq-q-num">03</span></div>
<p class="snev-faq-a">活動前 7 天可全額退費；活動前 3-7 天退 50%；3 天內恕不退費，可改線上同步觀看或轉讓給他人。</p>
</div>
<div class="snev-faq-item">
<div class="snev-faq-q"><h3 class="snev-faq-q-text">線上同步跟現場有什麼差別？</h3><span class="snev-faq-q-num">04</span></div>
<p class="snev-faq-a">線上同步可以參與所有單元與 Q&A，但實戰演練是分組進行，線上學員會分到獨立的線上小組。</p>
</div>
<div class="snev-faq-item">
<div class="snev-faq-q"><h3 class="snev-faq-q-text">活動會錄影嗎？課後可以重看嗎？</h3><span class="snev-faq-q-num">05</span></div>
<p class="snev-faq-a">會錄影，所有參加者（含現場與線上）活動後 7 天會收到回放連結，30 天內可無限次觀看。</p>
</div>
<div class="snev-faq-item">
<div class="snev-faq-q"><h3 class="snev-faq-q-text">需要先準備什麼嗎？</h3><span class="snev-faq-q-num">06</span></div>
<p class="snev-faq-a">活動前 3 天會寄送行前包，內含 1 份問卷（5 分鐘填完）與 1 份預習材料（10 分鐘看完）。</p>
</div>
</div>
</div>
</section>
<!-- FINAL CTA -->
<section class="snev-final">
<div class="snev-container snev-final-inner">
<span class="snev-eyebrow">Reserve your seat</span>
<h2 class="snev-serif">準備好<em>加入</em>了嗎？</h2>
<p>名額有限，建議現在就報名。報名截止：2026.05.15。</p>
<a href="#tickets" class="snev-btn snev-btn-primary">立即報名 →</a>
<div class="snev-notes">
<strong>報名須知：</strong>早鳥優惠 NT$1,800（5/01 前）／一般票 NT$2,500｜含茶點與講義｜活動前 7 天可全額退費，7 天內恕不退費｜報名後將寄送確認信與線上同步連結。
</div>
</div>
</section>
</div>圖片怎麼換#
模板裡的圖片都是 placehold.co 的佔位圖。要換成你的圖：先把圖片上傳到媒體庫拿到網址，再請 Claude 替換。詳見「上傳圖片到媒體庫，把網址貼回給 Claude」這篇教學。
想要更多客製怎麼辦#
- 加新區段：請 Claude 在 [指定位置] 加一個 [區段類型] 區塊
- 調順序：直接告訴 Claude「把方案區塊往前，放在 features 之後」
- 移除某個區段：說「拿掉 logo wall 區段」即可
- 整體重新調色：給 Claude 你的品牌主色 hex，請它套到所有 accent 色
模板的 CSS 結構鬆散且 scoped，AI 改起來不會壞。每次改完都建議在 Vibe 畫布的「預覽」模式先看過再儲存。