Hero #2

Component Structure

COPY WRAPPER (div): Serves as the top-level container for the hero section, encapsulating all its elements without any specific styling applied directly.

HR2 SECTION (section): Acts as the main structural element of the hero component, with a CSS Class hr2__component applied to center the content and align items within the full viewport height.

HR2 CONTAINER (container): A container within the section that further aligns and organizes the hero content, using the hr2__container class to center items.

HR2 CONTENT (div): This div wraps the headline and button/text wrapper, employing a flex display to manage layout with responsiveness in mind, especially for tablet and mobile views.

HR2 HEADLINE (heading): Displays the primary message of the hero section. It uses the hr2__headline class for styling and is an H1 tag, emphasizing its importance.

HR2 WRAPPER (div): Contains the button and text elements, structured with flexbox to ensure proper alignment and spacing, adapting for mobile portrait orientations.

HR2 BUTTON (button): A call-to-action button labeled "Button," styled with a hr2__button class, indicating its dark style and importance in mobile portrait order.

HR2 TEXT (text-basic): Provides additional descriptive text using the hr2__text class to manage margins and maximum width for readability.

HR2 IMAGE GRID (div): Organizes images in a grid layout, applying the hr2__image-grid class to define grid columns, gaps, and top margin adjustments.

HR2 IMAGE WRAPPER and HR2 IMAGE (div and image): Multiple wrappers and image elements each using the hr2__image-wrapper and hr2__image classes respectively. These elements display various placeholder images, with specific classes (hr2__down, hr2__up) to manipulate their initial animation states.

Animation Structure

HR2 - Pageload (Timeline/Event): This timeline triggers animations for the hero component on page load, targeting elements with specific classes to animate properties such as opacity and vertical position. Key animations include:

.hr2__headline: Animated to fade in and move up slightly, creating a welcoming effect for the headline.

.hr2__button: Appears with a fade and upward movement, drawing attention shortly after the headline.

.hr2__text: Fades in with a slight horizontal movement, adding to the sequential reveal of content.

.hr2__down and .hr2__up: These selectors target the image elements, animating them differently based on their class to create a layered effect, enhancing the visual appeal on page load.