Hero #1

Component Structure

COPY WRAPPER (Div): A wrapper for the entire hero section. It does not have any CSS Classes directly applied to it.

HR1 SECTION (Section): The main section of the hero component. It has the CSS Class hr1__section, which is designed to ensure the section covers the full viewport height and centers its content both vertically and horizontally.

HR1 CONTAINER (Container): This container holds the content and image of the hero section. It uses the CSS Class hr1__container, setting it to display in a row direction with center alignment and a gap of 40px between elements.

HR1 CONTENT (Div): Contains the headline, text, and button. The CSS Class hr1__content applies a display flex with a column direction and aligns items to the start. It takes up 50% of the container's width, adjusting to auto on mobile landscape.

HR1 HEADLINE (Heading): The main headline of the hero section, tagged as h1. It utilizes the CSS Class hr1__headline with no additional specified settings.

HR1 TEXT (Text-Basic): A paragraph providing additional information. It comes with a top margin of 20px, specified under the CSS Class hr1__text.

HR1 BUTTON (Button): A call-to-action button styled as dark with the CSS Class hr1__button, also with a top margin of 20px.

HR1 IMAGE CONTENT (Div): This division holds the hero image and its overlay. It uses the CSS Class hr1__image-content, ensuring the image content covers 50% of the container's width, with specific adjustments for mobile landscape.

HR1 IMAGE (Image): The hero image, with the CSS Class hr1__image. The image is set to fill the designated space effectively.

HR1 IMAGE OVERLAY (Div): An overlay effect for the hero image, applying a black background over the image. This is managed by the CSS Class hr1__image-overlay, making the overlay cover the entire image area.

Animation Structure

The animations are orchestrated by Bricksforge, specifically designed for the "Hero #1" component, under the timeline/event name "HR1 - Pageload". Each animation targets specific elements to enhance the user's visual experience:

HR1 HEADLINE: Animates from a 20% vertical position with 0 opacity to its final position, enhancing the headline's entrance.

HR1 TEXT: Similar to the headline, the text also animates from a 20% vertical position with 0 opacity, creating a coherent flow.

HR1 BUTTON: The button follows suit with the text and headline, ensuring a smooth, cohesive entrance for all textual elements.

HR1 IMAGE OVERLAY: Unique animation from 101% to 0% on the y-axis, creating a revealing effect for the image underneath.

HR1 IMAGE: Animates from a -20% vertical position with 0 opacity, slightly delayed to emphasize the reveal effect by the overlay.

These animations are triggered on page load, making the hero section come alive the moment a visitor lands on the page. The use of staggered animations and smooth transitions ensures a dynamic yet seamless introduction to your website's content.