हीरो सेक्शन
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…
Copy on the left, picture on the right, stacked in reading order on mobile.
<!--
Copy first in the DOM, image second. On mobile the columns stack in source
order, which is what you want: the headline should be the first thing read,
not a 300px picture the reader has to scroll past.
-->
<section class="hero-split">
<div class="hero-split__copy">
<p class="hero-split__kicker">Analytics</p>
<h1 class="hero-split__title">See what your customers actually do</h1>
<p class="hero-split__text">
Session-level insight without a tag manager, a data team, or a six-week
rollout.
</p>
<a class="hero-split__cta" href="#">Get started</a>
</div>
<div class="hero-split__media">
<!-- alt="" because the headline beside it already carries the meaning;
a description here would be read out twice. -->
<img class="hero-split__img" src="/images/dashboard.svg" alt="" width="560" height="420" />
</div>
</section>| Prop | टाइप | डिफ़ॉल्ट | विवरण |
|---|---|---|---|
titleआवश्यक | string | - | कार्ड की हेडिंग टेक्स्ट। |
kicker | string | - | टाइटल के ऊपर दिखने वाला छोटा लेबल। |
copy | string | - | टाइटल के नीचे दिखने वाला मुख्य टेक्स्ट। |
imageSrcआवश्यक | string | - | कार्ड की तस्वीर के लिए इमेज URL। |
imageAlt | string | '' | इमेज के लिए वैकल्पिक टेक्स्ट। जब title में पहले से नाम हो तो खाली रखें। |
ctaLabel | string | 'Get started' | कॉल-टू-एक्शन बटन का टेक्स्ट। |
ctaHref | string | '#' | कॉल-टू-एक्शन लिंक का डेस्टिनेशन। |
Copy comes first in the DOM and the image second, so the mobile stack puts the headline above the picture without any `order-` gymnastics - the first thing read should not be a 300px image the visitor has to scroll past. The media box fixes a `4/3` aspect ratio so the column reserves its space before the image decodes; without it the copy jolts upward on load, which is the classic hero layout shift. `alt=""` is correct here: the headline beside it already carries the meaning, and describing it again just makes a screen reader say it twice. The Next.js tab uses `next/image` with `priority` because this picture is almost always the LCP element.