CTA Section 3

1import { Button } from '@/components/ui/button'
2import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
3import { Badge } from '@/components/ui/badge'
4import { Zap, BookOpen, Rocket, ArrowRight, PlayCircle } from 'lucide-react'
5 
6export function CtaSection3() {
7  return (
8    <section className='py-8 lg:py-16'>
9      <div className='mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'>
10        <div>
11          <Card className='bg-card overflow-hidden border py-8 lg:py-12'>
12            <CardContent className='gap-0 px-6 lg:px-12'>
13              <div className='grid gap-12 lg:grid-cols-2'>
14                {/* Left Content */}
15                <div className='flex flex-col justify-center'>
16                  <div className='flex flex-col gap-6'>
17                    <Badge variant='default' className="h-auto px-2.5 py-0.5 font-semibold bg-primary rounded-md text-primary-foreground w-fit">
18                      <Rocket className='me-2 size-3' />
19                      Launch Your Success
20                    </Badge>
21 
22                    <div className='flex flex-col gap-4'>
23                      <h2 className='text-3xl font-bold tracking-tight text-balance lg:text-4xl'>
24                        Accelerate your digital transformation journey
25                      </h2>
26                      <p className='text-muted-foreground lg:text-lg'>
27                        Join thousands of innovative companies using our cutting-edge platform to automate workflows,
28                        boost team productivity, and deliver exceptional results faster than ever before.
29                      </p>
30                    </div>
31 
32                    <div className='flex flex-col gap-3 sm:flex-row'>
33                      <Button size='lg' className='h-10 cursor-pointer px-8'>
34                        <Zap data-icon='inline-start' />
35                        Start Free Trial
36                      </Button>
37                      <Button variant='outline' size='lg' className='h-10 cursor-pointer px-8'>
38                        Watch Demo
39                      </Button>
40                    </div>
41                  </div>
42                </div>
43 
44                {/* Right Content */}
45                <div className='flex flex-col gap-6'>
46                  <Card className='group border-border cursor-pointer gap-2 py-6'>
47                    <CardHeader className='px-6'>
48                      <div className='flex items-center justify-between'>
49// … truncated