fix 1440 viewport

src/app/(main)/web/page.tsx

@@ -2,6 +2,6 @@ import { InProcess } from "@/components/pages/InProcess";
 import WebMain from "@/components/pages/WebPage/WebMain";
 
 export default function WebPage() {
-  return <InProcess />;
-  // return <WebMain />;
+  // return <InProcess />;
+  return <WebMain />;
 }

src/components/pages/MainPage/Clients/Clients.tsx

@@ -57,6 +57,10 @@ export function Clients({ showTitle = true }: { showTitle?: boolean }) {
     return () => window.removeEventListener("resize", handleResize);
   }, [isLg, isMd, isXs]);
 
+  useEffect(() => {
+    console.log(isLg, isMd, isXs);
+  }, [isLg, isMd, isXs]);
+
   return (
     <div
       className={`lg:space-y-16 md:max-lg:space-y-12 lg:mt-40 mt-[100px] space-y-10${

src/components/pages/WebPage/PageComponents/WebInfiniteSlider/ContentSlideHall.tsx

@@ -112,7 +112,7 @@ export default function ContentSlideHall({
           backgroundPosition: `${backgroundPosition.x} ${backgroundPosition.y}`,
         }}
         transition={{ duration: 0.3, type: "just" }}
-        className="relative bg-red-500 rounded-full overflow-clip bg-no-repeat bg-[url(/img/pages/web/content/hall.png)]"
+        className="relative rounded-full overflow-clip bg-no-repeat bg-[url(/img/pages/web/content/hall.png)]"
       />
     </motion.div>
   );

src/components/pages/WebPage/WebDevelopmentTimeline.tsx

@@ -4,7 +4,7 @@ import { AnimatePresence, motion } from "framer-motion";
 import React, { useState } from "react";
 import AccordeonGroup from "./PageComponents/Accordeon/AccordeonGroup";
 import { WebTimelineData } from "./data/TimeLineData";
-import { useMediaQuery } from "usehooks-ts";
+import { useMediaQueries } from "@/hooks/useMediaQueries";
 
 export default function WebDevelopmentTimeline() {
   const [isNewClient, setIsNewClient] = useState(true);
@@ -14,10 +14,11 @@ export default function WebDevelopmentTimeline() {
     3: true,
     4: true,
   });
-  const tablet = useMediaQuery(
-    "screen and (min-width: 768px) and (max-width: 1440px)"
-  );
-  const mobile = useMediaQuery("screen and (max-width: 768px)");
+  // const tablet = useMediaQuery(
+  //   "screen and (min-width: 768px) and (max-width: 1440px)"
+  // );
+  // const mobile = useMediaQuery("screen and (max-width: 768px)");
+  const { isMd, isLg } = useMediaQueries();
 
   function updateAreaState(area: number, showImage: boolean) {
     setAreasState({ ...areasState, [area]: showImage });
@@ -62,8 +63,12 @@ export default function WebDevelopmentTimeline() {
             <motion.div
               animate={{
                 left: isNewClient
-                  ? (mobile && "0.556vw") || (tablet && "0.26vw") || "0.139vw"
-                  : (mobile && "6.111vw") || (tablet && "2.865vw") || "1.528vw",
+                  ? (!isMd && !isLg && "0.556vw") ||
+                    (isMd && !isLg && "0.26vw") ||
+                    "0.139vw"
+                  : (!isMd && !isLg && "6.111vw") ||
+                    (isMd && !isLg && "2.865vw") ||
+                    "1.528vw",
               }}
               className="size-[1.389vw] absolute top-[0.139vw] rounded-[0.417vw] bg-[#B5F54E] 
               md:max-lg:size-[2.604vw] md:max-lg:rounded-[0.781vw] md:max-lg:top-[0.26vw]

src/hooks/useMediaQueries.ts

@@ -1,10 +1,14 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState } from "react";
 
 export function useMediaQueries(lg = 1440, md = 768, sm = 640) {
   const lgMedia = matchMedia(`(min-width: ${lg}px)`);
-  const mdMedia = matchMedia(`(max-width: ${lg}px) and (min-width: ${md}px)`);
-  const smMedia = matchMedia(`(max-width: ${md}px) and (min-width: ${sm}px)`);
-  const xsMedia = matchMedia(`(max-width: ${sm}px)`);
+  const mdMedia = matchMedia(
+    `(max-width: ${lg - 1}px) and (min-width: ${md}px)`
+  );
+  const smMedia = matchMedia(
+    `(max-width: ${md - 1}px) and (min-width: ${sm}px)`
+  );
+  const xsMedia = matchMedia(`(max-width: ${sm - 1}px)`);
 
   const [lgMediaQuery, setLgMediaQuery] = useState<MediaQueryList>();
   const [mdMediaQuery, setMdMediaQuery] = useState<MediaQueryList>();
@@ -26,29 +30,29 @@ export function useMediaQueries(lg = 1440, md = 768, sm = 640) {
   useEffect(() => {
     if (!lgMediaQuery) return;
     const handler = (e: MediaQueryListEvent) => setIsLg(e.matches);
-    lgMediaQuery.addEventListener('change', handler);
-    return () => lgMediaQuery.removeEventListener('change', handler);
+    lgMediaQuery.addEventListener("change", handler);
+    return () => lgMediaQuery.removeEventListener("change", handler);
   }, [lgMediaQuery]);
 
   useEffect(() => {
     if (!mdMediaQuery) return;
     const handler = (e: MediaQueryListEvent) => setIsMd(e.matches);
-    mdMediaQuery.addEventListener('change', handler);
-    return () => mdMediaQuery.removeEventListener('change', handler);
+    mdMediaQuery.addEventListener("change", handler);
+    return () => mdMediaQuery.removeEventListener("change", handler);
   }, [mdMediaQuery]);
 
   useEffect(() => {
     if (!smMediaQuery) return;
     const handler = (e: MediaQueryListEvent) => setIsSm(e.matches);
-    smMediaQuery.addEventListener('change', handler);
-    return () => smMediaQuery.removeEventListener('change', handler);
+    smMediaQuery.addEventListener("change", handler);
+    return () => smMediaQuery.removeEventListener("change", handler);
   }, [smMediaQuery]);
 
   useEffect(() => {
     if (!xsMediaQuery) return;
     const handler = (e: MediaQueryListEvent) => setIsXs(e.matches);
-    xsMediaQuery.addEventListener('change', handler);
-    return () => xsMediaQuery.removeEventListener('change', handler);
+    xsMediaQuery.addEventListener("change", handler);
+    return () => xsMediaQuery.removeEventListener("change", handler);
   }, [xsMediaQuery]);
 
   return { isLg, isMd, isSm, isXs };