Hero ही तय करता है कि कोई scroll करेगा या नहीं। AI builders का default सबका एक जैसा है — centered headline, subline, दो buttons — जो ठीक है, और तुरंत भुला दिया जाता है। यहाँ 7 hero patterns हैं जो prompt से reliably generate होते हैं, हर एक की one-line spec के साथ। Specs को English में ही v0, Lovable, Bolt या Cursor में paste करें।
1. Product Stage
Split hero: left column headline + CTA, right column a browser-framed screenshot tilted 3deg with an accent glow behind it, overflowing the viewport edge slightly.
Trick है overflow — frame का cut होना signal देता है कि product fold से बड़ा है।
2. Manifesto
Full-width display headline spanning 90% viewport width at clamp(3.5rem,10vw,8rem), two short lines, no image, tiny CTA row beneath. Everything else is whitespace.
Copy strong हो तो चलता है। कमज़ोर हो तो मरता है — इस pattern में छिपने की कोई जगह नहीं।
3. Live Backdrop
Centered content over a full-bleed animated background — slow CSS gradient mesh drifting at 30s loops, content on a subtle dark scrim, motion pausing under prefers-reduced-motion.
Backgrounds सस्ते में atmosphere लाते हैं; इन्हें हमेशा content के नीचे रखें, competition में नहीं। (backgrounds collection देखें)
4. Bento Teaser
Headline block occupying the top-left two-thirds; three small preview tiles filling the remaining grid cells, each a cropped glimpse of a feature, lifting on hover.
Feature-rich products को hero में feature list लाए बिना breadth दिखाने का तरीक़ा।
5. Terminal
Left column headline; right column a mock terminal or code editor panel with syntax-highlighted snippet typing itself out once, then a cursor blink.
Dev tools के लिए default choice — क्योंकि यह claim नहीं, proof है।
6. Social Opener
Standard centered hero, but the subline is replaced by a single row: five tiny avatar circles + "Trusted by 2,400 builders" in muted text, sitting above the CTA.
Proof को CTA के ऊपर रखने से click की feeling बदल जाती है — जुए से bandwagon में।
7. Split Statement
Viewport split diagonally: upper-left solid background with headline, lower-right full-bleed imagery or animated texture; the CTA sits on the seam.
सातों में सबसे art-directed; angle specify करें (जैसे 12deg) वरना generators इसे flat कर देते हैं।
इन्हें use करना
ऊपर की हर spec एक skeleton है — इसमें आपका identity block (palette, type, radius) और एक Never-list जोड़ना बाक़ी है; पूरे prompt की anatomy इस SaaS page walkthrough में है। Assembly skip करनी हो तो sections collection में इन सभी families के finished hero prompts हैं, और 60 prompts free हैं।