> For the complete documentation index, see [llms.txt](https://bricksmotion.gitbook.io/bricksmotion-components/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bricksmotion.gitbook.io/bricksmotion-components/components/cta/cta-1.md).

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