# 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.