From 5bad67dbb6bb1116e29318a9b00af25b9a197b2a Mon Sep 17 00:00:00 2001
From: zojgame <zogame002@gmail.com>
Date: Tue, 2 Jul 2024 14:41:15 +0500
Subject: [PATCH] map page scaling

---
 client/src/components/ApartmentSidebar.tsx    |   8 +-
 client/src/components/ButtomPanel.tsx         |   6 +-
 client/src/components/Button.tsx              |   2 +-
 client/src/components/Logo.tsx                |   2 +-
 .../aboutComplex/LivingSolutionSlider.tsx     |   3 +-
 .../apartmentPage/ApartmentLayout.tsx         |   2 +-
 .../companyPage/OurValues/Slider.tsx          |   3 +-
 .../complexPage/ComplexTopPanel.tsx           |  12 +-
 .../components/complexPage/SequenceSlider.tsx |  56 +++++---
 .../SequenceWing/SequenceWing.tsx             | 134 ++++++++++++------
 client/src/components/header/Auth/Auth.tsx    |   8 +-
 .../header/Header/DesktopHeader.tsx           |   2 +-
 .../src/components/header/Header/Layout.tsx   |   4 +-
 .../components/header/Header/MobileHeader.tsx |   2 +-
 client/src/components/header/Location.tsx     |   2 +-
 .../src/components/header/Navbar/Navbar.tsx   |   4 +-
 .../header/Navbar/NavbarDesktop.tsx           |   2 +-
 .../header/Navbar/NavbarTabDesktop.tsx        |   4 +-
 .../components/masterplanPage/TopPanel.tsx    |   2 +-
 .../src/components/masterplanPage/map/Map.tsx |  12 +-
 .../components/masterplanPage/map/Marker.tsx  |   2 +-
 .../modals/mobile/SkygardenModal.tsx          |   2 +-
 .../modals/mobile/WingFloorModal.tsx          |   4 +-
 .../components/searchPage/SidebarFilters.tsx  |   6 +-
 client/src/consts/markers.ts                  |  12 +-
 client/src/index.css                          |   4 +
 client/src/pages/AboutComplex.tsx             |   4 +-
 27 files changed, 191 insertions(+), 113 deletions(-)

diff --git a/client/src/components/ApartmentSidebar.tsx b/client/src/components/ApartmentSidebar.tsx
index 2dc0491..6773373 100644
--- a/client/src/components/ApartmentSidebar.tsx
+++ b/client/src/components/ApartmentSidebar.tsx
@@ -18,8 +18,8 @@ const ApartmentSidebar = ({ currentApartment }: ApartmentSidebarProps) => {
   };
 
   return (
-    <div className="flex lg:flex-col gap-2 h-full">
-      <div className="rounded-2xl overflow-clip lg:flex-1 flex-none relative">
+    <div className="flex gap-2 w-full">
+      <div className="rounded-2xl overflow-clip flex-none relative w-1/2">
         <p className="absolute top-[30px] left-6 font-semibold text-m text-white">
           View from window
         </p>
@@ -29,8 +29,8 @@ const ApartmentSidebar = ({ currentApartment }: ApartmentSidebarProps) => {
           className="w-full h-full object-cover"
         />
       </div>
-      <div className="flex gap-2 flex-col flex-1 lg:flex-none">
-        <div className="flex flex-col rounded-2xl bg-white p-6 gap-6 ">
+      <div className="flex gap-2 flex-col flex-1 w-1/2 aspect-square">
+        <div className="flex flex-col rounded-2xl bg-white p-6 gap-6 h-full">
           <h2 className="font-semibold text-[#0D1922] text-subheadline-s">
             Parameters
           </h2>
diff --git a/client/src/components/ButtomPanel.tsx b/client/src/components/ButtomPanel.tsx
index 7c6fae0..e42d2a3 100644
--- a/client/src/components/ButtomPanel.tsx
+++ b/client/src/components/ButtomPanel.tsx
@@ -25,7 +25,11 @@ const ButtomPanel = () => {
       </div>
       <div className="p-6">
         <div className="bg-[#0D192266] rounded-full backdrop-blur-sm">
-          <img src="../images/masterplan/compass.png" alt="compass" />
+          <img
+            src="../images/masterplan/compass.png"
+            className="w-[250px] h-[250px]"
+            alt="compass"
+          />
         </div>
       </div>
     </div>
diff --git a/client/src/components/Button.tsx b/client/src/components/Button.tsx
index 0820abf..916f2b6 100644
--- a/client/src/components/Button.tsx
+++ b/client/src/components/Button.tsx
@@ -43,7 +43,7 @@ const Button = ({
       type={type}
       disabled={disabled}
       onClick={onClick}
-      className={`min-w-10 max-h-10 ${rounded}  ${
+      className={`zoom-280 min-w-10 max-h-10 ${rounded}  ${
         icon && !text ? "p-[10px]" : padding
       }  transition-all duration-300 ease-in-out text-s pointer-events-auto flex gap-1 items-center  align-middle h-fit ${backgroundColor} ${textColor} ${border} ${disabledStyle} ${
         className ? className : ""
diff --git a/client/src/components/Logo.tsx b/client/src/components/Logo.tsx
index 425fc18..5389668 100644
--- a/client/src/components/Logo.tsx
+++ b/client/src/components/Logo.tsx
@@ -14,7 +14,7 @@ const Logo = ({ className = "" }: LogoProps) => {
 
   return (
     <div
-      className={`text-[#0D1922] py-4 px-6 border-r border-r-[#F3F3F2] cursor-pointer select-none ${className}`}
+      className={`zoom-280 text-[#0D1922] py-4 px-6 border-r border-r-[#F3F3F2] cursor-pointer select-none ${className}`}
       onClick={handleOnLogoClick}
     >
       <LogoIcon />
diff --git a/client/src/components/aboutComplex/LivingSolutionSlider.tsx b/client/src/components/aboutComplex/LivingSolutionSlider.tsx
index 9703b32..e9b8b27 100644
--- a/client/src/components/aboutComplex/LivingSolutionSlider.tsx
+++ b/client/src/components/aboutComplex/LivingSolutionSlider.tsx
@@ -2,11 +2,12 @@
 import { useSwipeable } from "react-swipeable";
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { Image } from "../../types/image";
-import { isMobile } from "react-device-detect";
 import Button from "../Button";
 import LeftArrowSliderIcon from "../icons/LeftArrowSliderIcon";
 import RightArrowSliderIcon from "../icons/RightArrowSliderIcon";
 
+const isMobile = true;
+
 const images: Image[] = [
   { id: "1", src: "/images/aboutCompany/livingSolutionsSlider/1.png" },
   { id: "2", src: "/images/aboutCompany/livingSolutionsSlider/2.png" },
diff --git a/client/src/components/apartmentPage/ApartmentLayout.tsx b/client/src/components/apartmentPage/ApartmentLayout.tsx
index 8b57bd7..7c97530 100644
--- a/client/src/components/apartmentPage/ApartmentLayout.tsx
+++ b/client/src/components/apartmentPage/ApartmentLayout.tsx
@@ -26,7 +26,7 @@ const ApartmentLayout = ({ currentApartment }: ApartmentLayoutProps) => {
   )?.layout;
 
   return (
-    <div className="p-10 pt-6 rounded-2xl bg-white flex flex-col items-center gap-8 relative h-full">
+    <div className="p-10 pt-6 rounded-2xl bg-white flex flex-col items-center gap-8 relative h-full flex-1">
       <div className="w-full xl:px-[304px] sm:px-24 h-full flex justify-center items-center">
         <img
           className="w-full h-full object-contain max-h-[628px]"
diff --git a/client/src/components/companyPage/OurValues/Slider.tsx b/client/src/components/companyPage/OurValues/Slider.tsx
index 9d82089..9956eaf 100644
--- a/client/src/components/companyPage/OurValues/Slider.tsx
+++ b/client/src/components/companyPage/OurValues/Slider.tsx
@@ -5,8 +5,9 @@ import { useLayoutEffect, useRef, useState } from "react";
 import Button from "../../Button";
 import LeftArrowSliderIcon from "../../icons/LeftArrowSliderIcon";
 import RightArrowSliderIcon from "../../icons/RightArrowSliderIcon";
-import { isMobile } from "react-device-detect";
+// import { isMobile } from "react-device-detect";
 
+const isMobile = true;
 const images: Image[] = [
   { id: "1", src: "./images/company/slider/1.png" },
   { id: "2", src: "./images/company/slider/2.png" },
diff --git a/client/src/components/complexPage/ComplexTopPanel.tsx b/client/src/components/complexPage/ComplexTopPanel.tsx
index 84db7a3..23d1eb5 100644
--- a/client/src/components/complexPage/ComplexTopPanel.tsx
+++ b/client/src/components/complexPage/ComplexTopPanel.tsx
@@ -6,7 +6,7 @@ import HintIcon from "../icons/HintIcon";
 import LeftArrowSliderIcon from "../icons/LeftArrowSliderIcon";
 import ResizeIcon from "../icons/ResizeIcon";
 import HelpModal from "../modals/HelpModal";
-import MasterplanFilters from "../modals/MasterplanFilters";
+// import MasterplanFilters from "../modals/MasterplanFilters";
 import InfoIcon from "../icons/InfoIcon";
 import useFullScreen from "../../store/useFullScreen";
 import ActiveResizeIcon from "../icons/ActiveResizeIcon";
@@ -24,9 +24,9 @@ const ComplexTopPanel = () => {
     setModal(<HelpModal />);
   };
 
-  const handleOnFiltersClick = () => {
-    setModal(<MasterplanFilters />);
-  };
+  // const handleOnFiltersClick = () => {
+  //   setModal(<MasterplanFilters />);
+  // };
 
   const handleOnMobileFiltersClick = () => {
     setModal(
@@ -61,7 +61,7 @@ const ComplexTopPanel = () => {
 
   return (
     <>
-      <div className="absolute top-0 w-screen z-20 select-none pointer-events-none">
+      <div className=" absolute top-0 w-screen z-20 select-none pointer-events-none">
         <img src="../images/top_shadow.png" className="w-screen" alt="" />
       </div>
       <div
@@ -78,7 +78,7 @@ const ComplexTopPanel = () => {
             icon={<FilterIcon />}
             buttonType="primary"
             text="Filters"
-            onClick={handleOnFiltersClick}
+            onClick={handleOnMobileFiltersClick}
           />
           <Button
             className="lg:hidden flex"
diff --git a/client/src/components/complexPage/SequenceSlider.tsx b/client/src/components/complexPage/SequenceSlider.tsx
index 77e144a..60d9278 100644
--- a/client/src/components/complexPage/SequenceSlider.tsx
+++ b/client/src/components/complexPage/SequenceSlider.tsx
@@ -10,7 +10,7 @@ import LeftArrowSliderIcon from "../icons/LeftArrowSliderIcon";
 import RightArrowSliderIcon from "../icons/RightArrowSliderIcon";
 import useCompass from "../../store/useCompass";
 import SequenceHighlighting from "./SequenceHighlighting";
-import { laptopWidth, mobileWidht } from "../../consts/masterplan";
+// import { laptopWidth, mobileWidht } from "../../consts/masterplan";
 
 const arrayLength = 360;
 const keyframes: number[] = [51, 178, 249, 339];
@@ -129,27 +129,47 @@ function SequenceSlider({ path }: SequenceSliderProps) {
     animateToLeft(currentOffset);
   }
 
+  // function handleResize() {
+  //   const screenWidth = window.innerWidth;
+  //   const screenHeight = window.innerHeight;
+  //   // if (screenWidth > laptopWidth) {
+  //   const _top = screenHeight / 7;
+  //   setTop(_top);
+  //   const _left = 2500 - screenWidth;
+  //   // const _left = laptopWidth - screenWidth;
+  //   const _width = screenWidth + _left * 2;
+
+  //   setWidth(_width);
+  //   setLeft(_left);
+
+  //   // setWidth(screenWidth);
+  //   // setTop(screenWidth / 2 - screenHeight / 2);
+  //   // setLeft(0);
+  //   // } else {
+  //   //   if (screenWidth > mobileWidht) {
+  //   //     const _top = screenHeight / 4;
+  //   //     setTop(_top);
+  //   //   } else {
+  //   //     const _top = screenHeight / 2.5;
+  //   //     setTop(_top);
+  //   //   }
+  //   //   const _left = laptopWidth - screenWidth;
+  //   //   const _width = screenWidth + _left * 2;
+
+  //   //   setWidth(_width);
+  //   //   setLeft(_left);
+  //   // }
+  // }
   function handleResize() {
     const screenWidth = window.innerWidth;
     const screenHeight = window.innerHeight;
-    if (screenWidth > laptopWidth) {
-      setWidth(screenWidth);
-      setTop(screenWidth / 2 - screenHeight / 2);
-      setLeft(0);
-    } else {
-      if (screenWidth > mobileWidht) {
-        const _top = screenHeight / 4;
-        setTop(_top);
-      } else {
-        const _top = screenHeight / 2.5;
-        setTop(_top);
-      }
-      const _left = laptopWidth - screenWidth;
-      const _width = screenWidth + _left * 2;
+    const _top = screenHeight / 4.5;
+    setTop(_top);
+    const _left = screenHeight - screenWidth;
+    const _width = screenHeight + _left;
 
-      setWidth(_width);
-      setLeft(_left);
-    }
+    setWidth(_width);
+    setLeft(_left);
   }
   function handleOnSequenceClick(): void {
     navigate("./wing");
diff --git a/client/src/components/complexWingPage/SequenceWing/SequenceWing.tsx b/client/src/components/complexWingPage/SequenceWing/SequenceWing.tsx
index 253413d..c6f2e82 100644
--- a/client/src/components/complexWingPage/SequenceWing/SequenceWing.tsx
+++ b/client/src/components/complexWingPage/SequenceWing/SequenceWing.tsx
@@ -19,7 +19,6 @@ import { getFilteredApartments } from "../../../calc/getFilteredApartments";
 import LoaderModal from "../../modals/LoaderModal";
 import FloorNumbers from "./FloorNumbers";
 import WingSignatures from "./WingSignatures";
-import { isMobile } from "react-device-detect";
 import FloorsHighlighting from "./FloorsHighlighting";
 import MobileFloorDescription from "./MobileFloorDescription";
 import WingFloorModal from "../../modals/mobile/WingFloorModal";
@@ -125,14 +124,14 @@ const SequenceWing = () => {
       // >1072
       if (screenWidth > laptopWidth) {
         const _top = screenWidth / 2 - screenHeight / 2;
-        setMousePos([e.clientX - 384, e.clientY + Math.abs(_top) - 20]);
+        setMousePos([e.clientX + 1284, e.clientY + Math.abs(_top) + 40]);
       } else {
         // 640-1072
         if (screenWidth > mobileWidht) {
           const _top = screenHeight / 4;
           const _left = laptopWidth - screenWidth;
           setMousePos([
-            e.clientX - 440 + _left,
+            e.clientX - 640 + _left,
             e.clientY + Math.abs(_top) + 20,
           ]);
           // <640
@@ -149,43 +148,98 @@ const SequenceWing = () => {
       //detect currentFloor, current sidebar and apartment on floor
       if (!currentHoveredFloor && !currentHoveredApartments) return;
       setCurrentFloor(currentHoveredFloor);
-      if (!isMobile) {
-        setIsFloorSidebar(true);
-        setIsSkygardenSidebar(false);
-        setIsSidebar(true);
-      } else {
-        setIsDescriptionFloorMobile(true);
-        setCurrentFloor(null);
-      }
+      // if (!isMobile) {
+      //   setIsFloorSidebar(true);
+      //   setIsSkygardenSidebar(false);
+      //   setIsSidebar(true);
+      // } else {
+      setIsDescriptionFloorMobile(true);
+      setCurrentFloor(null);
+      // }
     }
   }
+  // function handleOnMouseDown(e: MouseEvent | any) {
+  //   const isFloorClicked = Boolean(e.target.dataset.id);
+  //   if (isFloorClicked) {
+  //     // detect mouse pos
+  //     const screenWidth = window.innerWidth;
+  //     const screenHeight = window.innerHeight;
+  //     // >1072
+  //     if (screenWidth > laptopWidth) {
+  //       const _top = screenWidth / 2 - screenHeight / 2;
+  //       setMousePos([e.clientX - 384, e.clientY + Math.abs(_top) - 20]);
+  //     } else {
+  //       // 640-1072
+  //       if (screenWidth > mobileWidht) {
+  //         const _top = screenHeight / 4;
+  //         const _left = laptopWidth - screenWidth;
+  //         setMousePos([
+  //           e.clientX - 440 + _left,
+  //           e.clientY + Math.abs(_top) + 20,
+  //         ]);
+  //         // <640
+  //       } else {
+  //         const _top = screenHeight / 2.5;
+  //         const _left = laptopWidth - screenWidth;
+  //         setMousePos([
+  //           e.clientX - 440 + _left,
+  //           e.clientY + Math.abs(_top) + 20,
+  //         ]);
+  //       }
+  //     }
+
+  //     //detect currentFloor, current sidebar and apartment on floor
+  //     if (!currentHoveredFloor && !currentHoveredApartments) return;
+  //     setCurrentFloor(currentHoveredFloor);
+  //     if (!isMobile) {
+  //       setIsFloorSidebar(true);
+  //       setIsSkygardenSidebar(false);
+  //       setIsSidebar(true);
+  //     } else {
+  //       setIsDescriptionFloorMobile(true);
+  //       setCurrentFloor(null);
+  //     }
+  //   }
+  // }
 
   function handleResize() {
     const screenWidth = window.innerWidth;
     const screenHeight = window.innerHeight;
-    // >1072
-    if (screenWidth > laptopWidth) {
-      setWidth(screenWidth);
-      setTop(screenWidth / 2 - screenHeight / 2);
-      setLeft(0);
-    } else {
-      // 640-1072
-      if (screenWidth > mobileWidht) {
-        const _top = screenHeight / 4;
-        setTop(_top);
-        // <640
-      } else {
-        const _top = screenHeight / 2.5;
-        setTop(_top);
-      }
-      const _left = laptopWidth - screenWidth;
-      const _width = screenWidth + _left * 2;
+    const _top = screenHeight / 4.5;
+    setTop(_top);
+    const _left = screenHeight - screenWidth;
+    const _width = screenHeight + _left;
 
-      setWidth(_width);
-      setLeft(_left);
-    }
+    setWidth(_width);
+    setLeft(_left);
   }
 
+  // function handleResize() {
+  //   const screenWidth = window.innerWidth;
+  //   const screenHeight = window.innerHeight;
+  //   // >1072
+  //   if (screenWidth > laptopWidth) {
+  //     setWidth(screenWidth);
+  //     setTop(screenWidth / 2 - screenHeight / 2);
+  //     setLeft(0);
+  //   } else {
+  //     // 640-1072
+  //     if (screenWidth > mobileWidht) {
+  //       const _top = screenHeight / 4;
+  //       setTop(_top);
+  //       // <640
+  //     } else {
+  //       const _top = screenHeight / 2.5;
+  //       setTop(_top);
+  //     }
+  //     const _left = laptopWidth - screenWidth;
+  //     const _width = screenWidth + _left * 2;
+
+  //     setWidth(_width);
+  //     setLeft(_left);
+  //   }
+  // }
+
   const handleOnExploreFloorClick = (
     e: MouseEvent<Element, MouseEvent<Element, MouseEvent>> | any
   ) => {
@@ -280,13 +334,13 @@ const SequenceWing = () => {
     sortList,
   ]);
 
-  useEffect(() => {
-    if (isLoading) {
-      setModal(<LoaderModal />);
-    } else {
-      setModal(null);
-    }
-  }, [isLoading, setModal]);
+  // useEffect(() => {
+  //   if (isLoading) {
+  //     setModal(<LoaderModal />);
+  //   } else {
+  //     setModal(null);
+  //   }
+  // }, [isLoading, setModal]);
 
   return (
     <div className="absolute left-0 overflow-hidden h-screen w-screen select-none ">
@@ -296,9 +350,7 @@ const SequenceWing = () => {
           width: `${width}px`,
           height: `${width}px`,
           top: `-${top}px`,
-          left: `${
-            isSkygardenSidebar || isFloorSidebar ? "-25%" : `-${left}px`
-          }`,
+          left: `-${left}px`,
         }}
       >
         {/*  */}
diff --git a/client/src/components/header/Auth/Auth.tsx b/client/src/components/header/Auth/Auth.tsx
index 6d59e31..9d940c3 100644
--- a/client/src/components/header/Auth/Auth.tsx
+++ b/client/src/components/header/Auth/Auth.tsx
@@ -1,6 +1,4 @@
-import { isMobile } from "react-device-detect";
 import AuthDesktop from "./AuthDesktop";
-import AuthMobile from "./AuthMobile";
 
 interface AuthProps {
   isAuth?: boolean;
@@ -11,11 +9,7 @@ const Auth = ({ isAuth = false }: AuthProps) => {
 
   return (
     <>
-      {isMobile ? (
-        <AuthMobile isAuth={isAuth} userName={userName} />
-      ) : (
-        <AuthDesktop isAuth={isAuth} userName={userName} />
-      )}
+      <AuthDesktop isAuth={isAuth} userName={userName} />
     </>
   );
 };
diff --git a/client/src/components/header/Header/DesktopHeader.tsx b/client/src/components/header/Header/DesktopHeader.tsx
index 7c54361..7287779 100644
--- a/client/src/components/header/Header/DesktopHeader.tsx
+++ b/client/src/components/header/Header/DesktopHeader.tsx
@@ -4,7 +4,7 @@ import Navbar from "../Navbar/Navbar";
 import Location from "../Location";
 
 const DesktopHeader = () => (
-  <header className="bg-white w-full text-white sm:grid grid-cols-6 fixed left-0 top-0 z-[99999900] font-usual text-m select-none">
+  <header className="bg-white w-full text-white sm:grid grid-cols-6 fixed left-0 top-0 z-[99999900] font-usual text-m select-none items-center">
     <div className="flex gap-4 col-span-2">
       <Logo />
       <Location />
diff --git a/client/src/components/header/Header/Layout.tsx b/client/src/components/header/Header/Layout.tsx
index aa6ef46..b17af8c 100644
--- a/client/src/components/header/Header/Layout.tsx
+++ b/client/src/components/header/Header/Layout.tsx
@@ -2,8 +2,8 @@ import { Outlet } from "react-router-dom";
 import { FullScreen, useFullScreenHandle } from "react-full-screen";
 import { useEffect } from "react";
 import useModal from "../../../store/useModal";
-import MobileHeader from "./MobileHeader";
 import useFullScreen from "../../../store/useFullScreen";
+import DesktopHeader from "./DesktopHeader";
 
 const Layout = () => {
   const { modal } = useModal();
@@ -17,7 +17,7 @@ const Layout = () => {
   return (
     <>
       <FullScreen handle={onFullscreenHandle}>
-        <MobileHeader />
+        <DesktopHeader />
         {modal}
         <Outlet />
       </FullScreen>
diff --git a/client/src/components/header/Header/MobileHeader.tsx b/client/src/components/header/Header/MobileHeader.tsx
index ecdd4f5..96844bf 100644
--- a/client/src/components/header/Header/MobileHeader.tsx
+++ b/client/src/components/header/Header/MobileHeader.tsx
@@ -14,7 +14,7 @@ const MobileHeader = () => {
   };
   return (
     <header
-      className={`bg-white w-full ${
+      className={` bg-white w-full ${
         isToggled
           ? "rounded-ee-lg rounded-es-lg shadow-[#00000026] shadow-md"
           : ""
diff --git a/client/src/components/header/Location.tsx b/client/src/components/header/Location.tsx
index 977d223..2fc6d93 100644
--- a/client/src/components/header/Location.tsx
+++ b/client/src/components/header/Location.tsx
@@ -2,7 +2,7 @@ import LocationIcon from "../icons/LocationIcon";
 
 const Location = () => {
   return (
-    <div className="text-[#73787C] flex gap-1 items-center justify-center">
+    <div className="text-[#73787C] flex gap-1 items-center justify-center zoom-280">
       <LocationIcon />
       <p className="">Dubai</p>
     </div>
diff --git a/client/src/components/header/Navbar/Navbar.tsx b/client/src/components/header/Navbar/Navbar.tsx
index b88c0cc..8925b2e 100644
--- a/client/src/components/header/Navbar/Navbar.tsx
+++ b/client/src/components/header/Navbar/Navbar.tsx
@@ -1,9 +1,9 @@
 import { useEffect, useState } from "react";
 import { useNavigate, useLocation } from "react-router-dom";
 import { Tab } from "../../../types/tab";
-import NavbarMobile from "./NavbarMobile";
 import { tabs as _tabs } from "../../../consts/tabs";
 import useFavorites from "../../../store/useFavorites";
+import NavbarDesktop from "./NavbarDesktop";
 
 const Navbar = () => {
   const [selectedTab, setSelectedTab] = useState<Tab | null>(null);
@@ -49,7 +49,7 @@ const Navbar = () => {
   return (
     <>
       {
-        <NavbarMobile
+        <NavbarDesktop
           onTabClick={onTabClick}
           tabs={tabs}
           selectedTab={selectedTab}
diff --git a/client/src/components/header/Navbar/NavbarDesktop.tsx b/client/src/components/header/Navbar/NavbarDesktop.tsx
index 7095ea1..60b1bef 100644
--- a/client/src/components/header/Navbar/NavbarDesktop.tsx
+++ b/client/src/components/header/Navbar/NavbarDesktop.tsx
@@ -9,7 +9,7 @@ interface NavbarProps {
 
 const NavbarDesktop = ({ selectedTab, onTabClick, tabs }: NavbarProps) => (
   <nav
-    className={`text-[#73787C] self-center col-span-2 justify-center flex h-full`}
+    className={`text-[#73787C] self-center col-span-2 justify-center flex h-full `}
   >
     {tabs.map((tab) => (
       <NavbarTabDesktop
diff --git a/client/src/components/header/Navbar/NavbarTabDesktop.tsx b/client/src/components/header/Navbar/NavbarTabDesktop.tsx
index 92173bb..88270f1 100644
--- a/client/src/components/header/Navbar/NavbarTabDesktop.tsx
+++ b/client/src/components/header/Navbar/NavbarTabDesktop.tsx
@@ -17,7 +17,7 @@ const NavbarTabDesktop = ({
       onClick={() => onClick(tab)}
     >
       <div
-        className={`border-b-2 h-full flex items-center transition-all duration-300 ${
+        className={`border-b-2 h-full flex items-center transition-all duration-300 text-[38.4px] ${
           isSelected
             ? "border-b-[#00BED7]"
             : "border-b-transparent hover:border-b-[#E2E2DC] active:border-b-[#00BED7]"
@@ -26,7 +26,7 @@ const NavbarTabDesktop = ({
         {tab.value}
       </div>
       {tab.count !== 0 && (
-        <div className="absolute top-2 right-0 w-4 h-4 bg-[#00BED7] rounded-full text-white text-[10px] flex items-center justify-center pt-0.5 pr-[1px]">
+        <div className="absolute top-2 right-0 w-4 h-4 bg-[#00BED7] rounded-full text-white text-[24px] flex items-center justify-center pt-0.5 pr-[1px]">
           <span className="leading-none">{tab.count}</span>
         </div>
       )}
diff --git a/client/src/components/masterplanPage/TopPanel.tsx b/client/src/components/masterplanPage/TopPanel.tsx
index 186ffe9..785f9f1 100644
--- a/client/src/components/masterplanPage/TopPanel.tsx
+++ b/client/src/components/masterplanPage/TopPanel.tsx
@@ -31,7 +31,7 @@ const TopPanel = () => {
         <img src="/images/top_shadow.png" className="w-screen" alt="" />
       </div>
       <div
-        className={`absolute top-[62px] left-0 z-20 w-full p-4 flex justify-end gap-2 select-none touch-none pointer-events-none`}
+        className={`absolute top-[172px] left-0 z-20 w-full p-4 flex justify-end gap-2 select-none touch-none pointer-events-none`}
       >
         {isFullscreen ? (
           <Button
diff --git a/client/src/components/masterplanPage/map/Map.tsx b/client/src/components/masterplanPage/map/Map.tsx
index 60c54fb..625d835 100644
--- a/client/src/components/masterplanPage/map/Map.tsx
+++ b/client/src/components/masterplanPage/map/Map.tsx
@@ -1,6 +1,6 @@
 import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
 import ImageMarker, { MarkerComponentProps } from "react-image-marker";
-import { isMobile } from "react-device-detect";
+// import { isMobile } from "react-device-detect";
 import Marker from "./Marker";
 import { markers } from "../../../consts/markers";
 import useMarker from "../../../store/useMarker";
@@ -20,9 +20,9 @@ const Map = () => {
   return (
     <div className="relative">
       <TransformWrapper
-        initialScale={isMobile ? 2 : 1}
-        minScale={isMobile ? 2 : 1}
-        maxScale={2}
+        initialScale={2}
+        minScale={2}
+        maxScale={4}
         alignmentAnimation={{ sizeX: 50, sizeY: 50 }}
         wheel={{ step: 10000, smoothStep: 0.0005 }}
         zoomAnimation={{
@@ -45,10 +45,10 @@ const Map = () => {
           wrapperClass={"top-[-50px] left-[-200px]"}
         >
           <ImageMarker
-            src="images/Map.jpg"
+            src="/images/Map.jpg"
             markers={imageMarkers}
             markerComponent={Marker}
-            extraClass={`transition-all duration-300 ease-in-out ${
+            extraClass={`transition-all duration-300 ease-in-out  ${
               hoveredMarker ? "brightness-[.7]" : ""
             }`}
           />
diff --git a/client/src/components/masterplanPage/map/Marker.tsx b/client/src/components/masterplanPage/map/Marker.tsx
index ca49910..7a136e6 100644
--- a/client/src/components/masterplanPage/map/Marker.tsx
+++ b/client/src/components/masterplanPage/map/Marker.tsx
@@ -34,7 +34,7 @@ const Marker = (props: MarkerComponentProps) => {
 
   return (
     <div
-      className="relative transition-transform "
+      className="relative transition-transform zoom-280"
       style={{ transform: `scale(${markerScale})` }}
     >
       <div
diff --git a/client/src/components/modals/mobile/SkygardenModal.tsx b/client/src/components/modals/mobile/SkygardenModal.tsx
index ea3f89c..c95de30 100644
--- a/client/src/components/modals/mobile/SkygardenModal.tsx
+++ b/client/src/components/modals/mobile/SkygardenModal.tsx
@@ -61,7 +61,7 @@ const SkygardenModal = () => {
       </div>
       <div
         style={{ transform: `translateY(${isAnimate ? 0 : 100}%)` }}
-        className="bg-[#F3F3F2] h-fit p-6 pt-0 flex flex-col gap-6 transition-transform ease-in-out relative"
+        className="bg-[#F3F3F2] h-full p-6 pt-0 flex flex-col gap-6 transition-transform ease-in-out relative"
       >
         <div
           className="w-[calc(100%-48px)] absolute flex justify-center py-3"
diff --git a/client/src/components/modals/mobile/WingFloorModal.tsx b/client/src/components/modals/mobile/WingFloorModal.tsx
index e0bcfad..63eca7e 100644
--- a/client/src/components/modals/mobile/WingFloorModal.tsx
+++ b/client/src/components/modals/mobile/WingFloorModal.tsx
@@ -169,7 +169,7 @@ const WingFloorModal = ({
         </div>
         <div
           style={{ transform: `translateY(${isAnimate ? 0 : 100}%)` }}
-          className="bg-[#F3F3F2] h-fit p-6 pt-0 flex flex-col gap-6 transition-transform ease-in-out relative"
+          className="bg-[#F3F3F2] h-full p-6 pt-0 flex flex-col gap-6 transition-transform ease-in-out relative"
         >
           <div
             className="w-[calc(100%-48px)] absolute flex justify-center py-3"
@@ -217,7 +217,7 @@ const WingFloorModal = ({
               </div>
             </div>
           </div>
-          <div className="px-10 bg-white flex gap-6 font-semibold text-caption-m rounded-2xl justify-center items-center flex-1 py-4 overflow-clip">
+          <div className="px-10 bg-white flex gap-6 font-semibold text-caption-m rounded-2xl justify-center items-center py-4 overflow-clip">
             {currentFloor?.wing === "West Wing" ? (
               currentFloor && currentFloor.floor <= 21 ? (
                 <svg
diff --git a/client/src/components/searchPage/SidebarFilters.tsx b/client/src/components/searchPage/SidebarFilters.tsx
index 62b0a4b..3dc8c24 100644
--- a/client/src/components/searchPage/SidebarFilters.tsx
+++ b/client/src/components/searchPage/SidebarFilters.tsx
@@ -99,9 +99,9 @@ const SidebarFilters = () => {
 
   return (
     <div>
-      <div className="h-full w-[360px] bg-[#F3F3F2] flex-col items-center justify-between border-r lg:flex hidden">
-        <div className="w-full py-6 px-6 flex flex-col items-center">
-          <div className="flex justify-between border-b border-[#E2E2DC] w-full pb-4">
+      <div className=" h-full w-[360px] bg-[#F3F3F2] flex-col items-center justify-between border-r lg:flex hidden">
+        <div className="w-full py-6 px-6 flex flex-col items-center ">
+          <div className="flex justify-between border-b border-[#E2E2DC] w-full pb-4 ">
             <h2 className="text-subheadline-m font-semibold">Filters</h2>
             <Button
               isCircleRounded
diff --git a/client/src/consts/markers.ts b/client/src/consts/markers.ts
index 0e56f08..e8599c4 100644
--- a/client/src/consts/markers.ts
+++ b/client/src/consts/markers.ts
@@ -2,22 +2,22 @@ import { Marker } from "../types/marker";
 
 const markers: Marker[] = [
   {
-    top: 38.2,
-    left: 54,
+    top: 33.5,
+    left: 51.5,
     itemNumber: 0,
     popup: "/images/markers/popups/1.svg",
     isPopupLeft: true,
   },
   {
-    top: 39.5,
-    left: 56,
+    top: 35.5,
+    left: 53,
     itemNumber: 1,
     popup: "/images/markers/popups/1.svg",
     isPopupLeft: false,
   },
   {
-    top: 73,
-    left: 22.5,
+    top: 69,
+    left: 20.0,
     itemNumber: 2,
     popup: "/images/markers/popups/1.svg",
     isPopupLeft: false,
diff --git a/client/src/index.css b/client/src/index.css
index c525aa7..516986f 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -50,6 +50,10 @@ html {
 }
 
 @layer components {
+  .zoom-280 {
+    zoom: 280%;
+  }
+
   .desc-shadow {
     box-shadow: 0px 4px 20px 1px #00000026;
   }
diff --git a/client/src/pages/AboutComplex.tsx b/client/src/pages/AboutComplex.tsx
index 123b18d..0319923 100644
--- a/client/src/pages/AboutComplex.tsx
+++ b/client/src/pages/AboutComplex.tsx
@@ -1,4 +1,4 @@
-import { isMobile } from "react-device-detect";
+// import { isMobile } from "react-device-detect";
 import Footer from "../components/Footer";
 import Button from "../components/Button";
 import LeftArrowIcon from "../components/icons/LeftArrowIcon";
@@ -6,6 +6,8 @@ import LivingSolutionSlider from "../components/aboutComplex/LivingSolutionSlide
 import RoveHomeSlider from "../components/aboutComplex/RoveHomeSlider";
 import { useNavigate } from "react-router-dom";
 
+const isMobile = true;
+
 interface ICityItem {
   time: number;
   title: string;