醫師的個人品牌力

請幫我建立一個簡單的網頁，上面顯示：

「你好，我是陳醫師，歡迎來到我的個人網站。」

背景用淺藍色，文字置中顯示，字體要大一點。

請做以下修改：

1. 背景改成漸層色，從淺藍色到白色
2. 加入一個副標題：「皮膚科專科醫師｜臺大醫院」
3. 在最下方加一個按鈕，寫「了解更多」，按鈕是深藍色的
4. 整體要有專業感，字體用無襯線體

你是一個專業的醫療網站設計師。

請幫我建立一個 [專科] 醫師的個人品牌網站。

醫師資訊：
- 姓名：[你的名字]
- 專科：[你的專科]
- 醫院：[你的醫院]

需要的區塊：
1. Hero：大標題 + 頭照 + 一句話定位
2. 關於我：學經歷
3. 專長與服務：治療項目
4. 衛教文章：文章列表
5. 預約聯絡：聯絡資訊與預約按鈕

風格：專業、值得信賴、[溫暖/冷靜/現代]。
配色：[你喜歡的顏色]。
必須支援手機瀏覽。

請幫我建立一個醫師個人品牌網站，使用單頁式設計（Single Page）。

我是一位皮膚科醫師，網站需要以下區塊：
1. Hero 首頁區：大標題、副標題、專業頭照位置
2. 關於我：學經歷介紹
3. 專長與服務：治療項目列表
4. 衛教文章：文章卡片列表
5. 預約聯絡：看診資訊與聯絡方式

風格要求：專業、乾淨、值得信賴的感覺。配色用深藍 #1B4F72 搭配白色，字體選擇有質感的無襯線體。要支援手機瀏覽（RWD）。

請在 Hero 區塊加入醫師照片（先用 placeholder 圖片），右側放以下資訊：

姓名：陳大明 醫師
職稱：皮膚科專科醫師

學歷：
- 臺灣大學醫學系畢業
- 臺大醫院皮膚科住院醫師

經歷：
- 臺大醫院皮膚科主治醫師
- 中華民國皮膚科專科醫師
- 亞洲皮膚科醫學會會員

風格維持專業感，照片要圓角處理。

請在「專長與服務」區塊加入以下項目，用卡片式排列（每排 3 個）：

1. 一般皮膚疾病 — 濕疹、蕁麻疹、異位性皮膚炎
2. 青春痘治療 — 粉刺、痘痘、痘疤治療
3. 皮膚腫瘤 — 良性與惡性皮膚腫瘤診斷與治療
4. 醫學美容 — 雷射、脈衝光、微整形諮詢
5. 乾癬治療 — 乾癬及自體免疫皮膚疾病
6. 兒童皮膚 — 嬰幼兒常見皮膚問題

每張卡片要有圖示（用 emoji 即可）、標題、簡短說明。hover 時要有淡淡的陰影效果。

請在「衛教文章」區塊加入 3 篇示範文章卡片：

1. 「換季皮膚癢？三招教你遠離濕疹」 — 2026/03/15
2. 「防曬乳怎麼選？皮膚科醫師的選購指南」 — 2026/02/28
3. 「青春痘反覆發作？可能是這些習慣害的」 — 2026/02/10

每張卡片要有日期、標題、簡短摘要（50 字以內）、「閱讀更多」連結。排列方式：三欄並排，手機版改為一欄。

請在最下方加入「預約聯絡」區塊：

看診資訊：
- 門診時間：週一至週五 9:00-12:00、14:00-17:00
- 地點：臺北市大安區信義路四段 123 號 5 樓
- 電話：02-2345-6789

加入兩個按鈕：
1.「線上預約」— 藍色底白字，連結先用 #
2.「LINE 諮詢」— 綠色底白字，連結先用 #

底部加入 Google Maps 嵌入區塊（用 placeholder）和簡單的 footer。

請做以下調整：

1. 整體配色改成更溫暖的感覺，主色用 #2C3E50，搭配淡金色 #D4A574 作為強調色
2. Hero 區塊的背景加一層淡淡的漸層效果
3. 所有區塊在滾動時要有淡入動畫
4. 按鈕 hover 時要有微微放大的效果
5. 整體間距再拉大一些，讓版面更有呼吸感

請幫這個網站加入基本的 SEO 設定：

1. title tag：「陳大明醫師｜臺北皮膚科推薦｜專業皮膚照護」
2. meta description：「陳大明醫師，臺大醫院皮膚科專科醫師，專精濕疹、青春痘、皮膚腫瘤治療。臺北大安區看診，歡迎線上預約。」
3. Open Graph 標籤（分享到社群時的預覽）
4. 結構化資料（Schema.org 的 Physician 類型）

請在網站頂部加入固定導覽列（sticky navbar）：

- 左側放醫師名字 logo：「陳大明醫師」
- 右側放錨點連結：關於我、專長服務、衛教專欄、預約聯絡
- 點擊後平滑滾動到對應區塊
- 手機版改成漢堡選單
- 滾動超過 Hero 區塊後，導覽列背景從透明變成白色

請加入以下功能：

1. 右下角固定的「回到頂部」按鈕
   - 滾動超過 300px 後才出現
   - 點擊後平滑滾動回頂部
   - 用圓形按鈕，箭頭朝上

2. 在 footer 加入社群連結圖示
   - Facebook、Instagram、LINE、YouTube
   - 用 SVG 圖示，hover 時變色
   - 排列在一行，間距適當

請幫我製作一個線上課程銷售頁。

課程名稱：「皮膚科醫師教你正確保養」線上課程
講師：陳大明醫師（皮膚科專科醫師，15 年臨床經驗）

目標受眾：25-45 歲，對保養有興趣但常被錯誤資訊困擾的人

頁面結構：
1. Hero：吸引人的大標題 + 課程主視覺
2. 痛點區：列出 3 個常見保養迷思
3. 課程介紹：6 堂課的大綱
4. 講師介紹：醫師經歷與專業背景
5. 學員見證：3 則推薦語
6. 價格方案：早鳥價 vs 原價
7. FAQ：5 個常見問題
8. 最後 CTA：報名按鈕

風格：專業但親切，配色用深藍 #1B4F72 搭配暖白 #F9F6F1。

請在銷售頁加入課程大綱區塊，列出 6 堂課：

第一堂：認識你的膚質 — 油性、乾性、混合性的差異
第二堂：清潔的正確觀念 — 過度清潔比不清潔更傷皮膚
第三堂：保濕的科學 — 成分解密與產品選擇
第四堂：防曬全攻略 — 室內也要防曬嗎？
第五堂：抗老保養入門 — 幾歲開始？用什麼？
第六堂：問題肌膚對策 — 痘痘、敏感、暗沉

每堂課用卡片呈現，包含堂數、標題、簡短說明。整體排列成 2 欄。

請在銷售頁加入社會證明區塊：

學員見證（3 則）：
1. 「上完課才知道以前的保養方式都是錯的！陳醫師用很白話的方式解釋，終於搞懂自己的膚質。」— 林小姐，32 歲
2. 「身為忙碌的上班族，這堂課讓我省下大量試錯的時間和金錢。」— 王先生，28 歲
3. 「推薦給所有被保養品搞得頭昏眼花的人，這是我上過最實用的課。」— 張小姐，40 歲

媒體報導 logos 區：顯示「曾受邀」的媒體名稱（健康2.0、TVBS、商業周刊、康健雜誌）

數據佐證：已有 2,000+ 學員、滿意度 4.9/5、完課率 92%

請加入價格方案區塊，呈現兩種方案：

方案一「基礎方案」：
- 價格：NT$ 1,990（原價 NT$ 3,600）
- 包含：6 堂線上影片課程、課程講義 PDF
- 按鈕文字：「立即報名」

方案二「VIP 方案」（推薦標籤）：
- 價格：NT$ 3,990（原價 NT$ 6,800）
- 包含：6 堂線上影片課程、課程講義 PDF、1 對 1 膚質諮詢 30 分鐘、專屬保養計畫
- 按鈕文字：「升級 VIP」

VIP 方案要用邊框或背景色突顯為推薦方案。

請在價格方案下方加入 FAQ 手風琴區塊，包含以下 5 個問題：

1. 「我完全沒有保養基礎，適合上這堂課嗎？」
2. 「課程可以看多久？有期限嗎？」
3. 「如果上完課覺得不適合，可以退費嗎？」
4. 「VIP 方案的 1 對 1 諮詢怎麼預約？」
5. 「課程內容會更新嗎？」

每個問題點擊後展開答案，使用手風琴（accordion）效果。

請在課程介紹和價格方案之間加入「適合誰上這堂課」區塊：

適合你，如果你是：
- 每天花很多錢買保養品，卻不確定適不適合自己
- 看了很多網紅推薦，越看越困惑
- 皮膚常常過敏、泛紅、長痘，找不到原因
- 想建立一套簡單有效的保養流程

不適合你，如果你：
- 已經有皮膚科醫師定期追蹤
- 期待這堂課能取代看診

用兩欄排列，左邊打勾（適合），右邊打叉（不適合）。

請在銷售頁的 Hero 區塊和價格區塊上方各加入一個倒數計時器：

- 顯示文字：「早鳥優惠倒數」
- 倒數到 2026 年 4 月 30 日 23:59
- 顯示 天:時:分:秒
- 用醒目但不刺眼的樣式
- 倒數結束後顯示「優惠已結束」

請幫我製作一個自費門診推廣頁面。

療程名稱：「高階全臉皮膚健檢」
費用：NT$ 3,500

頁面結構：
1. Hero：大標題「比你的保養品更值得投資的事」
2. 為什麼需要皮膚健檢：3 個原因
3. 檢查項目：皮膚鏡檢查、膚質分析、問題評估、保養建議
4. 流程說明：預約→檢查（30分鐘）→報告解說→保養計畫
5. 醫師介紹
6. 預約按鈕

風格：高端但不奢華，用深藍 + 金色強調。

請幫我撰寫一份「皮膚保養 10 大正確觀念」的衛教手冊內容：

格式：
- 每個觀念包含：標題、常見迷思、正確觀念說明（100 字以內）、一句話重點
- 總共 10 個觀念
- 開頭加入作者介紹和使用說明
- 結尾加入醫師聯絡資訊和預約連結

語氣要求：專業但親切，避免太多醫學術語，一般人看得懂。

請幫我製作一個名單磁鐵的 Landing Page。

免費資源：《皮膚科醫師的保養秘笈：10 個你一定要知道的正確觀念》PDF

頁面結構：
1. 大標題：「免費下載！皮膚科醫師的保養秘笈」
2. 副標題：「告別錯誤保養，讓皮膚科醫師教你正確觀念」
3. 左側：PDF 封面模擬圖 + 內容重點（5 個 bullet points）
4. 右側：Email 收集表單（姓名 + Email + 送出按鈕）
5. 底部：醫師簡介一行 + 隱私聲明

風格：乾淨、專業，背景淡色，表單區域要突出。按鈕用醒目的綠色。

請幫 Landing Page 的表單加入以下功能：

1. 表單驗證：Email 格式檢查，姓名不可為空
2. 送出後顯示感謝訊息：「感謝你！PDF 已寄送到你的信箱，請檢查收件匣（含垃圾郵件匣）。」
3. 加入 loading 動畫效果
4. 串接 Formspree（免費表單服務）：action 設為 https://formspree.io/f/YOUR_FORM_ID

另外，請在表單下方加入小字：「我們尊重你的隱私，不會將你的 Email 分享給第三方。」

請幫我製作一個感謝頁面（thank-you.html），在訪客留下 Email 後跳轉到這裡。

內容：
1. 大標題：「謝謝你！PDF 正在飛往你的信箱」
2. 提醒文字：「請檢查你的收件匣（也看一下垃圾郵件匣），PDF 將在 5 分鐘內送達。」
3. 加入下一步引導：「在等待的同時，歡迎追蹤我的社群」+ 社群連結按鈕
4. 底部加入「回到首頁」連結

風格與 Landing Page 一致。

請用 HTML + CSS 製作一個 PDF 封面的模擬圖，用在 Landing Page 上：

設計：
- 尺寸比例類似 A4
- 背景用漸層色（深藍到淺藍）
- 標題：「皮膚科醫師的保養秘笈」
- 副標題：「10 個你一定要知道的正確觀念」
- 底部放作者名字：「陳大明 醫師」
- 加入淡淡的裝飾圖案
- 微微傾斜 5 度，加上陰影效果

請幫我在個人網站的「預約聯絡」區塊加入線上預約功能：

1. 加入一個「線上預約門診」區塊，包含：
   - 標題：「線上預約門診」
   - 說明：「選擇方便的時段，我們會為您安排門診。」
   - 嵌入 Calendly 預約表單：<div class="calendly-inline-widget" data-url="https://calendly.com/YOUR_LINK" style="min-width:320px;height:630px;"></div>
   - 在 <head> 加入 Calendly 的 CSS 和 JS

2. 在預約表單上方加入看診須知：
   - 初診請提前 15 分鐘到
   - 請攜帶健保卡和身分證
   - 取消或更改請於 24 小時前通知

請幫我建立一個衛教文章 Blog 頁面（blog.html）：

頁面結構：
1. 頂部導覽列（連回首頁）
2. 頁面標題：「衛教專欄 — 陳醫師的皮膚小教室」
3. 文章分類標籤：全部、保養知識、疾病衛教、生活建議
4. 文章列表：卡片式排列，每張卡片包含文章圖片、日期、分類、標題、摘要
5. 先放入 6 篇示範文章
6. 底部分頁導覽

風格與首頁一致。點擊分類標籤可以篩選文章（用 JavaScript 實現）。

請幫我建立一個線上諮詢表單頁面：

表單欄位：
1. 姓名（必填）
2. 聯絡電話（必填）
3. Email（必填）
4. 想諮詢的問題類型（下拉選單：一般皮膚、青春痘、醫美、其他）
5. 症狀描述（多行文字輸入框）
6. 上傳照片（最多 3 張）
7. 方便聯絡的時間（勾選框：早上/下午/晚上）

加入表單驗證和送出後的感謝訊息。串接 Formspree。

請幫我建立一個病患常見問答頁面（faq.html）：

分類：
1. 看診相關（門診時間、掛號方式、費用等）
2. 皮膚保養（洗臉方式、防曬觀念、保濕建議）
3. 疾病相關（濕疹、青春痘、乾癬的常見問題）
4. 醫美相關（雷射、脈衝光的注意事項）

每個分類放 3 個問題，使用手風琴展開效果。
頂部加入搜尋框，可以搜尋問答內容。

請幫我建立一個健康講座報名頁面：

活動資訊：
- 講座名稱：「換季保養全攻略」免費健康講座
- 講師：陳大明醫師
- 時間：2026 年 5 月 10 日（六）14:00-16:00
- 地點：臺北市大安區某會議中心
- 名額：限 50 人

頁面結構：
1. 活動主視覺 + 標題
2. 講座大綱（4 個主題）
3. 講師介紹
4. 報名表單（姓名、Email、手機、你最想了解的問題）
5. 已報名人數顯示（營造急迫感）

請幫我撰寫一篇衛教文章，主題是「換季皮膚癢怎麼辦？」

文章結構：
1. 開頭：用常見場景引入（「每到換季，皮膚就開始癢⋯⋯」）
2. 原因說明：為什麼換季容易皮膚癢（3 個原因）
3. 居家照護：3 個日常保養建議
4. 何時該就醫：列出需要看醫師的警示信號
5. 結尾：一句話總結 + 預約連結

字數：800-1000 字
語氣：專業但白話，像在跟朋友聊天
格式：用 HTML 排版，適合放在 Blog 頁面

請幫我的醫師網站做 SEO 優化：

1. 每個區塊加入適當的 heading 層級（h1, h2, h3）
2. 所有圖片加入 alt 屬性
3. 加入 sitemap.xml
4. 加入 robots.txt
5. 加入 Open Graph 和 Twitter Card 標籤
6. 確保頁面載入速度最佳化（壓縮 CSS、延遲載入圖片）

關鍵字：皮膚科、臺北皮膚科、皮膚科推薦、陳大明醫師

請在我的網站所有頁面的 <head> 中加入 Google Analytics 4 追蹤碼：

GA4 Measurement ID：G-XXXXXXXXXX

同時請加入以下自訂事件追蹤：
1. 點擊「線上預約」按鈕
2. 點擊「LINE 諮詢」按鈕
3. 提交聯絡表單
4. 下載 PDF 資源

這樣我就能追蹤哪些按鈕最多人點擊。