CTA Section

Overview

The CTA (Call to Action) section is a versatile component designed to drive user engagement. It features a compelling headline, description, and action buttons with customizable styling.

Preview

The CTA section component with a gradient background, compelling headline, and action buttons.

Basic Usage

Import and use the CTA component in your pages:

import { CTASection } from "@/components/landing/cta-section";

export default function YourPage() {
  return (
    <CTASection
      title="Ready to Get Started?"
      description="Join thousands of users who are already using our platform."
      primaryAction={{
        label: "Get Started",
        href: "/signup",
      }}
      secondaryAction={{
        label: "Learn More",
        href: "/about",
      }}
    />
  );
}

Props

Required Props

interface CTASectionProps {
  title: string;              // Main heading text
  description: string;        // Supporting description text
  primaryAction: {
    label: string;           // Primary button text
    href: string;           // Primary button link
  };
}

Optional Props

interface CTASectionProps {
  secondaryAction?: {
    label: string;          // Secondary button text
    href: string;          // Secondary button link
  };
  className?: string;      // Additional CSS classes
  variant?: "default" | "centered" | "split";  // Layout variant
  background?: "light" | "dark" | "gradient";  // Background style
}

Variants

Default

<CTASection
  title="Get Started Today"
  description="Join our platform and start building amazing things."
  primaryAction={{
    label: "Start Free Trial",
    href: "/trial"
  }}
/>

Centered with Secondary Action

<CTASection
  variant="centered"
  title="Ready to Transform Your Business?"
  description="Get started with our enterprise solution today."
  primaryAction={{
    label: "Contact Sales",
    href: "/contact"
  }}
  secondaryAction={{
    label: "View Pricing",
    href: "/pricing"
  }}
/>

Split with Gradient Background

<CTASection
  variant="split"
  background="gradient"
  title="Join Our Newsletter"
  description="Get the latest updates and news delivered to your inbox."
  primaryAction={{
    label: "Subscribe Now",
    href: "/subscribe"
  }}
/>

Styling

The CTA section uses Tailwind CSS for styling and can be customized using the className prop:

<CTASection
  className="bg-gradient-to-r from-orange-500 to-red-500 text-white"
  title="Custom Styled CTA"
  description="This CTA section has a custom gradient background."
  primaryAction={{
    label: "Get Started",
    href: "/start"
  }}
/>