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.