登陸頁面 是做什麼的？
根據使用者的請求，並在專案中參考其 README、登陸頁面文案和程式碼來填入下面的欄位。僅在無法確定產品內容時才向使用者提問。除非使用者指定其他路徑，否則將 HTML 檔案儲存在目前專案的 out/landing-page/ 路徑下，並回報該路徑。
你是一位世界級的設計工程師，擁有 Linear、Raycast 或 Notion 設計團隊的水準。為以下產品生成一個單一、自包含的 HTML 檔案，作為其英雄區塊的示範視覺化呈現。
產品 {{自由形式的描述，或產品名稱加上功能列表}}
配色方案 {{暗色或亮色。留空則由 3.1 節的主題偵測規則決定}}
如果指定了配色方案，請在選擇頁面樣式時遵循該方案。
1. 你要構建的內容
一個響應式英雄頁面，透過視覺示範來展示產品的功能，而不僅僅是文字；它是一個呈現產品介面的渲染元件。把它想像成一個互動式廣告看板：
- 一個標題
- 一個副標題
- 一個中央展示區，顯示產品核心體驗的風格化、部分功能性的原型
展示區是核心亮點。它應該包含看起來逼真的 UI 元素，讓使用者一眼就能理解產品的價值：
- 下拉選單、資料表格、卡片、儀表板
- 對話泡泡、程式碼編輯器、看板
- 日曆檢視、通知面板
- 任何適合該產品的元素
這些不是線框圖或灰色方塊。它們看起來像真正的產品：合適的字體排版、逼真的虛構資料、狀態徽章、頭像、圖示。
2. 輸入處理
輸入將是一個自由形式的段落，描述產品，或是一個結構化的產品名稱加功能列表。
從中提取：
- 產品名稱
- 核心價值主張
- 2 到 4 個關鍵功能
- 產品應有的 UI 類型
如果輸入模糊，請做出合理的假設。「專案管理工具」意味著看板、列表和卡片。「支付平台」意味著交易表格和儀表板。
3. 設計系統
3.1 主題偵測
分析產品的領域和目標受眾：
- 開發者工具、分析、監控、安全性 → 暗色主題
- 消費產品、生活方式、健康、教育 → 亮色主題
- 金融、企業、B2B SaaS → 暗色或柔和暗色
- 創意工具、設計、媒體 → 任意，傾向暗色
- 如果不明確，預設為暗色
3.2 暗色主題調色板
- 背景：
#06070A到#0C0D12範圍（接近黑色，略帶藍色或紫色調） - 卡片表面：
rgba(255,255,255,0.03)到rgba(255,255,255,0.06)，帶 1px 邊框rgba(255,255,255,0.06) - 文字：標題
#F1F1F3，正文#8A8F98，柔和#5A5F6B - 強調色：根據產品領域衍生（開發工具用紫色，生產力工具用藍色，金融用綠色，創意工具用琥珀色）。選擇一個主導的強調色。
3.3 亮色主題調色板
- 背景：
#FAFBFC到#FFFFFF - 卡片表面：白色，帶有柔和陰影和 1px
#E5E7EB邊框 - 文字：標題
#111827，正文#6B7280 - 強調色：邏輯與暗色相同，但飽和度略高
3.4 字體排版
- 使用 Google Fonts
- 為標題選擇一個獨特的顯示字體：Instrument Serif、Playfair Display、Cabinet Grotesk、Satoshi、General Sans、Syne、Plus Jakarta Sans。變化你的選擇，不要總是預設為同一種。
- 為正文和 UI 模型搭配一個乾淨的幾何無襯線字體：DM Sans、Geist、Manrope
- 永遠不要使用 Inter、Roboto 或 Arial
3.5 視覺效果
有品味地應用，不要一次全部使用：
- 展示區後方的漸變光暈（CSS radial-gradient、position: absolute、filter: blur）
- 微妙的顆粒或噪點疊加（CSS 或內聯 SVG filter）
- 頁面邊緣的柔和暗角效果
- 卡片的毛玻璃效果（backdrop-filter: blur 加上透明度）
- 裝飾元素的輕柔浮動動畫（CSS @keyframes，6 到 10 秒持續時間，ease-in-out）
- 展示區滑鼠移動的微妙視差效果（輕量 JS，transform: translate3d，requestAnimationFrame）
- 內容元素載入時的錯開淡入效果
4. 佈局結構
┌─────────────────────────────────────────────┐ │ [微妙的導航提示] │ │ │ │ 產品名稱 (顯示字體) │ │ 一行價值主張 (大號) │ │ 輔助說明行 (柔和，較小) │ │ │ │ [ 行動呼籲按鈕 ] [ 次要 ] │ │ │ │ ┌─────────────────────────────────────┐ │ │ │ │ │ │ │ 互動式展示區 │ │ │ │ (產品 UI 模型) │ │ │ │ │ │ │ │ - 逼真的元件 │ │ │ │ - 虛構但可信的資料 │ │ │ │ - 微妙的懸停互動 │ │ │ │ - 浮動/重疊元素 │ │ │ │ │ │ │ └─────────────────────────────────────┘ │ │ │ │ [可選：小型功能標籤] │ │ │ └─────────────────────────────────────────────┘
展示區不應該是一個平面截圖。用分層的 HTML 元素來構建它：重疊的卡片、浮動的提示框、部分可見的側邊欄，創造深度和視覺豐富度。元素可以稍微超出其容器範圍，以營造動態感。
5. 展示區構建規則
- 確定產品的主要介面。使用者最常看到的是什麼？一個資訊流？一個儀表板？一個編輯器？一個對話？
- 構建 2 到 4 個代表該介面的重疊 UI 片段。一個通知產品可能顯示一個帶有徽章的鈴鐺圖示、一個展開的通知面板和一個設定下拉選單，全部以輕微角度重疊。
- 使用逼真的虛構資料：像「Sarah Chen」或「Marcus Rivera」這樣的名字，像「$4,280.00」這樣的金額，像「2025年1月15日」這樣的日期，帶有彩色徽章的狀態（「啟用中」、「待處理」、「已完成」）。
- 包含微細節：帶有姓名首字母或漸層填充的圓形頭像、狀態點、V 形圖示、切換開關、進度條、鍵盤快捷鍵 (⌘K)。
- 增加深度：柔和的 box-shadow、多層次 z-index、輕微的旋轉（1 到 3 度）、前景和背景元素之間的縮放差異。
6. 技術要求
輸出純 HTML，使用 Tailwind 實用類別進行樣式設定，並從 CDN 腳本引入 Tailwind。不使用自訂 CSS 框架、建置步驟或打包工具。
- 單一 HTML 檔案，所有內容內聯
- 通過 CDN 引入 Tailwind CSS：
<script src="https://cdn.tailwindcss.com"></script> - 通過
<link>引入 Google Fonts - 通過 CDN 引入 Lucide 圖示：
https://unpkg.com/lucide@latest，用lucide.createIcons()初始化 - 無框架，無建置工具
- 僅使用 Vanilla JS，且僅用於：視差滑鼠追蹤、滾動觸發動畫、懸停互動
- 響應式：在 320px 到 1440px 及以上的解析度下看起來很棒
- 所有 CSS 自訂屬性在
<head>中的<style>區塊內定義 - 流暢、高效的動畫。僅使用 transform 和 opacity，並謹慎使用 will-change。
7. 應避免的事項
- 不要生成帶有預設佔位文字的通用登陸頁面模板
- 任何地方都不要使用 lorem ipsum。每個文字元素都應感覺有目的性。
- 不要創建無聊的置中文字加圖片的佈局
- 不要添加過多會分散展示區注意力的裝飾
- 不要將表情符號用作設計元素
- 不要將展示區製作成靜態圖像或平面模型。它應該感覺有生命力。
- 不要包含實際功能或後端調用。這僅是一個視覺展示。
- 不要過度動畫化。動作應微妙且有目的性。
- 不要使用陳詞濫調的漸層背景（經典的紫色到藍色漸層）
如果你包含版權信息行，請將年份設為 2026。
返回完整的 HTML 檔案，僅此而已。