# CTA Section 1

> A single-line call to action with a live badge and two actions

A shadcn/ui block from the [@shadcnstore](https://www.shadcnstore.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcnstore/cta-section-1).

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

## Install

```bash
npx shadcn@latest add https://shadcnstore.com/r/cta-section-1.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: `badge`, `button`

## Files

### `storage/app/registry-sources/marketing/cta/cta-section-1/page.tsx`

```tsx
import { CtaSection1 } from "@/components/blocks/marketing/cta/cta-section-1/components/cta-section-1"

export default function Page() {
  return (
    <div className="flex min-h-svh w-full items-center justify-center">
      <div className="w-full">
        <CtaSection1 />
      </div>
    </div>
  )
}
```

### `storage/app/registry-sources/marketing/cta/cta-section-1/cta-section-1.tsx`

```tsx
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { ArrowRight, Radio, Phone } from 'lucide-react'

export function CtaSection1() {
  return (
    <section className='bg-background relative w-full overflow-hidden py-24' aria-labelledby='cta-heading'>
      <div className='mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'>
        <div className='relative mx-auto max-w-4xl text-center'>
          <Badge
            variant='secondary'
            className="h-auto px-2.5 py-0.5 font-semibold mb-6 gap-2 border-emerald-600 bg-emerald-500/15 rounded-md text-sm font-medium text-emerald-600"
          >
            <Radio className='!size-5' aria-hidden='true' />
            Live on ShadcnStore
          </Badge>

          <h1 id='cta-heading' className='mb-6 text-4xl font-bold tracking-tight text-balance sm:text-5xl lg:text-6xl'>
            Powering the next generation of digital products
          </h1>

          <p className='text-muted-foreground mx-auto mb-10 max-w-2xl text-lg text-balance'>
            Join thousands of developers and designers shipping amazing experiences with our components.
          </p>

          <div className='flex flex-wrap items-center justify-center gap-4'>
            <Button size='lg' className="h-10 px-6 cursor-pointer w-fit">
              Get Started <ArrowRight data-icon='inline-end' />
            </Button>
            <Button variant='outline' size='lg' className="h-10 px-6 cursor-pointer w-fit">
              <Phone data-icon='inline-start' />
              Book a call
            </Button>
          </div>
        </div>
      </div>
    </section>
  )
}

export default CtaSection1
```