Page UI logo

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.

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.

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.

API Reference

Prop NameProp TypeRequiredDefault
children React.ReactNodeNo-
classNamestringNo-
title string ǀ React.ReactNodeNo-
titleComponent React.ReactNodeNo-
description string ǀ React.ReactNodeNo-
descriptionComponent React.ReactNodeNo-
footerComponent React.ReactNodeNo-
ctaHrefstringNo'#'
ctaLabelstringNo-
secondaryCtaHrefstringNo'#'
secondaryCtaLabelstringNo-
withBackground booleanNofalse
withBackgroundGlow booleanNofalse
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.