SaaS 登陸頁面技能
生成一個現代化、專注於轉換率的 SaaS 登陸頁面。
規則
- 單頁佈局,配備黏性導航
- 英雄區使用漸層背景(禁止使用紫色/青色漸層)
- 功能網格顯示 3-4 個功能(禁止使用三欄等寬卡片)
- 社會證明區,使用真實公司標誌或佔位區塊
- 定價表顯示 3 個方案
- 頁尾包含電子報訂閱功能
- 使用提供的公司名稱和標語
- 尊重主色用於重點強調(每個畫面最多使用 2 次)
- 禁止使用 Inter 字體。請使用 Geist、Satoshi 或 Cabinet Grotesk
結構
- 導航(黏性,帶模糊背景效果)
- 英雄區(左側文字 + 右側視覺/數據)
- 社會證明(標誌橫條)
- 功能區(交替排版)
- 推薦區(1 個重點推薦 + 網格)
- 定價區(3 個方案,中間方案強調)
- CTA 橫幅
- 頁尾
技術
- 單一 HTML 檔案,內嵌 CSS
- 響應式:行動優先斷點
- CSS 自訂屬性實現主題化
- 平滑滾動行為