> ## Documentation Index
> Fetch the complete documentation index at: https://docs.nexus.hurterdesignstudio.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Hero Section

> The Hero Section is the most important section of your homepage, it's the first thing visitors see and sets the tone for your entire store. Nexus Theme's Hero Section offers unparalleled flexibility with multiple content blocks, advanced animations, and responsive design.

## Overview

The Hero Section allows you to create engaging, conversion-focused banners with:

* **Multiple content blocks** for flexible layouts
* **Advanced animations** and transitions
* **Responsive design** that looks great on all devices
* **Background image/video** support
* **Call-to-action buttons** with customizable styles
* **Statistics display** to build trust
* **Overlay controls** for text readability

## Content Blocks

The Hero Section uses a block-based system for maximum flexibility:

### Eyebrow Block

Add a small text element above your main heading to provide context or categorization.

```liquid theme={null}
{% when 'eyebrow' %}
  {% if block.settings.text != blank %}
    <p class="hero-section__eyebrow" {{ block.shopify_attributes }}>
      {{ block.settings.text }}
    </p>
  {% endif %}
```

**Settings:**

* **Text**: The eyebrow text to display
* **Color**: Text color (inherits from theme or custom)
* **Font Size**: Small, Medium, Large

### Heading Block

Your main headline - the most important text element.

```liquid theme={null}
{% when 'heading' %}
  {% if block.settings.text != blank %}
    <h1 class="hero-section__heading" {{ block.shopify_attributes }}>
      {{ block.settings.text }}
    </h1>
  {% endif %}
```

**Settings:**

* **Text**: Your main headline
* **Color**: Text color
* **Font Size**: Extra Small, Small, Medium, Large, Extra Large
* **Font Weight**: Light, Normal, Medium, Bold, Extra Bold

### Subheading Block

Secondary headline to provide additional context.

```liquid theme={null}
{% when 'subheading' %}
  {% if block.settings.text != blank %}
    <h2 class="hero-section__subheading" {{ block.shopify_attributes }}>
      {{ block.settings.text }}
    </h2>
  {% endif %}
```

**Settings:**

* **Text**: Subheading text
* **Color**: Text color
* **Font Size**: Small, Medium, Large
* **Font Weight**: Light, Normal, Medium, Bold

### Description Block

Longer text content to provide details or benefits.

```liquid theme={null}
{% when 'description' %}
  {% if block.settings.text != blank %}
    <div class="hero-section__description" {{ block.shopify_attributes }}>
      {{ block.settings.text }}
    </div>
  {% endif %}
```

**Settings:**

* **Text**: Description content (supports HTML)
* **Color**: Text color
* **Font Size**: Small, Medium, Large
* **Line Height**: Tight, Normal, Relaxed

### Buttons Block

Call-to-action buttons to drive conversions.

```liquid theme={null}
{% when 'buttons' %}
  <div class="hero-section__buttons" {{ block.shopify_attributes }}>
    {% if block.settings.button_text_1 != blank %}
      <a href="{{ block.settings.button_url_1 | default: '#' }}" 
         class="btn btn--{{ block.settings.button_style_1 }} btn--{{ block.settings.button_size }}">
        {{ block.settings.button_text_1 }}
      </a>
    {% endif %}
    {% if block.settings.button_text_2 != blank %}
      <a href="{{ block.settings.button_url_2 | default: '#' }}" 
         class="btn btn--{{ block.settings.button_style_2 }} btn--{{ block.settings.button_size }}">
        {{ block.settings.button_text_2 }}
      </a>
    {% endif %}
  </div>
```

**Settings:**

* **Button 1 Text**: Primary call-to-action text
* **Button 1 URL**: Link destination
* **Button 1 Style**: Primary, Secondary, Outline, Ghost
* **Button 2 Text**: Secondary call-to-action text
* **Button 2 URL**: Link destination
* **Button 2 Style**: Primary, Secondary, Outline, Ghost
* **Button Size**: Small, Medium, Large

### Statistics Block

Display key statistics to build trust and credibility.

```liquid theme={null}
{% when 'stats' %}
  <div class="hero-section__stats" {{ block.shopify_attributes }}>
    {% if block.settings.stat_1_number != blank %}
      <div class="hero-section__stat">
        <span class="hero-section__stat-number">{{ block.settings.stat_1_number }}</span>
        <span class="hero-section__stat-label">{{ block.settings.stat_1_label }}</span>
      </div>
    {% endif %}
    {% if block.settings.stat_2_number != blank %}
      <div class="hero-section__stat">
        <span class="hero-section__stat-number">{{ block.settings.stat_2_number }}</span>
        <span class="hero-section__stat-label">{{ block.settings.stat_2_label }}</span>
      </div>
    {% endif %}
    {% if block.settings.stat_3_number != blank %}
      <div class="hero-section__stat">
        <span class="hero-section__stat-number">{{ block.settings.stat_3_number }}</span>
        <span class="hero-section__stat-label">{{ block.settings.stat_3_label }}</span>
      </div>
    {% endif %}
  </div>
```

**Settings:**

* **Stat 1 Number**: First statistic number
* **Stat 1 Label**: Description for first statistic
* **Stat 2 Number**: Second statistic number
* **Stat 2 Label**: Description for second statistic
* **Stat 3 Number**: Third statistic number
* **Stat 3 Label**: Description for third statistic

## Section Settings

### Layout Settings

* **Full Width**: Enable to make the section span the full viewport width
* **Hero Height**: Set the minimum height of the hero section (300px - 800px)
* **Content Alignment**: Left, Center, Right
* **Content Position**: Top, Center, Bottom

### Background Settings

* **Background Image**: Upload or select a background image
* **Background Video**: Upload a video file (MP4 format)
* **Background Color**: Fallback color when no image/video is set
* **Overlay Color**: Color overlay for better text readability
* **Overlay Opacity**: Control overlay transparency (0% - 100%)

### Spacing Settings

* **Padding Top**: Space above the section (0px - 100px)
* **Padding Bottom**: Space below the section (0px - 100px)
* **Content Spacing**: Space between content blocks (Tight, Normal, Relaxed)

### Animation Settings

* **Animation Type**: None, Fade In, Slide Up, Slide Down, Zoom In
* **Animation Duration**: Fast (0.3s), Normal (0.6s), Slow (1s)
* **Animation Delay**: Delay before animation starts (0s - 2s)

## CSS Classes

The Hero Section uses these CSS classes for styling:

```css theme={null}
.hero-section {
  position: relative;
  min-height: var(--hero-min-height);
  display: flex;
  align-items: center;
  padding-top: var(--section-padding-top);
  padding-bottom: var(--section-padding-bottom);
}

.hero-section--full-width {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}

.hero-section__content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
}

.hero-section__text-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.hero-section__eyebrow {
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--hero-text-color);
}

.hero-section__heading {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--hero-text-color);
}

.hero-section__subheading {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--hero-text-color);
}

.hero-section__description {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--hero-text-color);
  opacity: 0.9;
}

.hero-section__buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.hero-section__stats {
  display: flex;
  gap: 2rem;
  margin-top: 2rem;
}

.hero-section__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero-section__stat-number {
  font-size: 2rem;
  font-weight: 700;
  color: var(--hero-text-color);
}

.hero-section__stat-label {
  font-size: 0.875rem;
  color: var(--hero-text-color);
  opacity: 0.8;
}

.hero-section__media {
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-section__image {
  max-width: 100%;
  height: auto;
}

.hero-section__img {
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
}
```

## Responsive Design

The Hero Section is fully responsive with these breakpoints:

```css theme={null}
/* Mobile (up to 768px) */
@media (max-width: 768px) {
  .hero-section__content {
    grid-template-columns: 1fr;
    text-align: center;
  }
  
  .hero-section__heading {
    font-size: 2rem;
  }
  
  .hero-section__subheading {
    font-size: 1.25rem;
  }
  
  .hero-section__buttons {
    justify-content: center;
  }
  
  .hero-section__stats {
    justify-content: center;
  }
}

/* Tablet (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  .hero-section__heading {
    font-size: 2.5rem;
  }
  
  .hero-section__subheading {
    font-size: 1.375rem;
  }
}

/* Desktop (1024px+) */
@media (min-width: 1024px) {
  .hero-section__content {
    gap: 3rem;
  }
  
  .hero-section__heading {
    font-size: 3rem;
  }
}
```

## Best Practices

### Content Strategy

1. **Clear Value Proposition**: Your heading should clearly communicate what you offer
2. **Benefit-Focused**: Focus on benefits, not just features
3. **Action-Oriented**: Use strong call-to-action buttons
4. **Trust Signals**: Include statistics or testimonials when relevant

### Visual Design

1. **High-Quality Images**: Use professional, high-resolution background images
2. **Text Readability**: Ensure sufficient contrast between text and background
3. **Visual Hierarchy**: Use different font sizes to create clear hierarchy
4. **White Space**: Don't overcrowd the hero section

### Performance

1. **Optimize Images**: Compress background images for faster loading
2. **Lazy Loading**: Background images are automatically lazy-loaded
3. **Critical CSS**: Hero styles are inlined for faster rendering
4. **Mobile Optimization**: Test on various mobile devices

## Examples

### E-commerce Hero

```liquid theme={null}
{% section 'hero-section' %}
  {% block 'eyebrow' %}
    {% assign text = 'New Collection' %}
  {% endblock %}
  
  {% block 'heading' %}
    {% assign text = 'Premium Quality Products' %}
  {% endblock %}
  
  {% block 'subheading' %}
    {% assign text = 'Discover our latest collection of handcrafted items' %}
  {% endblock %}
  
  {% block 'description' %}
    {% assign text = 'Shop our curated selection of premium products designed for modern living. Free shipping on orders over $50.' %}
  {% endblock %}
  
  {% block 'buttons' %}
    {% assign button_text_1 = 'Shop Now' %}
    {% assign button_url_1 = '/collections/all' %}
    {% assign button_style_1 = 'primary' %}
    {% assign button_text_2 = 'Learn More' %}
    {% assign button_url_2 = '/pages/about' %}
    {% assign button_style_2 = 'outline' %}
  {% endblock %}
  
  {% block 'stats' %}
    {% assign stat_1_number = '10K+' %}
    {% assign stat_1_label = 'Happy Customers' %}
    {% assign stat_2_number = '500+' %}
    {% assign stat_2_label = 'Products' %}
    {% assign stat_3_number = '24/7' %}
    {% assign stat_3_label = 'Support' %}
  {% endblock %}
{% endsection %}
```

### Service-Based Hero

```liquid theme={null}
{% section 'hero-section' %}
  {% block 'eyebrow' %}
    {% assign text = 'Professional Services' %}
  {% endblock %}
  
  {% block 'heading' %}
    {% assign text = 'Transform Your Business' %}
  {% endblock %}
  
  {% block 'subheading' %}
    {% assign text = 'Expert solutions for modern businesses' %}
  {% endblock %}
  
  {% block 'description' %}
    {% assign text = 'We help businesses grow with our comprehensive suite of professional services. From strategy to implementation, we\'ve got you covered.' %}
  {% endblock %}
  
  {% block 'buttons' %}
    {% assign button_text_1 = 'Get Started' %}
    {% assign button_url_1 = '/pages/contact' %}
    {% assign button_style_1 = 'primary' %}
    {% assign button_text_2 = 'View Services' %}
    {% assign button_url_2 = '/pages/services' %}
    {% assign button_style_2 = 'secondary' %}
  {% endblock %}
{% endsection %}
```

## Troubleshooting

### Common Issues

1. **Text Not Visible**: Check overlay opacity and text color contrast
2. **Images Not Loading**: Verify image file size and format
3. **Layout Breaking**: Check content length and responsive settings
4. **Buttons Not Working**: Verify URL settings and link validity

### Performance Issues

1. **Slow Loading**: Optimize background images (compress, use WebP)
2. **Layout Shift**: Set proper image dimensions
3. **Animation Lag**: Reduce animation complexity on mobile devices

## Related Sections

* [Featured Collection](/sections/featured-collection) - Showcase products below the hero
* [Product Showcase](/sections/product-showcase) - Highlight specific products
* [Testimonials](/sections/testimonials) - Build trust with customer reviews
* [Newsletter Signup](/sections/newsletter-signup) - Capture leads

<Button href="/sections/featured-collection" size="lg">
  Next: Featured Collection
</Button>