Webサイトテンプレート

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 Webサイトテンプレート、/ ページ、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.