Shipixen Logo

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.

John DoeJane DoeAlice Doe
99+

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.

Buy now

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

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

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)

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)

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)

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

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.

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

John DoeJane DoeAlice Doe
99+

from 99+ happy users

API Reference

Prop NameProp TypeRequiredDefault
children React.ReactNode ǀ stringNo-
className stringNo-
innerClassName stringNo-
title string ǀ React.ReactNodeNo-
titleComponent React.ReactNodeNo-
description string ǀ React.ReactNodeNo-
descriptionComponent React.ReactNodeNo-
leadingComponent React.ReactNodeNo-
footerComponent React.ReactNodeNo-
textPosition 'center' ǀ 'left'No'center'
withBackground booleanNofalse
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.