CTA Module

Overview

The CTA module is a versatile component designed to create compelling call-to-action sections on your website. It helps in driving user engagement by prompting visitors to take a specific action, such as signing up, purchasing, or exploring more content.

Location

The source code for the CTA module can be found in the /modules/native/CTA.js file.

Usage

The CTA module is highly customizable through props. While most props have default values, they can be easily overridden to tailor the module to your specific requirements.

Props

1. `sectionColors`

Default Value:

const defaultSectionColors = {
    background: "bg-accent",
    foreground: "text-accent-foreground"
}

Description: The sectionColors prop allows you to customize the color scheme and layout of the CTA module, ensuring it aligns with your site's design.
Property Descriptions:
- background: Background color for the section.
- foreground: Foreground text color.
Additional Notes:
- bg-accent, text-accent-foreground, etc., are theme colors. For more information, refer to the Theming Documentation.
- You can easily swap main and accent colors by setting background: "bg-background" and foreground: "text-foreground".
- To support dark mode, use classes like bg-white dark:bg-black for color changes based on the theme.
- The sectionColors object can be partially updated with props. For example, to change only the background color:
```
<CTA 
    sectionColors={{ 
        background: "bg-blue-200 dark:bg-blue-700" 
    }}
/>
```

2. `text`

Default Value:

const defaultText = {
    title: "80% of entrepreneurs never launch.",
    description: "They get stuck on payment integration, authentication, database integration, SEO, and landing page design.",
    ctaText: "Get Started",
    ctaUrl: "#",
    newTab: false,
}

Description: The text prop allows you to customize the textual content of the CTA module, including the title, description, and the call-to-action button text and link.
Property Descriptions:
- title: The main headline for the CTA section.
- description: A brief description or message supporting the CTA.
- ctaText: The text displayed on the CTA button.
- ctaUrl: The URL the CTA button links to.
- newTab: A Boolean value indicating whether the link should open in a new tab.
Additional Notes:
- Customize the text content to align with your brand's messaging.
- If no text prop is provided, the default values will be used.
- The text object can be partially updated. For example, to change just the title:
```
<CTA 
    text={{ 
        title: "Launch Your Startup Today" 
    }}
/>
```

3. `CustomButton`

Description: The CustomButton prop allows you to pass a custom button component if you want to use a button different from the default one provided by the CTA module.

Notes:

If the CustomButton prop is provided, it will replace the default CTA button.
This prop is optional and allows you to fully customize the CTA.

For example, you can use a custom PayButton instead of the default CTA button. Refer to the PayButton Documentation for more details. Here's how you can implement it:

<CTA
  CustomButton={
    <PayButton
      plan={settings.PLAN_DETAILS[0]}
      buttonTitle="Get StartupBolt"
      className="bg-primary text-primary-foreground text-lg font-bold py-3 px-8 rounded-md hover:bg-primary/90 transition duration-300 text-center flex items-center justify-center"
    />
  }
/>

Usage Example without Props

To use the CTA module with all default settings, simply include it in your page as follows:

import CTA from "@/modules/native/CTA";
 
const MyPage = () => {
  return (
    <CTA />
  );
}
 
export default MyPage;

This example will render the module with the default settings, including the default title, description, and a simple "Get Started" button.

Usage Example with Props

Here’s an example demonstrating how to customize the CTA module with props:

import CTA from "@/modules/native/CTA";
 
const MyPage = () => {
  return (
    <CTA 
      sectionColors={{ 
        background: "bg-blue-200 dark:bg-blue-700", 
        foreground: "text-blue-900" 
      }}
      text={{
        title: "Take the First Step to Success",
        description: "Join the platform that makes launching easier than ever.",
        ctaText: "Start Now",
        ctaUrl: "/signup",
        newTab: true,
      }}
    />
  );
}
 
export default MyPage;

In this example:

Colors: Custom colors are applied to match a blue theme.
Text: The title, description, and CTA button text are customized to fit the specific call-to-action.
Link: The CTA button directs users to the signup page, opening in a new tab.

Conclusion

The CTA module is a powerful tool for driving user engagement and conversions on your website. By customizing its appearance and content, you can create compelling calls to action that resonate with your audience and encourage them to take the next step in their journey with your product or service.

Comparison FeatureTabs