89 lines
3.7 KiB
TypeScript
89 lines
3.7 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 MultiUser() {
|
||
return (
|
||
<div
|
||
itemScope
|
||
itemType="http://schema.org/MultiUser"
|
||
className="lg:py-[100px] py-14 sm:grid lg:grid-cols-12 sm:grid-cols-3"
|
||
>
|
||
<Title className="row-start-1 mb-6 lg:mb-14 col-span-full">
|
||
<span className="text-gradient text-wrap">Многопользовательский </span>
|
||
<br className="lg:hidden" />
|
||
режим обучения
|
||
</Title>
|
||
<div className="max-lg:hidden lg:col-span-6 col-start-1 lg:row-span-2 sm:col-span-3 lg:row-start-2 sm:row-start-3 sm:row-span-1 bg-[url(/images/availables/image.jpg)] bg-cover bg-no-repeat bg-[left_top_-1px]" />
|
||
<div
|
||
itemProp="multiUserFeatures"
|
||
itemScope
|
||
itemType="http://schema.org/MultiUserFeatures"
|
||
className="grid max-lg:col-span-full sm:max-lg:row-start-2 lg:col-span-6 lg:row-span-2 lg:grid-cols-2 sm:grid-cols-3 lg:grid-rows-2 lg:-mr-10 max-lg:-mx-6"
|
||
>
|
||
<MultiUserFeature
|
||
type="processes"
|
||
text="отработка производственных процессов, в которых участвует группа людей"
|
||
/>
|
||
<MultiUserFeature
|
||
type="plans"
|
||
text="командная отработка планов мероприятий по локализации и ликвидации последствий аварий"
|
||
/>
|
||
<MultiUserFeature
|
||
type="teamwork"
|
||
text="координация действий между несколькими сотрудниками"
|
||
/>
|
||
</div>
|
||
<div className="lg:hidden lg:col-span-6 col-start-1 lg:row-span-2 sm:col-span-3 lg:row-start-2 sm:row-start-3 sm:row-span-1 bg-[url(/images/availables/image.jpg)] bg-cover bg-no-repeat bg-center sm:aspect-[728/356] aspect-[3/2] max-sm:-mx-6" />
|
||
<AppearanceText
|
||
className="col-span-7 col-start-1 mt-8 lg:col-span-6 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 ${(ref.current?.clientHeight ?? 0) - window.innerHeight}px`,
|
||
});
|
||
|
||
return (
|
||
<div
|
||
itemProp={type}
|
||
ref={ref}
|
||
className="max-sm:border-t max-sm:last:border-b sm:max-lg:border-y max-h-60 sm:max-lg:[&:not(:last-child)]:border-r bg-right-bottom bg-no-repeat flex flex-col bg-[url(/images/availables/highlight.jpg)] bg-[length:0%_0%] lg:hover:bg-[length:100%_100%] transition-all sm:min-h-[280px] duration-300 w-full justify-between items-start px-10 py-6 lg:border-t lg:first:border-r lg:last:border-b border-[#3D425C] col-span-1 lg:last:col-span-2 max-sm:aspect-[3/2]"
|
||
>
|
||
<div className="max-lg:hidden">
|
||
{getIcon(type, hovered, 'mb-4 max-lg:hidden w-14 h-14')}
|
||
</div>
|
||
<div className="lg:hidden">
|
||
{getIcon(type, isInView, 'mb-4 lg:hidden w-14 h-14')}
|
||
</div>
|
||
<p className="l-text">{text}</p>
|
||
</div>
|
||
);
|
||
}
|