CTA Section

The <CTA> section provides a final conversion opportunity at the bottom of your landing page. It creates urgency and gives visitors a clear next step with a prominent call-to-action.

Interface

import type { CTAProps } from 'mdxui'

interface CTAProps {
  /** Main headline */
  title: string
  /** Supporting description */
  description?: string
  /** Primary call-to-action */
  cta: CTA
  /** Secondary call-to-action */
  secondaryCta?: CTA
  /** Background variant */
  variant?: 'default' | 'gradient' | 'bordered'
}

interface CTA {
  text: string
  href: string
}

Usage

Basic Example

import { CTA } from '@mdxui/beacon'

<CTA
  title="Ready to get started?"
  cta={{ text: "Start Free Trial", href: "/signup" }}
/>

With Description

<CTA
  title="Start building today"
  description="Join thousands of developers shipping faster with mdxui"
  cta={{ text: "Get Started Free", href: "/signup" }}
/>

With Secondary CTA

<CTA
  title="Transform your development workflow"
  description="Start your 14-day free trial. No credit card required."
  cta={{ text: "Start Free Trial", href: "/signup" }}
  secondaryCta={{ text: "Schedule Demo", href: "/demo" }}
/>

Gradient Variant

<CTA
  variant="gradient"
  title="Ship your SaaS in days, not months"
  description="Everything you need to launch: auth, billing, admin, and more"
  cta={{ text: "Get Started", href: "/signup" }}
/>

Bordered Variant

<CTA
  variant="bordered"
  title="Ready to level up?"
  description="Join the community of developers building faster"
  cta={{ text: "Sign Up Free", href: "/signup" }}
  secondaryCta={{ text: "View Pricing", href: "/pricing" }}
/>

Props

`title` (required)

Type: string

Main headline for the CTA section. Should be action-oriented and create urgency.

<CTA title="Start your free trial today" />

<CTA title="Ready to ship faster?" />

<CTA title="Join 10,000+ developers" />

`description` (optional)

Type: string

Supporting text that reinforces the value proposition or removes friction.

<CTA
  title="Get started in minutes"
  description="No credit card required. Cancel anytime."
/>

`cta` (required)

Type: CTA

Primary call-to-action button.

interface CTA {
  text: string    // Button text
  href: string    // Destination URL
}

<CTA
  title="Ready to begin?"
  cta={{ text: "Start Free Trial", href: "/signup" }}
/>

`secondaryCta` (optional)

Type: CTA

Secondary call-to-action for users who need more information.

<CTA
  title="Start building"
  cta={{ text: "Get Started", href: "/signup" }}
  secondaryCta={{ text: "Contact Sales", href: "/contact" }}
/>

`variant` (optional)

Type: 'default' | 'gradient' | 'bordered' Default: 'default'

Visual style of the CTA section.

// Default: Clean background
<CTA variant="default" />

// Gradient: Eye-catching gradient background
<CTA variant="gradient" />

// Bordered: Subtle border emphasis
<CTA variant="bordered" />

Variants in Detail

Default Variant

Simple, clean CTA with solid background.

<CTA
  variant="default"
  title="Start your journey"
  description="Join thousands of successful teams"
  cta={{ text: "Get Started Free", href: "/signup" }}
/>

Best for:

Professional, minimal designs
B2B products
When you want subtlety

Gradient Variant

Bold, eye-catching gradient background.

<CTA
  variant="gradient"
  title="Build something amazing"
  description="Start your 14-day free trial today"
  cta={{ text: "Start Building", href: "/signup" }}
  secondaryCta={{ text: "See Pricing", href: "/pricing" }}
/>

Best for:

Consumer products
High-energy brands
Maximum attention

Bordered Variant

Subtle border creates visual separation without overwhelming.

<CTA
  variant="bordered"
  title="Ready to get started?"
  description="No contracts. Cancel anytime."
  cta={{ text: "Start Free Trial", href: "/signup" }}
/>

Best for:

Documentation sites
Developer tools
Understated designs

Implementation Details

The reference implementation from @mdxui/beacon includes:

Features

Responsive Layout - Works on all screen sizes
Visual Prominence - Stands out from surrounding content
Multiple Variants - Different visual styles
Button Hierarchy - Clear primary and secondary actions
Accessibility - Semantic HTML and ARIA labels

Structure

<section className={`cta cta-${variant}`}>
  <div className="container">
    <div className="cta-content">
      <h2 className="cta-title">{title}</h2>
      {description && (
        <p className="cta-description">{description}</p>
      )}

      <div className="cta-actions">
        <Button href={cta.href} size="lg">
          {cta.text}
        </Button>
        {secondaryCta && (
          <Button
            href={secondaryCta.href}
            variant="outline"
            size="lg"
          >
            {secondaryCta.text}
          </Button>
        )}
      </div>
    </div>
  </div>
</section>

Real-World Examples

SaaS Product CTA

<CTA
  variant="gradient"
  title="Start your 14-day free trial"
  description="No credit card required. Get full access to all features."
  cta={{ text: "Get Started Free", href: "/signup" }}
  secondaryCta={{ text: "Talk to Sales", href: "/contact" }}
/>

Developer Tool CTA

<CTA
  variant="bordered"
  title="Ready to deploy in seconds?"
  description="Join 50,000+ developers building with mdxui"
  cta={{ text: "Start Building", href: "/signup" }}
  secondaryCta={{ text: "View Docs", href: "/docs" }}
/>

Agency CTA

<CTA
  variant="default"
  title="Let's build something great together"
  description="Schedule a free consultation to discuss your project"
  cta={{ text: "Schedule Consultation", href: "/contact" }}
  secondaryCta={{ text: "View Portfolio", href: "/work" }}
/>

E-commerce CTA

<CTA
  variant="gradient"
  title="Get 20% off your first order"
  description="Use code WELCOME20 at checkout. Limited time offer."
  cta={{ text: "Shop Now", href: "/products" }}
/>

Open Source Project CTA

<CTA
  variant="bordered"
  title="Start building with mdxui"
  description="Free and open source. MIT licensed."
  cta={{ text: "Get Started", href: "/docs" }}
  secondaryCta={{ text: "View on GitHub", href: "https://github.com/..." }}
/>

Positioning

End of Landing Page

The CTA section typically appears at the very end of a landing page:

<LandingPage>
  <Hero {...heroProps} />
  <Features {...featuresProps} />
  <Pricing {...pricingProps} />
  <Testimonials {...testimonialsProps} />
  <FAQ {...faqProps} />
  <CTA {...ctaProps} />
</LandingPage>

Multiple CTAs

Use multiple CTA sections throughout a long page:

<LandingPage>
  <Hero {...heroProps} />
  <Features {...featuresProps} />

  {/* Mid-page CTA */}
  <CTA
    title="Ready to try it?"
    cta={{ text: "Start Free Trial", href: "/signup" }}
  />

  <Pricing {...pricingProps} />
  <Testimonials {...testimonialsProps} />
  <FAQ {...faqProps} />

  {/* Final CTA */}
  <CTA
    title="What are you waiting for?"
    description="Join thousands of happy customers"
    cta={{ text: "Get Started", href: "/signup" }}
  />
</LandingPage>

Accessibility

The reference implementation includes:

Semantic HTML - Uses <section>, <h2>, <p>, <button>
ARIA Labels - Proper labeling for screen readers
Keyboard Navigation - All buttons keyboard accessible
Focus Indicators - Visible focus states
Color Contrast - WCAG AA compliant text contrast

<section className="cta" aria-labelledby="cta-title">
  <div className="container">
    <h2 id="cta-title">{title}</h2>
    {description && <p>{description}</p>}

    <div className="cta-actions" role="group" aria-label="Call to action buttons">
      <a
        href={cta.href}
        className="button primary"
        aria-label={cta.text}
      >
        {cta.text}
      </a>
      {secondaryCta && (
        <a
          href={secondaryCta.href}
          className="button secondary"
          aria-label={secondaryCta.text}
        >
          {secondaryCta.text}
        </a>
      )}
    </div>
  </div>
</section>

Best Practices

Headlines

Create urgency: "Start today" > "Get started"
Be action-oriented: Use verbs
Keep it short: 5-8 words maximum
Match the stage: Different CTAs for different page positions

Descriptions

Remove friction: "No credit card required"
Add social proof: "Join 10,000+ users"
Create urgency: "Limited time offer"
Be specific: "14-day free trial" > "Free trial"

Button Text

Use action verbs: Start, Get, Try, Join, Build
Be specific: "Start Free Trial" > "Sign Up"
Avoid generic: "Get Started" > "Click Here"
Match the promise: Button text should align with headline

Secondary CTAs

Offer alternatives: "Schedule Demo" if not ready to sign up
Lower commitment: "View Pricing" vs "Buy Now"
Provide escape: "Learn More" for hesitant users
Keep it relevant: Don't distract from primary action

Visual Design

Contrast and Prominence

// High contrast for maximum attention
<CTA
  variant="gradient"
  title="Don't miss out!"
  cta={{ text: "Get Started", href: "/signup" }}
/>

// Subtle for professional contexts
<CTA
  variant="bordered"
  title="Ready to begin?"
  cta={{ text: "Get Started", href: "/signup" }}
/>

Spacing and Whitespace

The CTA should have generous padding to stand out:

.cta {
  padding: 4rem 2rem;
  margin: 4rem 0;
}

@media (min-width: 768px) {
  .cta {
    padding: 6rem 2rem;
  }
}

Button Sizing

CTAs typically use larger buttons:

<Button size="lg" />  // Larger, more prominent

Testing and Optimization

A/B Testing

Test different variations:

// Variation A: Direct benefit
<CTA
  title="Start shipping 3x faster"
  cta={{ text: "Get Started", href: "/signup" }}
/>

// Variation B: Social proof
<CTA
  title="Join 10,000+ developers"
  cta={{ text: "Get Started", href: "/signup" }}
/>

Copy Testing

Try different button text:

"Start Free Trial" vs "Get Started Free"
"Sign Up" vs "Join Free"
"Try It Free" vs "Start Your Trial"

Position Testing

Test CTA placement:

Immediately after hero
After features
After pricing
Multiple positions

Composition

With FAQ

Address concerns before the final CTA:

<FAQ {...faqProps} />
<CTA
  title="Still have questions?"
  description="Our team is here to help"
  cta={{ text: "Contact Support", href: "/contact" }}
/>

With Testimonials

Build trust before asking for conversion:

<Testimonials {...testimonialsProps} />
<CTA
  title="Join thousands of satisfied customers"
  cta={{ text: "Start Free Trial", href: "/signup" }}
/>

Standalone CTA Page

For dedicated conversion pages:

<Page>
  <CTA
    variant="gradient"
    title="Ready to transform your business?"
    description="Start your 14-day free trial today. No credit card required."
    cta={{ text: "Get Started Free", href: "/signup" }}
    secondaryCta={{ text: "Schedule Demo", href: "/demo" }}
  />
</Page>

Conversion Optimization

Remove Friction

<CTA
  title="Start your free trial"
  description="No credit card required. Cancel anytime. 14 days free."
  cta={{ text: "Start Free Trial", href: "/signup" }}
/>

Add Urgency

<CTA
  title="Limited time offer"
  description="Get 50% off for the first 3 months. Offer ends soon."
  cta={{ text: "Claim Your Discount", href: "/signup?promo=50off" }}
/>

<CTA
  title="Join 10,000+ happy customers"
  description="Start building faster today"
  cta={{ text: "Get Started", href: "/signup" }}
/>

Risk Reversal

<CTA
  title="Try risk-free for 30 days"
  description="Not satisfied? Get a full refund. No questions asked."
  cta={{ text: "Start Free Trial", href: "/signup" }}
/>

TypeScript

Full type definitions:

import { z } from 'zod'
import type { Component } from 'mdxui'
import { CTASchema } from 'mdxui/zod'

export const CTAPropsSchema = z.object({
  title: z.string(),
  description: z.string().optional(),
  cta: CTASchema,
  secondaryCta: CTASchema.optional(),
  variant: z.enum(['default', 'gradient', 'bordered']).default('default'),
})

export type CTAProps = z.infer<typeof CTAPropsSchema>
export type CTA = Component<CTAProps>

Hero Section - Opening CTA at top of page
Pricing Section - CTA within pricing tiers
FAQ Section - Address objections before CTA
Button - CTA button component

CTA Section

On this page