danak-website/src/app/home/WhyDanak.tsx

import Button from '@/components/Button'
import InfoBox from '@/components/InfoBox'
import { Activity, Headphone, Profile2User, ShieldTick } from 'iconsax-react'
import { FC } from 'react'

const WhyDanak: FC = () => {
    return (
        <div className='w-full xl:py-32 py-20 bg-gradient-to-l from-[#eef0f6] via-[#e2e5ec] to-[#dee1e9] xl:mt-40 mt-12 rounded-4xl'>
            <div className='max-w-maxWidth px-4 xl:px-0 mx-auto flex xl:flex-row flex-col items-center xl:gap-20 gap-14'>
                <div className='xl:max-w-[300px] text-center xl:text-right'>
                    <h2 className='xl:text-3xl text-sm font-bold'>
                        چرا داناک؟
                    </h2>

                    <p className='xl:mt-10 mt-5 leading-5 xl:leading-7 xl:text-sm text-xs'>
                        ما در داناک با ترکیب خلاقیت، تخصص و تکنولوژی‌های روز، راهکارهای نرم‌افزاری منحصربه‌فردی ارائه می‌دهیم که کسب‌وکار شما را به سطحی بالاتر می‌برد.
                    </p>

                    <Button
                        label='خدمات'
                        className='mt-10 w-fit px-12 hidden xl:block'
                    />
                </div>

                <div className='flex-1 flex xl:flex-row flex-col gap-8 flex-wrap'>
                    <div className='min-w-[40%] flex-1'>
                        <InfoBox
                            icon={<Profile2User
                                size={24}
                                color='#0A66C2'
                            />}
                            title='مشاوره'
                            description='راهکارهای نرم‌افزاری مدرن با عملکرد بالا و کمترین زمان اجرا.'
                        />
                    </div>
                    <div className='min-w-[40%] flex-1'>
                        <InfoBox
                            icon={<ShieldTick
                                size={24}
                                color='#FF7B00'
                            />}
                            title='خدمات امنیت'
                            description='سرویس های قابل اعتماد با استانداردهای امنیتی پیشرفته.'
                        />
                    </div>
                    <div className='min-w-[40%] flex-1'>
                        <InfoBox
                            icon={<Headphone
                                size={24}
                                color='#00980F'
                            />}
                            title='خدمات پشتیبانی'
                            description='همیشه در کنار شما هستیم تا بهترین تجربه را داشته باشید.'
                        />
                    </div>
                    <div className='min-w-[40%] flex-1'>
                        <InfoBox
                            icon={<Activity
                                size={24}
                                color='#FF00B8'
                            />}
                            title='راهکارهای اختصاصی'
                            description='نرم‌افزارهایی متناسب با نیازهای خاص کسب‌وکار شما.'
                        />
                    </div>
                </div>
            </div>
        </div>
    )
}

export default WhyDanak