72 lines
2.8 KiB
TypeScript
72 lines
2.8 KiB
TypeScript
import { useInView } from 'framer-motion';
|
||
import { useRef } from 'react';
|
||
import { AppearanceText } from '../../ui/AppearanceText';
|
||
import { Title } from '../../ui/Title';
|
||
import { useHover } from 'usehooks-ts';
|
||
import { getIcon } from '../../utils/getIcon';
|
||
|
||
export function Availables() {
|
||
return (
|
||
<div className="lg:py-[100px] py-14 sm:grid lg:grid-cols-12 max-lg:grid-cols-8 gap-x-4 gap-y-8">
|
||
<Title className="lg:mb-14 mb-6 col-span-full">
|
||
<span className="text-gradient text-wrap">Многопользовательский </span>
|
||
режим обучения
|
||
</Title>
|
||
<div className="grid sm:grid-cols-3 lg:-mx-10 sm:-mx-6 -mx-4 sm:pb-5 pb-2 max-sm:pt-2 lg:col-start-1 col-span-full">
|
||
<MultiUserFeature
|
||
type="processes"
|
||
text="отработка производственных процессов, в которых участвует группа людей"
|
||
/>
|
||
<MultiUserFeature
|
||
type="plans"
|
||
text="командная отработка планов мероприятий по локализации и ликвидации последствий аварий"
|
||
/>
|
||
<MultiUserFeature
|
||
type="teamwork"
|
||
text="координация действий между несколькими сотрудниками"
|
||
/>
|
||
</div>
|
||
<AppearanceText
|
||
className="col-start-1 lg:col-span-6 col-span-7 max-lg:mt-6"
|
||
splits={[
|
||
'В одном ',
|
||
'цифровом ',
|
||
'пространстве ',
|
||
'могут работать ',
|
||
'сотрудники, ',
|
||
'находящиеся ',
|
||
'в разных ',
|
||
'помещениях, ',
|
||
'зданиях ',
|
||
'или городах',
|
||
]}
|
||
/>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function MultiUserFeature({
|
||
text,
|
||
type,
|
||
}: {
|
||
text: string;
|
||
type: 'processes' | 'plans' | 'teamwork';
|
||
}) {
|
||
const ref = useRef<HTMLDivElement>(null);
|
||
const hovered = useHover(ref);
|
||
const isInView = useInView(ref, {
|
||
margin: `0px 0px -${window.innerHeight - (ref.current?.clientHeight ?? 0)}px`,
|
||
});
|
||
|
||
return (
|
||
<div
|
||
ref={ref}
|
||
className="bg-right-bottom bg-no-repeat flex flex-col bg-[url(src/assets/availables/highlight.png)] bg-[length:0%_0%] hover:bg-[length:100%_100%] transition-all duration-300 lg:aspect-[532.67/280] sm:aspect-[255.33/280] aspect-[3/2'] w-full justify-between items-start px-10 py-6 sm:border-y border-t max-sm:last:border-b sm:border-r last:border-r-0 border-[#3D425C] lg:min-h-[214px] sm:min-h-[240px] min-h-[220px]"
|
||
>
|
||
{getIcon(type, hovered, 'mb-4 max-sm:hidden w-14 h-14')}
|
||
{getIcon(type, isInView, 'mb-4 sm:hidden w-14 h-14')}
|
||
<p className="l-text">{text}</p>
|
||
</div>
|
||
);
|
||
}
|