TypingCTA Module

Overview

The TypingCTA module is an engaging and dynamic call-to-action (CTA) component designed to capture users' attention with animated typing text. It is particularly effective for highlighting multiple features or benefits in a concise and visually appealing way.

To maximize SEO benefits, the core logic of the module is separated into a client-side component (TypingCTAClient.js), while the main presentation and layout are handled in TypingCTA.js. This separation ensures that your content remains accessible and optimized for search engines.

Location

The source code for the TypingCTA module can be found in the /modules/native/TypingCTA folder.

Usage

The TypingCTA 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-background",
    foreground: "text-foreground",
    maxWidth: "max-w-4xl"
};

Description: The sectionColors prop allows you to customize the color scheme and layout of the TypingCTA module, ensuring it aligns with your site's design.
Property Descriptions:
- background: Background color for the section.
- foreground: Foreground text color.
- maxWidth: Maximum width for the content within the section. The maxWidth is crucial for ensuring that when different words are typed, they do not cause the text to wrap onto new lines, which could shift the layout up and down. By carefully balancing the maxWidth with the length of the words used in the typing effect, you can maintain a stable and consistent layout.
Additional Notes:
- bg-background, text-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-accent" and foreground: "text-accent-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:
```
<TypingCTA 
    sectionColors={{ 
        background: "bg-blue-200 dark:bg-blue-700" 
    }}
/>
```

2. `text`

Default Value:

const defaultText = {
    headingstart: "Just Start Using Our UI Modules for",
    words: ['Image Carousel', 'Navigation Bar', 'Pricing Table', 'Everything!'],
    headingend: "",
    description: "Need a Footer? A Pay Button? How about a Promo Bar at the top? Or maybe showcasing a client list in a carousel? With StartupBolt, it's all just copy, paste, and go! Plus, everything looks fantastic right out of the box!",
    ctaText: "Get StartupBolt",
    ctaUrl: "#",
    newTab: false,
};

Description: The text prop allows you to customize the text content displayed in the TypingCTA module, including the animated words, headings, and CTA button.
Property Descriptions:
- headingstart: Text that appears before the animated words.
- words: Array of words or phrases that will be typed out in the animation.
- headingend: Text that appears after the animated words.
- description: A brief description or subheading that provides additional context or encouragement.
- ctaText: Text displayed on the CTA button.
- ctaUrl: URL to which the CTA button will link.
- newTab: 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 headingstart:
```
<TypingCTA 
    text={{ 
        headingstart: "Start Your Journey with" 
    }}
/>
```

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 TypingCTA 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:

<TypingCTA
  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 TypingCTA module with all default settings, simply include it in your page as follows:

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

This example will render the module with the default settings, displaying the predefined text and animated typing effect.

Usage Example with Props

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

import TypingCTA from "@/modules/native/TypingCTA";
 
const MyCustomPage = () => {
  return (
    <TypingCTA 
      sectionColors={{ 
        background: "bg-gray-200 dark:bg-gray-800", 
        foreground: "text-gray-900 dark:text-gray-100",
        maxWidth: "max-w-3xl"
      }}
      text={{ 
        headingstart: "Explore the Power of",
        words: ['Fast Prototyping', 'Beautiful Designs', 'Seamless Integration', 'Unlimited Potential'],
        headingend: "with Our Tools",
        description: "Get everything you need to build and launch your project quickly. From components to complete templates, we've got you covered.",
        ctaText: "Start Now",
        ctaUrl: "/get-started",
        newTab: true
      }}
    />
  );
}
 
export default MyCustomPage;

In this example:

The sectionColors prop is customized to alter the background, foreground, and maximum width of the content.
The text prop is customized to change the headings, animated words, description, and CTA button text.

Conclusion

The TypingCTA module is a powerful and engaging tool for driving user interaction and highlighting key features or benefits. Its customizable props and dynamic typing effect make it a versatile addition to any landing page or marketing section, helping you capture attention and encourage user action.

PricingTable Using Shadcn Modules