Landing Page Primary Text Call to Action (CTA) Component
- Updated on
Use this component on landing page as the primary Call to Action section. A section that shows a title & description. Optionally, it can have actions (children) and a background.
This is the most important section of your landing page. Use it to grab the attention of your visitors and encourage them to take action.
Landing page in minutes
Get 10x more done with Shadcn UI, React & Next.js, and say goodbye to repetitive tasks. You'll never go back.
Usage
import { Button } from '@/components/shared/ui/button';
import { LandingPrimaryTextCtaSection } from '@/components/landing/cta/LandingPrimaryCta';
<LandingPrimaryTextCtaSection
title="Landing page in minutes"
description="Get 10x more done with Shadcn UI, React & Next.js, and say goodbye to repetitive tasks. You'll never go back."
>
<div className="flex gap-2">
<Button size="xl" asChild>
<a href="#">Buy now</a>
</Button>
<Button size="xl" variant="outlinePrimary">
<a href="#">Read more</a>
</Button>
</div>
</LandingPrimaryTextCtaSection>
Examples
With Social Proof
Landing page in minutes
Get 10x more done with Shadcn UI, React & Next.js, and say goodbye to repetitive tasks. You'll never go back.
from 99+ happy users
With Discount/Offer
Landing page in minutes
Get 10x more done with Shadcn UI, React & Next.js, and say goodbye to repetitive tasks. You'll never go back.
$350 off for the first 10 customers (2 left)
With Discount & Left Alignment
Landing page in minutes
Get 10x more done with Shadcn UI, React & Next.js, and say goodbye to repetitive tasks. You'll never go back.
$350 off for the first 10 customers (2 left)
With Bullet Points
Landing page in minutes
- Intelligent Assistance.
- Receive personalized recommendations and insights tailored to your workflow.
- Seamless Collaboration.
- Easily collaborate with team members and clients in real-time.
- Advanced Customization.
- Tailor your app to fit your unique requirements with extensive customization.
$350 off for the first 10 customers (2 left)
With Product Hunt Award
Landing page in minutes
Get 10x more done with Shadcn UI, React & Next.js, and say goodbye to repetitive tasks. You'll never go back.
$350 off for the first 10 customers (2 left)
With Social Proof Band
Landing page in minutes
Get 10x more done with Shadcn UI, React & Next.js, and say goodbye to repetitive tasks. You'll never go back.
$350 off for the first 10 customers (2 left)
With Background
Landing page in minutes
Get 10x more done with Shadcn UI, React & Next.js, and say goodbye to repetitive tasks. You'll never go back.
$350 off for the first 10 customers (2 left)
Left-aligned full example
Landing page in minutes
Get 10x more done with Shadcn UI, React & Next.js, and say goodbye to repetitive tasks. You'll never go back.
from 99+ happy users
Centered full example
Landing page in minutes
Get 10x more done with Shadcn UI, React & Next.js, and say goodbye to repetitive tasks. You'll never go back.
API Reference
| Prop Name | Prop Type | Required | Default |
|---|---|---|---|
| children | React.ReactNode ǀ string | No | - |
| className | string | No | - |
| innerClassName | string | No | - |
| title | string ǀ React.ReactNode | No | - |
| titleComponent | React.ReactNode | No | - |
| description | string ǀ React.ReactNode | No | - |
| descriptionComponent | React.ReactNode | No | - |
| leadingComponent | React.ReactNode | No | - |
| footerComponent | React.ReactNode | No | - |
| textPosition | 'center' ǀ 'left' | No | 'center' |
| withBackground | boolean | No | false |
| variant | '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.