> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getsabo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# CTA

> Learn how to customize the Call to Action (CTA) section by changing its default content or overriding it with props.

The Call to Action (CTA) section is a reusable component designed to prompt users to take an action, such as signing up or starting a trial.

**File Location:** `src/components/marketing/cta.tsx`

## How to Customize

There are two primary ways to customize the `CTA` component, depending on whether you want to change the content everywhere or just in one specific place.

<Tabs>
  <Tab title="Change Default Content (Global)">
    If you want to change the main CTA content throughout your site, edit the default values directly in the component. This is the recommended approach for your primary, most-used CTA.

    The default text and link are set in the function's parameters. Edit these values to set your new default call to action.

    ```tsx src/components/marketing/cta.tsx theme={null}
    export function CTA({
      logo,
      title = "The magic of AI at your fingertips.",
      description = "Join thousands of professionals who have already streamlined their scheduling...",
      buttonText = "Get Started",
      buttonHref = "/sign-up",
    }: CTAProps = {}) {
      // ... component logic
    }
    ```

    Once you change these values, any instance of `<CTA />` used without props will display your new default content.
  </Tab>

  <Tab title="Override with Props (Specific Page)">
    For pages where you need a unique CTA, you can pass props to the component to override the default values.

    #### Available Props

    <ParamField path="logo" type="React.ReactNode">
      A logo component to display at the top.
    </ParamField>

    <ParamField path="title" type="string">
      The main heading text.
    </ParamField>

    <ParamField path="description" type="string">
      The descriptive text below the heading.
    </ParamField>

    <ParamField path="buttonText" type="string">
      The text displayed on the action button.
    </ParamField>

    <ParamField path="buttonHref" type="string">
      The URL the button links to.
    </ParamField>

    #### Example: Creating a Custom CTA

    Here's an example of how to create a custom CTA for a specific feature page, overriding the defaults.

    ```tsx theme={null}
    import { CTA } from "@/components/marketing/cta";
    import { SparklesIcon } from "lucide-react"; // Example custom icon

    // ...
    <CTA
      logo={<SparklesIcon className="w-12 h-12 text-primary" />}
      title="Unlock Advanced Analytics"
      description="Upgrade to our Pro plan to access powerful AI-driven insights and reporting features."
      buttonText="Upgrade to Pro"
      buttonHref="/pricing"
    />
    // ...
    ```
  </Tab>
</Tabs>