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


---

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