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.