CTACTA Dark
page.tsx
import CTA from "@/components/cta";

Properties

title
string
default:"Ready to get started?"

Title of the CTA

description
string

Description of the CTA

primaryButtonText
string
default:"Get Started"

Text of the primary button

primaryButtonHref
string
default:"/sign-up"

Redirect to the given path when the primary button is clicked

showBooking
boolean
default:"false"

Whether to display a booking option alongside the main CTA

className
string

Custom CSS classes to apply to the component

Usage

example.tsx
<CTA showBooking={true} />

The CTA component creates a visually appealing section with animated elements, a primary “Get Started” button, an optional “Book a Demo” button, and highlighted benefits. It’s designed to grab user attention and encourage immediate action.

Tips

When customizing the text in the CTA component, keep the following in mind:

  • Use action-oriented language in the main heading (e.g., “Unlock premium features”)
  • Keep benefit statements short and impactful
  • Use strong verbs that encourage immediate action for the button text that clearly communicates the next step (e.g. “Get Started”, “Try it Free”, “Learn More”)

If you need basic components like buttons, inputs, and more, they are available with Shadcn UI.