# Hero #6

### Component Structure

* **COPY WRAPPER (div)**: Encapsulates the Hero #6 component, organizing its structure without applying specific styling.
* **HR6 COMPONENT (section)**: Acts as the main section, using the class `hr6__component` to ensure full viewport height coverage and central alignment of the content.
* **HR6 CONTAINER (container)**: Directly contains the hero's main elements, marked with `hr6__container` for content alignment and positioning.
  * **HR6 CONTENT (div)**: Central content area containing the headline, text, and button, structured for optimal readability and user engagement.
    * **HR6 HEADLINE (heading)**: Delivers the key message with impactful typography.
    * **HR6 TEXT (text-basic)**: Provides additional information or context.
    * **HR6 BUTTON (button)**: Encourages user interaction with a clear call-to-action.
* **HR6 IMAGE WRAPPERS (div)**: Multiple wrappers (`hr6__image-wrapper1`, `hr6__image-wrapper2`, `hr6__image-wrapper3`) contain various images, positioned and styled to complement the hero's content and add visual depth.

### Animation Structure

* **HR6 - PAGELOAD**:
  * Targets `.hr6__content > *` and `.hr6__image` for initial visibility and position animations, enhancing the content's entrance on the webpage.
* **HR6 - SCROLL**:
  * Activates scroll-triggered animations for `.hr6__image-wrapper1`, `.hr6__image-wrapper2`, and `.hr6__image-wrapper3`, moving the images vertically to create an immersive parallax effect. The animations vary in duration and effect, contributing to a dynamic and engaging user experience as they scroll through the hero section.