网站模板

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.