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.