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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://bricksmotion.gitbook.io/bricksmotion-components/components/heroes/hero-1.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.