# Cta section 01

> Rounded card layout with app download content featuring heading, description, and App Store/Google Play download buttons

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

- Page, with a live preview: https://shadcn.exchange/r/shadcn-studio/cta-section-01
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcn-studio/cta-section-01-light-e2dabcd8f7a8f48f.png
- Registry item: https://shadcnstudio.com/r/new-york-v4/cta-section-01.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-01.json
```

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

## Dependencies

- Registry items: `card`

## Files

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

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

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

export default CTASection
```

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

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

const CTA = () => {
  return (
    <section className='bg-muted py-8 sm:py-16 lg:py-24'>
      <div className='mx-auto max-w-7xl px-4 sm:px-6 lg:px-8'>
        <Card className='rounded-[24px] border-none py-8 shadow-lg sm:py-16 lg:py-24'>
          <CardContent className='flex flex-wrap items-center justify-between gap-8 px-8 sm:flex-nowrap sm:px-16 lg:px-24'>
            <div className='max-w-xs lg:max-w-lg'>
              <h2 className='mb-4 text-3xl font-bold'>Download our mobile app</h2>
              <p className='text-muted-foreground text-lg font-medium'>
                With a variety of unique blocks, you can effortlessly create a page without any coding. Build your next
                landing page with ease.
              </p>
            </div>
            <div className='flex flex-wrap items-center gap-6 max-md:w-full max-md:flex-col md:justify-end'>
              <a href='#' className='bg-card-foreground flex w-50 items-center gap-4 rounded-md px-6 py-3'>
                <img
                  src='https://cdn.shadcnstudio.com/ss-assets/brand-logo/apple-icon.png'
                  alt='App Store'
                  className='size-8.5 invert dark:invert-0'
                />
                <div className='flex flex-col items-start'>
                  <p className='text-card text-xs leading-4'>Download on the</p>
                  <p className='text-card text-base leading-6 font-medium opacity-90'>App Store</p>
                </div>
              </a>

              <a href='#' className='bg-card-foreground flex w-50 items-center gap-4 rounded-md px-6 py-3'>
                <img
                  src='https://cdn.shadcnstudio.com/ss-assets/brand-logo/google-play-icon.png'
                  alt='Google Play'
                  className='size-8.5'
                />
                <div className='flex flex-col items-start'>
                  <p className='text-card text-xs leading-4'>Download on the</p>
                  <p className='text-card text-base leading-6 font-medium opacity-90'>Google Play</p>
                </div>
              </a>
            </div>
          </CardContent>
        </Card>
      </div>
    </section>
  )
}

export default CTA
```