# Hero Section Component

## Contents

- [Overview](#overview)
- [Hero Types and When to Use](#hero-types-and-when-to-use)
- [Content Guidelines](#content-guidelines)
- [Multiple Heroes (Carousel)](#multiple-heroes-carousel)
- [Mobile Hero](#mobile-hero)
- [Performance](#performance)
- [Checklist](#checklist)

## Overview

Hero section is the prominent banner at top of homepage, immediately below navigation. First content users see - sets tone for shopping experience.

**Assumed knowledge**: AI agents know how to build full-width banners with images and text overlays. This focuses on ecommerce hero patterns.

**Key requirements:**
- Above the fold (immediately visible)
- Clear value proposition or promotional message
- High-quality imagery
- Strong call-to-action
- Fast loading (critical for first impression)

## Hero Types and When to Use

### 1. Full-Width Banner (Most Common)

**Characteristics:**
- Spans entire viewport width
- Large background image or video
- Text overlay with headline + CTA
- Single focused message

**Best for:**
- Seasonal campaigns ("Summer Sale")
- New product arrivals
- Brand storytelling
- Single promotional focus
- Simple, bold message

**Example:** Background image of products, headline "40% Off Summer Sale", CTA "Shop Now"

### 2. Split Hero (Image + Content)

**Characteristics:**
- 50/50 or 60/40 split layout
- Image on one side, text content on other
- No text overlay on image
- Cleaner, easier to read

**Best for:**
- Product launches (show product clearly)
- Detailed messaging (more text space)
- Accessibility (no text-on-image contrast issues)
- Professional/B2B stores

**Example:** Product image (left 50%), headline + benefits + CTA (right 50%)

### 3. Minimal Hero

**Characteristics:**
- Large image, minimal text
- Image does storytelling
- Subtle headline, small CTA
- Emphasis on visual brand

**Best for:**
- Luxury brands (sophisticated aesthetic)
- Lifestyle brands (aspirational imagery)
- Photography-focused products
- Brand over promotion

### 4. Video Hero

**Characteristics:**
- Background video (muted, looping)
- Text overlay on video
- Fallback image for slow connections

**Best for:**
- Fashion brands (show products in motion)
- Lifestyle products (demonstrate usage)
- High-budget campaigns
- Brand storytelling with motion

**Important:** Auto-play muted, provide play/pause controls, optimize file size (<5MB), use poster image fallback.

### 5. Product Showcase Hero

**Characteristics:**
- Multiple featured products in hero
- Grid of 2-4 products
- Quick links to product pages
- Less promotional, more discovery

**Best for:**
- Multi-category stores
- Product-focused (not campaign-focused)
- Quick product discovery
- Minimal marketing, maximum browsing

## Content Guidelines

**Headline best practices:**
- Short and impactful (5-10 words)
- Clear value proposition ("Free Shipping on All Orders")
- Urgency if time-sensitive ("48-Hour Flash Sale")
- Benefit-focused ("Upgrade Your Style")
- Avoid generic ("Welcome to Our Store")

**Subtext (optional):**
- 10-20 words maximum
- Expand on headline benefit
- Add context or details
- Not always necessary (clean design)

**Call-to-action:**
- Single primary CTA button
- Action-oriented text ("Shop Now", "Explore Category", "Get Started")
- High contrast (stands out on image)
- Large enough (48px height minimum)
- Link to relevant landing page (sale, category, product listing)

**Image selection:**
- High quality, professional photography
- Shows products or lifestyle context
- Represents brand aesthetic
- Optimized for web (<500KB)
- Responsive (different crops for mobile)
- Ensure text overlay is readable (adequate contrast)

## Multiple Heroes (Carousel)

**Carousel pattern:**
- 2-4 slides rotating automatically
- Each slide = independent hero (own message, image, CTA)
- Auto-rotate every 5-7 seconds (slow enough to read)
- Manual controls (prev/next arrows, dot indicators)
- Pause on hover (accessibility)

**When to use carousel:**
- Multiple concurrent campaigns (Winter Sale + New Arrivals)
- Different audience segments (Men/Women/Kids)
- Seasonal variety showcase
- Limited above-fold space

**When NOT to use carousel:**
- Single focused campaign (just use one hero)
- Users rarely see slides beyond first (carousel blindness)
- Slower page load (multiple images)
- Accessibility concerns (auto-rotating content)

**Carousel best practices:**
- Max 3-4 slides (more = ignored)
- First slide most important (most viewed)
- Consistent layout across slides
- Clear indicators showing progress
- Don't rely on later slides for critical info
- Pause on interaction (hover, focus)

## Mobile Hero

**Mobile adjustments (CRITICAL):**

**Layout:**
- Full-width, portrait aspect (2:3 or 3:4)
- Vertical composition (text overlays center/bottom)
- Larger text for readability
- Simplified message (shorter headline)

**Split hero on mobile:**
- Stack vertically (image top, text bottom)
- Don't use side-by-side (too cramped)

**Performance:**
- Smaller images (<300KB)
- Different image crop for mobile portrait
- Use `srcset` or `<picture>` for responsive images
- Consider static image instead of video (mobile data)

**Touch interactions:**
- Large CTA button (48px height minimum)
- Easy carousel controls (if used)
- Swipe gesture for carousel slides

## Performance

**Critical for first impression:**

**Image optimization:**
- WebP format with JPEG fallback
- Lazy load below-fold content (not hero - it's above fold)
- Responsive images (mobile gets smaller size)
- Target: <500KB desktop, <300KB mobile
- Use CDN for faster delivery

**Video optimization:**
- <5MB file size maximum
- Muted, autoplay, loop
- Poster image (shows before video loads)
- Fallback to image on slow connections
- Consider not using on mobile (data/performance)

**LCP optimization:**
- Hero image is often Largest Contentful Paint
- Preload hero image: `<link rel="preload" as="image" href="hero.jpg">`
- Inline critical CSS for hero
- Avoid layout shift (set image dimensions)

**Target metrics:**
- LCP < 2.5 seconds
- No layout shift (CLS < 0.1)
- Fast interaction (hero CTA clickable immediately)

## Checklist

**Essential features:**

- [ ] Above the fold (immediately visible)
- [ ] Clear headline (5-10 words, value proposition)
- [ ] High-quality image (professional, on-brand)
- [ ] Primary CTA button (action-oriented, high contrast)
- [ ] Fast loading (<500KB image desktop, <300KB mobile)
- [ ] Responsive images (different sizes/crops for devices)
- [ ] Mobile: Portrait aspect ratio (2:3 or 3:4)
- [ ] Mobile: Vertical text placement (center/bottom)
- [ ] Mobile: Large CTA (48px height minimum)
- [ ] Text overlay readable (adequate contrast, background overlay)
- [ ] If carousel: Max 3-4 slides
- [ ] If carousel: Auto-rotate 5-7 seconds
- [ ] If carousel: Pause on hover/focus
- [ ] If carousel: Manual controls (arrows, dots)
- [ ] If video: Muted, autoplay, loop
- [ ] If video: Poster image fallback
- [ ] If video: <5MB file size
- [ ] Preload hero image (LCP optimization)
- [ ] No layout shift (set image dimensions)
- [ ] ARIA labels on carousel controls
- [ ] Keyboard accessible (Tab to CTA, arrow keys for carousel)