react warnings & adaptivity bugs fixed

src/components/about_us/TeamSlider.tsx

@@ -48,6 +48,7 @@ const TeamSlider = () => {
                   </SwiperSlide>
                 );
               }
+              return null;
             })
           : ["", "", "", "", "", ""].map(() => {
               return (

src/components/main/MainSlider.tsx

@@ -19,6 +19,7 @@ import { SlideProps } from "../../types/mainSliderSlide";
 // Helpers
 import { getMainSliderData } from "../../helpers/apiRequests";
 import { highlightColor } from "../../helpers/otherVariables";
+import useMediaQuery from "../../hooks/useMediaQuery";
 
 const MainSlider = () => {
   // State
@@ -32,6 +33,13 @@ const MainSlider = () => {
     getMainSliderData(setSlideData);
   }, []);
 
+  const breakpoints: Record<number, boolean> = {
+    1100: useMediaQuery("(max-width: 1100px)"),
+    900: useMediaQuery("(max-width: 900px)"),
+    700: useMediaQuery("(max-width: 700px)"),
+    500: useMediaQuery("(max-width: 500px)"),
+  };
+
   return (
     <section className="main-slider">
       <Swiper
@@ -60,7 +68,20 @@ const MainSlider = () => {
             );
           })
         ) : (
-          <Skeleton height={"85rem"} highlightColor={highlightColor} />
+          <Skeleton
+            height={
+              breakpoints["500"]
+                ? "25rem"
+                : breakpoints["700"]
+                ? "40rem"
+                : breakpoints["900"]
+                ? "50rem"
+                : breakpoints["1100"]
+                ? "60rem"
+                : "85rem"
+            }
+            highlightColor={highlightColor}
+          />
         )}
       </Swiper>
       <div className="slider-prev">

src/pages/Tournaments.tsx

@@ -52,6 +52,7 @@ const Tournaments = () => {
                     </div>
                   );
                 }
+                return null;
               })
             ) : (
               <Skeleton
@@ -79,6 +80,7 @@ const Tournaments = () => {
                         />
                       );
                     }
+                    return null;
                   })
                 : ["", "", "", "", "", ""].map(() => {
                     return (

src/styles/_section-title.scss

@@ -32,7 +32,7 @@
     right: 29rem;
     width: 8rem;
     height: 200%;
-    transform: rotate(38deg);
+    transform: rotate(26deg);
   }
 
   .deco {
@@ -70,3 +70,15 @@
     }
   }
 }
+
+@media screen and (max-width: 450px) {
+  .section-title-deco {
+    right: -30rem;
+  }
+}
+
+@media screen and (max-width: 360px) {
+  .section-title-deco {
+    right: -33rem;
+  }
+}