From 090a866175fce9046d6b129295473d582b9b8551 Mon Sep 17 00:00:00 2001
From: Lanskikh <lanskikh-mikhail@mail.ru>
Date: Tue, 17 Sep 2024 19:19:09 +0500
Subject: [PATCH] fixes

---
 src/components/Form.tsx                       | 68 ++++++++++++++-----
 .../Slider/DesktopInteractionsSlide.tsx       | 26 ++++---
 .../Slider/DesktopInteractionsSlider.tsx      | 27 ++++----
 .../Slider/InteractionsSlide.tsx              |  1 -
 4 files changed, 77 insertions(+), 45 deletions(-)

diff --git a/src/components/Form.tsx b/src/components/Form.tsx
index f3e5406..c3fa514 100644
--- a/src/components/Form.tsx
+++ b/src/components/Form.tsx
@@ -11,31 +11,63 @@ export function Form() {
       </Title>
       <div className="relative max-lg:flex items-center gap-x-[35px]">
         <FeedbackForm />
-        <div className="max-sm:hidden absolute lg:bottom-0 lg:-right-[min(136px,calc(136/1600*100vw))] sm:-right-[min(196px,calc(196/768*100vw))] animate-[spin_10s_linear_infinite]">
-          <div className="relative lg:w-[calc(512/1600*100vw)] sm:w-[calc(512/768*100vw)] aspect-square flex justify-center transition-all duration-500 lg::w-[calc(446/1600*100vw)] origin-center">
+        <div className="max-sm:hidden absolute lg:bottom-0 lg:-right-[min(136px,calc(136/1600*100vw))] sm:-right-[min(196px,calc(196/768*100vw))] animate-[spin_15s_linear_infinite]">
+          <div className="relative lg:w-[calc(512/1600*100vw)] sm:w-[calc(512/768*100vw)] aspect-square flex justify-center transition-all duration-500 origin-center">
             <div className="lg:w-[calc(116/1600*100vw)] sm:w-[calc(116/768*100vw)] flex flex-col justify-between h-full absolute">
-              <img src="/images/form/1_1.png" alt="" />
-              <img src="/images/form/1_2.png" alt="" />
+              <img
+                src="/images/form/1_1.png"
+                alt=""
+                className="animate-[spin_15s_linear_infinite] [animation-direction:reverse]"
+              />
+              <img
+                src="/images/form/1_2.png"
+                alt=""
+                className="animate-[spin_15s_linear_infinite] [animation-direction:reverse]"
+              />
             </div>
             <div className="lg:w-[calc(116/1600*100vw)] sm:w-[calc(116/768*100vw)] flex flex-col justify-between h-full absolute rotate-45">
-              <img src="/images/form/2_1.png" className="-rotate-45" alt="" />
-              <img src="/images/form/2_2.png" className="-rotate-45" alt="" />
+              <img
+                src="/images/form/2_1.png"
+                className="animate-[spin_15s_linear_infinite] [animation-direction:reverse]"
+                alt=""
+              />
+              <img
+                src="/images/form/2_2.png"
+                className="animate-[spin_15s_linear_infinite] [animation-direction:reverse]"
+                alt=""
+              />
             </div>
             <div className="lg:w-[calc(116/1600*100vw)] sm:w-[calc(116/768*100vw)] flex flex-col justify-between h-full absolute rotate-90">
-              <img src="/images/form/3_1.png" className="-rotate-90" alt="" />
-              <img src="/images/form/3_2.png" className="-rotate-90" alt="" />
+              <div className="-rotate-45">
+                <img
+                  src="/images/form/3_1.png"
+                  className="animate-[spin_15s_linear_infinite] [animation-direction:reverse]"
+                  alt=""
+                />
+              </div>
+              <div className="rotate-[135deg]">
+                <img
+                  src="/images/form/3_2.png"
+                  className="animate-[spin_15s_linear_infinite] [animation-direction:reverse]"
+                  alt=""
+                />
+              </div>
             </div>
             <div className="lg:w-[calc(116/1600*100vw)] sm:w-[calc(116/768*100vw)] flex flex-col justify-between h-full absolute rotate-[135deg]">
-              <img
-                src="/images/form/4_1.png"
-                className="-rotate-[135deg]"
-                alt=""
-              />
-              <img
-                src="/images/form/4_2.png"
-                className="-rotate-[135deg]"
-                alt=""
-              />
+              <div className="rotate-90">
+                <img
+                  src="/images/form/4_1.png"
+                  className="animate-[spin_15s_linear_infinite] [animation-direction:reverse]"
+                  alt=""
+                />
+              </div>
+              <div className="rotate-45">
+                <img
+                  src="/images/form/4_2.png"
+                  className="animate-[spin_15s_linear_infinite] [animation-direction:reverse]"
+                  alt=""
+                />
+              </div>
             </div>
           </div>
         </div>
diff --git a/src/components/InteractionsWithClients/Slider/DesktopInteractionsSlide.tsx b/src/components/InteractionsWithClients/Slider/DesktopInteractionsSlide.tsx
index 8903907..6178b5d 100644
--- a/src/components/InteractionsWithClients/Slider/DesktopInteractionsSlide.tsx
+++ b/src/components/InteractionsWithClients/Slider/DesktopInteractionsSlide.tsx
@@ -22,32 +22,30 @@ export const DesktopInteractionSlide = forwardRef<
 
   useEffect(() => {
     if (active) videoRef.current?.play();
-    else {
-      videoRef.current?.pause();
-      videoRef.current!.currentTime = 0;
-    }
+    else videoRef.current?.pause();
   }, [active]);
 
   return (
     <motion.div
+      key={video}
       onAnimationStart={() => setAnimationing(true)}
       onAnimationComplete={() => setAnimationing(false)}
       onClick={onClick}
-      initial={
-        active
-          ? { aspectRatio: 1, width: '15.3125vw' }
-          : { aspectRatio: 'auto', width: 'auto' }
-      }
       animate={
         !active
-          ? { aspectRatio: 1, width: '15.3125vw' }
-          : { aspectRatio: 817 / 600, width: '51.0652vw' }
+          ? { width: '15.3125vw', aspectRatio: 1 }
+          : { width: '51.0652vw', aspectRatio: 817 / 600 }
+      }
+      exit={
+        active
+          ? { width: '15.3125vw', aspectRatio: 1 }
+          : { width: '51.0652vw', aspectRatio: 817 / 600 }
       }
       transition={{
-        duration: 0.5,
+        duration: 1,
       }}
       className={
-        'bg-[#14161F] first:border-l last:border-r flex flex-col transition-all border-[#3D425C] ' +
+        'bg-[#14161F] first:border-l last:border-r flex flex-col transition-all border-[#3D425C] h-fit ' +
         (bordered ? 'border' : 'border-y') +
         (active ? ' p-8 justify-between' : ' content-center justify-center')
       }
@@ -57,7 +55,7 @@ export const DesktopInteractionSlide = forwardRef<
           <motion.p
             initial={{ opacity: 0, y: 10 }}
             animate={{ opacity: 1, y: 0 }}
-            transition={{ delay: 0.75 }}
+            transition={{ delay: 1.25 }}
             className="font-medium text-[32px] leading-none mt-0"
           >
             {title}
diff --git a/src/components/InteractionsWithClients/Slider/DesktopInteractionsSlider.tsx b/src/components/InteractionsWithClients/Slider/DesktopInteractionsSlider.tsx
index bccf2e4..af64a7d 100644
--- a/src/components/InteractionsWithClients/Slider/DesktopInteractionsSlider.tsx
+++ b/src/components/InteractionsWithClients/Slider/DesktopInteractionsSlider.tsx
@@ -2,6 +2,7 @@ import { useRef, useState } from 'react';
 import { interactions } from '../../../consts/interactions';
 import { SliderControls } from '../../ui/SliderControls';
 import { DesktopInteractionSlide } from './DesktopInteractionsSlide';
+import { AnimatePresence } from 'framer-motion';
 
 export function DesktopInteractionsSlider() {
   const [current, setCurrent] = useState(0);
@@ -28,18 +29,20 @@ export function DesktopInteractionsSlider() {
         onRightClick={() => goToSlide('next')}
         className="flex justify-end"
       />
-      <div className="flex items-end aspect-[1552/600]">
-        {interactions.map(({ video, title }, index) => (
-          <DesktopInteractionSlide
-            key={index}
-            video={video}
-            title={title}
-            active={index === current}
-            onClick={() => goToSlide(index)}
-            bordered={index === current || Math.abs(index - current) === 2}
-            ref={index === current ? currentSlideRef : null}
-          />
-        ))}
+      <div className="flex items-end h-[600px]">
+        <AnimatePresence mode="wait">
+          {interactions.map(({ video, title }, index) => (
+            <DesktopInteractionSlide
+              video={video}
+              key={index}
+              title={title}
+              active={index === current}
+              onClick={() => goToSlide(index)}
+              bordered={index === current || Math.abs(index - current) === 2}
+              ref={index === current ? currentSlideRef : null}
+            />
+          ))}
+        </AnimatePresence>
       </div>
     </>
   );
diff --git a/src/components/InteractionsWithClients/Slider/InteractionsSlide.tsx b/src/components/InteractionsWithClients/Slider/InteractionsSlide.tsx
index 670ef50..bce500a 100644
--- a/src/components/InteractionsWithClients/Slider/InteractionsSlide.tsx
+++ b/src/components/InteractionsWithClients/Slider/InteractionsSlide.tsx
@@ -13,7 +13,6 @@ export const InteractionSlide = forwardRef<
       videoRef.current?.play();
     } else {
       videoRef.current?.pause();
-      videoRef.current!.currentTime = 0;
     }
   }, [active, video]);