# Hero #3

### Component Structure

* **COPY WRAPPER (div)**: Acts as the outer container for the Hero #3 component, providing a structural hierarchy but without directly attached classes for styling.
* **HR3 SECTION (section)**: The main section of the hero component, employing the class `hr3__component`. This class is designed to center content vertically and horizontally within the viewport, ensuring the hero section covers the full viewport height.
* **HR3 CONTAINER (container)**: Encases the hero content, utilizing the class `hr3__container` to align items centrally within the section.
* **HR3 CONTENT (div)**: The core content area of the hero, structured with the class `hr3__content`. This class facilitates a flexible display and alignment of child elements, accommodating a responsive and aesthetically pleasing layout.
  * **HR3 HEADINGS (heading)**: Multiple headings within the hero content, each utilizing the class `hr3__headline`. These headings are designed to introduce the hero's main message, featured prominently within the layout.
  * **HR3 IMAGE WRAPPER (div)**: Contains a set of images, applying the class `hr3__image-wrapper` to manage the overflow and presentation of the images.
    * **HR3 IMAGES (image)**: Individual images within the wrapper, each marked with the class `hr3__image`. These images are set to adapt in size and border styling, contributing visually to the hero's theme.
  * **HR3 SVG (svg)**: An SVG element enhanced with the class `hr3__svg`, introducing a graphic element to the hero layout. This SVG is styled and animated to integrate seamlessly with the textual and imagery content.
  * **HR3 BUTTON (button)**: A call-to-action button, characterized by the class `hr3__button`. This button is designed to stand out and prompt user interaction, with styling that ensures visibility and appeal.

### Animation Structure

The animations for Hero #3 are triggered on page load, each targeting different elements within the hero component to create a cohesive and engaging entrance:

* **HR3 HEADLINES**: These elements fade in with an upward motion, employing a stagger to ensure each headline appears sequentially, adding depth to the presentation.
* **HR3 IMAGES**: Animated to slide in from the left with a fading effect, each image's entrance is staggered to draw attention progressively across the visual elements.
* **HR3 SVG**: This graphic element is animated to draw itself into view while scaling up, creating a visually interesting effect that highlights the SVG within the hero content.
* **HR3 BUTTON**: Appears with a vertical motion from the bottom and fades in, designed to catch the user's eye and encourage interaction after the initial visual elements have been introduced.

Together, these animations form a dynamic introduction to Hero #3, effectively drawing in the viewer and providing a memorable first impression of the content.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://bricksmotion.gitbook.io/bricksmotion-components/components/heroes/hero-3.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.