85 lines
3.3 KiB
TypeScript
85 lines
3.3 KiB
TypeScript
import { MiniTitle } from '../../ui/MiniTitle';
|
|
import { AppearanceText } from '../../ui/AppearanceText';
|
|
import AppearanceHr from '../../ui/AppearanceHr';
|
|
|
|
export function Effeciency() {
|
|
return (
|
|
<div className="desktop:py-[70px] mobile:py-14 desktop:px-10 tablet:px-6 mobile:px-4">
|
|
<AppearanceHr className="mobile:max-tablet:hidden" />
|
|
<div className="flex mobile:max-desktop:flex-col pt-5 tablet:max-desktop:gap-4">
|
|
<MiniTitle text={'экономическая эффективность'} />
|
|
<div className="mobile:max-tablet:mt-4">
|
|
<div className="flex mobile:max-tablet:flex-col desktop:max-desktop-figma:w-[clamp(728px,728px+(100vw-1024px)/576*405,1133px)] justify-stretch gap-x-4 gap-y-2 mobile:max-tablet:py-5 tablet:pb-5">
|
|
<Figure
|
|
variance={'left'}
|
|
percents={50}
|
|
title={'сокращение бюджета на обучение сотрудников'}
|
|
/>
|
|
<Figure
|
|
variance={'left'}
|
|
percents={30}
|
|
title={'сокращение времени обучения сотрудников'}
|
|
/>
|
|
<Figure
|
|
variance={'right'}
|
|
percents={90}
|
|
title={'готовность к опасным ситуациямние выше на'}
|
|
/>
|
|
</div>
|
|
<AppearanceHr className="mb-9" />
|
|
<AppearanceText
|
|
className="max-w-[752px] desktop-figma:max-w-[47vw]"
|
|
splits={[
|
|
'В тренажере человек ',
|
|
'принимает решения ',
|
|
'так же, ',
|
|
'как в реальном мире, ',
|
|
'активируя ',
|
|
'те же нейронные ',
|
|
'цепочки в мозгу. ',
|
|
'Это позволяет ',
|
|
'добиться ',
|
|
'реальной ',
|
|
'производительности ',
|
|
'в работе. ',
|
|
]}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function Figure({
|
|
variance,
|
|
title,
|
|
percents,
|
|
}: {
|
|
variance: 'left' | 'right';
|
|
percents: number;
|
|
title: string;
|
|
}) {
|
|
return (
|
|
<div
|
|
className={
|
|
'flex px-6 bg-[#3D425C4D] desktop-figma:max-w-[22vw] w-full rounded-2xl pt-6 bg-no-repeat bg-auto xl:bg-[bottom_right_24px] tablet:max-xl:bg-[bottom_right_12px] mobile:bg-[bottom_right_24px] h-[262px]'
|
|
}
|
|
style={{
|
|
backgroundImage: `url(src/assets/${variance}_variance_figure.svg)`,
|
|
}}
|
|
>
|
|
<div className="text-[#ffffff] flex flex-col justify-between py-6 mobile:max-tablet:max-w-[50vw]">
|
|
<h6 className="desktop:font-medium l-text desktop-figma:max-w-[70%]">
|
|
{title}
|
|
</h6>
|
|
<h1 className="font-medium flex items-center tablet-figma:text-[clamp(64px,64px+(100vw-768px)/832*32,96px)] tablet-figma:leading-[clamp(57.6px,57.6px+(100vw-768px)/832*28.8,86.4px)] mobile:text-[64px] mobile:leading-[57.6px]">
|
|
{percents}
|
|
<span className="tablet-figma:text-[clamp(32px,32px+(100vw-768px)/832*32,64px)] tablet-figma:leading-[clamp(32px,32px+(100vw-768px)/832*25.6,57.6px)] mobile:text-[32px] mobile:leading-8">
|
|
%
|
|
</span>
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|