# Hero #7

### Component Structure

* **COPY WRAPPER (div)**: This foundational layer organizes the Hero #7 component without applying specific styling.
* **HR7 COMPONENT (section)**: Utilizes the `hr7__component` class for full viewport height and centralized content alignment.
* **HR7 CONTAINER (container)**: Marked with `hr7__container`, it holds the component's main elements for structured presentation.
  * **HR7 HEADING (heading)**: Delivers the primary message using `hr7__heading`, positioned for immediate attention.
  * **HR7 TEXT (text-basic)**: Provides supporting information with `hr7__text`, enhancing the message conveyed by the heading.
  * **HR7 BUTTON (button)**: Features a primary action for users, styled with `hr7__button` and `bm__btn` for visibility and interaction.
  * **HR7 IMAGE (image)**: Visual element that complements the textual content, using `hr7__image` for stylistic integration.

### Animation Structure

**HR7 - PAGELOAD**: Sequential animations enhance the entry of `.hr7__heading`, `.hr7__text`, `.hr7__button`, and `.hr7__image`. These elements initially appear with reduced opacity and a slight vertical offset, transitioning to full opacity and alignment for a dynamic page load effect.

**HR7 - IMAGE**: A specific animation for `.hr7__image` on scroll, making the image rotate slightly for an interactive visual effect. This scroll-triggered animation adds depth to the user's engagement with the hero component.