# CTA Section One

> A polished call to action with primary and secondary links for clear next steps.

A shadcn/ui block from the [@navui](https://ui.navdeepsingh.dev) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/navui/cta-section-one).

- Page, with a live preview: https://shadcn.exchange/r/navui/cta-section-one
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/navui/cta-section-one-light-abe3637e739b0d2e.png
- Registry item: https://ui.navdeepsingh.dev/r/cta-section-one.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://ui.navdeepsingh.dev/r/cta-section-one.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `lucide-react`
- Registry items: `button`

## Files

### `src/registry/blocks/cta/cta-section-one/cta-section-one.tsx`

```tsx
import type { ComponentProps } from 'react'
import { ArrowRight } from 'lucide-react'
import Link from 'next/link'

import { Button } from '@/components/ui/button'
import { cn } from '@/lib/utils'

const ctaSectionOneData = {
  heading: 'Build your next product with confidence.',
  description:
    'Start building today or talk with our team to find the right plan for your business.',
  primaryAction: {
    label: 'Get started',
    href: '#',
  },
  secondaryAction: {
    label: 'Contact sales',
    href: '#',
  },
}

type CtaSectionOneProps = ComponentProps<'section'>

export default function CtaSectionOne({ className, ...props }: CtaSectionOneProps) {
  return (
    <section
      data-slot="cta-section-one"
      className={cn('bg-background px-4 py-20 sm:px-6 sm:py-28', className)}
      {...props}
    >
      <div className="mx-auto max-w-6xl">
        <div className="relative isolate overflow-hidden rounded-3xl bg-card px-6 py-16 text-center shadow-xl ring shadow-black/12 ring-foreground/10 sm:px-12 sm:py-20">
          <div className="relative mx-auto max-w-3xl">
            <h2 className="text-3xl font-semibold tracking-tight text-balance text-foreground sm:text-5xl">
              {ctaSectionOneData.heading}
            </h2>

            <p className="mx-auto mt-5 max-w-2xl text-base leading-7 text-balance text-muted-foreground sm:text-lg">
              {ctaSectionOneData.description}
            </p>

            <div className="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row">
              <Button asChild size="lg" className="w-full sm:w-auto">
                <Link href={ctaSectionOneData.primaryAction.href}>
                  {ctaSectionOneData.primaryAction.label}
                  <ArrowRight data-icon="inline-end" aria-hidden className="size-4" />
                </Link>
              </Button>

              <Button
                asChild
                size="lg"
                variant="outline"
                className="w-full bg-background/70 shadow-sm backdrop-blur-sm sm:w-auto"
              >
                <Link href={ctaSectionOneData.secondaryAction.href}>
                  {ctaSectionOneData.secondaryAction.label}
                </Link>
              </Button>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}
```