Hero Sections
Centered Hero
A centred headline, sub-copy and a pair of CTAs under an eyebrow badge - the default landing hero.
#hero#centered#cta
6 frameworksBeginner
Loading…
A headline over a collage of testimonial cards with gradient initials avatars and staggered offsets.
<section class="mx-auto w-full max-w-5xl 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">
Loved by the teams who ship
</h1>
<p class="mx-auto mt-4 max-w-xl text-base leading-relaxed text-gray-600 dark:text-gray-400">
Read why thousands of builders made the switch and never looked back.
</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">
Join them
</a>
<!-- A single-column stack at 320px, a real collage with vertical offsets only
once there is room (sm:). The offsets are decorative and never applied
while stacked, so nothing clips off the narrow viewport. -->
<div class="mt-10 grid grid-cols-1 gap-4 text-left sm:grid-cols-3">
<figure class="rounded-2xl border border-gray-200 bg-white p-5 shadow-sm sm:mt-6 dark:border-gray-800 dark:bg-gray-900">
<blockquote class="text-sm leading-relaxed text-gray-700 dark:text-gray-300">“We cut our deploy time in half the first week.”</blockquote>
<figcaption class="mt-4 flex items-center gap-3">
<span class="flex h-9 w-9 items-center justify-center rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 text-xs font-bold text-white">AR</span>
<span class="text-sm font-semibold text-gray-900 dark:text-gray-100">Ada R.</span>
</figcaption>
</figure>
<figure class="rounded-2xl border border-gray-200 bg-white p-5 shadow-sm dark:border-gray-800 dark:bg-gray-900">
<blockquote class="text-sm leading-relaxed text-gray-700 dark:text-gray-300">“The one tool the whole team actually agreed on.”</blockquote>
<figcaption class="mt-4 flex items-center gap-3">
<span class="flex h-9 w-9 items-center justify-center rounded-full bg-gradient-to-br from-emerald-500 to-teal-600 text-xs font-bold text-white">JM</span>
<span class="text-sm font-semibold text-gray-900 dark:text-gray-100">Jamal M.</span>
</figcaption>
</figure>
<figure class="rounded-2xl border border-gray-200 bg-white p-5 shadow-sm sm:mt-6 dark:border-gray-800 dark:bg-gray-900">
<blockquote class="text-sm leading-relaxed text-gray-700 dark:text-gray-300">“Onboarding took an afternoon, not a quarter.”</blockquote>
<figcaption class="mt-4 flex items-center gap-3">
<span class="flex h-9 w-9 items-center justify-center rounded-full bg-gradient-to-br from-fuchsia-500 to-purple-600 text-xs font-bold text-white">SK</span>
<span class="text-sm font-semibold text-gray-900 dark:text-gray-100">Sofia K.</span>
</figcaption>
</figure>
</div>
</section>| Prop | Type | Default | Description |
|---|---|---|---|
titlerequired | string | - | Heading text for the card. |
kicker | string | - | Small label shown above the title. |
copy | string | - | Body text shown under the title. |
cards | Array<{ quote: string; name: string }> | - | Cards |
ctaLabel | string | 'Join them' | Call-to-action button text. |
ctaHref | string | '#' | Destination for the call-to-action link. |
className | string | - | Additional classes merged onto the root element. |
Pass `cards` of `{ quote, name }`; initials and a rotating gradient avatar are derived automatically. At 320px the cards are a single clean column - the vertical offsets that make it a collage are only applied from `sm:` up, so nothing ever clips off a narrow viewport.