86 lines
3.1 KiB
TypeScript
86 lines
3.1 KiB
TypeScript
import { ClassNameWrapper } from '../../hocs/ClassNameWrapper';
|
||
import { useModalStore } from '../../store/modalStore';
|
||
import { AppearanceHr } from '../../ui/AppearanceHr';
|
||
import { Button } from '../../ui/Button';
|
||
import { Title } from '../../ui/Title';
|
||
import { ArrowRightIcon } from '../icons/ArrowRightIcon';
|
||
import { ModalWithForm } from './ModalWithForm';
|
||
|
||
export function Decreasing() {
|
||
const setModal = useModalStore(state => state.setModal);
|
||
|
||
return (
|
||
<div className="lg:py-[100px] sm:py-[70px] py-14">
|
||
<Title className="lg:w-4/5 min-[2500px]:w-[70%]">
|
||
<span className="text-gradient">
|
||
Помогаем предприятиям снизить издержки,
|
||
</span>{' '}
|
||
сделать обучение сотрудников безопасней и эффективней
|
||
</Title>
|
||
<div className="grid grid-cols-2 mt-6 lg:mt-14 gap-x-4 gap-y-6">
|
||
<div className="col-span-2 space-y-10 lg:col-start-1 sm:max-lg:col-start-1 xl:col-span-1">
|
||
<div>
|
||
{[
|
||
'снижение количества несчастных случаев',
|
||
'уменьшение количества ошибок при ТО и ППР',
|
||
'меньше случаев внеплановой остановки оборудования',
|
||
'снижение расходов на закупку реальной техники и оборудования для обучения',
|
||
'сокращение сроков обучения',
|
||
].map((text, index) => (
|
||
<DecreasingOption key={index} text={text} number={index + 1} />
|
||
))}
|
||
</div>
|
||
<Button
|
||
className="w-full py-4 text-xl font-bold xl:w-1/3 lg:w-1/3 sm:w-1/2"
|
||
icon={
|
||
<div className="p-2 bg-white rounded-full">
|
||
<ClassNameWrapper
|
||
element={<ArrowRightIcon />}
|
||
className="text-black"
|
||
/>
|
||
</div>
|
||
}
|
||
onClick={() => setModal(<ModalWithForm />)}
|
||
>
|
||
Обсудить проект
|
||
</Button>
|
||
</div>
|
||
<div className="xl:col-start-2 col-span-full">
|
||
<video
|
||
src="src/assets/decreasing/decreasing.mp4"
|
||
autoPlay
|
||
playsInline
|
||
muted
|
||
loop
|
||
className="object-cover w-full"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function Plus({ text }: { text: string }) {
|
||
return <p className="text-2xl leading-[28.8px]">{text}</p>;
|
||
}
|
||
|
||
function Number({ number }: { number: number }) {
|
||
return <p className="text-[#52587A] text-sm">[0{number}]</p>;
|
||
}
|
||
|
||
function DecreasingOption({ text, number }: { text: string; number: number }) {
|
||
return (
|
||
<div className="group">
|
||
<AppearanceHr delay={number * 0.5} />
|
||
<div className="flex items-center justify-between py-5 gap-x-4">
|
||
<Plus text={text} />
|
||
<Number number={number} />
|
||
</div>
|
||
<AppearanceHr
|
||
className="hidden group-last:block"
|
||
delay={(number + 1) * 0.5}
|
||
/>
|
||
</div>
|
||
);
|
||
}
|