191 lines
9.8 KiB
TypeScript
191 lines
9.8 KiB
TypeScript
export function Teaching() {
|
||
return (
|
||
<div className="desktop:py-[70px] desktop:px-10 tablet:max-desktop:px-6 mobile:max-tablet:px-4 mobile:max-desktop:py-14 desktop-figma:flex gap-x-4">
|
||
<h1 className="font-medium text-[64px] leading-[57.6px] text-[#ffffff] desktop:block mobile:max-desktop:hidden mb-8 desktop-figma:sticky top-0 h-fit">
|
||
<span
|
||
className="bg-text-gradient bg-gradient-to-r from-[#798FFF] to-[#D375FF]"
|
||
style={{
|
||
backgroundClip: 'text',
|
||
WebkitBackgroundClip: 'text',
|
||
WebkitTextFillColor: 'transparent',
|
||
}}
|
||
>
|
||
Тренинг модуль{' '}
|
||
</span>
|
||
помогает осуществлять координацию между всеми участниками процесса
|
||
</h1>
|
||
<h1 className="desktop:hidden font-medium text-[40px] leading-10 text-[#ffffff] mobile:mb-6">
|
||
<span
|
||
className="bg-text-gradient bg-gradient-to-r from-[#798FFF] to-[#D375FF]"
|
||
style={{
|
||
backgroundClip: 'text',
|
||
WebkitBackgroundClip: 'text',
|
||
WebkitTextFillColor: 'transparent',
|
||
}}
|
||
>
|
||
Дистанционное обучение
|
||
</span>{' '}
|
||
на базе платформы GRAFF TRANING
|
||
</h1>
|
||
<TeachingFeaturesForDesktop />
|
||
<TeachingFeaturesForOtherScreens />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function TeachingFeaturesForDesktop() {
|
||
return (
|
||
<div className="mobile:max-desktop-figma:hidden desktop:flex-col gap-y-4 flex-wrap desktop:flex">
|
||
<div className="max-w-[880px] desktop:p-10 tablet:p-6 bg-[#3D425C4D] bg-opacity-30 rounded-2xl desktop:flex desktop:min-w-[880px] desktop:min-h-[400px] bg-auto bg-[url(src/assets/schedule_big.svg)] bg-no-repeat bg-right-bottom">
|
||
<div className="text-[#ffffff]">
|
||
<h1 className="font-medium text-[32px] leading-8 mb-2">
|
||
Управление процессом
|
||
</h1>
|
||
<p className="text-lg max-w-[361px]">
|
||
Назначение сценария обучения
|
||
<br />
|
||
Выбор режима: обучение, тренировка, тестирование
|
||
</p>
|
||
</div>
|
||
<img
|
||
src="src/assets/master_card.svg"
|
||
className="rounded-lg w-fit mt-[197px] -ml-[75px]"
|
||
alt=""
|
||
/>
|
||
</div>
|
||
|
||
<div className="max-w-[880px] p-10 bg-[#3D425C4D] bg-opacity-30 rounded-2xl desktop:flex min-w-[880px] min-h-[400px]">
|
||
<div className="text-[#ffffff]">
|
||
<h1 className="font-medium text-[32px] leading-8 mb-2">
|
||
Управление пользователями
|
||
</h1>
|
||
<p className="text-lg max-w-[200px]">
|
||
Добавление, удаление
|
||
<br />и назначение ролей
|
||
</p>
|
||
</div>
|
||
<img src="src/assets/modal.svg" className="rounded-lg" alt="" />
|
||
</div>
|
||
|
||
<div className="max-w-[880px] p-10 pb-[18px] bg-[#3D425C4D] bg-opacity-30 rounded-2xl desktop:flex min-w-[880px] min-h-[400px] bg-[url(src/assets/pinned_windows.svg)] bg-no-repeat bg-right-bottom">
|
||
<div className="text-[#ffffff]">
|
||
<h1 className="font-medium text-[32px] leading-8 mb-2">
|
||
Видеозапись обучения
|
||
</h1>
|
||
<p className="text-lg max-w-[361px]">
|
||
Фиксация и хранение сессий обучения, тренировки и тестирования.
|
||
Ретроспектива по пройденной сессии вместе с инструктором
|
||
</p>
|
||
</div>
|
||
<img
|
||
src="src/assets/manage_video.svg"
|
||
className="rounded-lg mt-[216px]"
|
||
alt=""
|
||
/>
|
||
</div>
|
||
|
||
<div className="max-w-[880px] p-10 bg-[#3D425C4D] bg-opacity-30 rounded-2xl desktop:flex min-w-[880px] min-h-[400px] flex justify-between">
|
||
<div className="text-[#ffffff]">
|
||
<h1 className="font-medium text-[32px] leading-8 mb-2">
|
||
Статистика обучения
|
||
</h1>
|
||
<p className="text-lg max-w-[280px]">
|
||
Фиксация правильных и неправильных действий.
|
||
<br />
|
||
Отчет об ошибках
|
||
</p>
|
||
</div>
|
||
<div className="flex">
|
||
<img
|
||
src="src/assets/schedule.svg"
|
||
className="rounded-lg self-end relative"
|
||
alt=""
|
||
/>
|
||
<img
|
||
src="src/assets/stats.svg"
|
||
className="rounded-lg mb-[27px] relative z-10 right-9"
|
||
alt=""
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function TeachingFeaturesForOtherScreens() {
|
||
return (
|
||
<div className="mobile:max-tablet:flex mobile:max-tablet:flex-col mobile:max-tablet:gap-y-2 tablet-figma:max-desktop:grid grid-rows-[272px_113px_249px] gap-3 grid-cols-2 desktop:hidden tablet:max-tablet-figma:flex tablet:max-tablet-figma:flex-col">
|
||
<div className="bg-[#3D425C4D] bg-opacity-30 rounded-2xl tablet:max-desktop:pt-6 tablet:max-desktop:px-6 mobile:max-tablet:pt-5 mobile:max-tablet:px-5 overflow-hidden row-start-1 col-start-1 mobile:max-tablet:flex mobile:max-tablet:flex-col">
|
||
<h1 className="text-[#ffffff] font-medium tablet:max-desktop:text-2xl mobile:max-tablet:text-xl tablet:max-desktop:leading-6 mobile:max-tablet:leading-5 mb-1">
|
||
Управление
|
||
<br /> пользователями
|
||
</h1>
|
||
<p className="text-[#ffffff] text-xs tablet:max-desktop:-mb-[18px] leading-[17px]">
|
||
Добавление, удаление и назначение ролей
|
||
</p>
|
||
<img
|
||
src="src/assets/modal.svg"
|
||
className="relative mobile:max-tablet:w-[351px] tablet-figma:max-desktop:top-7 tablet:max-tablet-figma:top-11 mobile:max-tablet:top-5 mobile:max-tablet:left-[92px] self-end tablet:max-tablet-figma:m-auto"
|
||
alt=""
|
||
/>
|
||
</div>
|
||
|
||
<div className="bg-[#3D425C4D] bg-opacity-30 rounded-2xl tablet:max-desktop:pt-6 tablet:max-desktop:px-6 mobile:max-tablet:pt-5 mobile:max-tablet:px-5 bg-[url(src/assets/schedule_big.svg)] tablet-figma:max-desktop:bg-contain mobile:max-tablet:bg-contain mobile:max-tablet:bg-[140px_130px] tablet:max-tablet-figma:bg-[length:50%] bg-no-repeat tablet-figma:max-desktop:bg-[73px_102px] tablet:max-tablet-figma:bg-right-bottom row-start-1 row-span-2 col-start-2">
|
||
<h1 className="text-[#ffffff] font-medium tablet:max-desktop:text-2xl mobile:max-tablet:text-xl tablet:max-desktop:leading-6 mobile:max-tablet:leading-5 mb-1">
|
||
Управление процессом
|
||
</h1>
|
||
<p className="text-[#ffffff] text-xs leading-[17px]">
|
||
Назначение сценария обучения
|
||
<br />
|
||
Выбор режима: обучение, тренировка, тестирование
|
||
</p>
|
||
<img
|
||
src="src/assets/master_card.svg"
|
||
className="rounded-lg mb-11 h-[92px] mt-[166px] tablet:max-tablet-figma:mx-auto"
|
||
alt=""
|
||
/>
|
||
</div>
|
||
|
||
<div className="bg-[#3D425C4D] bg-opacity-30 rounded-2xl tablet:max-desktop:pt-6 tablet:max-desktop:px-6 mobile:max-tablet:pt-5 mobile:max-tablet:px-5 bg-[url(src/assets/pinned_windows_mini.svg)] tablet:max-tablet-figma:bg-[100%_100%] tablet-figma:max-desktop:bg-contain bg-no-repeat tablet-figma:max-desktop:bg-[67px_119px] mobile:max-tablet:bg-[100%_119px] mobile:max-tablet:flex mobile:max-tablet:flex-col row-start-2 row-span-2 col-start-1">
|
||
<h1 className="text-[#ffffff] font-medium tablet:max-desktop:text-2xl mobile:max-tablet:text-xl tablet:max-desktop:leading-6 mobile:max-tablet:leading-5 mb-1">
|
||
Видеозапись обучения
|
||
</h1>
|
||
<p className="text-[#ffffff] text-xs leading-[17px]">
|
||
Фиксация и хранение сессий обучения, тренировки и тестирования.
|
||
Ретроспектива по пройденной сессии вместе с инструктором
|
||
</p>
|
||
<img
|
||
src="src/assets/manage_video.svg"
|
||
className="rounded-lg h-[94px] mt-[147px] mb-6 tablet:max-tablet-figma:mx-auto tablet:max-tablet-figma:mr-[200px] self-end mr-[168px]"
|
||
alt=""
|
||
/>
|
||
</div>
|
||
|
||
<div className="bg-[#3D425C4D] bg-opacity-30 rounded-2xl tablet:max-desktop:pt-6 tablet:max-desktop:px-6 mobile:max-tablet:pt-5 mobile:max-tablet:px-5 tablet:max-tablet-figma:pb-6 mobile:max-tablet:pb-5 overflow-hidden row-start-3 col-start-2">
|
||
<h1 className="text-[#ffffff] font-medium tablet:max-desktop:text-2xl mobile:max-tablet:text-xl tablet:max-desktop:leading-6 mobile:max-tablet:leading-5 mb-1">
|
||
Статистика обучения
|
||
</h1>
|
||
<p className="text-[#ffffff] text-xs leading-[17px] mobile:max-tablet-figma:mb-5">
|
||
Фиксация правильных и неправильных действий.
|
||
<br />
|
||
Отчет об ошибках
|
||
</p>
|
||
<div className="flex flex-col">
|
||
<div className="flex items-end mobile:max-tablet-figma:justify-center tablet-figma:max-desktop:overflow-hidden mt-0.5 mobile:max-tablet:pl-11 mx-auto">
|
||
<img
|
||
src="src/assets/schedule.svg"
|
||
className="rounded-lg mobile:max-desktop:w-[166px] tablet:max-desktop:relative z-10"
|
||
alt=""
|
||
/>
|
||
<img
|
||
src="src/assets/stats.svg"
|
||
className="rounded-lg relative tablet-figma:max-desktop:right-[27px] tablet:max-tablet-figma:right-[31px] mobile:max-desktop:w-[166px] tablet:max-tablet-figma:bottom-[27px] mobile:max-tablet:bottom-[14px] mobile:max-tablet:right-11"
|
||
alt=""
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|