CTA #2

Component Structure

• CTA2 COMPONENT (Section): This section acts as the primary wrapper, using the cta2__component CSS class. It sets the stage for the entire CTA, defining the background and other visual elements that make the CTA stand out.

• CTA2 CONTAINER (Container): Nested within the CTA2 COMPONENT, this container, styled with cta2__container, organizes the content of the CTA, ensuring proper alignment and distribution.

• CTA2 WRAPPER (Block): Within the container, the CTA2 WRAPPER holds the heading, text, button, and image. It uses the cta2__wrapper class to apply a unique clip-path animation, background color, and styling to center its content.

• CTA2 HEADING (Heading): The headline of the CTA, crucial for capturing the user's interest. Styled with cta2__heading, it ensures the text is visually appealing against the component's background.

• CTA2 TEXT (Text-basic): Provides additional information or persuasive content beneath the heading. The cta2__text class is used for styling, focusing on text color, alignment, and readability.

• CTA2 BUTTON (Button): The action element of the CTA, encouraging users to take a specified action. It's styled with cta2__button for prominence and alignment with the component's visual hierarchy.

• CTA2 IMAGE (Image): Enhances the CTA with visual imagery, using the cta2__image class for styling. It's positioned within the wrapper for optimal visual integration with the text and button.

Animation Structure

• CTA2 - In View: This animation sequence is triggered when the CTA component comes into the viewport, consisting of:

  • An animation that adjusts the --clip-width custom property from 50% to 0%, revealing the .cta2__wrapper content in a visually engaging manner by expanding the clip-path.

  • A subsequent animation targets the child elements within .cta2__wrapper, bringing them into view with a vertical movement and fade-in effect, enhancing the reveal with staggered timing for each element.