CTA Section 1

1import { Badge } from '@/components/ui/badge'
2import { Button } from '@/components/ui/button'
3import { ArrowRight, Radio, Phone } from 'lucide-react'
4 
5export function CtaSection1() {
6  return (
7    <section className='bg-background relative w-full overflow-hidden py-24' aria-labelledby='cta-heading'>
8      <div className='mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'>
9        <div className='relative mx-auto max-w-4xl text-center'>
10          <Badge
11            variant='secondary'
12            className="h-auto px-2.5 py-0.5 font-semibold mb-6 gap-2 border-emerald-600 bg-emerald-500/15 rounded-md text-sm font-medium text-emerald-600"
13          >
14            <Radio className='!size-5' aria-hidden='true' />
15            Live on ShadcnStore
16          </Badge>
17 
18          <h1 id='cta-heading' className='mb-6 text-4xl font-bold tracking-tight text-balance sm:text-5xl lg:text-6xl'>
19            Powering the next generation of digital products
20          </h1>
21 
22          <p className='text-muted-foreground mx-auto mb-10 max-w-2xl text-lg text-balance'>
23            Join thousands of developers and designers shipping amazing experiences with our components.
24          </p>
25 
26          <div className='flex flex-wrap items-center justify-center gap-4'>
27            <Button size='lg' className="h-10 px-6 cursor-pointer w-fit">
28              Get Started <ArrowRight data-icon='inline-end' />
29            </Button>
30            <Button variant='outline' size='lg' className="h-10 px-6 cursor-pointer w-fit">
31              <Phone data-icon='inline-start' />
32              Book a call
33            </Button>
34          </div>
35        </div>
36      </div>
37    </section>
38  )
39}
40 
41export default CtaSection1