SaaS 落地頁

SaaS 產品行銷站:Hero、功能、Bento、社會證明、定價、CTA

Pro行銷SaaS8 個區段

安裝

npx shadcn@latest add "https://webberui.com/r/saas-landing.json?t=<安裝 token>"

整頁原始碼會落在 app/templates/saas-landing/。也可以改用長效授權金鑰:在 components.json 的 registries 設定 Authorization: Bearer <key>,適合 CI 或多人共用的專案。使用範圍見授權條款

包含的區段

同一套模板內的區段共用設計 token,所以抽換、重排之後配色、間距與動畫節奏仍然一致。可在區段組裝器裡挑選組合。

  1. 1

    導覽與主視覺

    黏性玻璃態導覽列搭配漸層標題主視覺,含產品看板視窗模擬、漂浮通知卡片與客戶標誌跑馬燈。

    hero
  2. 2

    Bento 功能網格

    以六格 Bento 網格呈現智慧看板、AI 自動化引擎、即時協作、企業級安全與 200+ 整合等核心功能。

    features
  3. 3

    產品情境展示

    三段左右交錯的圖文區塊搭配捲動視差視窗模擬,展示規劃、自動化與數據洞察三大使用情境。

    product
  4. 4

    數據與客戶評價

    進場計數動畫的四項關鍵數據橫幅,加上四則五星客戶評價卡片組成的社會證明區塊。

    testimonial
  5. 5

    定價方案

    入門、專業、企業三種方案卡片,支援月付與年付切換並有價格數字滾動動畫。

    pricing
  6. 6

    常見問題

    五題手風琴式常見問題,展開收合具流暢高度動畫並附聯絡團隊連結。

    faq
  7. 7

    行動呼籲

    藍紫漸層背景的行動呼籲橫幅,引導訪客免費開始使用或預約產品導覽。

    cta
  8. 8

    頁尾

    多欄連結頁尾,含品牌簡介、社群連結、版權宣告與系統狀態指示。

    footer

收錄於開店套件

套件把這套模板連同相關元件、SEO 骨架與台灣在地欄位打包成一條安裝指令。

你拿到的是原始碼

不是 npm 套件、不是 zip 檔。安裝之後整頁的 TypeScript 原始碼就在你的 repo 裡,可以任意修改、無執行期相依、沒有到期失效機制——我們的網站故障不會影響你已上線的網站。

瀏覽其他 103 套模板 →