commit-it/src/components/CaseSection.tsx

import CheckLabel from "./CheckLabel"

const CaseSection = () => {
    const done = [
        'Модернизация биллинговых систем (физ. и юр. лица)',
        'Внедрение ПО «Топливо и транспорт»',
        'Запуск чат-бота и личного кабинета',
        'Модернизация серверного оборудования',
        'Внедрение IP-телефонии'
    ]

    return (
        <section id='case' className='max-w-7xl w-full h-auto'>
            <div className='w-full h-auto flex flex-col items-center mb-8 p-2 xl:p-0'>
                <span className='px-4 text-3xl sm:text-4xl sm:text-center my-8'>
                    Главный <span className='text-blue-500'>кейс</span>
                </span>

                <div className='rounded-2xl h-full overflow-hidden grid grid-cols-1 sm:grid-cols-2 font-light'>
                    <div className='bg-blue-500 flex flex-col gap-6 '>
                        <div className="flex flex-col gap-6 p-10">
                            <div className='bg-base-300/50 py-2 px-4 flex w-min rounded-3xl'>
                                <span className='text-nowrap text-xs text-white'>Цифровая трансформация</span>
                            </div>
                            <span className='text-4xl text-white'>ГУП «ЖКХ РС(Я)»</span>
                            <span className='text-white'>Комплексная цифровизация жилищно-коммунального хозяйства — одного из крупных предприятий Республики Саха (Якутия)</span>
                        </div>

                        <div className='flex my-auto'>
                            <svg width="648" height="249" viewBox="0 0 648 249" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M478 232C478 236.971 482.029 241 487 241H663V249H486C477.163 249 470 241.837 470 233V202H478V232Z" fill="white" />
                                <path d="M171 232C171 236.971 175.029 241 180 241H356V249H179C170.163 249 163 241.837 163 233V202H171V232Z" fill="white" />
                                <path d="M446 232C446 236.971 441.971 241 437 241H261V249H438C446.837 249 454 241.837 454 233V202H446V232Z" fill="white" />
                                <path d="M496 223C496 225.209 497.791 227 500 227H681V234H499C492.925 234 488 229.075 488 223V187H496V223Z" fill="white" />
                                <path d="M189 223C189 225.209 190.791 227 193 227H374V235H191C185.477 235 181 230.523 181 225V188H189V223Z" fill="white" />
                                <path d="M428 223C428 225.209 426.209 227 424 227H243V235H426C431.523 235 436 230.523 436 225V188H428V223Z" fill="white" />
                                <path d="M516 212C516 213.105 516.895 214 518 214H701V222H516C511.582 222 508 218.418 508 214V175H516V212Z" fill="white" />
                                <path d="M209 212C209 213.105 209.895 214 211 214H394V222H209C204.582 222 201 218.418 201 214V175H209V212Z" fill="white" />
                                <path d="M408 212C408 213.105 407.105 214 406 214H223V222H408C412.418 222 416 218.418 416 214V175H408V212Z" fill="white" />
                                <path d="M526 199H393V138H526V199ZM404 154H429V145H404V154ZM433 154H458V145H433V154ZM462 154H487V145H462V154ZM491 145V154H516V145H491Z" fill="white" />
                                <path d="M201 155H159V61H201V155ZM164 151H168V142H164V151ZM170 151H174V142H170V151ZM164 138H168V129H164V138ZM170 138H174V129H170V138ZM164 125H168V116H164V125ZM170 125H174V116H170V125ZM176 125H180V116H176V125ZM164 112H168V103H164V112ZM170 112H174V103H170V112ZM176 112H180V103H176V112ZM164 99H168V90H164V99ZM170 99H174V90H170V99ZM176 99H180V90H176V99ZM182 99H186V90H182V99ZM164 86H168V77H164V86ZM170 86H174V77H170V86ZM176 86H180V77H176V86ZM182 77V86H186V77H182ZM164 73H168V64H164V73ZM170 73H174V64H170V73ZM176 73H180V64H176V73ZM182 73H186V64H182V73ZM188 73H192V64H188V73Z" fill="white" />
                                <path d="M237 199H123V157H237V199ZM129 193H154V187H129V193ZM158 193H183V187H158V193ZM187 193H212V187H187V193ZM129 181H154V175H129V181ZM158 181H183V175H158V181ZM187 181H212V175H187V181ZM129 169H154V163H129V169ZM158 169H183V163H158V169ZM187 163V169H212V163H187Z" fill="white" />
                                <path d="M152 155H83V86H152V155ZM89.0879 150.881H105.323V142.643H89.0879V150.881ZM109.383 150.881H125.617V142.643H109.383V150.881ZM129.677 142.643V150.881H145.912V142.643H129.677ZM89.0879 134.403H105.323V126.164H89.0879V134.403ZM109.383 134.403H125.617V126.164H109.383V134.403ZM129.677 134.403H145.912V126.164H129.677V134.403ZM89.0879 117.926H105.323V109.688H89.0879V117.926ZM109.383 117.926H125.617V109.688H109.383V117.926ZM129.677 117.926H145.912V109.688H129.677V117.926ZM89.0879 101.448H105.323V93.209H89.0879V101.448ZM109.383 101.448H125.617V93.209H109.383V101.448ZM129.677 101.448H145.912V93.209H129.677V101.448Z" fill="white" />
                                <path d="M121 199H83V154H121V199ZM89.1621 174V181H114.838V174H89.1621ZM89.1621 165H114.838V158H89.1621V165Z" fill="white" />
                                <rect x="122" y="67" width="18" height="17" fill="white" />
                                <path d="M131 53L142.258 65.75H119.742L131 53Z" fill="white" />
                                <path d="M108 84H81V199H72.5V134H37V11H108V84ZM41 125H49V113H41V125ZM52 125H60V113H52V125ZM41 109H49V97H41V109ZM52 109H60V97H52V109ZM63 109H71V97H63V109ZM41 93H49V81H41V93ZM52 93H60V81H52V93ZM63 93H71V81H63V93ZM41 77H49V65H41V77ZM52 77H60V65H52V77ZM63 77H71V65H63V77ZM74 77H82V65H74V77ZM41 61H49V49H41V61ZM52 61H60V49H52V61ZM63 61H71V49H63V61ZM74 61H82V49H74V61ZM41 45H49V33H41V45ZM52 45H60V33H52V45ZM63 45H71V33H63V45ZM74 45H82V33H74V45ZM85 33V45H93V33H85ZM41 29H49V17H41V29ZM52 29H60V17H52V29ZM63 29H71V17H63V29ZM74 29H82V17H74V29ZM85 29H93V17H85V29Z" fill="white" />
                                <path d="M40.5091 0H104.491L107 7H38L40.5091 0Z" fill="white" />
                                <rect x="470" y="37" width="8" height="98" fill="white" />
                                <rect x="484" y="37" width="8" height="98" fill="white" />
                                <rect x="498" y="37" width="8" height="98" fill="white" />
                                <path fillRule="evenodd" clipRule="evenodd" d="M70 199H0V136H70V199ZM5 183C3.34315 183 2 184.343 2 186V197H10V186C10 184.343 8.65685 183 7 183H5ZM19 183C17.3431 183 16 184.343 16 186V197H24V186C24 184.343 22.6569 183 21 183H19ZM33 183C31.3431 183 30 184.343 30 186V197H38V186C38 184.343 36.6569 183 35 183H33ZM47 183C45.3431 183 44 184.343 44 186V197H52V186C52 184.343 50.6569 183 49 183H47ZM61 183C59.3431 183 58 184.343 58 186V197H66V186C66 184.343 64.6569 183 63 183H61ZM5 168C3.34315 168 2 169.343 2 171V182H10V171C10 169.343 8.65685 168 7 168H5ZM19 168C17.3431 168 16 169.343 16 171V182H24V171C24 169.343 22.6569 168 21 168H19ZM33 168C31.3431 168 30 169.343 30 171V182H38V171C38 169.343 36.6569 168 35 168H33ZM47 168C45.3431 168 44 169.343 44 171V182H52V171C52 169.343 50.6569 168 49 168H47ZM61 168C59.3431 168 58 169.343 58 171V182H66V171C66 169.343 64.6569 168 63 168H61ZM5 153C3.34315 153 2 154.343 2 156V167H10V156C10 154.343 8.65685 153 7 153H5ZM19 153C17.3431 153 16 154.343 16 156V167H24V156C24 154.343 22.6569 153 21 153H19ZM33 153C31.3431 153 30 154.343 30 156V167H38V156C38 154.343 36.6569 153 35 153H33ZM47 153C45.3431 153 44 154.343 44 156V167H52V156C52 154.343 50.6569 153 49 153H47ZM61 153C59.3431 153 58 154.343 58 156V167H66V156C66 154.343 64.6569 153 63 153H61ZM5 138C3.34315 138 2 139.343 2 141V152H10V141C10 139.343 8.65685 138 7 138H5ZM19 138C17.3431 138 16 139.343 16 141V152H24V141C24 139.343 22.6569 138 21 138H19ZM33 138C31.3431 138 30 139.343 30 141V152H38V141C38 139.343 36.6569 138 35 138H33ZM47 138C45.3431 138 44 139.343 44 141V152H52V141C52 139.343 50.6569 138 49 138H47ZM61 138C59.3431 138 58 139.343 58 141V152H66V141C66 139.343 64.6569 138 63 138H61Z" fill="white" />
                            </svg>
                        </div>
                    </div>
                    <div className='flex flex-col gap-4 bg-base-300 p-4'>
                        <div className='p-8 bg-base-100 flex flex-col gap-4 rounded-2xl'>
                            <span className='text-xl'>Основная задача:</span>
                            <span className='text-base-content/70'>Реализация стратегии цифровой трансформации</span>
                        </div>

                        <div className='p-8 bg-base-100 rounded-2xl flex flex-col gap-4'>
                            <span className='text-xl'>Выполненные работы:</span>
                            <div className='flex flex-col gap-6'>
                                {done.map((text, index) => (
                                    <CheckLabel key={index} text={text}/>
                                ))}
                            </div>
                        </div>

                        <div className='p-8 bg-black flex flex-col gap-4 rounded-2xl text-white'>
                            <span className='text-xl'>Результат:</span>
                            <span className=''>
                                Сокращение времени обработки платежей, полное импортозамещение базового ПО, интеграция с ГИС ЖКХ
                            </span>
                        </div>

                    </div>
                </div>
            </div>
        </section>
    )
}

export default CaseSection