Webサイトテンプレート

Relative - Landing page template Next.js & Astro

A landing page template crafted with shadcn/ui, and Tailwind. Available in both Next.js and Astro editions. Perfect for quickly launching a marketing site with essential sections.

このテンプレートの説明はまだ日本語に対応していないため、英語で表示しています。

Landing Page · 無料

ライブデモを開く

Relative - Landing page template Next.js & Astro

デザイン解説

このテンプレートのデザインを AI が読み解いたものです：配色、書体、余白、セクション、特徴的なディテール。テンプレートを使うと Ottermind はここから始めます。

この解説はまだ日本語に対応していないため、英語で表示しています。

Overall: landing page, clean and modern, low density, light
Palette: background #f9fafb; surfaces #ffffff, #f3f4f6; text #111827; muted text #6b7280; primary #111827; accents #000000, #10b981, #f59e0b
Type: headings Inter, 700, sentence-case; body Inter, 14px; scale h1 64px, h2 40px, h3 24px
Shape & spacing: button/card radius 6px, borders 1px solid #e5e7eb, shadows 0 1px 3px rgba(0,0,0,0.1), section spacing 80px, content width 1280px
Sections (top to bottom): Header — horizontal navigation with logo on left, links centered, login/sign up buttons on right, white background
Hero — full-width section with large headline centered, subheading below, "Get started" button beneath, light gray textured background on sides
Product demo — embedded interface mockup showing task management dashboard with tabs, status columns, cards with images and metadata, white background with subtle border
Footer — not visible in screenshot
Signature details: Minimalist UI with high contrast black-on-white typography
Subtle diagonal texture on hero side panels
Task card layout with consistent spacing and rounded corners
Status indicators using colored dots (red, yellow, blue, green)
Clean iconography for actions and filters
Floating action button ("New Task") with plus symbol
Other pages: /features: product features overview
/about-us: company information
/pricing: tiered pricing plans
/faq: frequently asked questions
/contacts: contact form and details

テンプレート情報

カテゴリ: Landing Page
技術: Next.js, Astro, Tailwind CSS, shadcn/ui
ライセンス: Commercial
作者: Shadcnblocks
掲載元: Shadcnblocks
価格: 無料

オリジナルデザイン：Shadcnblocks（Shadcnblocks に掲載）。Ottermind はテンプレートのコードをコピーせず、ブリーフをもとに新しいサイトを作ります。

Ottermind が起点にするブリーフ

Studio で下書きとして開きます。送信前にブランド、対象者、ページを書き足してください。

Build a landing page website inspired by the "Relative" template. Reference brief: A landing page template crafted with shadcn/ui, and Tailwind. Available in both Next.js and Astro editions. Perfect for quickly launching a marketing site with essential sections. Use original copy and imagery for my brand rather than the reference's placeholder content.