紙筆記本著陸頁

紙筆記本著陸頁面

此技能可將任何產品的真實內容轉化為單一檔案的著陸頁面，採用溫暖、手作的「學校筆記本」視覺語言，同時仍給人冷靜且值得信賴的感覺。 參考建置為 example/index.html（Atlasio，一個虛構的留學德國平台，提供 TR/EN/DE 三語版本）。開始前請先開啟它； references/components.md 中存放了每個模式的即用型程式碼。screenshots/ 目錄顯示每個區塊應有的外觀。

如果使用者指出某個參考網站，請採用其風格，但切勿使用其標誌、插圖、產品照片、文案或商標。 請使用客戶自己的品牌名稱、內容和事實。

1. 設計前：閱讀真實網站

1. 開啟客戶的當前網站（以及他們分享的任何手冊/PDF），並提取真實內容：價值主張、 流程步驟、服務、帶有來源和日期的數字、推薦見證、常見問題解答、聯絡資訊。
2. 找到客戶的流程（例如「規劃 → 準備 → 申請 → 抵達」）。這將成為頁面的主軸：筆記本標籤、 階段面板、漫畫和文案都應計入相同的階段。如果客戶有手冊，其結構優先於網站的結構。
3. 記下你不得虛構的內容：價格、宣稱（「最佳」、「最便宜」）、統計數據、法律/簽證要求。 如果使用者要求隱藏價格，請用優惠用語（「超值優惠 ✦」、「取得報價 →」、「套裝福利 ✦」）取代， 而非虛構數字。官方金額（例如簽證所需的存款餘額）是事實而非價格；請保留並附上來源和日期。

2. 視覺 DNA（全部保留）

元素	規則
底色	奶油色紙張 #fdfbf9，切勿使用純白；次要色帶 #f6efea。刻意只使用一種淺色主題。
墨色	可可色 #2b1a07 用於文字，炭灰色 #171717 用於輪廓，柔和 #8a7b6a 用於小字。
強調色	標記橘 #ff6f1e 用於手寫文字、底線和頁尾。如果客戶本身的強調色是暖色系則可使用；否則保留橘色作為「標記」。
貼紙顏色	綠色 #22c55e、藍色 #3b82f6、粉紅 #ff66cf、便利貼黃 #fadb4b。每個插圖場景都使用其中一種顏色來標示其重點字詞。
顯示字體	圓潤、柔軟、略微歪斜的襯線字體，例如 Gelica 或 Recoleta（付費）。免費選擇：Fraunces 搭配 SOFT 100、WONK 1，字重 800–900。
內文 / UI 字體	Geist（或 Inter）用於列表、按鈕的小字、說明文字。襯線字體（Fraunces 400）用於副標題和引言。
手寫字體	Caveat（包含土耳其語/德語字形）。僅用於註解、便利貼、筆記本標籤、漫畫對話。切勿用於段落。
按鈕	「Dibs」按鈕：奶油色藥丸形狀，帶有 4px 奶油色外環、1.5px 炭灰色內邊框、襯線標籤、極小的陰影。
形狀	卡片圓角 12px，按鈕 20px，頁尾頂角 56px。輪廓線為 1.5–2px 炭灰色，如鋼筆筆觸。
陰影	柔和且低矮：0 2px 20px rgba(0,0,0,.06)。物體（筆記本、便利貼）下方有更長的投影。
導覽	無導覽列。左上角固定圓形標誌；右上角為語言切換、小型「登入」藥丸按鈕和 Dibs CTA。
英雄標題	小寫、巨大（clamp 60–112px）、兩行短句，前面加上橘色手寫問候語（「親愛的家長們，」）。

3. 區塊模式（選取、排序並填入真實內容）

大致按此順序使用。每個模式在 references/components.md 中都有現成的程式碼片段。

1. 英雄區 + 筆記本封面 – 問候語、小寫標題、一行副標題搭配手寫旁白 （「一個地方搞定。真的！」）、Dibs CTA、小型低調備註。右側：傾斜的筆記本。兩種封面選項：
   • 皮革筆記本，帶有白色姓名標籤（姓名 / 目標 / 學期 / 階段 1/4），透過範例使用者進行個人化設定；
   • 改編自客戶自身印刷材料的封面。如果他們有手冊、小冊子或傳單封面，請以 HTML/SVG 重新建置 在封面大小（container-query 單位）下，使網頁和印刷版本一致。範例使用「通往你未來的護照」 小冊子：海軍藍、雙金框、金色地球和飛機、橘色「在德國學習」色帶。
2. 滾動驅動筆記本 – 英雄筆記本在使用者滾動時移動（伸直、放大、置中），然後其 封面翻開以顯示歡迎頁面，頁面上有眼睛貼紙和「點擊開始！」。一個筆記本，一個連續動作。
3. 便利貼 – 置中襯線文字行，搭配一個拉長的字詞（「所～有～東西都在一個地方。」），以及 4 張旋轉的黃色便利貼， 上面有最有力的證明點。
4. 插圖場景 + 羅馬數字面板（2–3 個）– 滿版的 CSS/SVG 插圖描繪使用者的世界 （書桌、帶有飛機和天際線的天空、校園…）、一個奶油色面板，帶有襯線標題，其中關鍵字詞已上色、 一個在右邊緣編號為 I、II、III… 的功能列表，以及一個在點選項目時會變化的裝置模擬圖。 其中一個場景應承載客戶的階段流程（面板 = 階段，裝置 = 該階段的步驟 + 進度條）。
5. 塗鴉網格 – 3×3 網格，由手繪線條圖示和手寫標題組成；中央儲存格容納區塊標題。 適合用於服務 / 市集。價格或優惠文字以橘色手寫字體呈現。
6. 橫線紙列表 – 一張傾斜的紙張，帶有紅色邊線和藍色格線、手寫檢查清單（✓ 或 ✗）、 周圍有小貼紙標籤。適合用於需求、「包含項目」、「我們從不做的事」。
7. 彩色筆記本 – 3 本筆記本（雲紋藍、粉紅、鈷藍），帶有姓名標籤作為指南/產品的封面。
8. 漫畫 – 每個流程階段一個畫格、扁平 SVG 角色帶有炭灰色輪廓、自動調整大小的對話泡泡、 每個畫格下方有羅馬數字和階段名稱的標題。然後是短篇推薦見證，帶有虛線上規則。
9. 常見問題 – <details> 行，以虛線桃色線分隔，橘色 +/– 標記。
10. 巨大頁尾 – 橘色區塊，頂角半徑 56px、襯線奶油色標題、電子報輸入欄位搭配 Dibs 按鈕、連結欄位、 以及品牌名稱以巨大的深橘色字標呈現。

4. 標誌性互動

• 筆記本移動 + 開啟 – 一個元素。階段 1（從頁面頂部直到開啟器區塊固定）：插值平移、 旋轉（-14° → 0）和縮放，從英雄佔位符的矩形移動到舞台中心。階段 2（當舞台固定時）： --p 0→1 使封面繞其左邊緣旋轉 rotateY(-178deg * p)。僅在 JS 執行且 prefers-reduced-motion 關閉時隱藏英雄佔位符；減少動畫則顯示已開啟且靜止的書本。
• 面板 → 裝置 – 每個羅馬數字項目都是一個 <button aria-current>；其 data-t（和可選的 data-sub，以豎線分隔的步驟列表） 會渲染到裝置螢幕中。
• 自動調整大小對話泡泡 – 切勿手繪文字周圍的泡泡路徑。僅將 <text> 放置在 <g class="sb" data-cx data-y data-tx> 中； JS 在 document.fonts.ready 後測量 getBBox()，如果文字寬度超過框架則縮小字體，繪製圓角矩形和指向說話者的尾巴 （data-tx），並將泡泡限制在 300px 框架內。每次語言變更後重新執行。
• 語言切換 – 將原始語言保留在 HTML 中。一個字典將每個修剪過的原始文字節點映射到 [en, de, …]；遍歷文字節點一次，儲存原始文字 + 前導/尾隨空白，點擊時交換；同時翻譯 placeholder、data-t、data-sub。設定 <html lang>，將選擇記住於 localStorage（包裝在 try/catch 中）。

5. 建置規則

• 單一自包含 HTML 檔案：內嵌 CSS/JS，僅使用 Google Fonts，每個插圖使用內嵌 SVG。無需外部圖片。
• 獨立檔案需要 <!doctype html>、<meta charset="utf-8"> 和 <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">，否則手機將呈現桌面版面。
• 使用 main{overflow-x:clip}（而非 hidden），以便移動的筆記本不會造成橫向滾動且 position:sticky 仍可運作。
• 所有顏色作為 :root 令牌；頁面刻意僅為淺色主題，因此設定 color-scheme: light 和明確的 body 背景。
• 按鈕是真正的 <button>/<a>，具有可見的 :focus-visible；裝飾性 SVG 設定 aria-hidden="true"；漫畫畫格設定 role="img" + aria-label 描述場景。
• 尊重 prefers-reduced-motion：無移動、書本開啟、無懸停搖晃。
• 斷點：≤980px 堆疊場景並隱藏裝飾性道具（.hide-sm）；≤600px 僅在角落保留標誌 + 語言切換， 並每行顯示一個漫畫畫格。

6. 撰寫文案

• 與螢幕另一端的人對話，使用簡短句子，語氣溫暖但基於事實。
• 標題小寫；其他內容使用句子大小寫。
• 手寫旁白是玩笑或強調，1–3 個字詞，每個區塊最多一個。
• 將包含彩色字詞的標題拆分為在每種語言中仍可自然閱讀的片段（詞序會不同！）。 偏好使用例如「一個計劃。*四個階段，*十四個步驟」的結構，其中每個片段可以獨立翻譯。
• 將範例人物標示為範例（「Elif 的故事是一個範例旅程」）。

7. 完成檢查清單

• 所有內容均為客戶的真實內容；無虛構內容；保留來源和「最後檢查」日期。
• 英雄筆記本順暢移動並開啟；減少動畫顯示靜態開啟的書本。
• 每個對話泡泡在每種語言中都包含其文字（使用 getBBox 或目視檢查）。
• 每次語言切換後不留原始語言文字（掃描文字節點中是否有原始語言特定字母，例如 ğ ş ı）。
• 在 390px 寬度下無橫向滾動；手機上角落僅顯示標誌 + 語言切換。
• 每個區塊在 1440×900 和 390×844 尺寸下的螢幕截圖（參見 scripts/screenshots.mjs）。