CTA Section

Layout

Call-to-action section for conversions and user engagement.

Import

import { 
  PixelCta,
  PixelCtaContent,
  PixelCtaTitle,
  PixelCtaDescription,
  PixelCtaActions,
  PixelCtaPattern,
  PixelCtaBadge,
  PixelCtaHighlight
} from "@/components/ui/pixel/pixel-cta"

Usage

Get Started Today

Join thousands of developers building amazing things

Component Source

Copy and paste the following code into your project at /src/components/ui/pixel/pixel-cta.tsx

import { cva, type VariantProps } from "class-variance-authority";
import * as React from "react";
import { cn } from "@/lib/utils";

const pixelCtaVariants = cva(
  "relative w-full border-4 border-black overflow-hidden",
  {
    variants: {
      variant: {
        default:
          "bg-white dark:bg-[#2a2a2a] shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]",
        primary:
          "bg-[#4a90e2] text-white shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]",
        secondary:
          "bg-[#ffd700] text-black shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]",
        dark: "bg-black text-white border-[#4a90e2] shadow-[8px_8px_0px_0px_rgba(74,144,226,0.5)]",
        gradient:
          "bg-gradient-to-br from-[#4a90e2] to-[#7b68ee] text-white shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]",
        success:
          "bg-[#50c878] text-white shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]",
        accent:
          "bg-[#ff6b9d] text-white shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]",
        purple:
          "bg-[#9b59b6] text-white shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]",
      },
      size: {
        sm: "py-12 md:py-16",
        md: "py-16 md:py-24",
        lg: "py-24 md:py-32",
        xl: "py-32 md:py-40",
      },
      align: {
        left: "text-left",
        center: "text-center",
        right: "text-right",
      },
    },
    defaultVariants: {
      variant: "primary",
      size: "md",
      align: "center",
    },
  },
);

export interface PixelCtaProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof pixelCtaVariants> {}

const PixelCta = React.forwardRef<HTMLDivElement, PixelCtaProps>(

// ... (more code below)

Props

PropTypeDefaultDescription
variant"default" | "primary" | "secondary" | "dark" | "gradient" | "success" | "accent" | "purple""primary"Visual style variant of the CTA section - now with colorful options
size"sm" | "md" | "lg" | "xl""md"Padding size of the CTA section
align"left" | "center" | "right""center"Text alignment within the CTA
pattern"dots" | "grid" | "checkerboard" | "scanlines""dots"Background pattern for decorative overlay

Examples

Basic CTA

Simple call-to-action with buttons

Get Started Today

Join thousands of developers building amazing things

With Pattern

CTA with decorative background pattern

Get Started Today

Join thousands of developers building amazing things

Dark CTA

Dark themed call-to-action

Get Started Today

Join thousands of developers building amazing things

Left Aligned

CTA with left-aligned content

Get Started Today

Join thousands of developers building amazing things

Compact CTA

Smaller CTA for inline use

Get Started Today

Join thousands of developers building amazing things

Accessibility

This component is built with accessibility in mind, including proper ARIA attributes, keyboard navigation, and focus management.