# App integration 01

> Two-column layout with integration cards featuring tool logos, names, descriptions, and call-to-action for conversion-focused app showcases

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

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

## Files

### `src/registry/new-york/blocks/marketing-ui/app-integration/app-integration-01/page.tsx`

```tsx
import AppIntegration from '@/registry/new-york/components/blocks/app-integration-01/app-integration-01'

const integrations = [
  {
    name: 'Microsoft',
    description: 'Empowering Innovation and Connectivity',
    image: 'https://cdn.shadcnstudio.com/ss-assets/brand-logo/microsoft-icon.png',
    alt: 'Microsoft'
  },
  {
    name: 'Spotify',
    description: 'Your soundtrack to every moment.',
    image: 'https://cdn.shadcnstudio.com/ss-assets/brand-logo/spotify-icon.png',
    alt: 'Spotify'
  },
  {
    name: 'Github',
    description: 'Your Hub for Open Source Innovation',
    image: 'https://cdn.shadcnstudio.com/ss-assets/brand-logo/github-white.png',
    alt: 'Github'
  }
]

const AppIntegrationPage = () => {
  return <AppIntegration integrations={integrations} />
}

export default AppIntegrationPage
```

### `src/registry/new-york/components/blocks/app-integration-01/app-integration-01.tsx`

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

type Integration = {
  name: string
  description: string
  image: string
  alt: string
}[]

const AppIntegration = ({ integrations }: { integrations: Integration }) => {
  return (
    <section className='py-8 sm:py-16 lg:py-24'>
      <div className='mx-auto max-w-7xl px-4 sm:px-6 lg:px-8'>
        <div className='grid grid-cols-1 items-center gap-6 md:grid-cols-2'>
          <div className='space-y-4'>
            <h2 className='text-2xl font-semibold md:text-3xl lg:text-4xl'>
              Connects with your favourite tools to boost conversions!
            </h2>
            <p className='text-muted-foreground text-xl'>
              Harness the potential of seamless integration to boost your sales performance! Discover how connecting
              your tools can lead to greater efficiency and impressive results.
            </p>
            <Button size='lg' className='rounded-lg text-base'>
              Check all app
            </Button>
          </div>

          <div className='space-y-6'>
            {integrations.map((integration, index) => (
              <Card key={index} className='bg-transparent py-4 shadow-none'>
                <CardContent className='flex items-center gap-6'>
                  <div className='flex size-17 shrink-0 items-center justify-center rounded-md border'>
                    <img src={integration.image} alt={integration.alt} className='size-10' />
                  </div>
                  <div>
                    <CardTitle className='text-xl font-medium'>{integration.name}</CardTitle>
                    <CardDescription className='text-base'>{integration.description}</CardDescription>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </div>
    </section>
  )
}

export default AppIntegration
```