# Cta section 10

> Simple primary-colored horizontal CTA card with flex layout, left side featuring heading and muted description text, right side with secondary button containing arrow-right icon, clean three-column justified spacing with responsive column stacking on mobile

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

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

## Install

```bash
npx shadcn@latest add https://shadcnstudio.com/r/new-york-v4/cta-section-10.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`, `card`

## Files

### `src/registry/new-york/blocks/marketing-ui/cta-section/cta-section-10/page.tsx`

```tsx
import CTA from '@/registry/new-york/components/blocks/cta-section-10/cta-section-10'

const CTASection = () => {
  return <CTA />
}

export default CTASection
```

### `src/registry/new-york/components/blocks/cta-section-10/cta-section-10.tsx`

```tsx
import { ArrowRightIcon } from 'lucide-react'

import { Button } from '@/registry/new-york/ui/button'
import { Card, CardContent } from '@/registry/new-york/ui/card'

const CTASection = () => {
  return (
    <section className='bg-primary py-8 sm:py-16 lg:py-24'>
      <div className='mx-auto max-w-5xl px-4 sm:px-6 lg:px-8'>
        <Card className='bg-primary rounded-none border-0 shadow-none'>
          <CardContent
            className='flex justify-between gap-6 max-lg:flex-col md:px-8 lg:items-center'
            data-slot='cta-content'
          >
            <div className='space-y-4'>
              <h2 className='text-primary-foreground text-2xl font-semibold md:text-3xl lg:text-4xl'>
                Ready to Dive Deeper?
              </h2>
              <p className='text-muted-foreground text-lg md:text-xl'>
                Everything from setup to advanced features is covered in our docs.
              </p>
            </div>
            <div>
              <Button size='lg' variant='secondary' className='shrink-0 rounded-lg text-base has-[>svg]:px-6' asChild>
                <a href='#' className='inline-flex items-center gap-2'>
                  View Docs
                  <ArrowRightIcon className='size-5' />
                </a>
              </Button>
            </div>
          </CardContent>
        </Card>
      </div>
    </section>
  )
}

export default CTASection
```