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

import Button from '@/components/Button'
import InfoBox from '@/components/InfoBox'
import { DocumentCode, FavoriteChart } from 'iconsax-react'
import Link from 'next/link'
import { FC } from 'react'

const Collaboration: FC = () => {
    return (
        <div className='w-full xl:py-32 py-20 bg-gradient-to-r from-[#eef0f6] via-[#e2e5ec] to-[#dee1e9] xl:mt-40 mt-12 rounded-4xl'>
            <div className='max-w-maxWidth px-6 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>

                    <div className='flex justify-center xl:justify-start gap-2 mt-10'>
                        <Link href={'/developers'}>
                            <Button
                                label='توسعه دهندگان'
                                className='w-fit px-5 whitespace-nowrap'
                            />
                        </Link>
                        <Link href={'/representatives'}>
                            <Button
                                label='نمایندگان'
                                className='w-fit px-5 bg-transparent border border-black text-black whitespace-nowrap'
                            />
                        </Link>
                    </div>
                </div>

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

export default Collaboration