# 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.