From 521ed7a60911d6e660c372d288a88aa2f63abedc Mon Sep 17 00:00:00 2001
From: Lanskikh <lanskikh-mikhail@mail.ru>
Date: Mon, 16 Sep 2024 14:07:14 +0500
Subject: [PATCH] products tabs fixed

---
 src/components/Main/Products/Products.tsx     |  12 +-
 .../Main/Products/Tabs/ForTeachingTab.tsx     | 100 +++++++-------
 .../Main/Products/Tabs/IndustrialTab.tsx      | 128 +++++++++--------
 .../Main/Products/Tabs/SimulatorsTab.tsx      | 130 +++++++++---------
 4 files changed, 183 insertions(+), 187 deletions(-)

diff --git a/src/components/Main/Products/Products.tsx b/src/components/Main/Products/Products.tsx
index d40e1db..32fccf4 100644
--- a/src/components/Main/Products/Products.tsx
+++ b/src/components/Main/Products/Products.tsx
@@ -13,18 +13,18 @@ export function Products() {
 
   function handleMouseMove(e: WheelEvent) {
     setSticked1(
-      Math.round(ref2.current!.getBoundingClientRect().top) <=
+      ref2.current!.getBoundingClientRect().top <=
         +window.getComputedStyle(ref2.current!).top.slice(0, -2),
     );
     setSticked2(
-      Math.round(ref3.current!.getBoundingClientRect().top) <=
+      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) !==
+        ref2.current!.getBoundingClientRect().top !==
           +window.getComputedStyle(ref2.current!).top.slice(0, -2)
       ) {
         window.scrollBy({
@@ -36,8 +36,10 @@ export function Products() {
         setSticked1(true);
       }
       if (
-        Math.round(ref2.current!.getBoundingClientRect().top) ===
-        +window.getComputedStyle(ref2.current!).top.slice(0, -2)
+        Math.round(
+          ref2.current!.getBoundingClientRect().top -
+            +window.getComputedStyle(ref2.current!).top.slice(0, -2),
+        ) === 0
       ) {
         window.scrollBy({
           top:
diff --git a/src/components/Main/Products/Tabs/ForTeachingTab.tsx b/src/components/Main/Products/Tabs/ForTeachingTab.tsx
index 742f876..6aa8039 100644
--- a/src/components/Main/Products/Tabs/ForTeachingTab.tsx
+++ b/src/components/Main/Products/Tabs/ForTeachingTab.tsx
@@ -3,58 +3,56 @@ import { useHover } from 'usehooks-ts';
 import { getIcon } from '../../../../utils/getIcon';
 import { useInView } from 'framer-motion';
 
-export const ForTeachingTab = forwardRef<HTMLDivElement>((_, ref) => {
-  return (
-    <div
-      itemProp="forEducation"
-      itemScope
-      itemType="https://schema.org/TrainingsForEducation"
-      ref={ref}
-      className="lg:ml-[129px] lg:min-h-[calc(100vh-276px)] lg:min-w-[calc(100vw-129px)] sm:min-h-[calc(100vh-176px)] min-h-[calc(100vh)] min-w-[100vw] sm:sticky -z-10 lg:top-[276px] sm:top-[176px] top-0 lg:px-10 lg:pt-10 sm:px-6 sm:pt-6 px-4 pt-4 lg:border-l bg-[#14161F] border-t border-[#3D425C]"
-    >
-      <div className="flex justify-between ">
-        <h2 className="font-medium h2">
-          Интерактивные тренажеры для учебных заведений
-        </h2>
-        <p className="h3 font-medium text-[#3D425C]">03</p>
-      </div>
-      <div className="flex justify-between max-sm:flex-col">
-        <div className="lg:space-y-14 sm:space-y-10 space-y-6 sm:max-w-[calc(413/768*100vw)] lg:mt-14 sm:mt-10 mt-6">
-          <div
-            itemProp="creating"
-            className="lg:space-y-7 space-y-4 xl:max-w-[calc(507/1600*100vw)] lg:max-w-[40vw] flex-1"
-          >
-            <ForTeachingOption
-              title="cоздание обучающих VR систем"
-              description="Проведение виртуальных практических работ, создание учебных мастерских и стендов"
-              type="teaching"
-            />
-            <ForTeachingOption
-              title="cоздание VR лабораторий"
-              description="Тренажер для проведения лабораториных работ позволит избежать
-            поломки оборудования, а также экономить на расходных средствах"
-              type="labs"
-            />
-            <p className="w-[85%] font-medium lg:text-2xl sm:text-xl">
-              Оснащение учебных классов и центров всем необходимым для
-              современного обучения под «ключ»
-            </p>
-          </div>
-        </div>
-        <img
-          src="src/assets/products/teaching/teaching.png"
-          className="max-sm:hidden w-[calc(685/1600*100vw)] sm:self-start self-stretch"
-          alt="обучение"
-        />
-        <img
-          src="src/assets/products/teaching/teaching_mobile.png"
-          className="mt-5 -mx-6 sm:hidden"
-          alt="обучение"
-        />
-      </div>
+export const ForTeachingTab = forwardRef<HTMLDivElement>((_, ref) => (
+  <div
+    itemProp="forEducation"
+    itemScope
+    itemType="https://schema.org/TrainingsForEducation"
+    ref={ref}
+    className="overflow-hidden lg:ml-[129px] lg:h-[70dvh] sm:h-[80dvh] lg:min-w-[calc(100vw-129px)] h-[100dvh] min-w-[100vw] sm:sticky -z-10 lg:top-[30dvh] sm:top-[20dvh] top-0 lg:px-10 lg:pt-10 sm:px-6 sm:pt-6 px-4 pt-4 lg:border-l bg-[#14161F] border-t border-[#3D425C]"
+  >
+    <div className="flex justify-between ">
+      <h2 className="font-medium h2">
+        Интерактивные тренажеры для учебных заведений
+      </h2>
+      <p className="h3 font-medium text-[#3D425C]">03</p>
     </div>
-  );
-});
+    <div className="flex justify-between max-sm:flex-col">
+      <div className="lg:space-y-14 sm:space-y-10 space-y-6 sm:max-w-[calc(413/768*100vw)] lg:mt-14 sm:mt-10 mt-6">
+        <div
+          itemProp="creating"
+          className="lg:space-y-7 space-y-4 xl:max-w-[calc(507/1600*100vw)] lg:max-w-[40vw] flex-1"
+        >
+          <ForTeachingOption
+            title="cоздание обучающих VR систем"
+            description="Проведение виртуальных практических работ, создание учебных мастерских и стендов"
+            type="teaching"
+          />
+          <ForTeachingOption
+            title="cоздание VR лабораторий"
+            description="Тренажер для проведения лабораториных работ позволит избежать
+            поломки оборудования, а также экономить на расходных средствах"
+            type="labs"
+          />
+          <p className="font-medium lg:text-2xl sm:text-xl">
+            Оснащение учебных классов и центров всем необходимым для
+            современного обучения под «ключ»
+          </p>
+        </div>
+      </div>
+      <img
+        src="src/assets/products/teaching/teaching.png"
+        className="max-sm:hidden w-[calc(685/1600*100vw)] sm:self-start"
+        alt="обучение"
+      />
+      <img
+        src="src/assets/products/teaching/teaching_mobile.png"
+        className="mt-5 -mx-6 sm:hidden"
+        alt="обучение"
+      />
+    </div>
+  </div>
+));
 
 function ForTeachingOption({
   title,
diff --git a/src/components/Main/Products/Tabs/IndustrialTab.tsx b/src/components/Main/Products/Tabs/IndustrialTab.tsx
index 0591d82..969ae02 100644
--- a/src/components/Main/Products/Tabs/IndustrialTab.tsx
+++ b/src/components/Main/Products/Tabs/IndustrialTab.tsx
@@ -37,73 +37,71 @@ function TeachingItem({
 }
 
 export const IndustrialTab = forwardRef<HTMLDivElement, { sticked: boolean }>(
-  ({ sticked }, ref) => {
-    return (
-      <div
-        itemProp="industrial"
-        itemScope
-        itemType="https://schema.org/IndustrialTrainings"
-        ref={ref}
-        className="sm:sticky top-0 min-h-[100svh] min-w-[100vw] overflow-hiddens lg:px-10 lg:pt-10 sm:px-6 sm:pt-6 px-4 pt-4 border-t border-[#3D425C] bg-[#14161F] -z-30 max-sm:flex flex-col items-center gap-y-4"
-      >
-        <div className="space-y-6 lg:space-y-14 sm:space-y-10">
-          <div
-            className={
-              'flex justify-between items-center' +
-              (sticked ? ' text-[#3D425C] transition-colors' : '')
-            }
-          >
-            <h2 className="w-full font-medium h2">Промышленные тренажеры</h2>
-            <p className="h3 font-medium text-[#3D425C]">01</p>
-          </div>
-          <div
-            itemProp="education"
-            itemScope
-            itemType="https://schema.org/IndustrialTrainingsEducation"
-            className={
-              'sm:space-y-7 space-y-4 xl:max-w-[max(450px,calc(507/1600*100vw))] lg:max-w-[440px] sm:max-w-[calc(379/768*100vw)]' +
-              (sticked ? ' transition-opacity opacity-0' : ' opacity-100')
-            }
-          >
-            <TeachingItem
-              iconType="danger"
-              text="отработка проведения технологических операций: оказание первой помощи, работы на высоте, работа с доменной печью и т.п."
-              title="обучение навыкам работы на опасных производствах"
-            />
-            <TeachingItem
-              iconType="service"
-              text="отработка определения неисправностей оборудования и выполнения ремонтных работ на цифровом двойнике"
-              title="обучение обслуживанию и ремонту оборудования, систем, техники"
-            />
-            <TeachingItem
-              iconType="safety"
-              text="отработка плана мероприятий по локализации и ликвидации последствий аварий. "
-              title="обучение правилам промышленной безопасности и охраны труда"
-            />
-          </div>
+  ({ sticked }, ref) => (
+    <div
+      itemProp="industrial"
+      itemScope
+      itemType="https://schema.org/IndustrialTrainings"
+      ref={ref}
+      className="sm:sticky top-0 min-h-[100dvh] min-w-[100vw] overflow-hiddens lg:px-10 lg:pt-10 sm:px-6 sm:pt-6 px-4 pt-4 border-t border-[#3D425C] bg-[#14161F] -z-30 max-sm:flex flex-col items-center gap-y-4"
+    >
+      <div className="space-y-6 lg:space-y-14 sm:space-y-10">
+        <div
+          className={
+            'flex justify-between items-center' +
+            (sticked ? ' text-[#3D425C] transition-colors' : '')
+          }
+        >
+          <h2 className="w-full font-medium h2">Промышленные тренажеры</h2>
+          <p className="h3 font-medium text-[#3D425C]">01</p>
         </div>
-        <img
-          src="src/assets/products/trainings/trainings_desktop.png"
+        <div
+          itemProp="education"
+          itemScope
+          itemType="https://schema.org/IndustrialTrainingsEducation"
           className={
-            'absolute right-0 top-[121px] object-cover lg:w-[calc(1000/1600*100vw)] xl:w-[calc(1152/1600*100vw)] max-lg:hidden ' +
-            (sticked ? 'transition-opacity opacity-0' : 'opacity-100')
+            'sm:space-y-7 space-y-4 xl:max-w-[max(450px,calc(507/1600*100vw))] lg:max-w-[440px] sm:max-w-[calc(379/768*100vw)]' +
+            (sticked ? ' transition-opacity opacity-0' : ' opacity-100')
           }
-          alt="тренажеры"
-        />
-        <img
-          src="src/assets/products/trainings/trainings_tablet.png"
-          className={
-            'absolute right-0 top-[120px] object-cover w-[calc(438/768*100vw)] hidden sm:max-lg:block ' +
-            (sticked ? 'transition-opacity opacity-0' : 'opacity-100')
-          }
-          alt="тренажеры"
-        />
-        <img
-          src="src/assets/products/trainings/trainings_mobile.png"
-          className="object-cover object-center sm:hidden"
-          alt="тренажеры"
-        />
+        >
+          <TeachingItem
+            iconType="danger"
+            text="отработка проведения технологических операций: оказание первой помощи, работы на высоте, работа с доменной печью и т.п."
+            title="обучение навыкам работы на опасных производствах"
+          />
+          <TeachingItem
+            iconType="service"
+            text="отработка определения неисправностей оборудования и выполнения ремонтных работ на цифровом двойнике"
+            title="обучение обслуживанию и ремонту оборудования, систем, техники"
+          />
+          <TeachingItem
+            iconType="safety"
+            text="отработка плана мероприятий по локализации и ликвидации последствий аварий. "
+            title="обучение правилам промышленной безопасности и охраны труда"
+          />
+        </div>
       </div>
-    );
-  },
+      <img
+        src="src/assets/products/trainings/trainings_desktop.png"
+        className={
+          'absolute right-0 top-[121px] object-cover lg:w-[calc(1000/1600*100vw)] xl:w-[calc(1152/1600*100vw)] max-lg:hidden ' +
+          (sticked ? 'transition-opacity opacity-0' : 'opacity-100')
+        }
+        alt="тренажеры"
+      />
+      <img
+        src="src/assets/products/trainings/trainings_tablet.png"
+        className={
+          'absolute right-0 top-[120px] object-cover w-[calc(438/768*100vw)] hidden sm:max-lg:block ' +
+          (sticked ? 'transition-opacity opacity-0' : 'opacity-100')
+        }
+        alt="тренажеры"
+      />
+      <img
+        src="src/assets/products/trainings/trainings_mobile.png"
+        className="object-cover object-center sm:hidden"
+        alt="тренажеры"
+      />
+    </div>
+  ),
 );
diff --git a/src/components/Main/Products/Tabs/SimulatorsTab.tsx b/src/components/Main/Products/Tabs/SimulatorsTab.tsx
index 5ec0818..985c3ed 100644
--- a/src/components/Main/Products/Tabs/SimulatorsTab.tsx
+++ b/src/components/Main/Products/Tabs/SimulatorsTab.tsx
@@ -2,81 +2,79 @@ import { forwardRef } from 'react';
 
 function SimulatorsItem({ text }: { text: string }) {
   return (
-    <div className="lg:text-2xl sm:text-xl bg-[#3D425C4D] rounded-[44px] w-fit sm:px-5 sm:py-2 px-4 py-[6px]">
+    <div className="lg:text-2xl sm:text-xl bg-[#3D425C4D] rounded-[44px] w-fit sm:px-5 sm:py-2 px-4 py-1.5">
       {text}
     </div>
   );
 }
 
 export const SimulatorsTab = forwardRef<HTMLDivElement, { sticked: boolean }>(
-  ({ sticked }, ref) => {
-    return (
+  ({ sticked }, ref) => (
+    <div
+      itemScope
+      itemProp="simulators"
+      itemType="http://schema.org/Simulators"
+      ref={ref}
+      className="lg:ml-[65px] lg:h-[85dvh] lg:min-w-[calc(100vw-65px)] sm:h-[90dvh] min-w-[100vw] h-[100dvh] sm:sticky -z-20 lg:top-[15dvh] sm:top-[10dvh] top-0 bg-[#14161F] lg:px-10 lg:pt-10 sm:px-6 sm:pt-6 px-4 pt-4 lg:space-y-12 sm:space-y-10 space-y-6 lg:border-l border-t border-[#3D425C]"
+    >
       <div
-        itemScope
-        itemProp="simulators"
-        itemType="http://schema.org/Simulators"
-        ref={ref}
-        className="lg:ml-[65px] lg:min-h-[calc(100svh-138px)] lg:min-w-[calc(100vw-65px)] sm:min-h-[calc(100svh-88px)] min-w-[100vw] min-h-[calc(100svh)] sm:sticky -z-20 lg:top-[138px] sm:top-[88px] top-0 bg-[#14161F] lg:px-10 lg:pt-10 sm:px-6 sm:pt-6 px-4 pt-4 lg:space-y-12 sm:space-y-10 space-y-6 lg:border-l border-t border-[#3D425C]"
+        className={
+          'flex justify-between gap-x-2' +
+          (sticked ? ' text-[#3D425C] transition-colors' : '')
+        }
       >
-        <div
-          className={
-            'flex justify-between gap-x-2' +
-            (sticked ? ' text-[#3D425C] transition-colors' : '')
-          }
-        >
-          <h2 className="font-medium h2">Симуляторы управления техникой</h2>
-          <p className="text-[#3D425C] h3 font-medium">02</p>
+        <h2 className="font-medium h2">Симуляторы управления техникой</h2>
+        <p className="text-[#3D425C] h3 font-medium">02</p>
+      </div>
+      <div
+        itemProp="simulatorsTypes"
+        itemScope
+        itemType="http://schema.org/SimulatorsTypes"
+        className={
+          'flex flex-wrap gap-2 lg:max-w-[1000px]' +
+          (sticked ? ' transition-opacity opacity-0' : ' opacity-100')
+        }
+      >
+        <SimulatorsItem text="авиационные симуляторы" />
+        <SimulatorsItem text="погрузчики – ричстракеры" />
+        <SimulatorsItem text="тяговые составы железной дороги" />
+        <SimulatorsItem text="грузовые краны" />
+        <SimulatorsItem text="вертолетная техника" />
+        <SimulatorsItem text="горные самосвалы и экскаваторы" />
+      </div>
+      <div
+        itemProp="simulatorsModel"
+        itemScope
+        itemType="http://schema.org/SimulatorsModel"
+        className={
+          'sm:flex max-sm:space-y-6 gap-x-2 lg:max-w-[calc(1417/1600*100vw)]' +
+          (sticked ? ' transition-opacity opacity-0' : ' opacity-100')
+        }
+      >
+        <div className="space-y-[10px] lg:w-[calc(498.5/1600*100vw)] sm:w-[calc(331/768*100vw)]">
+          <img
+            src="src/assets/products/simulators/rzhd2.jpg"
+            className="object-cover sm:max-lg:aspect-[331/292] max-sm:aspect-[328/172]"
+            alt="ржд"
+          />
+          <p className="l-text opacity-60">
+            В основу симуляторов заложена математическая модель, полностью
+            соответствующая работе настоящего оборудования
+          </p>
         </div>
-        <div
-          itemProp="simulatorsTypes"
-          itemScope
-          itemType="http://schema.org/SimulatorsTypes"
-          className={
-            'flex flex-wrap gap-2 lg:max-w-[1000px]' +
-            (sticked ? ' transition-opacity opacity-0' : ' opacity-100')
-          }
-        >
-          <SimulatorsItem text="авиационные симуляторы" />
-          <SimulatorsItem text="погрузчики – ричстракеры" />
-          <SimulatorsItem text="тяговые составы железной дороги" />
-          <SimulatorsItem text="грузовые краны" />
-          <SimulatorsItem text="вертолетная техника" />
-          <SimulatorsItem text="горные самосвалы и экскаваторы" />
-        </div>
-        <div
-          itemProp="simulatorsModel"
-          itemScope
-          itemType="http://schema.org/SimulatorsModel"
-          className={
-            'sm:flex max-sm:space-y-6 gap-x-2 lg:max-w-[calc(1417/1600*100vw)]' +
-            (sticked ? ' transition-opacity opacity-0' : ' opacity-100')
-          }
-        >
-          <div className="space-y-[10px] lg:w-[calc(498.5/1600*100vw)] sm:w-[calc(331/768*100vw)]">
-            <img
-              src="src/assets/products/simulators/rzhd2.jpg"
-              className="object-cover sm:max-lg:aspect-[331/292] max-sm:aspect-[328/172]"
-              alt="ржд"
-            />
-            <p className="l-text opacity-60">
-              В основу симуляторов заложена математическая модель, полностью
-              соответствующая работе настоящего оборудования
-            </p>
-          </div>
-          <div className="space-y-[10px] lg:w-[calc(498.5/1600*100vw)] sm:w-[calc(331/768*100vw)]">
-            <img
-              src="src/assets/products/simulators/rzhd.jpg"
-              className="object-cover sm:max-lg:aspect-[331/292] max-sm:aspect-[328/172]"
-              alt="ржд"
-            />
-            <p className="l-text opacity-60">
-              Модель позволяет производить расчеты характеристик работы,
-              отслеживать безопасность работы устройств и симулировать
-              внештатные ситуации.
-            </p>
-          </div>
+        <div className="space-y-[10px] lg:w-[calc(498.5/1600*100vw)] sm:w-[calc(331/768*100vw)]">
+          <img
+            src="src/assets/products/simulators/rzhd.jpg"
+            className="object-cover sm:max-lg:aspect-[331/292] max-sm:aspect-[328/172]"
+            alt="ржд"
+          />
+          <p className="l-text opacity-60">
+            Модель позволяет производить расчеты характеристик работы,
+            отслеживать безопасность работы устройств и симулировать внештатные
+            ситуации.
+          </p>
         </div>
       </div>
-    );
-  },
+    </div>
+  ),
 );