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.