Landing Page Sale CTA Component

Use this to prompt users to take action, such as signing up for a trial or buying a product.

This can be used to break up longer pages and increase conversion as users scroll down and get past your primary CTA.

Ready to get started?

Pre-order today and get a 50% discount on the final price for the first 3 months. No credit card required.

Usage

import { LandingSaleCtaSection } from '@/components/landing/cta/LandingSaleCta';

<LandingSaleCtaSection
  title="Ready to get started?"
  description={
    'Pre-order today and get a 50% discount on the final price for the first 3 months. No credit card required.'
  }
  ctaHref="https://gum.co/product"
  ctaLabel="Pre-order for $49"
/>

Examples

Background Customization/Variant

Ready to get started?

Pre-order today and get a 50% discount on the final price for the first 3 months. No credit card required.

Pre-order for $49

Secondary Call to Action

Ready to get started?

Pre-order today and get a 50% discount on the final price for the first 3 months. No credit card required.

Pre-order for $49 Learn more

Custom CTAs

Ready to get started?

Pre-order today and get a 50% discount on the final price for the first 3 months. No credit card required.

Buy Now

$350 off for the first 10 customers (2 left)

Background Glow

Ready to get started?

Pre-order today and get a 50% discount on the final price for the first 3 months. No credit card required.

Pre-order for $49

API Reference

Prop NameProp TypeRequiredDefault children React.ReactNode No- className string No- title string ǀ React.ReactNode No- titleComponent React.ReactNode No- description string ǀ React.ReactNode No- descriptionComponent React.ReactNode No- footerComponent React.ReactNode No- ctaHref string No '#' ctaLabel string No- secondaryCtaHref string No '#' secondaryCtaLabel string No- withBackground boolean No false withBackgroundGlow boolean No false variant 'primary' ǀ 'secondary' No 'primary' backgroundGlowVariant 'primary' ǀ 'secondary' No 'primary'

More Examples

For more even more examples, see our Landing Page Component Examples page or see complete landing page examples by Exploring Our Landing Page Templates.