Components: Hero Section#

Guides hero section design for conversion and first impressions. The hero is where users spend ~80% of initial viewing time; first impressions form in milliseconds.

When invoking: On first use, if helpful, open with 1-2 sentences on what this skill covers and why it matters, then provide the main output. On subsequent use or when the user asks to skip, go directly to the main output.

Initial Assessment#

Check for project context first: If .claude/project-context.md or .cursor/project-context.md exists, read it for value proposition, audience, and Section 12 (Visual Identity).

Identify:

1. Page type: Homepage, landing, product, pricing
2. Primary goal: Signup, trial, purchase, learn more
3. Platform: Web, mobile, both

Core Components (Four Essentials)#

• Headline (H1): 6–10 words max; instantly communicate core value and benefit. Answer "What's in it for me?" within seconds.
• Subheading: Clear, concise explanation reinforcing why the product/service is valuable.
• Primary CTA: Single, prominent action button visible without scrolling. One per hero to avoid choice overload.
• Visual: High-quality image, video, or animation that amplifies the message.

Optional but Effective#

• Trust cues: 1–3 elements (reviews, logos, statistics)
• Secondary CTA: For users not ready for primary action

Layout Types#

Hero is a Spotlight layout—single focus, primary element with secondary around it. Choose layout by content balance and conversion goal.

LayoutStructureBest forSplit (50/50)Text left, visual right (or vice versa); equal weightProduct, SaaS; clear value + demoSplit (75/25)Text dominant; smaller image columnCopy-heavy; trust-firstSplit (25/75 "Signpost")Small image beside primary contentMinimal visual; emphasis on headlineCenteredText + CTA centered; visual full-width or stackedBrand, landing; single CTAFull-width imageImage background; overlay textEmotional; lifestyle, brand

Responsive: Split layouts stack vertically on mobile (text above image); centered maintains center. Mobile-first; ensure CTA above fold on small screens.

Alignment#

AxisOptionsUseHorizontalLeft, center, rightLeft align for text-heavy; center for minimalVerticalTop, center, bottomCenter for full-viewport hero; top for short hero

Best Practices#

3-Second Rule#

The hero must answer three questions within 3 seconds: What is this? Why should I care? What should I do next? ~80% of users never scroll beyond the hero; make an immediate impact.

Messaging#

• No guessing required; message must be instantly clear.
• Single primary CTA to avoid choice overload.
• Action-oriented, benefit-focused copy.
• Emotional intent first: Evoke emotion (trust, excitement, confidence) before users read the headline. Avoid generic phrases ("Welcome to Our Website") or overly clever wordplay.

Visuals#

• Fast-loading; avoid heavy assets that delay LCP
• Brand-aligned; use typography and colors from brand-visual-generator
• Support the message; don't distract
• Frontend aesthetics: For motion (staggered reveals, hover), spatial composition, and backgrounds—see brand-visual-generator Frontend Aesthetics

Technical#

• Mobile-first design
• Lightweight for quick loading
• Ensure LCP (Largest Contentful Paint) optimization

SEO Considerations#

• Headline often contains <h1>; include primary keyword
• Hero content in initial HTML; avoid JS-only rendering. See rendering-strategies
• Image optimization: Alt text, format (WebP), LCP, responsive—see image-optimization

UX Guidelines#

Hierarchy#

• Headline > Subheading > CTA
• Visual should complement, not compete with, text

Accessibility#

RequirementPracticeContrastText over images: >=4.5:1; use overlay if neededTouch targetsCTA >=44x44pxKeyboardCTA keyboard-accessible; visible focus indicatorScreen readersProper heading order; image alt text; aria-label for icon-only buttonsReduced motionRespect prefers-reduced-motion for animationsInteractionCTA has cursor-pointer; hover uses color/opacity (not scale) to avoid layout shift

Testing#

• A/B test headline, CTA copy, and visuals
• Measure bounce rate, conversion rate, time to first interaction

Output Format#

• Hero structure (headline, subheading, CTA, visual)
• Copy suggestions
• Technical checklist (LCP, accessibility, image optimization)
• Testing recommendations

Related Skills#

• card: Hero vs card—hero is single above-fold; cards are repeated units in grid
• grid: Hero is one section; content below often uses grid (products, features)
• cta-generator: Hero typically contains primary CTA
• trust-badges-generator: Trust cues in hero
• logo-generator: Logo appears in hero context
• brand-visual-generator: Typography, colors, spacing for hero design
• homepage-generator: Hero is central to homepage design
• landing-page-generator: Hero is step 1 of landing page flow; campaign pages
• image-optimization: Hero image optimization (alt, WebP, LCP, responsive)
• rendering-strategies: Content in initial HTML; SSR/SSG for hero