# Hero #4

### Component Structure

* **COPY WRAPPER (div)**: This foundational wrapper organizes the internal structure of Hero #4 without specific styling.
* **HR4 SECTION (section)**: Utilizing the `hr4__component` class, this section ensures that the hero content is centered and spans the full viewport height for maximum impact.
* **HR4 CONTAINER (container)**: Marked with the `hr4__container` class, it aligns and organizes the hero's content elements for optimal presentation.
  * **HR4 IMAGE (image)**: Styled with the `hr4__image` class, this element sets the visual tone, ensuring an engaging backdrop for the hero content.
  * **HR4 HEADING (heading)**: The core message of the hero, delivered boldly using the `hr4__headline` class to capture immediate attention.
  * **HR4 TEXT (text-basic)**: Provides additional context or details, complementing the headline with the `hr4__text` class.
  * **HR4 BUTTON (button)**: A distinct call-to-action, the `hr4__button` class makes this button stand out, guiding users towards the desired interaction.

### Animation Structure

The **"HR4 - Pageload"** timeline details the sequence of animations that enhance the entry of Hero #4's elements on the page, creating a compelling visual narrative:

1. **HR4 IMAGE**: Undergoes a height transition to fully reveal itself, accompanied by a border-radius animation for a softer appearance, creating an inviting visual entrance.
2. **HR4 HEADING**: Fades into view following the image setup, drawing the viewer's attention to the main message with strategic timing to maintain engagement.
3. **HR4 TEXT**: Emerges with additional information to support the headline, fading in to offer depth to the hero's narrative shortly after the heading appears.
4. **HR4 BUTTON**: The final touch in the sequence, this call-to-action button fades in to clearly and enticingly highlight the desired user action.