Webサイトテンプレート
Polar Subscription
Next.js landing page and blog with Supabase auth/database and Polar subscription integration, plus SEO optimization.
このテンプレートの説明はまだ日本語に対応していないため、英語で表示しています。
Landing Page · SaaS · 無料
ページ
ライブデモのページごとのスクリーンショットです。枠内をスクロールするとページ全体を見られます。
デザイン解説
このテンプレートのデザインを AI が読み解いたものです：配色、書体、余白、セクション、特徴的なディテール。テンプレートを使うと Ottermind はここから始めます。
この解説はまだ日本語に対応していないため、英語で表示しています。
- Overall
SaaS landing page, futuristic and clean, low density, light
- Palette
background #ffffff; surfaces [#00c950,#ffb900]; text #0a0a0a; muted text #737373; primary #00c950; accents [#00c950,#ffb900]
- Type
headings alphaLyra, 500, title case; body alphaLyra, 14px; scale h1 48px, h2 24px, h3 16px
- Shape & spacing
button/card radius 4px, borders 1px solid #eaeaea, shadows rgba(0, 0, 0, 0.05) 0px 1px 1px 0px, rgba(255, 252, 240, 0.5) 0px 1px 1px 0px inset, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset, rgba(28, 27, 26, 0.5) 0px 0px 1px 0px, section spacing 64px, content width 1272px
- Sections (top to bottom)
- Header — horizontal navigation with logo, links, login, dark mode toggle, white background
- Hero — two-column layout, left side with large headline "Vibe Marketing", subheading, two CTA buttons with gradient blur effect, right side with full-bleed neon-toned portrait image
- Partners — two-column layout, left side with brand logos (Lowe’s, AI), right side with bold headline "Join the best. Meet our partners."
- Features — two-column layout, left side with headline "Create viral content." and three feature cards with icons, right side with UI mockup of dashboard interface
- Quote — centered blockquote with highlighted keywords in blue and purple, white background
- Pricing — centered headline "Pricing", two pricing cards (Base, Plus) with checkmarks, "Most Popular" badge on Plus plan, CTA buttons with gradient blur
- FAQ — grid of six cards with Q&A pairs, white background
- Customers — headline "Customers", grid of user testimonials with avatars and social handles
- CTA — centered headline "Elevate your digital presence", subheading, single CTA button with gradient blur
- Footer — four-column layout with logo, quick links, resources, connect icons (Twitter, GitHub), copyright line
- Signature details
- Gradient blur effects on CTA buttons
- Neon-toned hero image with pink/blue lighting
- Minimalist card-based layout with consistent 4px radius
- Highlighted keywords in quote section using color contrast
- Clean typography with alphaLyra font family throughout
- Subtle inset shadows on cards for depth
- Other pages
- /pricing: Pricing section with two plans, Base and Plus, same footer as home
- /about: Two-column vision/story section, team grid with photos and roles, values cards in three-column layout
テンプレート情報
- カテゴリ
- Landing Page, SaaS, Starter Kit
- 作者
- cult-ui
- 掲載元
- 21st.dev
- 価格
- 無料
- Landing Page
- Authentication
- SaaS
オリジナルデザイン：cult-ui（21st.dev に掲載）。Ottermind はテンプレートのコードをコピーせず、ブリーフをもとに新しいサイトを作ります。
Ottermind が起点にするブリーフ
Studio で下書きとして開きます。送信前にブランド、対象者、ページを書き足してください。
Build a landing page website inspired by the "Polar Subscription" template. Reference brief: Next.js landing page and blog with Supabase auth/database and Polar subscription integration, plus SEO optimization. Style and features to reflect: Authentication. Use original copy and imagery for my brand rather than the reference's placeholder content.
このテンプレートの使い方
- 1
「このテンプレートを使う」をクリックすると、ブリーフ入りで Ottermind Studio が開きます。
- 2
ブリーフにブランド、対象者、ページ、内容を書き足します。
- 3
Ottermind がこのデザインに着想を得た新しいサイトを作ります。チャットで続けて調整できます。
