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 centred headline over a bento-style grid of gradient feature tiles that restacks cleanly on mobile.
<section class="mx-auto w-full max-w-5xl px-4 py-12 sm:px-6 sm:py-16">
<div class="mx-auto max-w-2xl text-center">
<p class="text-xs font-bold uppercase tracking-widest text-blue-700 dark:text-blue-400">Platform</p>
<h1 class="mt-3 text-3xl font-bold leading-tight tracking-tight text-gray-900 sm:text-5xl dark:text-gray-100">
One workspace for every team
</h1>
<p class="mx-auto mt-4 max-w-xl text-base leading-relaxed text-gray-600 dark:text-gray-400">
Docs, tasks and dashboards in a single, fast, keyboard-first surface.
</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">
Explore the platform
</a>
</div>
<!-- The first tile spans two columns and two rows; the rest fill the 2x2 to
its right. At the 2-col mobile base it becomes a full-width banner with a
2x2 of small tiles beneath - the same cells, restacked, never overflowing. -->
<div class="mt-10 grid grid-cols-2 gap-3 sm:grid-cols-4 sm:grid-rows-2 sm:gap-4">
<div class="col-span-2 flex min-h-[9rem] flex-col justify-end rounded-2xl bg-gradient-to-br from-blue-500 to-indigo-600 p-4 sm:row-span-2 sm:min-h-[15rem]">
<span class="text-sm font-semibold text-white">Realtime docs</span>
</div>
<div class="flex min-h-[7rem] flex-col justify-end rounded-2xl bg-gradient-to-br from-emerald-400 to-teal-600 p-4">
<span class="text-sm font-semibold text-white">Tasks & sprints</span>
</div>
<div class="flex min-h-[7rem] flex-col justify-end rounded-2xl bg-gradient-to-br from-amber-400 to-orange-600 p-4">
<span class="text-sm font-semibold text-white">Automations</span>
</div>
<div class="flex min-h-[7rem] flex-col justify-end rounded-2xl bg-gradient-to-br from-fuchsia-500 to-purple-600 p-4">
<span class="text-sm font-semibold text-white">Live dashboards</span>
</div>
<div class="flex min-h-[7rem] flex-col justify-end rounded-2xl bg-gradient-to-br from-sky-400 to-cyan-600 p-4">
<span class="text-sm font-semibold text-white">Team inbox</span>
</div>
</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. |
features | string[] | - | List of feature strings. |
ctaLabel | string | 'Explore the platform' | Call-to-action button text. |
ctaHref | string | '#' | Destination for the call-to-action link. |
className | string | - | Additional classes merged onto the root element. |
Pass up to five `features` - the first takes the large 2x2 cell and the rest fill the grid beside it. The grid is 2 columns on phones and 4 on desktop, so the tiles reflow instead of shrinking; the offsets and spans are the layout, not decoration you can drop.