Section: CTA (Call to Action)

A prominent call-to-action block that drives users to take action. Features a heading, optional description, and a button.

Props

Name	Type	Required	Description	Default
`id`	string	No	Section anchor ID	—
`heading`	string	Yes	CTA heading text	—
`description`	string	No	Supporting text below the heading	—
`ctaText`	string	No	Button label	—
`ctaHref`	string	No	Button link URL	—
`className`	string	No	Custom CSS class	—
`showIcon`	boolean	No	Show arrow icon on button	`true`

Minimal Example

{
  "type": "cta",
  "heading": "Ready to get started?"
}

Full Example

{
  "type": "cta",
  "id": "signup-cta",
  "heading": "Start Building Today",
  "description": "Create your first page in under 60 seconds. No credit card required.",
  "ctaText": "Get Started Free",
  "ctaHref": "/signup",
  "showIcon": true
}

CTA Best Practices

Button Text

❌ Weak	✅ Strong
Submit	Get Started Free
Click Here	Start Building Now
Learn More	See It In Action
Sign Up	Create Your First Page

Rules of thumb:

Start with a verb — "Get", "Start", "Create", "Try"
Include the benefit or outcome
Add urgency or ease — "Free", "Now", "In 60 Seconds"

Heading Copy

The heading should address the user's motivation at this point in the page:

After features: "Ready to see it in action?"
After pricing: "Start your free trial today"
After testimonials: "Join 500+ teams already using PageGun"
After FAQ: "Still have questions? Start building — it's free"

Description

Keep it to 1 sentence. Reinforce the value or remove friction:

"No credit card required."
"Free plan includes 10 pages."
"Set up in 2 minutes. No coding required."

Common Patterns

End of Landing Page

{
  "type": "cta",
  "heading": "Ship Your Next Page in Minutes",
  "description": "Join developers and AI agents building with PageGun. Free to start.",
  "ctaText": "Create Free Account",
  "ctaHref": "https://pagegun.com/signup"
}

Documentation CTA

{
  "type": "cta",
  "heading": "Ready to Integrate?",
  "description": "Follow our Quick Start guide to make your first API call.",
  "ctaText": "View Quick Start",
  "ctaHref": "/docs/quick-start"
}

Upgrade CTA

{
  "type": "cta",
  "heading": "Need More Pages?",
  "description": "Upgrade to Pro for unlimited pages, custom domains, and priority support.",
  "ctaText": "See Pricing",
  "ctaHref": "/pricing"
}

Placement

CTA sections work in two positions:

End of page — The final push to action after all content
Mid-page break — Between content sections to capture users who are already convinced

For long landing pages, consider using 2 CTAs: one mid-page and one at the end.