84 lines
3.5 KiB
TypeScript
84 lines
3.5 KiB
TypeScript
export function Trainings() {
|
||
return (
|
||
<div className="desktop:py-[70px] desktop:px-10 mobile:py-14 tablet:px-7 mobile:px-4">
|
||
<h1 className="text-[#ffffff] desktop:text-[64px] desktop:leading-[58px] desktop:mb-14 tablet:text-[40px] tablet:leading-10 mobile:text-[28px] mobile:mb-6 mobile:leading-7 font-medium">
|
||
Предлагаем различные{' '}
|
||
<span
|
||
className="bg-text-gradient bg-gradient-to-r from-[#798FFF] to-[#D375FF]"
|
||
style={{
|
||
backgroundClip: 'text',
|
||
WebkitBackgroundClip: 'text',
|
||
WebkitTextFillColor: 'transparent',
|
||
}}
|
||
>
|
||
варианты комплектации тренажеров
|
||
</span>
|
||
, основываясь на специфике вашего тренировочного процесса
|
||
</h1>
|
||
<div className="desktop:pl-[257px]">
|
||
<TrainingsFeature
|
||
order="[01]"
|
||
src="src/assets/vr_1.png"
|
||
title="VR - тренажеры"
|
||
text="Обучение навыкам работы с инструментами и оборудованием. Пешее хождение по территории или между оборудованием"
|
||
/>
|
||
<TrainingsFeature
|
||
order="[02]"
|
||
src="src/assets/vr_2.png"
|
||
title="Cтенды"
|
||
text="Отработки навыков вождение и управления техникой. Работа с панелями управления"
|
||
/>
|
||
<TrainingsFeature
|
||
order="[03]"
|
||
src="src/assets/vr_3.png"
|
||
title="Учебные классы"
|
||
text="Оснащение учебных классов и центров всем необходимым для современного обучения и профессиональной подготовки кадров"
|
||
/>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function TrainingsFeature({
|
||
src,
|
||
title,
|
||
text,
|
||
order,
|
||
}: {
|
||
title: string;
|
||
text: string;
|
||
src: string;
|
||
order: string;
|
||
}) {
|
||
return (
|
||
<div className="tablet:flex items-stretch justify-between tablet:py-10 desktop-figma:min-w-[1133px] border-b border-[#3D425C] first:border-t mobile:max-tablet:pt-5">
|
||
<div className="tablet:flex flex-col justify-between mobile:max-tablet:mb-[42px]">
|
||
<h1 className="desktop:text-[32px] font-medium desktop:leading-8 mobile:text-xl mobile:leading-5 text-[#ffffff] mobile:max-tablet:mb-2">
|
||
{title}
|
||
</h1>
|
||
<p className="desktop:text-lg desktop:leading-6 tablet:text-sm tablet:leading-[19px] tablet:max-w-[346px] text-[#ffffff] desktop:max-w-[495px]">
|
||
{text}
|
||
</p>
|
||
</div>
|
||
<div className="mobile:max-tablet:flex tablet:hidden justify-between items-end">
|
||
<p className="text-[#52587A] text-sm mb-5">{order}</p>
|
||
<img src={src} alt="" />
|
||
</div>
|
||
<div className="tablet-figma:flex tablet:max-tablet-figma:hidden mobile:max-tablet-figma:hidden">
|
||
<img src={src} alt="" />
|
||
<p className="text-[#52587A] desktop:font-medium desktop:text-sm desktop:leading-5 tablet:text-sm">
|
||
{order}
|
||
</p>
|
||
</div>
|
||
<img
|
||
src={src}
|
||
className="mobile:max-tablet:hidden tablet-figma:hidden"
|
||
alt=""
|
||
/>
|
||
<p className="text-[#52587A] desktop:font-medium desktop:text-sm desktop:leading-5 tablet:text-sm mobile:max-tablet:hidden tablet-figma:hidden">
|
||
{order}
|
||
</p>
|
||
</div>
|
||
);
|
||
}
|