fixes

src/components/Layouts/Footer.tsx

@@ -3,7 +3,7 @@ import { LogoWithTextIcon } from '../icons/LogoWithTextIcon';
 
 export function Footer() {
   return (
-    <footer className="sm:grid xl:grid-cols-[2fr_1fr_1fr] sm:grid-cols-2 sm:max-xl:grid-rows-2 mt-20">
+    <footer className="sm:grid xl:grid-cols-[2fr_1fr_1fr] sm:grid-cols-2 sm:max-xl:grid-rows-2">
       <div className="flex sm:items-center max-sm:flex-col sm:px-10 px-4 sm:py-9 py-4 border-t border-[#3D425C] gap-6 sm:max-xl:row-start-1 sm:max-xl:col-span-2">
         <Link to={'/'} className="outline-none">
           <LogoWithTextIcon className="h-[50px]" />

src/components/Layouts/Layout.tsx

@@ -10,8 +10,8 @@ export function Layout() {
       <Header />
       <main className="relative overflow-clip">
         <Outlet />
+        <Feedback />
       </main>
-      <Feedback />
       <Footer />
       <ModalContainer />
     </>

src/components/Main/Contacts.tsx

@@ -9,7 +9,7 @@ import { YouTubeIcon } from '../icons/YoutubeIcon';
 
 export function Feedback() {
   return (
-    <div className="sm:grid lg:grid-cols-12 sm:grid-cols-2 lg:grid-rows-[repeat(min-content,2)] sm:grid-rows-[repeat(min-content,3)] lg:gap-x-4 sm:gap-x-14 lg:gap-y-[68px] sm:px-6 px-4 pt-[70px]">
+    <div className="sm:grid lg:grid-cols-12 sm:grid-cols-2 lg:grid-rows-[repeat(min-content,2)] sm:grid-rows-[repeat(min-content,3)] lg:gap-x-4 sm:gap-x-14 lg:gap-y-[68px] sm:px-6 px-4 pb-20 pt-[70px]">
       <h2 className="lg:col-span-7 sm:col-span-full h2 font-medium max-lg:mb-6">
         Хотите использовать интерактивные тренажеры в обучении?
         <br />

src/components/Main/Projects.tsx

@@ -142,17 +142,15 @@ function Slider({ projects }: { projects: IProject<Media>[] }) {
   const ref = useRef<HTMLDivElement>(null);
 
   const [order, dispatch] = useReducer(
-    (state: typeof projects, action: string) => {
-      switch (action) {
-        case 'prev':
-          setSliderOffset(prev => prev - baseOffset);
-          return [state[state.length - 5], ...state.slice(0, -1)];
-        case 'next':
-          setSliderOffset(prev => prev + baseOffset);
-          return [...state.slice(1), state[4]];
-        default:
-          return state;
-      }
+    (state: typeof projects, action: number) => {
+      if (action === 0) return state;
+      setSliderOffset(prev => prev + baseOffset * action);
+      return action > 0
+        ? [...state.slice(action), ...state.slice(4, 4 + action)]
+        : [
+            ...state.slice(state.length - 4 + action, state.length - 4),
+            ...state.slice(0, action),
+          ];
     },
     [
       projects[projects.length - 2],
@@ -168,14 +166,14 @@ function Slider({ projects }: { projects: IProject<Media>[] }) {
       if (!isAnimating) {
         setIsAnimating(true);
         setSlide(prev => (prev === order.length - 5 ? 0 : prev + 1));
-        dispatch('next');
+        dispatch(1);
       }
     },
     onSwipedRight: () => {
       if (!isAnimating) {
         setIsAnimating(true);
         setSlide(prev => (prev === 0 ? order.length - 5 : prev - 1));
-        dispatch('prev');
+        dispatch(-1);
       }
     },
     trackMouse: true,
@@ -185,7 +183,7 @@ function Slider({ projects }: { projects: IProject<Media>[] }) {
 
   useEffect(() => {
     setSliderOffset(-baseOffset * 2);
-  }, [order, baseOffset, slide]);
+  }, [order, baseOffset]);
 
   useEffect(() => {
     const refValue = ref.current;
@@ -220,36 +218,31 @@ function Slider({ projects }: { projects: IProject<Media>[] }) {
             if (!isAnimating) {
               setIsAnimating(true);
               setSlide(prev => (prev === 0 ? order.length - 5 : prev - 1));
-              dispatch('prev');
+              dispatch(-1);
             }
           }}
           className="max-sm:hidden outline-none"
         >
           <ArrowLeftIcon />
         </button>
-        {/* <div className="h-1 bg-[#3D425C] w-full">
-          <div
-            className="bg-[#ffffff] h-1 duration-500"
-            style={{ width: `${((slide + 1) / projects.length) * 100}%` }}
-          />
-        </div> */}
         <RangeSlider
           value={slide}
-          max={order.length - 5}
+          max={projects.length - 1}
           onChange={dir => {
-            if (dir === slide + 1) dispatch('next');
-            else if (dir === slide - 1) dispatch('prev');
-            setSlide(dir);
+            setSlide(prev => {
+              dispatch(dir - prev);
+              return dir;
+            });
           }}
           tooltip={false}
-          className="w-full"
+          className="w-full transition-all"
         />
         <button
           onClick={() => {
             if (!isAnimating) {
               setIsAnimating(true);
               setSlide(prev => (prev === order.length - 5 ? 0 : prev + 1));
-              dispatch('next');
+              dispatch(1);
             }
           }}
           className="max-sm:hidden outline-none"

src/components/Main/RangeSlider.css

@@ -3,11 +3,13 @@
   box-shadow: none !important;
   height: 4px !important;
   background-color: #3d425c !important;
+  transition: all 0.2s;
 }
 
 .rangeslider__fill {
   box-shadow: none !important;
   background-color: #fff !important;
+  transition: all 0.2s;
 }
 
 .rangeslider__handle {
@@ -16,6 +18,7 @@
   height: 4px !important;
   border: none !important;
   border-radius: 50% !important;
+  transition: all 0.2s;
 }
 
 .rangeslider__handle::after {