Shipixen Logo

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.

Sample image

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.

Sample image

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.

Sample image

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.

Buy now
John DoeJane DoeAlice Doe
99+

from 99+ happy users

Sample image

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.

Buy now

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

Sample image

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.

Buy now

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

Sample image

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.
Buy now

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

Sample image

With Product Hunt Award

Product of the Day1st

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.

Buy now

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

Sample image

With Social Proof Band

100% encrypted and secure
24/7 customer support
99% customer satisfaction
Product of the Day1st

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.

Buy now

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

Sample image

With Background

Product of the Day1st

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.

Buy now

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

Sample image

With Background Glow

Product of the Day1st

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.

Buy now

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

Sample image

Left-aligned Full Example

100% encrypted and secure
24/7 customer support
99% customer satisfaction
Product of the Day1st

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.

Buy now
John DoeJane DoeAlice Doe
99+

from 99+ happy users

Sample image

Centered full example

100% encrypted and secure
24/7 customer support
99% customer satisfaction
Product of the Day1st

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.

Buy now

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

John DoeJane DoeAlice Doe
99+

from 99+ happy users

Sample image

API Reference

Prop NameProp TypeRequiredDefault
children React.ReactNode ǀ stringYes-
title string ǀ React.ReactNodeYes-
description string ǀ React.ReactNodeYes-
innerClassName stringNo-
titleComponent React.ReactNodeNo-
descriptionComponent React.ReactNodeNo-
leadingComponent React.ReactNodeNo-
footerComponent React.ReactNodeNo-
textPosition 'center' ǀ 'left'No'left'
imageSrc stringNo-
imageAlt stringNo''
imagePosition 'left' ǀ 'right' ǀ 'center'No'right'
imagePerspective 'none' ǀ 'left' ǀ 'right' ǀ 'bottom' ǀ 'bottom-lg' ǀ 'paper'No'none'
imageShadow 'none' ǀ 'soft' ǀ 'hard'No'hard'
minHeight numberNo350
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.