CTA Section 2

1import { Button } from '@/components/ui/button'
2import { Input } from '@/components/ui/input'
3import { Card, CardContent } from '@/components/ui/card'
4import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar'
5 
6export function CtaSection2() {
7  return (
8    <section className='w-full py-16 sm:py-24'>
9      <div className='mx-auto max-w-4xl px-4 sm:px-6 lg:px-8'>
10        <Card>
11          <CardContent className='flex flex-col gap-6 py-6 sm:py-8'>
12            <div className='flex flex-col gap-2 text-center'>
13              <h2 className='text-4xl font-bold'>Subscribe to Our Community</h2>
14              <p className='text-muted-foreground mx-auto max-w-2xl'>
15                Get exclusive access to cutting-edge tech insights, industry trends, and expert advice delivered
16                straight to your inbox. Join our growing community today!
17              </p>
18            </div>
19 
20            <div className='mx-auto flex max-sm:w-full flex-col gap-3 sm:flex-row'>
21              <Input type='email' className='h-9 max-sm:w-full w-78' placeholder='Enter your email here' />
22              <Button className="h-9 px-4 py-2 cursor-pointer">Join Now</Button>
23            </div>
24 
25            <div className='flex flex-wrap items-center justify-center gap-2'>
26              <div className='*:ring-background flex -space-x-2 *:size-8 *:ring-2'>
27                <Avatar className='bg-muted'>
28                  <AvatarImage src='https://notion-avatars.netlify.app/api/avatar?preset=male-1' alt='User 1' />
29                  <AvatarFallback>CN</AvatarFallback>
30                </Avatar>
31                <Avatar className='bg-muted'>
32                  <AvatarImage src='https://notion-avatars.netlify.app/api/avatar?preset=female-5' alt='User 2' />
33                  <AvatarFallback>LR</AvatarFallback>
34                </Avatar>
35                <Avatar className='bg-muted'>
36                  <AvatarImage src='https://notion-avatars.netlify.app/api/avatar?preset=male-2' alt='User 3' />
37                  <AvatarFallback>ER</AvatarFallback>
38                </Avatar>
39                <Avatar className='bg-muted'>
40                  <AvatarImage src='https://notion-avatars.netlify.app/api/avatar?preset=female-3' alt='User 4' />
41                  <AvatarFallback>DG</AvatarFallback>
42                </Avatar>
43              </div>
44              <span className='text-sm'>5,000+ happy members</span>
45            </div>
46          </CardContent>
47        </Card>
48      </div>
49    </section>
50// … truncated