CTA Section

The Cta component is a conversion-focused section designed to encourage users to take action.

It includes:

Large marketing headline
Primary and secondary CTA buttons
Floating social media icons
Dashboard/product preview image
Entrance animation
Fully responsive layout

Import the component using:

import Cta from "@/components/marketing/cta";

Preview

Basic Usage

<Cta />

Content Source

The component pulls its content from:

import { CTA_CONTENT } from "@/content/marketing/cta";

Content Structure

export const CTA_CONTENT = {
  heading: "Turn Visitors Into Customers",
 
  subheding: "Start building your next project today.",
 
  image: "/images/dashboard.png",
 
  cta: {
    primary: {
      label: "Get Started",
    },
 
    secondary: {
      label: "Book a Demo",
    },
  },
};

Buttons

The CTA section includes two actions.

<Button variant="primary">
  {CTA_CONTENT.cta.primary.label}
</Button>
 
<Button variant="secondary">
  {CTA_CONTENT.cta.secondary.label}
</Button>

Floating social icons are displayed around the section on larger screens.

Supported icons include:

Facebook
Instagram
X (Twitter)
YouTube
TikTok
Pinterest

Example:

<SocialIcon
  type="facebook"
  color="text-primary"
/>

Dashboard Image

The bottom image is rendered using Next.js Image.

<Image
  src={CTA_CONTENT.image}
  alt="Dashboard image"
  width={900}
  height={600}
  priority
/>

Animation

The section uses Motion for entrance animations.

<motion.section
  initial={{ opacity: 0, y: 40 }}
  whileInView={{ opacity: 1, y: 0 }}
  transition={{
    duration: 0.6,
    ease: "easeOut",
  }}
>

Layout Features

Large marketing headline
Floating social icons
Primary CTA button
Secondary CTA button
Dashboard preview image
Responsive design
Motion animation

Common Use Cases

SaaS landing pages
Startup websites
Product launches
Marketing pages
Waitlist pages
AI tools
Portfolio websites
Agency websites

Customization

You can customize:

Heading
Subheading
CTA labels
Dashboard image
Social icons
Background styling
Animation settings
Button variants

Example

<Cta />

This will render a complete conversion-focused call-to-action section using the content defined in CTA_CONTENT.