Files
graff.training/src/components/Main/Decreasing.tsx
T

70 lines
3.0 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
import AppearanceHr from '../../ui/AppearanceHr';
import { Title } from '../../ui/Title';
export function Decreasing() {
return (
<div className="lg:py-[70px] mobile:py-14 lg:px-10 sm:px-6 mobile:px-4">
<Title className="sm:block mobile:max-sm:hidden">
<span className="text-gradient">Достигайте положительный эффект</span>
<br /> за счет снижения издержек
</Title>
<Title className="sm:hidden">
<span
className="bg-text-gradient bg-gradient-to-r from-[#798FFF] to-[#D375FF]"
style={{
backgroundClip: 'text',
WebkitBackgroundClip: 'text',
WebkitTextFillColor: 'transparent',
}}
>
Помогаем
</span>{' '}
сократить затраты на обучение, повысить безопасность и
производительность
</Title>
<div className="flex md:flex-row mobile:max-md:flex-col justify-normal desktop-figma:gap-x-[10vw] md:max-desktop-figma:gap-x-[clamp(16px,16px+(100vw-1024px)/576*142,160px)] desktop-figma:max-w-[calc(70.8vw+256px)] desktop-figma:justify-between sm:items-end xl:pl-64 desktop-figma:mt-[77px] lg:mt-14 mobile:mt-6">
<ul className="xl:max-w-[47vw] w-full sm:min-w-[318px] mobile:mb-6">
<AppearanceHr />
<li className="flex justify-between py-5 gap-x-4">
<Plus text="снижение количества несчастных случаев" />
<Number text="[01]" />
</li>
<AppearanceHr />
<li className="flex justify-between py-5 gap-x-4">
<Plus text="уменьшение количества ошибок при ТО и ППР" />
<Number text="[02]" />
</li>
<AppearanceHr />
<li className="flex justify-between py-5 gap-x-4">
<Plus text="меньше случаев внеплановой остановки оборудования" />
<Number text="[03]" />
</li>
<AppearanceHr />
<li className="flex justify-between py-5 gap-x-4">
<Plus text="снижение расходов на закупку реальной техники и оборудования для обучения" />
<Number text="[04]" />
</li>
<AppearanceHr />
<li className="flex justify-between py-5 gap-x-4">
<Plus text="сокращение сроков обучения" />
<Number text="[05]" />
</li>
</ul>
<img
src="src/assets/effect.png"
className="mobile:max-md:self-center mobile:max-md:w-full object-contain"
alt=""
/>
</div>
</div>
);
}
function Plus({ text }: { text: string }) {
return <p className="text-[#ffffff] l-text">{text}</p>;
}
function Number({ text }: { text: string }) {
return <p className="text-[#52587A] m-text">{text}</p>;
}