CTA Section

A powerful call-to-action section component designed to drive conversions and user engagement. Features compelling headlines, persuasive descriptions, and prominent action buttons with multiple visual variants and layouts.

Features

• Multiple Variants: Default, dark, gradient, and bordered styles
• Flexible Layouts: Centered and split layout options
• Action Buttons: Primary and secondary button support
• Responsive Design: Optimized for all screen sizes
• Customizable Content: Support for custom actions via slots
• Visual Appeal: Smooth animations and hover effects

Basic Usage

import CTASection from "@/components/block/CTASection.astro"

<CTASection
  title="Ready to get started?"
  tagline="Join thousands of users"
  description="Transform your documentation workflow with our modern tools and beautiful design components."
  primaryButtonText="Start Free Trial"
  primaryButtonHref="javascript:void(null);"
  secondaryButtonText="View Demo"
  secondaryButtonHref="javascript:void(null);"
/>

Examples

Default CTA

Dark Variant

Gradient Variant

Split Layout

Bordered Variant

Props

Variants

Default

Clean, minimal styling with standard background and colors.

<CTASection variant="default" title="Your CTA Title" />

Dark

Dark background with light text for high contrast and impact.

<CTASection variant="dark" title="Stand Out CTA" />

Gradient

Eye-catching gradient background for maximum visual appeal.

<CTASection variant="gradient" title="Premium CTA" />

Bordered

Subtle border styling that works well within content sections.

<CTASection variant="bordered" title="Inline CTA" />

Layouts

Centered Layout

All content centered for focused attention (default).

<CTASection layout="centered" title="Focused Message" />

Split Layout

Text content on left, actions on right for balanced presentation.

<CTASection layout="split" title="Balanced Presentation" />

Custom Actions

Use the slot to add custom content like statistics, testimonials, or additional links:

<CTASection title="Join Our Community">
  <div class="cta-stats">
    <div class="cta-stat">
      <div class="cta-stat-number">50k+</div>
      <div class="cta-stat-label">Developers</div>
    </div>
    <div class="cta-stat">
      <div class="cta-stat-number">1M+</div>
      <div class="cta-stat-label">Downloads</div>
    </div>
  </div>
  
  <a href="/docs-site-kickstarter/testimonials" class="cta-link">
    Read success stories →
  </a>
</CTASection>

Button Styling

The component includes built-in button styles that adapt to each variant:

• Primary Button: Prominent styling with hover effects
• Secondary Button: Subtle styling that complements the primary
• Icon Animation: Arrow icon slides on hover
• Responsive: Buttons stack vertically on mobile

Content Guidelines

Effective Headlines

• Keep titles under 60 characters
• Use action-oriented language
• Create urgency when appropriate
• Be specific about benefits

Compelling Descriptions

• Focus on user benefits, not features
• Address common objections
• Keep it under 2-3 sentences
• End with a reason to act now

Button Text

• Use action verbs (Start, Get, Try, Join)
• Be specific about what happens next
• Keep it short (2-4 words)
• Match the user’s intent

Responsive Behavior

• Desktop: Full layout with side-by-side content (split layout)
• Tablet: Adjusted spacing and typography
• Mobile: Stacked layout with full-width buttons
• Buttons: Stack vertically on smaller screens

Accessibility

• Proper heading hierarchy
• High contrast color ratios
• Keyboard navigation support
• Screen reader friendly structure
• Focus indicators on interactive elements

Best Practices

1. Placement: Use at key conversion points in your content
2. Frequency: Don’t overuse - one primary CTA per page section
3. Contrast: Ensure buttons stand out from background
4. Testing: A/B test different variants and copy
5. Mobile: Always test on mobile devices

Common Use Cases

• Landing Pages: Primary conversion point
• Documentation: Encourage sign-ups or upgrades
• Blog Posts: Drive engagement at article end
• Feature Pages: Convert interest to action
• Pricing Pages: Final push to purchase
• About Pages: Connect with visitors

Conversion Optimization Tips

1. Above the Fold: Place important CTAs where users can see them immediately
2. Color Psychology: Use colors that evoke the desired emotion
3. Social Proof: Add testimonials or user counts
4. Urgency: Create time-sensitive offers when appropriate
5. Value Proposition: Clearly communicate what users get

Examples by Use Case

Documentation Site

<CTASection
  title="Start building better docs today"
  description="Join thousands of developers creating beautiful documentation."
  primaryButtonText="Get Started Free"
  secondaryButtonText="View Templates"
/>

SaaS Product

<CTASection
  variant="gradient"
  title="Ready to 10x your productivity?"
  description="Join 50,000+ teams already using our platform."
  primaryButtonText="Start Free Trial"
  secondaryButtonText="Schedule Demo"
/>

Open Source Project

<CTASection
  variant="dark"
  title="Contribute to the future"
  description="Help us build the next generation of developer tools."
  primaryButtonText="View on GitHub"
  secondaryButtonText="Read Docs"
/>