upd

src/components/AboutDubaiMarina.tsx

@@ -20,9 +20,9 @@ import clsx from "clsx";
 import Slider from "./Slider";
 import PlusIcon from "./icons/map/PlusIcon";
 import EqualIcon from "./icons/EqualIcon";
-import GoogleMap from "./GoogleMap";
+import GoogleMap from "./google-map/GoogleMap";
 import { GoogleMapData } from "../data/googleMapData";
-import GoogleMapMobile from "./GoogleMapMobile";
+import GoogleMapMobile from "./google-map/GoogleMapMobile";
 // import FullScreenButton from "./FullScreenButton";
 
 function AboutDubaiMarina() {

src/components/AboutMarasiDrive.tsx

@@ -7,12 +7,12 @@ import MarariDriveNeighboursSliderDesktop from "./MarasiDriveNeighboursSliderDes
 import MarasiDriveInteriorsSlider from "./MarasiDriveInteriorsSlider";
 import MarasiDriveInteriorsSliderMobile from "./MarasiDriveInteriorsSliderMobile";
 import MarasiDriveNeighboursSliderMobile from "./MarasiDriveNeighboursSliderMobile";
-import GoogleMapMobile from "./GoogleMapMobile";
+import GoogleMapMobile from "./google-map/GoogleMapMobile";
 import TextBox from "./ui/TextBox";
 import { useRef } from "react";
 import { useScroll } from "motion/react";
 // import MarasiDriveMapCard from "./MarasiDriveMapCard";
-import GoogleMap from "./GoogleMap";
+import GoogleMap from "./google-map/GoogleMap";
 import MarasiDriveNeighboursSliderTablet from "./MarasiDriveNeighboursSliderTablet";
 import CustomScrollBar from "./ui/ScrollBar";
 import BrochureButton from "./ui/BrochureButton";

src/components/google-map/GoogleMap.tsx

@@ -1,4 +1,4 @@
-import IGMapPoi from "../types/IGMapPoi";
+import IGMapPoi from "../../types/IGMapPoi";
 import GoogleMapMarkers from "./GoogleMapMarkers";
 import { Map, useMap } from "@vis.gl/react-google-maps";
 import { useEffect, useState } from "react";

src/components/google-map/GoogleMapFilterButtons.tsx

@@ -1,10 +1,10 @@
 import { useState } from "react";
-import AllIcon from "./icons/map/AllIcon";
-import EntertainmentIcon from "./icons/map/EntertainmentIcon";
-import HotelIcon from "./icons/map/HotelIcon";
-import MallsIcon from "./icons/map/MallsIcon";
-import OtherIcon from "./icons/map/OtherIcon";
-import Button from "./ui/Button";
+import AllIcon from "../icons/map/AllIcon";
+import EntertainmentIcon from "../icons/map/EntertainmentIcon";
+import HotelIcon from "../icons/map/HotelIcon";
+import MallsIcon from "../icons/map/MallsIcon";
+import OtherIcon from "../icons/map/OtherIcon";
+import Button from "../ui/Button";
 import { AnimatePresence, motion } from "motion/react";
 import { MapFilter } from "./GoogleMap";
 

src/components/google-map/GoogleMapMarkers.tsx

@@ -1,7 +1,7 @@
 import { useMap } from "@vis.gl/react-google-maps";
 import { useEffect, useRef, useState } from "react";
-import IGMapPoi from "../types/IGMapPoi";
-import MapMarker from "./ui/MapMarker";
+import IGMapPoi from "../../types/IGMapPoi";
+import MapMarker from "./MapMarker";
 import {
   MarkerClusterer,
   DefaultRenderer,

src/components/google-map/GoogleMapMobile.tsx

@@ -3,10 +3,10 @@ import { useEffect, useState } from "react";
 // import CustomScrollBar from "./ui/ScrollBar";
 // import { GoogleMapData } from "../data/googleMapData";
 import GoogleMap from "./GoogleMap";
-import Button from "./ui/Button";
-import FullScreenIcon from "./icons/FullScreenIcon";
-import useModalStore from "../stores/useModalStore";
-import IGMapPoi from "../types/IGMapPoi";
+import Button from "../ui/Button";
+import FullScreenIcon from "../icons/FullScreenIcon";
+import useModalStore from "../../stores/useModalStore";
+import IGMapPoi from "../../types/IGMapPoi";
 
 function GoogleMapMobile({
   markers,

src/components/icons/map/PinIcon.tsx

@@ -1,12 +1,10 @@
 export default function PinIcon() {
   return (
-    <div>
-      <svg fill="none">
-        <path
-          d="M6.134 10.5a1 1 0 0 0 1.732 0l5.196-9a1 1 0 0 0-.866-1.5H1.804a1 1 0 0 0-.866 1.5z"
-          fill="currentColor"
-        />
-      </svg>
-    </div>
+    <svg fill="none" width={16} height={16}>
+      <path
+        d="M6.134 10.5a1 1 0 0 0 1.732 0l5.196-9a1 1 0 0 0-.866-1.5H1.804a1 1 0 0 0-.866 1.5z"
+        fill="currentColor"
+      />
+    </svg>
   );
 }

src/data/googleMapData.tsx

@@ -21,7 +21,7 @@ function GetMarkerHTML(name: string, primary: boolean = false) {
       </div>
       {/* ADD POINTER FOR PRIMARY POINTS */}
       {primary && (
-        <div className="size-4 mx-auto text-white absolute -bottom-[20px] left-1/2 -translate-x-1/2">
+        <div className=" size-4 mx-auto text-white absolute -bottom-[20px] left-1/2 -translate-x-1/2">
           <PinIcon />
         </div>
       )}