64 lines
2.5 KiB
TypeScript
64 lines
2.5 KiB
TypeScript
import { AppearanceHr } from '../../ui/AppearanceHr';
|
||
import { Title } from '../../ui/Title';
|
||
|
||
export function Decreasing() {
|
||
return (
|
||
<div className="lg:py-[70px] py-14">
|
||
<Title className="max-sm:hidden">
|
||
<span className="text-gradient">Достигайте положительный эффект</span>
|
||
<br /> за счет снижения издержек
|
||
</Title>
|
||
<Title className="sm:hidden">
|
||
<span className="text-gradient">Помогаем</span> сократить затраты на
|
||
обучение, повысить безопасность и производительность
|
||
</Title>
|
||
<div className="sm:grid lg:grid-cols-12 sm:max-lg:grid-cols-9 2xl:mt-[77px] lg:mt-14 mt-6 gap-x-4">
|
||
<div className="w-full mb-6 lg:col-start-3 sm:max-lg:col-start-1 lg:col-span-6 sm:col-span-5">
|
||
<DecreasingOption
|
||
text="снижение количества несчастных случаев"
|
||
number={1}
|
||
/>
|
||
<DecreasingOption
|
||
text="уменьшение количества ошибок при ТО и ППР"
|
||
number={2}
|
||
/>
|
||
<DecreasingOption
|
||
text="меньше случаев внеплановой остановки оборудования"
|
||
number={3}
|
||
/>
|
||
<DecreasingOption
|
||
text="снижение расходов на закупку реальной техники и оборудования для обучения"
|
||
number={4}
|
||
/>
|
||
<DecreasingOption text="сокращение сроков обучения" number={5} />
|
||
</div>
|
||
<img
|
||
src="src/assets/decreasing/effect.jpg"
|
||
className="max-md:self-center max-md:w-full self-end object-contain rounded-2xl w-[max(352px,22vw)] lg:col-start-10 sm:col-start-7 col-span-3"
|
||
alt="снижение издержек"
|
||
/>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function Plus({ text }: { text: string }) {
|
||
return <p className="l-text">{text}</p>;
|
||
}
|
||
|
||
function Number({ number }: { number: number }) {
|
||
return <p className="text-[#52587A] m-text">[0{number}]</p>;
|
||
}
|
||
|
||
function DecreasingOption({ text, number }: { text: string; number: number }) {
|
||
return (
|
||
<>
|
||
<AppearanceHr delay={number * 0.5} />
|
||
<div className="flex justify-between py-5 gap-x-4">
|
||
<Plus text={text} />
|
||
<Number number={number} />
|
||
</div>
|
||
</>
|
||
);
|
||
}
|