diff --git a/src/assets/products/teaching/teaching_mobile.png b/src/assets/products/teaching/teaching_mobile.png new file mode 100644 index 0000000..8a3be76 Binary files /dev/null and b/src/assets/products/teaching/teaching_mobile.png differ diff --git a/src/components/Main/Motivation.tsx b/src/components/Main/Motivation.tsx index da2693a..1e600fa 100644 --- a/src/components/Main/Motivation.tsx +++ b/src/components/Main/Motivation.tsx @@ -1,4 +1,4 @@ -import { Marquee } from '../Main/Marquee'; +// import { Marquee } from '../Main/Marquee'; export function Motivation() { return ( @@ -18,7 +18,7 @@ export function Motivation() { производительность - + {/* */} ); } diff --git a/src/components/Main/Products/Products.tsx b/src/components/Main/Products/Products.tsx index c67831b..f56afc9 100644 --- a/src/components/Main/Products/Products.tsx +++ b/src/components/Main/Products/Products.tsx @@ -1,16 +1,70 @@ +import { useEffect, useRef, useState } from 'react'; import { ForTeaching } from './Tabs/ForTeachingTab'; import { Simulators } from './Tabs/SimulatorsTab'; import { IndustrialTrainings } from './Tabs/TrainingsTab'; export function Products() { + const ref1 = useRef(null); + const ref2 = useRef(null); + const ref3 = useRef(null); + + const [stiked1, setSticked1] = useState(false); + const [stiked2, setSticked2] = useState(false); + + function handleMouseMove(e: WheelEvent) { + setSticked1( + Math.round(ref2.current!.getBoundingClientRect().top) <= + +window.getComputedStyle(ref2.current!).top.slice(0, -2), + ); + setSticked2( + Math.round(ref3.current!.getBoundingClientRect().top) <= + +window.getComputedStyle(ref3.current!).top.slice(0, -2), + ); + if (e.deltaY > 0) { + if ( + ref1.current!.getBoundingClientRect().top === + +window.getComputedStyle(ref1.current!).top.slice(0, -2) && + Math.round(ref2.current!.getBoundingClientRect().top) !== + +window.getComputedStyle(ref2.current!).top.slice(0, -2) + ) { + window.scrollBy({ + behavior: 'smooth', + top: + ref2.current!.getBoundingClientRect().top - + +window.getComputedStyle(ref2.current!).top.slice(0, -2), + }); + setSticked1(true); + } + if ( + Math.round(ref2.current!.getBoundingClientRect().top) === + +window.getComputedStyle(ref2.current!).top.slice(0, -2) + ) { + window.scrollBy({ + top: + ref3.current!.getBoundingClientRect().top - + +window.getComputedStyle(ref3.current!).top.slice(0, -2), + }); + setSticked2(true); + } + } + } + + useEffect(() => { + window?.addEventListener('wheel', handleMouseMove); + + return () => { + window?.removeEventListener('wheel', handleMouseMove); + }; + }, [ref1, ref2, ref3]); + return (
- - - + + +
); } diff --git a/src/components/Main/Products/Tabs/ForTeachingTab.tsx b/src/components/Main/Products/Tabs/ForTeachingTab.tsx index 61065b5..b9c756b 100644 --- a/src/components/Main/Products/Tabs/ForTeachingTab.tsx +++ b/src/components/Main/Products/Tabs/ForTeachingTab.tsx @@ -1,4 +1,4 @@ -import { useRef } from 'react'; +import { forwardRef, useRef } from 'react'; import { useHover } from 'usehooks-ts'; import { getIcon } from '../../../../utils/getIcon'; import { useInView } from 'framer-motion'; @@ -35,35 +35,47 @@ function ForTeachingOption({ ); } -export function ForTeaching() { +export const ForTeaching = forwardRef((_, ref) => { return (

Интерактивные тренажеры для учебных заведений

03

-
-
- - -

- Оснащение учебных классов и центров всем необходимым для - современного обучения под «ключ» -

+
+
+
+ + +

+ Оснащение учебных классов и центров всем необходимым для + современного обучения под «ключ» +

+
+ +
); -} +}); diff --git a/src/components/Main/Products/Tabs/SimulatorsTab.tsx b/src/components/Main/Products/Tabs/SimulatorsTab.tsx index e379edd..5269693 100644 --- a/src/components/Main/Products/Tabs/SimulatorsTab.tsx +++ b/src/components/Main/Products/Tabs/SimulatorsTab.tsx @@ -1,3 +1,5 @@ +import { forwardRef } from 'react'; + function SimulatorsItem({ text }: { text: string }) { return (
@@ -6,49 +8,66 @@ function SimulatorsItem({ text }: { text: string }) { ); } -export function Simulators() { - return ( -
-

- Симуляторы управления техникой -

02

-

-
- - - - - - -
-
-
- -

- В основу симуляторов заложена математическая модель, полностью - соответствующая работе настоящего оборудования -

+export const Simulators = forwardRef( + ({ sticked }, ref) => { + return ( +
+

+ Симуляторы управления техникой +

02

+

+
+ + + + + +
-
- -

- Модель позволяет производить расчеты характеристик работы, - отслеживать безопасность работы устройств и симулировать внештатные - ситуации. -

+
+
+ +

+ В основу симуляторов заложена математическая модель, полностью + соответствующая работе настоящего оборудования +

+
+
+ +

+ Модель позволяет производить расчеты характеристик работы, + отслеживать безопасность работы устройств и симулировать + внештатные ситуации. +

+
-
- ); -} + ); + }, +); diff --git a/src/components/Main/Products/Tabs/TrainingsTab.tsx b/src/components/Main/Products/Tabs/TrainingsTab.tsx index be65b97..158407d 100644 --- a/src/components/Main/Products/Tabs/TrainingsTab.tsx +++ b/src/components/Main/Products/Tabs/TrainingsTab.tsx @@ -1,4 +1,4 @@ -import { useRef } from 'react'; +import { forwardRef, useRef } from 'react'; import { getIcon } from '../../../../utils/getIcon'; import { useHover } from 'usehooks-ts'; import { useInView } from 'framer-motion'; @@ -35,20 +35,31 @@ function TeachingItem({ ); } -export function IndustrialTrainings() { +export const IndustrialTrainings = forwardRef< + HTMLDivElement, + { sticked: boolean } +>(({ sticked }, ref) => { return (

Промышленные тренажеры

01

-
+
); -} +}); diff --git a/src/components/Main/Video.tsx b/src/components/Main/Video.tsx index c4499fd..44cf360 100644 --- a/src/components/Main/Video.tsx +++ b/src/components/Main/Video.tsx @@ -1,6 +1,6 @@ import { useEffect, useState } from 'react'; -import { PlayIcon } from '../icons/PlayIcon'; import { CloseIcon } from '../icons/CloseIcon'; +import { Fullscreen } from '../icons/Fullscreen'; export function Video() { const [open, setOpen] = useState(false); @@ -15,17 +15,13 @@ export function Video() { return ( <> -
+
-
-
-
-
{open && (
diff --git a/src/components/icons/Fullscreen.tsx b/src/components/icons/Fullscreen.tsx new file mode 100644 index 0000000..985f494 --- /dev/null +++ b/src/components/icons/Fullscreen.tsx @@ -0,0 +1,20 @@ +export function Fullscreen() { + return ( + + + + + ); +} diff --git a/src/pages/MainPage.tsx b/src/pages/MainPage.tsx index 8d0b406..c2c4992 100644 --- a/src/pages/MainPage.tsx +++ b/src/pages/MainPage.tsx @@ -15,7 +15,7 @@ export function MainPage() { const width = useWindowWidth(); return ( -
+
{width >= 1024 && }