網站範本

SaaS Landing Template

SaaS landing page on Next.js, shadcn/ui and Tailwind v4, with pricing, feature grid and a dark theme out of the box.

這個範本的介紹目前還沒有繁體中文版本，先以英文顯示。

Landing Page · SaaS · 免費

開啟線上示範查看原始碼儲存庫

頁面

線上示範的逐頁截圖，在頁面框內捲動即可查看完整頁面。

SaaS Landing Template 網站範本，/ 頁面，第 2 部分 — /SaaS Landing Template

設計解讀

AI 對這套範本設計的解讀：配色、字體、間距、區塊與標誌性細節。使用範本時，Ottermind 會以它為起點。

這份解讀目前還沒有繁體中文版本，先以英文顯示。

Overall: SaaS landing page, modern and sleek, medium density, dark
Palette: background #0a0a0a; surfaces [#171717, #016fee, #e5e5e5]; text #fafafa; muted text #a1a1a1; primary #016fee; accents [#016fee]
Type: headings Geist, 500, sentence-case; body Geist, 18px; scale h1 60px / h2 24px / h3 20px
Shape & spacing: button/card radius 8px / 14px, no borders, shadow rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px, section spacing 120px, content width 1152px
Sections (top to bottom): Header — horizontal nav with logo, links, dropdown, CTA button, social icon; dark background
Hero — centered headline, subheading, "See more" button; subtle blue radial glow behind text
Partners — row of five brand logos on dark background
Testimonials — six cards in two rows of three, each with star rating, quote, name, title, avatar; rounded corners, light shadow
Stats — four metrics in a row: "50K+ Active Users", "99.9% Uptime", etc.; white text on dark
Pricing — three plan cards (Hobby, Pro, Enterprise), Pro highlighted with border and "Most Popular" badge; pricing tiers with checkmarks and CTAs
FAQ — accordion list with four questions, down arrows for toggling
Footer — logo, tagline, quick links, social icons, copyright, hashtag
Signature details: Blue radial gradient glow behind hero text
Rounded card shapes with soft shadows
Consistent use of Geist font family across all text
Subtle hover effects on buttons and cards
Clean spacing and alignment using 1152px content width
Accent color (#016fee) used for highlights and interactive elements
Other pages: /pricing: Pricing section with tiered plans and features
/testimonials: Testimonial grid with user quotes and ratings

範本資訊

分類: Landing Page, SaaS
作者: gonzalochale
來源: 21st.dev
價格: 免費

Landing Page
SaaS

原始設計來自 gonzalochale，刊登於 21st.dev。Ottermind 不會複製範本程式碼，而是依據需求打造全新的網站。

Ottermind 起步用的需求

它會以草稿形式在 Studio 中開啟，送出前先補充你的品牌、受眾與頁面。

Build a landing page website inspired by the "SaaS Landing Template" template. Reference brief: SaaS landing page on Next.js, shadcn/ui and Tailwind v4, with pricing, feature grid and a dark theme out of the box. Use original copy and imagery for my brand rather than the reference's placeholder content.