Landing Page Sale CTA Component
- Updated on
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.
$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 Name | Prop Type | Required | Default |
|---|---|---|---|
| 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.