Landing Page Primary Image 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), leading components and a background glow.
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 { LandingPrimaryImageCtaSection } from '@/components/landing/cta/LandingPrimaryCta';
<LandingPrimaryImageCtaSection
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."
imageSrc="/static/images/shipixen/product/1.webp"
imageAlt="Sample image"
>
<Button size="xl" asChild>
<a href="#">Buy now</a>
</Button>
</LandingPrimaryImageCtaSection>
Examples
Image Perspective
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.
Image Position
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.
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 and 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 options.
$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)
With Background Glow
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 | Yes | - |
| title | string ǀ React.ReactNode | Yes | - |
| description | string ǀ React.ReactNode | Yes | - |
| innerClassName | string | No | - |
| titleComponent | React.ReactNode | No | - |
| descriptionComponent | React.ReactNode | No | - |
| leadingComponent | React.ReactNode | No | - |
| footerComponent | React.ReactNode | No | - |
| textPosition | 'center' ǀ 'left' | No | 'left' |
| imageSrc | string | No | - |
| imageAlt | string | No | '' |
| imagePosition | 'left' ǀ 'right' ǀ 'center' | No | 'right' |
| imagePerspective | 'none' ǀ 'left' ǀ 'right' ǀ 'bottom' ǀ 'bottom-lg' ǀ 'paper' | No | 'none' |
| imageShadow | 'none' ǀ 'soft' ǀ 'hard' | No | 'hard' |
| minHeight | number | No | 350 |
| 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.