MatiSolina/gtm-skills

著陸頁 GTM

使用 cer0.ai 的視覺語言打造生產級 SaaS 著陸頁 — 深色模式、極簡、漸層與顆粒背景、Framer Motion 微互動、基於 shadcn 的 UI 基本元件、西班牙語（拉普拉塔河地區）或英語的轉換導向文案。

使用時機

• 使用者要求：「幫我做一個著陸頁」、「建立著陸頁」、「行銷網站」、「SaaS 首頁」、「產品頁面」。
• 使用者參考：cer0.ai、Midday、Linear、Vercel 作為設計靈感。
• 使用者想要 B2B 或 B2C SaaS 產品的深色/極簡美學。
• 使用者正在使用 v0.dev 並想要符合此風格的提示/元件。

技術棧（不可協商預設值）

• Next.js 15 App Router，預設使用伺服器元件。
• TypeScript，啟用 strict: true。
• Tailwind CSS v4，使用 CSS 變數進行主題設定（bg-background、text-foreground 等）。
• shadcn/ui 用於基本元件（button、card、accordion、dialog）。
• Framer Motion（framer-motion）透過 motion-provider 匯入為 m，用於視口內動畫。
• lucide-react 用於圖示（產品 UI 中絕對不能使用表情符號）。
• next/image 用於所有圖片，並指定明確的 width 與 height。
• next/dynamic 用於折疊區下方的區塊（延遲載入）。

強制頁面結構

每個著陸頁需遵循以下的區塊順序。跳過任何區塊都需要明確的理由。

1. <Navbar /> — 固定定位，透明 → 滾動時模糊
2. <Hero /> — h1 + 副標題 + 2 個 CTA + 產品模擬圖（右欄）
3. <LogoStrip /> — 客戶/新聞標誌，單色（filter: brightness(0) invert(1)）
4. 產品預覽 — 大型儀表板截圖，置於帶邊框的卡片內，底部有漸層淡出效果
5. 功能區塊（3-5 個） — 左右交替排列，每個 = 標題 + 段落 + 視覺模擬圖
6. <Benefits /> — 3 欄網格，包含圖示 + 標題 + 一行描述
7. <Pricing /> — 3 個方案，中間方案以徽章「Más elegido」突顯
8. <Faq /> — 手風琴式常見問題，包含 5-7 個真實反對意見，以及 JSON-LD FAQPage schema
9. <Footer /> — 極簡，包含連結 + 社交 + 法律資訊
10. JSON-LD 區塊 — SoftwareApplication、Organization、FAQPage

視覺系統

請載入 references/design-tokens.md 以取得完整規格。快速參考：

• 色板： --background: #000、--foreground: #fafafa、--muted-foreground: #a1a1aa、--border: rgba(250,250,250,0.08)。
• 背景： 兩個 radial-gradient 模糊效果（左上 + 右下），不透明度約 5%，再加上一個不透明度為 0.03 且帶有 mix-blend-overlay 的噪點 PNG 疊加層。
• 排版： 標題使用顯示字體（Geist Sans 或本地 --font-display）。內文使用 Inter。標題具有 tracking-[-0.02em] 和 font-medium（不要使用 font-bold — 對這種美學來說太重了）。
• 標題大小： h1 使用 text-[clamp(2.5rem,5vw,4.5rem)]、text-balance。到處使用 clamp 以實現流暢縮放。
• 邊框： 始終使用 border-border/50（50% 不透明度）。絕不使用實心邊框 — 太刺眼。
• 表面： bg-secondary/20、bg-secondary/30、bg-secondary/50 — 始終半透明以營造深度感。
• 按鈕： 藥丸形狀（rounded-full）、h-12、px-8。主要按鈕：bg-foreground text-background。次要按鈕：border border-border/50 bg-secondary/30 backdrop-blur-sm。
• 卡片： 外部 rounded-[24px]，內部 rounded-[20px]（俄羅斯娃娃疊層）。1px 邊框。微妙的 shadow-2xl shadow-black/20。
• 模糊效果： 背景光暈使用 blur-[100px] 到 blur-[120px]。模擬圖上的裝飾性內嵌模糊使用 blur-2xl。
• 動畫： 淡入 + 10-40px 位移，持續時間 0.6-1s，依序延遲 0.1-0.15s。使用 useInView({ once: true, margin: "-100px" }) 作為觸發器。

文案模式

請載入 references/copy-patterns.md 以取得完整指南。快速規則：

• 英雄區標題： 祈使句或陳述句，直指痛點（「Dejá de aceptar cheques a ciegas.」）。絕對不要用「歡迎來到 X」或「X 是一個用於... 的平台」。
• 英雄區副標題： 1-2 句話。說明它是什麼、如何運作、為何重要。
• 主要 CTA： 動作動詞的祈使句。例如「Probar gratis」、「Empezar」、「Crear cuenta」。始終是動作，而不是名詞（使用「Get started」而非「Get started today!」）。
• 次要 CTA： 較低門檻的選項，通常提供資訊。例如「Ver demo」、「Cómo funciona」。
• CTA 下方： 信任行。例如「+50.000 cheques analizados · Sin tarjeta de crédito」。使用中點 ·。
• 區塊標題： 陳述事實，而不是提出問題。例如「El análisis llega en 3 segundos.」而不是「How fast is it?」。
• 西班牙語語氣： 當目標受眾是阿根廷人時使用 voseo。直接，不使用企業用語。（例如「Sacale una foto」，而不是「Tome una fotografía」）。
• 避免： 「革命性」、「尖端」、「綜效」、「槓桿」、「世界級」、「同類最佳」。

建構流程

產生著陸頁時：

1. 最多向使用者提問 3 個問題（如果從上下文明顯可知則跳過）：
   • 產品做什麼？（一句話）
   • 目標受眾是誰？
   • 主要的 CTA 動作是什麼？
2. 先產生英雄區。 在建構其他部分之前，先取得英雄區的批准。
3. 逐步建構區塊 — 每次回應一個區塊，讓使用者批准文案後再繼續。
4. 最後加入 JSON-LD，絕不能跳過（SEO 很重要）。
5. 驗證無障礙性： 所有圖片都有 alt 屬性，所有按鈕都是實際的 <button> 或 <a> 元素，色彩對比度符合 WCAG AA 標準。

反模式（拒絕這些）

• 使用「多元化團隊微笑看著筆電」的庫存照片的英雄區。
• 沒有產品模擬圖的通用漸層英雄區。
• 每個方案都顯示「聯絡銷售人員」（對於早期階段的 SaaS 來說不合適）。
• 完全隱藏價格。
• 在折疊區上方放置超過 3 個 CTA（會導致決策癱瘓）。
• 使用輪播展示推薦（參與度低，影響 LCP）。
• 使用 motion.div 搭配 transition: { duration: 2 } — 太慢了。
• 預設為淺色模式（此技能 = 深色優先）。

參考資料

隨需讀取：

• references/sections.md — 每個區塊的詳細說明，包含程式碼模式
• references/design-tokens.md — 完整的顏色、排版、間距 Token
• references/copy-patterns.md — 標題公式、CTA 庫、常見問題模式
• references/seo-jsonld.md — 適用於 SaaS 著陸頁的 schema.org 範本

範本

位於 templates/ 目錄：

• page.tsx — 包含所有區塊、動態匯入和 JSON-LD 的根頁面
• hero.tsx — 包含右欄模擬圖模式的英雄區元件
• pricing.tsx — 三欄定價卡片，中間方案突顯
• faq.tsx — 手風琴式常見問題，附帶 JSON-LD
• navbar.tsx — 可感知滾動的導航列，附帶背景模糊效果

複製範本，調整文案和屬性。不要從頭開始重寫。

參考程式碼庫

即時參考：/Users/mati/Clientes/rosental/radiant-compliance/apps/web/（cer0.ai 原始碼）。 如有疑問，請完全模仿該程式碼庫的模式。它已在生產環境中經過實戰考驗。