From 161b1a1d67fa6d1f402583fe33aaa394ac44da02 Mon Sep 17 00:00:00 2001
From: Lanskikh <lanskikh-mikhail@mail.ru>
Date: Fri, 5 Jul 2024 14:07:53 +0500
Subject: [PATCH] started fixed slider, todo other tabs for products

---
 src/components/Layout/Navbar.tsx |  2 +-
 src/components/Main/Products.tsx | 98 ++++++++++++++++++++++----------
 src/components/Main/Projects.tsx |  7 ++-
 3 files changed, 73 insertions(+), 34 deletions(-)

diff --git a/src/components/Layout/Navbar.tsx b/src/components/Layout/Navbar.tsx
index fd9c34d..0ce2a6e 100644
--- a/src/components/Layout/Navbar.tsx
+++ b/src/components/Layout/Navbar.tsx
@@ -29,7 +29,7 @@ export function Navbar() {
           {!menuOpen && <LangToggler lang={lang} />}
           <button
             onClick={() => setMenuOpen(prev => !prev)}
-            className="px-6 py-5 min-[1350px]:hidden mobile:block"
+            className="px-6 py-5 min-[1350px]:hidden mobile:block border-[#3D425C] mobile:max-tablet:border-l"
           >
             <img
               src={`src/assets/${menuOpen ? 'cross' : 'burger'}.svg`}
diff --git a/src/components/Main/Products.tsx b/src/components/Main/Products.tsx
index 518f339..692657a 100644
--- a/src/components/Main/Products.tsx
+++ b/src/components/Main/Products.tsx
@@ -39,7 +39,13 @@ export function Products() {
           text="Тренажеры для учебных заведений"
         />
       </div>
-      <TrainingsTab />
+      {curTab === 0 ? (
+        <TrainingsTab />
+      ) : curTab === 1 ? (
+        <SimulatorsTab />
+      ) : (
+        <></>
+      )}
     </div>
   );
 }
@@ -139,34 +145,66 @@ function TrainingsTab() {
 
 function SimulatorsTab() {
   return (
-    <div className="flex">
-      <div className="desktop:max-w-[584px]">
-        <h1 className="text-[#ffffff] font-medium tablet-figma:text-[clamp(24px,24px+(100vw-768px)/832*8,32px)] tablet-figma:leading-[clamp(24px,24px+(100vw-768px)/832*8,32px)] mobile:max-tablet-figma:text-2xl mobile:max-tablet-figma:leading-6">
-          Интерактивные симуляторы управления техникой
-        </h1>
-        <ul>
-          <SimulatorsItem text="авиационные симуляторы" />
-          <SimulatorsItem text="погрузчики – ричстракеры" />
-          <SimulatorsItem text="тяговые составы железной дороги" />
-          <SimulatorsItem text="грузовые краны" />
-          <SimulatorsItem text="вертолетная техника" />
-          <SimulatorsItem text="горные самосвалы и экскаваторы" />
-        </ul>
-        <h2 className="text-[#ffffff] font-medium tablet-figma:text-[clamp(16px,16px+(100vw-768px)/832*2,18px)] tablet-figma:leading-[clamp(19.2px,19.2px+(100vw-768px)/832*2.4,21.6px)] mobile:max-tablet-figma:text-[clamp(14px,14px+(100vw-360px)/408*2,16px)] mobile:max-tablet-figma:leading-[clamp(16.8px,16.8px+(100vw-360px)/408*2.4,19.2px)]">
-          В основу симуляторов заложена математическая модель, полностью
-          соответствующая работе настоящего оборудования
-        </h2>
-        <p className="text-[#ffffff] opacity-60 tablet-figma:text-[clamp(12px,12px+(100vw-768px)/832*2,14px)] tablet-figma:leading-[clamp(16.8px,16.8px+(100vw-768px)/832*2.8,19.6px)] mobile:max-tablet-figma:text-xs mobile:max-tablet-figma:leading-[16.8px]">
-          модель позволяет производить расчеты характеристик работы, отслеживать
-          безопасность работы устройств и симулировать внештатные ситуации.
-        </p>
-      </div>
-      <div className="flex">
-        <img src="src/assets/train.png" alt="" />
-        <img src="src/assets/dispatcher.png" alt="" />
-        <img src="src/assets/winda.png" alt="" />
-        <img src="src/assets/rzhd.png" alt="" />
-        <img src="src/assets/rzhd2.png" alt="" />
+    <div className="bg-[#3D425C4D] rounded-xl desktop:p-10 tablet:max-desktop:p-7 mobile:max-tablet:p-5 desktop:max-h-[546px] overflow-hidden">
+      <div className="tablet:flex justify-between gap-x-2">
+        <div className="desktop:max-w-[539px] tablet:max-w-[50vw]">
+          <h1 className="max-w-[455px] text-[#ffffff] font-medium tablet-figma:text-[clamp(24px,24px+(100vw-768px)/832*8,32px)] tablet-figma:leading-[clamp(24px,24px+(100vw-768px)/832*8,32px)] mobile:max-tablet-figma:text-[clamp(20px,20px+(100vw-360px)/408*4,24px)] mobile:max-tablet-figma:leading-6 desktop:mb-8 tablet:mb-6 mobile:mb-5">
+            Интерактивные симуляторы управления техникой
+          </h1>
+          <ul className="flex flex-wrap gap-2 desktop:mb-12 tablet:max-desktop:mb-10 mobile:mb-5 tablet:max-desktop:max-w-[325px]">
+            <SimulatorsItem text="авиационные симуляторы" />
+            <SimulatorsItem text="погрузчики – ричстракеры" />
+            <SimulatorsItem text="тяговые составы железной дороги" />
+            <SimulatorsItem text="грузовые краны" />
+            <SimulatorsItem text="вертолетная техника" />
+            <SimulatorsItem text="горные самосвалы и экскаваторы" />
+          </ul>
+          <div className="max-w-[455px] mobile:max-tablet:mb-5">
+            <h2 className="text-[#ffffff] font-medium tablet-figma:text-[clamp(16px,16px+(100vw-768px)/832*2,18px)] tablet-figma:leading-[clamp(19.2px,19.2px+(100vw-768px)/832*2.4,21.6px)] mobile:max-tablet-figma:text-[clamp(14px,14px+(100vw-360px)/408*2,16px)] mobile:max-tablet-figma:leading-[clamp(16.8px,16.8px+(100vw-360px)/408*2.4,19.2px)] desktop:mb-2 mobile:max-tablet:mb-3">
+              В основу симуляторов заложена математическая модель, полностью
+              соответствующая работе настоящего оборудования
+            </h2>
+            <p className="tablet:max-desktop:hidden text-[#ffffff] opacity-60 tablet-figma:text-[clamp(12px,12px+(100vw-768px)/832*2,14px)] tablet-figma:leading-[clamp(16.8px,16.8px+(100vw-768px)/832*2.8,19.6px)] mobile:max-tablet-figma:text-xs mobile:max-tablet-figma:leading-[16.8px]">
+              модель позволяет производить расчеты характеристик работы,
+              отслеживать безопасность работы устройств и симулировать
+              внештатные ситуации.
+            </p>
+          </div>
+        </div>
+        <div className="tablet:max-desktop:max-w-[234px]">
+          <div className="flex desktop:justify-end mobile:max-tablet:relative xl:max-w-[clamp(552px,552px+(100vw-1280px)/320*160,712px)] desktop:max-xl:max-w-[300px] tablet:max-desktop:flex-col tablet:flex-wrap gap-2 tablet:max-desktop:mb-10">
+            <img
+              src="src/assets/train.png"
+              className="rounded-lg xl:w-[clamp(178px,178px+(100vw-1280px)/320*54,232px)] tablet:max-xl:hidden"
+              alt=""
+            />
+            <img
+              src="src/assets/dispatcher.png"
+              className="xl:w-[clamp(178px,178px+(100vw-1280px)/320*54,232px)] tablet:max-xl:hidden"
+              alt=""
+            />
+            <img
+              src="src/assets/winda.png"
+              className="xl:w-[clamp(178px,178px+(100vw-1280px)/320*54,232px)] tablet:max-xl:hidden"
+              alt=""
+            />
+            <img
+              src="src/assets/rzhd.png"
+              className="xl:w-[clamp(272px,272px+(100vw-1280px)/320*80,352px)]"
+              alt=""
+            />
+            <img
+              src="src/assets/rzhd2.png"
+              className="xl:w-[clamp(272px,272px+(100vw-1280px)/320*80,352px)]"
+              alt=""
+            />
+          </div>
+          <p className="desktop:hidden mobile:max-tablet:hidden text-[#ffffff] opacity-60 tablet-figma:text-[clamp(12px,12px+(100vw-768px)/832*2,14px)] tablet-figma:leading-[clamp(16.8px,16.8px+(100vw-768px)/832*2.8,19.6px)] mobile:max-tablet-figma:text-xs mobile:max-tablet-figma:leading-[16.8px]">
+            модель позволяет производить расчеты характеристик работы,
+            отслеживать безопасность работы устройств и симулировать внештатные
+            ситуации.
+          </p>
+        </div>
       </div>
     </div>
   );
@@ -174,7 +212,7 @@ function SimulatorsTab() {
 
 function SimulatorsItem({ text }: { text: string }) {
   return (
-    <li className="text-[#ffffff] tablet-figma:text-[clamp(16px,16px+(100vw-768px)/832*2,18px)] tablet-figma:leading-[clamp(21.6px,21.6px+(100vw-768px)/832*2.7,24.3px)] mobile:max-tablet-figma:text-[clamp(14px,14px+(100vw-360px)/408*2,16px)] mobile:max-tablet-figma:leading-[clamp(18.9px,18.9px+(100vw-360px)/408*2.7,21.6px)]">
+    <li className="text-[#ffffff] tablet-figma:text-[clamp(16px,16px+(100vw-768px)/832*2,18px)] tablet-figma:leading-[clamp(21.6px,21.6px+(100vw-768px)/832*2.7,24.3px)] mobile:max-tablet-figma:text-[clamp(14px,14px+(100vw-360px)/408*2,16px)] mobile:max-tablet-figma:leading-[clamp(18.9px,18.9px+(100vw-360px)/408*2.7,21.6px)] bg-[#3D425C4D] rounded-[44px] desktop:px-5 desktop:py-2 mobile:px-4 mobile:py-[6px]">
       {text}
     </li>
   );
diff --git a/src/components/Main/Projects.tsx b/src/components/Main/Projects.tsx
index 78f2be6..32cd8c2 100644
--- a/src/components/Main/Projects.tsx
+++ b/src/components/Main/Projects.tsx
@@ -5,7 +5,7 @@ import { Title } from '../../ui/Title';
 
 export function Projects() {
   return (
-    <div className="desktop:py-[70px] desktop:px-10 mobile:py-14 tablet:px-6 mobile:px-4 overflow-hidden select-none">
+    <div className="desktop:py-[70px] desktop:px-10 mobile:py-14 tablet:px-6 mobile:px-5 overflow-hidden select-none">
       <Title className="desktop:mb-14 mobile:mb-6">
         <span
           className="bg-text-gradient bg-gradient-to-r from-[#798FFF] to-[#D375FF]"
@@ -96,6 +96,7 @@ function Slider({
         setSliderOffset(prev => prev + baseOffset);
         return [...state.slice(1), state[2]];
       }
+      1;
       if (action === 'prev') {
         setSliderOffset(-baseOffset * 2);
         return [state[state.length - 3], ...state.slice(0, -1)];
@@ -109,7 +110,7 @@ function Slider({
 
   useEffect(() => {
     setSliderOffset(-baseOffset);
-  }, [order, baseOffset]);
+  }, [order, baseOffset, slide]);
 
   return (
     <div className="flex flex-col desktop:mt-4 tablet:mt-3 mobile:mt-2">
@@ -159,8 +160,8 @@ function Slider({
         </div>
         <button
           onClick={() => {
-            dispatch('next');
             setSlide(prev => (prev === order.length - 3 ? 0 : prev + 1));
+            dispatch('next');
           }}
           className="mobile:max-tablet:hidden"
         >