CTA #1

Component Structure

• CTA1 COMPONENT (Section): This is the primary wrapper of the CTA, setting the stage with a striking background color. It utilizes the cta1__component CSS class, which includes custom properties for animations, particularly focusing on a circular reveal effect.

• CTA1 CONTAINER (Container): Nested within the CTA1 COMPONENT, this container aligns the CTA content (heading, text, button) centrally. It is styled with the cta1__container CSS class to ensure content is perfectly aligned for maximum visual impact.

• CTA1 HEADING (Heading): Provides a compelling headline to grab the user's attention, styled with cta1__heading. The text color and alignment are set to ensure readability against the component's background.

• CTA1 TEXT (Text-basic): Offers additional information or persuasive content to support the headline. It uses the cta1__text class for styling, ensuring the text is centrally aligned and easily readable.

• CTA1 BUTTON (Button): The call-to-action button, encouraging users to take the next step. Styled with cta1__button, it is positioned to follow the text, inviting immediate action.

Animation Structure

• CTA1 - In View: Defines the animations for when the CTA component scrolls into view. It comprises two main animations:

  • The first animation expands the cta1__component to full visibility using a circular reveal effect, changing the --circle-width custom property from 0% to 100%.

  • The second animation targets the child elements of cta1__container (heading, text, button), bringing them into view with a vertical movement from 20% and opacity change from 0 to 1. This animation utilizes staggering to ensure each element appears sequentially, enhancing the visual flow.