upd

src/components/Map.tsx

@@ -575,7 +575,7 @@ function Map({ maxZoom = 1 }: MapProps) {
       {containerRef.current?.clientWidth && (
         <img
           ref={mapRef}
-          src={`/images/map/map-${
+          src={`/images/map/map-new-${
             containerRef.current.clientWidth < 768 ? "mobile" : "desktop"
           }.jpg`}
           alt="map"

src/components/SelectedComplexCard.tsx

@@ -5,14 +5,20 @@ import { motion } from "motion/react";
 import IMarker from "../types/IMarker";
 import { useEffect, useState } from "react";
 import clsx from "clsx";
+import { useQuery } from "@tanstack/react-query";
+import { api } from "../api/ky";
 
 export default function SelectedComplexCard({ marker }: { marker: IMarker }) {
   const navigate = useNavigate();
   const [isImageLoaded, setIsImageLoaded] = useState(false);
 
-  useEffect(() => {
+  useEffect(() => setIsImageLoaded(false), [marker]);
-    setIsImageLoaded(false);
+
-  }, [marker]);
+  const { data: count } = useQuery({
+    queryKey: ["units", "count", `Rove Home ${marker.title}`],
+    queryFn: () =>
+      api.get(`units/count?project=Rove Home ${marker.title}`).json<number>(),
+  });
 
   return (
     <motion.div
@@ -51,7 +57,7 @@ export default function SelectedComplexCard({ marker }: { marker: IMarker }) {
               {marker.title}
             </p>
             <p className="text-[#00BED7] text-[10px] leading-[135%]">
-              {marker.unitsCount} units
+              {count} units
             </p>
           </div>
           <Button

src/components/UnitTypesFilter.tsx

@@ -1,29 +1,29 @@
-import clsx from "clsx";
+// import clsx from "clsx";
-import { useSearchParams } from "react-router";
+// import { useSearchParams } from "react-router";
 
-function UnitTypesFilter({ title }: { title: string }) {
+// function UnitTypesFilter({ title }: { title: string }) {
-  const [searchParams, setSearchParams] = useSearchParams();
+//   const [searchParams, setSearchParams] = useSearchParams();
 
-  return (
+//   return (
-    <div
+//     <div
-      onClick={() => {
+//       onClick={() => {
-        setSearchParams((prev) => {
+//         setSearchParams((prev) => {
-          if (prev.getAll("unitTypes").includes(title))
+//           if (prev.getAll("unitTypes").includes(title))
-            prev.delete("unitTypes", title);
+//             prev.delete("unitTypes", title);
-          else prev.append("unitTypes", title);
+//           else prev.append("unitTypes", title);
-          return prev;
+//           return prev;
-        });
+//         });
-      }}
+//       }}
-      className={clsx(
+//       className={clsx(
-        "2xl:px-[1.389vw] 2xl:py-[0.833vw] px-5 py-3 2xl:rounded-[2.778vw] rounded-[40px] outline transition-colors duration-300 cursor-pointer",
+//         "2xl:px-[1.389vw] 2xl:py-[0.833vw] px-5 py-3 2xl:rounded-[2.778vw] rounded-[40px] outline transition-colors duration-300 cursor-pointer",
-        searchParams.getAll("unitTypes").includes(title)
+//         searchParams.getAll("unitTypes").includes(title)
-          ? "outline-[#00BED7]"
+//           ? "outline-[#00BED7]"
-          : "outline-[#E2E2DC]"
+//           : "outline-[#E2E2DC]"
-      )}
+//       )}
-    >
+//     >
-      {title}
+//       {title}
-    </div>
+//     </div>
-  );
+//   );
-}
+// }
 
-export default UnitTypesFilter;
+// export default UnitTypesFilter;

src/components/ui/Select.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import { motion } from "motion/react";
 import { AnimatePresence } from "motion/react";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useClickAway } from "@uidotdev/usehooks";
 import clsx from "clsx";
 import ChevronDownIcon from "../icons/ChevronDownIcon";
@@ -25,10 +25,26 @@ function Select({
 
   const ref = useClickAway<HTMLDivElement>(() => setIsShow(false));
 
+  const dropDownRef = useRef<HTMLDivElement>(null);
+
   useEffect(() => setSelectedOption(defaultOption), [defaultOption]);
 
   useEffect(() => onSelect(selectedOption), [selectedOption]);
 
+  function handleScroll() {
+    if (!dropDownRef.current) return;
+    dropDownRef.current.style.maxHeight = `calc(100vh - ${
+      dropDownRef.current?.getBoundingClientRect().y
+    }px - 0.278vw)`;
+  }
+
+  useEffect(() => {
+    handleScroll();
+    document.addEventListener("scroll", handleScroll);
+
+    return () => document.removeEventListener("scroll", handleScroll);
+  }, [isShow]);
+
   return (
     <div ref={ref} className={clsx("relative", className)}>
       {label && (
@@ -58,12 +74,7 @@ function Select({
             animate={{ opacity: 1 }}
             exit={{ opacity: 0 }}
             transition={{ duration: 0.15 }}
-            ref={(el) => {
+            ref={dropDownRef}
-              if (el)
-                el.style.maxHeight = `calc(100vh - ${
-                  el?.getBoundingClientRect().y
-                }px - 0.278vw)`;
-            }}
             className="absolute 2xl:mt-[0.278vw] 2xl:pt-[0.278vw] mt-1 p-1 2xl:space-y-[0.139vw] space-y-0.5 shadow-[0px_2px_8px_rgba(0,0,0,0.15)] overflow-auto rounded-xl bg-white w-full z-10"
           >
             {options.map((option, index) => (

src/data/markers.ts

@@ -4,30 +4,27 @@ export const markers: IMarker[] = [
   {
     id: 1,
     name: "downtown",
-    x: "56.7%",
+    x: "54.2%",
-    y: "39.8%",
+    y: "50.6%",
     popupPosition: "left",
     title: "Downtown",
-    unitsCount: 100,
     disabled: true,
   },
   {
     id: 2,
     name: "marasi-drive",
-    x: "58.6%",
+    x: "55.6%",
-    y: "42%",
+    y: "52.5%",
     popupPosition: "right",
     title: "Marasi Drive",
-    unitsCount: 200,
   },
   {
     id: 3,
     name: "dubai-marina",
-    x: "22.5%",
+    x: "35.35%",
-    y: "76%",
+    y: "71.6%",
     popupPosition: "right",
     title: "Dubai Marina",
-    unitsCount: 300,
     disabled: true,
   },
 ];

src/pages/ComplexPage.tsx

@@ -1,5 +1,6 @@
 import SequenceSlider from "../components/SequenceSlider";
 import { useParams } from "react-router";
+
 export default function ComplexPage() {
   const { complexName } = useParams();
 

src/types/IMarker.ts

@@ -5,6 +5,5 @@ export default interface IMarker {
   x: string;
   y: string;
   popupPosition: "left" | "right";
-  unitsCount: number;
   disabled?: boolean;
 }