हीरो सेक्शन
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 row of headline metrics that reflows from two columns to four.
<section class="mx-auto w-full max-w-4xl px-4 py-12 text-center sm:px-6 sm:py-16">
<p class="text-xs font-bold uppercase tracking-widest text-blue-700 dark:text-blue-400">Trusted at scale</p>
<h1 class="mt-3 text-3xl font-bold leading-tight tracking-tight text-gray-900 sm:text-5xl dark:text-gray-100">
Numbers teams grow into
</h1>
<p class="mx-auto mt-4 max-w-xl text-base leading-relaxed text-gray-600 dark:text-gray-400">
From first commit to global rollout, the platform keeps up.
</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">
Start free
</a>
<!-- One column at 320px, two on small phones, four on desktop - the grid
reflows rather than shrinking four numbers into an unreadable row. -->
<dl class="mt-10 grid grid-cols-2 gap-6 sm:gap-8 lg:grid-cols-4">
<div class="flex flex-col items-center">
<dt class="order-2 mt-1 text-sm text-gray-600 dark:text-gray-400">Active teams</dt>
<dd class="order-1 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl dark:text-gray-100">12k+</dd>
</div>
<div class="flex flex-col items-center">
<dt class="order-2 mt-1 text-sm text-gray-600 dark:text-gray-400">Uptime</dt>
<dd class="order-1 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl dark:text-gray-100">99.99%</dd>
</div>
<div class="flex flex-col items-center">
<dt class="order-2 mt-1 text-sm text-gray-600 dark:text-gray-400">Requests / day</dt>
<dd class="order-1 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl dark:text-gray-100">840M</dd>
</div>
<div class="flex flex-col items-center">
<dt class="order-2 mt-1 text-sm text-gray-600 dark:text-gray-400">Countries</dt>
<dd class="order-1 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl dark:text-gray-100">70+</dd>
</div>
</dl>
</section>| Prop | टाइप | डिफ़ॉल्ट | विवरण |
|---|---|---|---|
titleआवश्यक | string | - | कार्ड की हेडिंग टेक्स्ट। |
kicker | string | - | टाइटल के ऊपर दिखने वाला छोटा लेबल। |
copy | string | - | टाइटल के नीचे दिखने वाला मुख्य टेक्स्ट। |
stats | Array<{ value: string; label: string }> | - | Stats |
ctaLabel | string | 'Start free' | कॉल-टू-एक्शन बटन का टेक्स्ट। |
ctaHref | string | '#' | कॉल-टू-एक्शन लिंक का डेस्टिनेशन। |
className | string | - | रूट एलिमेंट पर मर्ज होने वाली अतिरिक्त क्लासेज़। |
Drive the numbers with the `stats` prop. Each metric is a `<dl>` pair with the value shown first via `order-*` while the DOM keeps `dt`-then-`dd`, so it reads correctly to a screen reader. The grid is two columns on phones and four on large screens - four big numbers never get crushed into one unreadable row.