# CTA Section 2

> A community subscribe card with an inline email field and avatar proof

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

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

## Install

```bash
npx shadcn@latest add https://shadcnstore.com/r/cta-section-2.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: `@shadcnstore/motion-avatar-group`, `avatar`, `button`, `card`, `input`

## Files

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

```tsx
import { CtaSection2 } from "@/components/blocks/marketing/cta/cta-section-2/components/cta-section-2"

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

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

```tsx
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Card, CardContent } from '@/components/ui/card'
import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar'
import { AvatarGroup } from '@/components/motion/avatar-group'

export function CtaSection2() {
  return (
    <section className='w-full py-16 sm:py-24'>
      <div className='mx-auto max-w-4xl px-4 sm:px-6 lg:px-8'>
        <Card>
          <CardContent className='flex flex-col gap-6 py-6 sm:py-8'>
            <div className='flex flex-col gap-2 text-center'>
              <h2 className='text-4xl font-bold'>Subscribe to Our Community</h2>
              <p className='text-muted-foreground mx-auto max-w-2xl'>
                Get exclusive access to cutting-edge tech insights, industry trends, and expert advice delivered
                straight to your inbox. Join our growing community today!
              </p>
            </div>

            <div className='mx-auto flex max-sm:w-full flex-col gap-3 sm:flex-row'>
              <Input type='email' className='h-9 max-sm:w-full w-78' placeholder='Enter your email here' />
              <Button className="h-9 px-4 py-2 cursor-pointer">Join Now</Button>
            </div>

            <div className='flex flex-wrap items-center justify-center gap-2'>
              <AvatarGroup className='*:*:ring-background *:*:size-8 *:*:ring-2'>
                <Avatar className='bg-muted'>
                  <AvatarImage src='https://notion-avatars.netlify.app/api/avatar?preset=male-1' alt='User 1' />
                  <AvatarFallback>CN</AvatarFallback>
                </Avatar>
                <Avatar className='bg-muted'>
                  <AvatarImage src='https://notion-avatars.netlify.app/api/avatar?preset=female-5' alt='User 2' />
                  <AvatarFallback>LR</AvatarFallback>
                </Avatar>
                <Avatar className='bg-muted'>
                  <AvatarImage src='https://notion-avatars.netlify.app/api/avatar?preset=male-2' alt='User 3' />
                  <AvatarFallback>ER</AvatarFallback>
                </Avatar>
                <Avatar className='bg-muted'>
                  <AvatarImage src='https://notion-avatars.netlify.app/api/avatar?preset=female-3' alt='User 4' />
                  <AvatarFallback>DG</AvatarFallback>
                </Avatar>
              </AvatarGroup>
              <span className='text-sm'>5,000+ happy members</span>
            </div>
          </CardContent>
        </Card>
      </div>
    </section>
  )
}

export default CtaSection2
```