95 lines
4.0 KiB
TypeScript
95 lines
4.0 KiB
TypeScript
import { MiniTitle } from '../../ui/MiniTitle';
|
|
import { AppearanceText } from '../../ui/AppearanceText';
|
|
import { motion } from 'framer-motion';
|
|
import AppearanceHr from '../../ui/AppearanceHr';
|
|
|
|
export function Effeciency() {
|
|
return (
|
|
<div className="lg:py-[70px] mobile:py-14 lg:px-10 sm:px-6 mobile:px-4">
|
|
<AppearanceHr className="mobile:max-sm:hidden" />
|
|
<div className="flex mobile:max-lg:flex-col pt-5 sm:max-lg:gap-4">
|
|
<MiniTitle text={'экономическая эффективность'} />
|
|
<div className="mobile:max-sm:mt-4">
|
|
<div className="flex mobile:max-sm:flex-col lg:max-desktop-figma:w-[clamp(728px,728px+(100vw-1024px)/576*405,1133px)] justify-stretch gap-x-4 gap-y-2 mobile:max-sm:py-5 sm:pb-5">
|
|
<Figure
|
|
percents={50}
|
|
title={'сокращение бюджета на обучение сотрудников'}
|
|
/>
|
|
<Figure
|
|
percents={30}
|
|
title={'сокращение времени обучения сотрудников'}
|
|
/>
|
|
<Figure
|
|
percents={90}
|
|
type="right"
|
|
title={'готовность к опасным ситуациямние выше на'}
|
|
/>
|
|
</div>
|
|
<AppearanceHr className="mb-9" />
|
|
<AppearanceText
|
|
className="max-w-[752px] desktop-figma:max-w-[47vw]"
|
|
splits={[
|
|
'В тренажере человек ',
|
|
'принимает решения ',
|
|
'так же, ',
|
|
'как в реальном мире, ',
|
|
'активируя ',
|
|
'те же нейронные ',
|
|
'цепочки в мозгу. ',
|
|
'Это позволяет ',
|
|
'добиться ',
|
|
'реальной ',
|
|
'производительности ',
|
|
'в работе. ',
|
|
]}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function Figure({
|
|
title,
|
|
percents,
|
|
type = 'left',
|
|
}: {
|
|
percents: number;
|
|
title: string;
|
|
type?: 'left' | 'right';
|
|
}) {
|
|
return (
|
|
<motion.div
|
|
whileHover={{
|
|
backgroundImage: `url(src/assets/${type}_variance_figure.svg),url(src/assets/efficiency_backlight.svg)`,
|
|
backgroundSize: 'auto,100% 100%',
|
|
}}
|
|
initial={{
|
|
backgroundImage: `url(src/assets/${type}_variance_figure.svg)`,
|
|
WebkitBorderRadius: 16,
|
|
MozBorderRadius: 16,
|
|
borderRadius: 16,
|
|
}}
|
|
animate={{
|
|
backgroundImage: `url(src/assets/${type}_variance_figure.svg),url(src/assets/efficiency_backlight.svg)`,
|
|
backgroundSize: 'auto,100% 0%',
|
|
backgroundBlendMode: 'darken',
|
|
}}
|
|
transition={{ duration: 0.075 }}
|
|
className="bg-[url(src/assets/left_variance_figure.svg)] hover:bg-[url(src/assets/left_variance_figure.svg),url(src/assets/efficiency_backlight.svg)] last:hover:bg-[url(src/assets/right_variance_figure.svg),url(src/assets/efficiency_backlight.svg)] last:bg-[url(src/assets/right_variance_figure.svg)] flex px-6 bg-[#3D425C4D] desktop-figma:max-w-[22vw] w-full rounded-2xl pt-6 bg-no-repeat bg-[position:bottom_right_24px,bottom_right] h-[262px]"
|
|
>
|
|
<div className="text-[#ffffff] flex flex-col justify-between py-6 mobile:max-sm:max-w-[50vw]">
|
|
<h6 className="lg: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>
|
|
</motion.div>
|
|
);
|
|
}
|