Hero 区块
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 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 | 类型 | 默认值 | 说明 |
|---|---|---|---|
title必填 | string | - | 卡片的标题文本。 |
kicker | string | - | 显示在标题上方的小标签。 |
copy | string | - | 显示在标题下方的正文文本。 |
features | string[] | - | 功能文案字符串数组。 |
ctaLabel | string | 'Explore the platform' | 行动号召按钮的文案。 |
ctaHref | string | '#' | 行动号召链接的目标地址。 |
className | string | - | 合并到根元素上的额外类名。 |
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.