ヒーローセクション
Centered Hero
A centred headline, sub-copy and a pair of CTAs under an eyebrow badge - the default landing hero.
#hero#centered#cta
6 個のフレームワーク初級
Loading…
A headline and CTA above a wrapping strip of customer wordmarks for instant social proof.
<section class="mx-auto w-full max-w-4xl px-4 py-12 text-center sm:px-6 sm:py-16">
<h1 class="text-3xl font-bold leading-tight tracking-tight text-gray-900 sm:text-5xl dark:text-gray-100">
The backbone of modern product teams
</h1>
<p class="mx-auto mt-4 max-w-xl text-base leading-relaxed text-gray-600 dark:text-gray-400">
Ship confidently on infrastructure the best companies already rely on.
</p>
<a href="#" class="mt-6 inline-flex items-center justify-center rounded-lg bg-blue-600 px-5 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-blue-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white motion-reduce:transition-none dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-900">
Get started
</a>
<p class="mt-10 text-xs font-semibold uppercase tracking-widest text-gray-500 dark:text-gray-400">Trusted by teams at</p>
<!-- Wordmarks, not image logos - they wrap and centre at any width and never
ship a broken <img>. Swap for real SVGs when you have brand assets. -->
<ul class="mt-4 flex flex-wrap items-center justify-center gap-x-8 gap-y-4">
<li class="text-lg font-bold tracking-tight text-gray-400 dark:text-gray-500">Northwind</li>
<li class="text-lg font-bold tracking-tight text-gray-400 dark:text-gray-500">Adysre</li>
<li class="text-lg font-bold tracking-tight text-gray-400 dark:text-gray-500">Globex</li>
<li class="text-lg font-bold tracking-tight text-gray-400 dark:text-gray-500">Umbrella</li>
<li class="text-lg font-bold tracking-tight text-gray-400 dark:text-gray-500">Initech</li>
</ul>
</section>| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
title必須 | string | - | カードの見出しテキスト。 |
kicker | string | - | タイトルの上に表示される小さなラベル。 |
copy | string | - | タイトルの下に表示される本文。 |
proofLabel | string | 'Trusted by teams at' | Proof label |
logos | string[] | - | Logos |
ctaLabel | string | 'Get started' | CTA ボタンのテキスト。 |
ctaHref | string | '#' | CTA リンクのリンク先。 |
className | string | - | ルート要素にマージされる追加クラス。 |
Logos are `logos` strings rendered as muted wordmarks so the strip wraps and centres at any width and never ships a broken `<img>`; swap them for inline SVGs once you have brand assets. The `proofLabel` above the row is a plain caption, not a heading, keeping the document outline intact.