v0
v0 prompt for a hero section
This v0 prompt generates a drop-in hero component with a fixed anatomy: eyebrow, two-line headline, mechanism subhead, button pair, one proof element, and a screenshot slot. The 1280x800 no-scroll constraint forces v0 to budget height instead of sprawling. Use the customizer to swap style, palette, type pairing, and motion before pasting.
Last updated
Prompt
Generate a self-contained Hero section for {{product}} as a React component using Tailwind and shadcn/ui. This is one section, not a page — I will drop <Hero /> above the sections my page already has, so no header, footer, or sibling sections.
Internal anatomy, top to bottom:
1. Eyebrow — tiny uppercase category label naming what {{product}} is, one or two words.
2. H1 — the outcome {{product}} delivers for {{audience}}, nine words max, never wrapping past two lines. Emphasize the outcome phrase, de-emphasize the qualifier.
3. Subhead — one sentence of 18–24 words that names {{audience}} and the mechanism behind the outcome.
4. CTA pair — a primary shadcn Button and a ghost secondary. The primary call to action is "{{cta}}"; the secondary points to a demo.
5. Proof element — exactly one idea: either a three-logo strip or a single stat with a one-line source. Not both.
6. Visual slot — an aspect-video bordered placeholder in the right column where a product screenshot will go.
Layout is a 7/5 two-column grid with gap-12, copy left, visual right. Rhythm: pt-20 pb-16 on the section, space-y-6 through the copy stack, mt-10 before the proof row. Hard constraint: everything must fit a 1280x800 viewport with zero scrolling — shrink the visual slot before letting the proof row clip.
Visual direction:
{{style}}
Palette: {{palette}}
Typography: {{type}}
Motion: {{motion}}
Responsive: below md, collapse to one column — copy first, buttons full-width and stacked, visual next, proof row allowed to wrap.
After building, check that: (1) there is no vertical overflow at 1280x800, (2) the H1 occupies at most two lines at desktop width, (3) the button pair sits inline on desktop and stacks on mobile, (4) keyboard focus reaches the primary button before the secondary. If any check fails, regenerate only this component, not the page.Customize it
Runs in your browser. Nothing you type here is sent anywhere.
Your customized prompt
Generate a self-contained Hero section for a project management SaaS as a React component using Tailwind and shadcn/ui. This is one section, not a page — I will drop <Hero /> above the sections my page already has, so no header, footer, or sibling sections. Internal anatomy, top to bottom: 1. Eyebrow — tiny uppercase category label naming what a project management SaaS is, one or two words. 2. H1 — the outcome a project management SaaS delivers for engineering managers at startups, nine words max, never wrapping past two lines. Emphasize the outcome phrase, de-emphasize the qualifier. 3. Subhead — one sentence of 18–24 words that names engineering managers at startups and the mechanism behind the outcome. 4. CTA pair — a primary shadcn Button and a ghost secondary. The primary call to action is "start a free trial"; the secondary points to a demo. 5. Proof element — exactly one idea: either a three-logo strip or a single stat with a one-line source. Not both. 6. Visual slot — an aspect-video bordered placeholder in the right column where a product screenshot will go. Layout is a 7/5 two-column grid with gap-12, copy left, visual right. Rhythm: pt-20 pb-16 on the section, space-y-6 through the copy stack, mt-10 before the proof row. Hard constraint: everything must fit a 1280x800 viewport with zero scrolling — shrink the visual slot before letting the proof row clip. Visual direction: Minimal dark style. Near-black canvas (#0A0A0B) with one elevated surface tone (#141416) for cards — never more than two surface steps. Hairline borders (1px, white at 8% opacity) instead of shadows; if a shadow is unavoidable use 0 1px 2px rgba(0,0,0,0.4) and nothing softer. Text in exactly three steps: white at 92% for headings, 60% for body, 40% for captions. Generous negative space — section padding at least 120px on desktop, 64px on mobile. The accent color appears only on interactive elements and one hero highlight, nowhere else. Palette: a strict neutral ramp (white, #F5F5F5, #E5E5E5, #737373, #171717) carries the entire interface; pick one accent and use it only for primary CTAs, active states, and a single hero highlight. If the accent appears more than five times per viewport it stops being an accent. Keep semantic colors (success, error) desaturated so the accent stays in charge. Typography: one geometric sans (a Futura/Poppins-class face) at three weights maximum (400/500/700). Scale: 64-88px hero, 32px section heads, 18px lede, 16px body, 13px caps labels with 0.08em tracking. Tight headline leading (1.05-1.1), relaxed body (1.6). Let the geometry carry the personality — no italics; weight and size do all hierarchy. Motion: none. Zero scroll animations, zero entrance effects — the page is fully composed the instant it paints. Spend the motion budget on input feedback instead: 120-150ms ease-out color and transform transitions on hover and press states only. Hold this constraint absolutely; it is a statement, not an omission. Responsive: below md, collapse to one column — copy first, buttons full-width and stacked, visual next, proof row allowed to wrap. After building, check that: (1) there is no vertical overflow at 1280x800, (2) the H1 occupies at most two lines at desktop width, (3) the button pair sits inline on desktop and stacks on mobile, (4) keyboard focus reaches the primary button before the secondary. If any check fails, regenerate only this component, not the page.
Same task in other tools
Questions about this prompt
Why does the prompt cap the hero at a 1280x800 viewport?
That is the effective canvas of a 13-inch laptop once browser chrome is subtracted. v0 tends to stack generous padding until the CTA falls below the fold; a hard height budget makes it shrink the visual slot instead. If your test device is smaller, lower the number in the constraint line before pasting.
The visual slot is a placeholder — how do I get my real screenshot in?
After v0 generates, reply in the same chat asking it to replace the aspect-video div with an Image pointing at your uploaded screenshot. Keep the border and the aspect-ratio wrapper so the height budget still holds.
Can I use this together with the full landing-page prompt?
Yes — the page prompt builds the skeleton and this one replaces its hero. Generate the page first, then run this prompt and ask v0 to swap the hero section only, keeping imports and section order untouched.
Part of the v0 landing-page cluster — start from the main v0 landing page prompt.