Docs
Native Modules
CTA

CTA Module

Overview

The CTA (Call-to-Action) module creates focused, conversion-oriented sections for your website. It combines compelling headings with persuasive descriptions and a prominent call-to-action button, perfect for driving user engagement and conversions.

Key Features

  • Centered, focused layout design
  • Customizable heading and description
  • Prominent call-to-action button
  • Support for custom button components
  • Responsive design
  • Dark mode support
  • Configurable colors and content

Quick Start

import CTA from '@/modules/native/CTA';
 
// Basic usage
const MyPage = () => {
  return (
    <CTA />
  );
};

Customization Options

Text Content Customization

Customize the text content by passing a text prop:

const MyPage = () => {
  const textContent = {
    title: "Start Your Free Trial Today",
    description: "Join thousands of satisfied customers and transform your business",
    ctaText: "Get Started",
    ctaUrl: "/signup",
    newTab: true
  };
 
  return (
    <CTA text={textContent} />
  );
};

Text Properties

PropertyTypeDefaultDescription
titlestring"Watch Your Business..."Main heading text
descriptionstring"Don't waste time..."Supporting description
ctaTextstring"Learn More"Button text (optional)
ctaUrlstring"#"Button link URL
newTabbooleanfalseOpen link in new tab

Color Customization

Customize colors using the sectionColors prop:

const MyPage = () => {
  const colorSettings = {
    background: "bg-blue-100",
    foreground: "text-blue-900"
  };
 
  return (
    <CTA sectionColors={colorSettings} />
  );
};

Color Properties

PropertyTypeDefaultDescription
backgroundstring"bg-accent"Background color of the section
foregroundstring"text-accent-foreground"Text color of the section

Custom Button Integration

You can provide your own custom button component:

const MyPage = () => {
  const CustomButton = (
    <button className="custom-button-class">
      Start Free Trial
    </button>
  );
 
  return (
    <CTA CustomButton={CustomButton} />
  );
};

Best Practices

  1. Content Writing

    • Use action-oriented titles
    • Keep descriptions clear and concise
    • Make button text specific and compelling
    • Focus on a single conversion goal

  2. Design

    • Maintain good contrast between text and background
    • Keep the CTA section focused and uncluttered

  3. Implementation

    • Place CTAs strategically on your page
    • Consider using different colors for different types of actions
    • Test all links thoroughly

Common Usage Examples

Newsletter Signup

<CTA
  text={{
    title: "Stay Updated with Our Newsletter",
    description: "Get weekly insights and tips delivered straight to your inbox",
    ctaText: "Subscribe Now",
    ctaUrl: "/subscribe"
  }}
  sectionColors={{
    background: "bg-blue-50",
    foreground: "text-blue-900"
  }}
/>

Product Launch

<CTA
  text={{
    title: "Be First to Access Our New Platform",
    description: "Join the waitlist and get early-bird pricing",
    ctaText: "Join Waitlist",
    ctaUrl: "/waitlist"
  }}
/>

Limited Time Offer

<CTA
  text={{
    title: "Special Holiday Offer - 50% Off",
    description: "Limited time only. Don't miss out on this exclusive deal",
    ctaText: "Claim Discount",
    ctaUrl: "/offer"
  }}
  sectionColors={{
    background: "bg-red-100",
    foreground: "text-red-900"
  }}
/>

Need Help?

If you have questions or need support, please contact us by email at startupbolt@gmail.com or on Twitter at https://x.com/nifal_adam (opens in a new tab).

ComparisonCustomerRatings