From a5a0453c931fca30c5a1b8dbe143f3d73d6217b4 Mon Sep 17 00:00:00 2001
From: zojgame <zogame002@gmail.com>
Date: Wed, 24 Apr 2024 18:16:55 +0500
Subject: [PATCH] disclaimer + map

---
 package.json                                  |   1 -
 public/images/masterplan/compass.png          | Bin 0 -> 12243 bytes
 src/components/Button.tsx                     |  12 ++--
 .../header/Header/DesktopHeader.tsx           |   2 +-
 src/components/header/Header/MobileHeader.tsx |   5 +-
 src/components/icons/BurgerMenuIcon.tsx       |  54 ++++++++++++++++++
 src/components/icons/CrossIcon.tsx            |  21 +++++++
 src/components/icons/DisclaimerIcon.tsx       |  26 +++++++++
 src/components/icons/HintIcon.tsx             |  32 +++++++++++
 src/components/icons/ResizeIcon.tsx           |  21 +++++++
 src/components/masterplanPage/TopPanel.tsx    |  14 +++++
 .../masterplanPage/map/ButtomPanel.tsx        |  29 ++++++++++
 .../{ => masterplanPage}/map/Map.tsx          |  14 +++--
 .../{ => masterplanPage}/map/Marker.tsx       |  35 ++++++++++--
 src/components/modals/Disclaimer.tsx          |  53 +++++++++++++++++
 src/components/modals/ZoomHint.tsx            |  13 +++--
 src/consts/buttonColors.ts                    |  21 -------
 src/consts/buttonStyles.ts                    |  31 ++++++++++
 src/consts/markers.ts                         |  13 ++++-
 src/pages/Masterplan.tsx                      |   8 ++-
 src/types/button.ts                           |   6 +-
 yarn.lock                                     |  12 ----
 22 files changed, 359 insertions(+), 64 deletions(-)
 create mode 100644 public/images/masterplan/compass.png
 create mode 100644 src/components/icons/BurgerMenuIcon.tsx
 create mode 100644 src/components/icons/CrossIcon.tsx
 create mode 100644 src/components/icons/DisclaimerIcon.tsx
 create mode 100644 src/components/icons/HintIcon.tsx
 create mode 100644 src/components/icons/ResizeIcon.tsx
 create mode 100644 src/components/masterplanPage/TopPanel.tsx
 create mode 100644 src/components/masterplanPage/map/ButtomPanel.tsx
 rename src/components/{ => masterplanPage}/map/Map.tsx (76%)
 rename src/components/{ => masterplanPage}/map/Marker.tsx (72%)
 create mode 100644 src/components/modals/Disclaimer.tsx
 delete mode 100644 src/consts/buttonColors.ts
 create mode 100644 src/consts/buttonStyles.ts

diff --git a/package.json b/package.json
index 09aad1c..b327983 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,6 @@
     "react-router-dom": "^6.22.3",
     "react-swipeable": "^7.0.1",
     "react-zoom-pan-pinch": "^3.4.4",
-    "usehooks-ts": "^3.1.0",
     "zustand": "^4.5.2"
   },
   "devDependencies": {
diff --git a/public/images/masterplan/compass.png b/public/images/masterplan/compass.png
new file mode 100644
index 0000000000000000000000000000000000000000..6abf7cb42ea2d39b4705380de293e14dec32976d
GIT binary patch
literal 12243
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

literal 0
HcmV?d00001

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index dabeeae..39cb5c1 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -1,8 +1,9 @@
 import {
   backgroundColors,
-  backgroundHoverColors,
   textColors,
-} from "../consts/buttonColors";
+  borders,
+  paddings,
+} from "../consts/buttonStyles";
 import { ButtonType } from "../types/button";
 
 interface ButtonProps {
@@ -21,15 +22,16 @@ const Button = ({
   onClick,
 }: ButtonProps) => {
   const backgroundColor = backgroundColors[buttonType];
-  const backgroundHoverColor = backgroundHoverColors[buttonType];
   const textColor = textColors[buttonType];
+  const border = borders[buttonType];
+  const padding = paddings[buttonType];
 
   return (
     <button
       onClick={onClick}
       className={`min-w-[40px] ${
-        icon && !text ? "p-[10px]" : "py-3 px-6"
-      }  transition-[background] duration-300 ease-in-out rounded-lg text-s ${backgroundColor} ${backgroundHoverColor} ${textColor} ${
+        icon && !text ? "p-[10px]" : padding
+      }  transition-[background] duration-300 ease-in-out text-s pointer-events-auto flex gap-1 items-center h-fit ${backgroundColor} ${textColor} ${border}  ${
         className ? className : ""
       }`}
     >
diff --git a/src/components/header/Header/DesktopHeader.tsx b/src/components/header/Header/DesktopHeader.tsx
index 7e68392..2fff2e6 100644
--- a/src/components/header/Header/DesktopHeader.tsx
+++ b/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 font-usual text-m">
+  <header className="bg-white w-full text-white sm:grid grid-cols-6 absolute left-0 top-0 z-20 font-usual text-m">
     <div className="flex gap-4 col-span-2">
       <Logo />
       <Location />
diff --git a/src/components/header/Header/MobileHeader.tsx b/src/components/header/Header/MobileHeader.tsx
index 8e4cfdd..13cec40 100644
--- a/src/components/header/Header/MobileHeader.tsx
+++ b/src/components/header/Header/MobileHeader.tsx
@@ -3,6 +3,7 @@ import LogoIcon from "../../icons/LogoIcon";
 import Auth from "../Auth/Auth";
 import Navbar from "../Navbar/Navbar";
 import Location from "../Location";
+import BurgerMenuIcon from "../../icons/BurgerMenuIcon";
 
 const MobileHeader = () => {
   const [isToggled, setIsToggled] = useState(false);
@@ -25,7 +26,9 @@ const MobileHeader = () => {
         <div className={`text-[#0D1922] transition-opacity duration-500`}>
           <LogoIcon />
         </div>
-        <div className="bg-black w-6 h-6" onClick={handleOnToggleClick}></div>
+        <div className="w-6 h-6 text-[#0D1922]" onClick={handleOnToggleClick}>
+          <BurgerMenuIcon isToggled={isToggled} />
+        </div>
       </div>
       <div className="flex flex-col justify-between h-full items-end w-full p-4 bg-[#F3F3F2]">
         {isAuth && (
diff --git a/src/components/icons/BurgerMenuIcon.tsx b/src/components/icons/BurgerMenuIcon.tsx
new file mode 100644
index 0000000..dd13f5a
--- /dev/null
+++ b/src/components/icons/BurgerMenuIcon.tsx
@@ -0,0 +1,54 @@
+interface BurgerMenuIconProps {
+  isToggled: boolean;
+}
+
+const BurgerMenuIcon = ({ isToggled }: BurgerMenuIconProps) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        className="border transition-all duration-300 ease-in-out"
+        style={{
+          transform: isToggled
+            ? "rotate(-45deg) translate(-13.5px, 0) scaleX(1.2)"
+            : "",
+        }}
+        d="M5 17L19 17"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        className={`border transition-all duration-300 ease-in-out ${
+          isToggled ? "opacity-0" : "opacity-100"
+        }`}
+        d="M5 12L19 12"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        className="border transition-all duration-300 ease-in-out"
+        style={{
+          transform: isToggled
+            ? "rotate(45deg) translate(2.5px, -7.66px) scaleX(1.2)"
+            : "",
+        }}
+        d="M5 7L19 7"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default BurgerMenuIcon;
diff --git a/src/components/icons/CrossIcon.tsx b/src/components/icons/CrossIcon.tsx
new file mode 100644
index 0000000..5017e3d
--- /dev/null
+++ b/src/components/icons/CrossIcon.tsx
@@ -0,0 +1,21 @@
+const CrossIcon = () => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 11.9999L17.6569 6.34331M12 11.9999L6.34312 6.34302M12 11.9999L17.6568 17.6567M12 11.9999L6.34302 17.6568"
+        stroke="#73787C"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default CrossIcon;
diff --git a/src/components/icons/DisclaimerIcon.tsx b/src/components/icons/DisclaimerIcon.tsx
new file mode 100644
index 0000000..55f40b9
--- /dev/null
+++ b/src/components/icons/DisclaimerIcon.tsx
@@ -0,0 +1,26 @@
+const DisclaimerIcon = () => {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M14.1666 7.99992C14.1666 8.80974 14.0071 9.61163 13.6972 10.3598C13.3873 11.108 12.933 11.7878 12.3604 12.3604C11.7878 12.933 11.108 13.3873 10.3598 13.6972C9.61163 14.0071 8.80974 14.1666 7.99992 14.1666C7.1901 14.1666 6.38821 14.0071 5.64004 13.6972C4.89186 13.3873 4.21205 12.933 3.63943 12.3604C3.0668 11.7878 2.61257 11.108 2.30266 10.3598C1.99276 9.61163 1.83325 8.80974 1.83325 7.99992C1.83325 7.1901 1.99276 6.38821 2.30266 5.64004C2.61257 4.89186 3.0668 4.21205 3.63943 3.63943C4.21206 3.0668 4.89186 2.61257 5.64004 2.30266C6.38821 1.99276 7.1901 1.83325 7.99992 1.83325C8.80974 1.83325 9.61163 1.99276 10.3598 2.30266C11.108 2.61257 11.7878 3.0668 12.3604 3.63943C12.933 4.21206 13.3873 4.89186 13.6972 5.64004C14.0071 6.38821 14.1666 7.1901 14.1666 7.99992L14.1666 7.99992Z"
+        stroke="white"
+      />
+      <path d="M8 4.66675V8.66675" stroke="white" stroke-linecap="round" />
+      <ellipse
+        cx="7.99992"
+        cy="11.3334"
+        rx="0.666667"
+        ry="0.666667"
+        fill="white"
+      />
+    </svg>
+  );
+};
+
+export default DisclaimerIcon;
diff --git a/src/components/icons/HintIcon.tsx b/src/components/icons/HintIcon.tsx
new file mode 100644
index 0000000..1500ca7
--- /dev/null
+++ b/src/components/icons/HintIcon.tsx
@@ -0,0 +1,32 @@
+const HintIcon = () => {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M17.5832 9.99984C17.5832 10.9957 17.387 11.9818 17.0059 12.9019C16.6248 13.8219 16.0662 14.6579 15.3621 15.3621C14.6579 16.0662 13.8219 16.6248 12.9019 17.0059C11.9818 17.387 10.9957 17.5832 9.99984 17.5832C9.00398 17.5832 8.01787 17.387 7.09782 17.0059C6.17777 16.6248 5.34179 16.0662 4.63761 15.3621C3.93343 14.6579 3.37485 13.8219 2.99375 12.9019C2.61265 11.9818 2.4165 10.9957 2.4165 9.99984C2.4165 9.00398 2.61265 8.01787 2.99375 7.09782C3.37485 6.17777 3.93343 5.34179 4.63761 4.63761C5.34179 3.93343 6.17777 3.37485 7.09782 2.99375C8.01787 2.61265 9.00398 2.4165 9.99984 2.4165C10.9957 2.4165 11.9818 2.61265 12.9019 2.99375C13.8219 3.37485 14.6579 3.93343 15.3621 4.63761C16.0662 5.34179 16.6248 6.17777 17.0059 7.09782C17.387 8.01788 17.5832 9.00398 17.5832 9.99984L17.5832 9.99984Z"
+        stroke="#0D1922"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M7.5 8.42609C7.5 6.99424 8.61929 5.8335 10 5.8335C11.3807 5.8335 12.5 6.99424 12.5 8.42609C12.5 9.79168 10.7893 10.7427 10 11.6668"
+        stroke="#0D1922"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+      />
+      <ellipse
+        cx="9.99984"
+        cy="14.1668"
+        rx="0.833333"
+        ry="0.833333"
+        fill="#0D1922"
+      />
+    </svg>
+  );
+};
+
+export default HintIcon;
diff --git a/src/components/icons/ResizeIcon.tsx b/src/components/icons/ResizeIcon.tsx
new file mode 100644
index 0000000..46a9853
--- /dev/null
+++ b/src/components/icons/ResizeIcon.tsx
@@ -0,0 +1,21 @@
+const ResizeIcon = () => {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M7 17.5H2.5M2.5 17.5V13M2.5 17.5L7.375 12.625M12.625 7.375L17.5 2.5M17.5 2.5V7M17.5 2.5H13"
+        stroke="#0D1922"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default ResizeIcon;
diff --git a/src/components/masterplanPage/TopPanel.tsx b/src/components/masterplanPage/TopPanel.tsx
new file mode 100644
index 0000000..d3eccbe
--- /dev/null
+++ b/src/components/masterplanPage/TopPanel.tsx
@@ -0,0 +1,14 @@
+import Button from "../Button";
+import HintIcon from "../icons/HintIcon";
+import ResizeIcon from "../icons/ResizeIcon";
+
+const TopPanel = () => {
+  return (
+    <div className="absolute top-[62px] left-0 z-20 w-full p-4 flex justify-end gap-2">
+      <Button buttonType="fab" icon={<ResizeIcon />} />
+      <Button buttonType="fab" icon={<HintIcon />} />
+    </div>
+  );
+};
+
+export default TopPanel;
diff --git a/src/components/masterplanPage/map/ButtomPanel.tsx b/src/components/masterplanPage/map/ButtomPanel.tsx
new file mode 100644
index 0000000..38a66b6
--- /dev/null
+++ b/src/components/masterplanPage/map/ButtomPanel.tsx
@@ -0,0 +1,29 @@
+import Button from "../../Button";
+import DisclaimerIcon from "../../icons/DisclaimerIcon";
+import useModal from "../../../store/useModal";
+import Disclaimer from "../../modals/Disclaimer";
+
+const ButtomPanel = () => {
+  const { setModal } = useModal();
+  const handleOnDisclaimerClick = () => {
+    setModal(<Disclaimer />);
+  };
+  return (
+    <div className="absolute z-20 bottom-0 left-0 w-full p-6 select-none touch-none pointer-events-none flex gap-2 justify-between items-end">
+      <div className="flex flex-col gap-2">
+        <div className="flex gap-2 pb-6 pl-6">
+          <Button
+            text="Disclaimer"
+            buttonType="tertiary"
+            icon={<DisclaimerIcon />}
+            onClick={handleOnDisclaimerClick}
+          />
+          <Button text="Privacy Policy" buttonType="tertiary" />
+        </div>
+      </div>
+      <img src="./images/masterplan/compass.png" alt="compass" />
+    </div>
+  );
+};
+
+export default ButtomPanel;
diff --git a/src/components/map/Map.tsx b/src/components/masterplanPage/map/Map.tsx
similarity index 76%
rename from src/components/map/Map.tsx
rename to src/components/masterplanPage/map/Map.tsx
index 5bd333c..6f86189 100644
--- a/src/components/map/Map.tsx
+++ b/src/components/masterplanPage/map/Map.tsx
@@ -2,8 +2,8 @@ import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
 import ImageMarker, { MarkerComponentProps } from "react-image-marker";
 import { isMobile } from "react-device-detect";
 import Marker from "./Marker";
-import { markers } from "../../consts/markers";
-import useMarker from "../../store/useMarker";
+import { markers } from "../../../consts/markers";
+import useMarker from "../../../store/useMarker";
 
 const Map = () => {
   const { hoveredMarker } = useMarker();
@@ -19,14 +19,15 @@ const Map = () => {
     <TransformWrapper
       initialScale={isMobile ? 2 : 1}
       minScale={isMobile ? 2 : 1}
-      alignmentAnimation={{ sizeX: 0, sizeY: 0 }}
+      alignmentAnimation={{ sizeX: 50, sizeY: 50 }}
       wheel={{ step: 1 }}
       zoomAnimation={{
         disabled: false,
         size: 0,
         animationType: "easeOutQuart",
-        animationTime: 2000,
+        animationTime: 500,
       }}
+
       //   velocityAnimation={{
       //     sensitivity: 1000,
       //     animationTime: 1000,
@@ -34,7 +35,9 @@ const Map = () => {
       //   }}
     >
       <TransformComponent
-        wrapperClass={`${isMobile ? "h-screen" : "h-[calc(100vh-62.39px)]"}`}
+        wrapperClass={
+          "h-[calc(100vh+150px)] w-[calc(100vw+400px)] top-[-50px] left-[-200px]"
+        }
       >
         <ImageMarker
           src="images/Map.jpg"
@@ -44,7 +47,6 @@ const Map = () => {
             hoveredMarker ? "brightness-[.7]" : ""
           }`}
         />
-        {/* <div className="bg-black brightness-[.7] absolute w-full h-full left-0 top-0 bg-black opacity-70 pointer-events-none"></div> */}
       </TransformComponent>
     </TransformWrapper>
   );
diff --git a/src/components/map/Marker.tsx b/src/components/masterplanPage/map/Marker.tsx
similarity index 72%
rename from src/components/map/Marker.tsx
rename to src/components/masterplanPage/map/Marker.tsx
index ccf2e8a..7e560f4 100644
--- a/src/components/map/Marker.tsx
+++ b/src/components/masterplanPage/map/Marker.tsx
@@ -1,9 +1,14 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import { MarkerComponentProps } from "react-image-marker";
-import { markers } from "../../consts/markers";
-import useMarker from "../../store/useMarker";
+import { useEffect, useState } from "react";
+import { useTransformContext } from "react-zoom-pan-pinch";
+import { markers } from "../../../consts/markers";
+import useMarker from "../../../store/useMarker";
 
 const Marker = (props: MarkerComponentProps) => {
   const { setHoveredMarker, hoveredMarker } = useMarker();
+  const { transformState } = useTransformContext();
+  const [markerScale, setMarkerScale] = useState(1);
   const currentMarker = markers.find(
     (marker) => marker.itemNumber === props.itemNumber
   );
@@ -13,12 +18,28 @@ const Marker = (props: MarkerComponentProps) => {
     setHoveredMarker(hoveredMarker);
   };
 
+  const handleOnScroll = () => {
+    const scale = 1 / transformState.scale;
+    setMarkerScale(scale);
+  };
+
   const handleOnMouseLeave = () => {
     setHoveredMarker(null);
   };
 
+  useEffect(() => {
+    const map = document.querySelector(".react-transform-wrapper");
+    handleOnScroll();
+    if (map) map.addEventListener("wheel", handleOnScroll);
+
+    return () => map?.removeEventListener("wheel", handleOnScroll);
+  }, []);
+
   return (
-    <div className="relative ">
+    <div
+      className="relative transition-transform"
+      style={{ transform: `scale(${markerScale})` }}
+    >
       <div
         className={`flex items-end absolute w-[108px] top-[22px] right-[72px] transition-all duration-300 ease-in-out ${
           hoveredMarker &&
@@ -50,7 +71,13 @@ const Marker = (props: MarkerComponentProps) => {
           onMouseEnter={handleOnMouseEnter}
           onMouseLeave={handleOnMouseLeave}
         >
-          <img src="/images/markers/1.png" alt="1" width={72} height={98} />
+          <img
+            id="marker"
+            src="/images/markers/1.png"
+            alt="1"
+            width={72}
+            height={98}
+          />
         </div>
       </div>
       <div
diff --git a/src/components/modals/Disclaimer.tsx b/src/components/modals/Disclaimer.tsx
new file mode 100644
index 0000000..4591fe9
--- /dev/null
+++ b/src/components/modals/Disclaimer.tsx
@@ -0,0 +1,53 @@
+import useModal from "../../store/useModal";
+import CrossIcon from "../icons/CrossIcon";
+
+const Disclaimer = () => {
+  const { setModal } = useModal();
+  const handleOnCloseClick = () => {
+    setModal(null);
+  };
+
+  return (
+    <div className="absolute z-50 top-0 left-0 w-screen bg-[#0D192266] h-screen backdrop-blur-[6px] grid grid-cols-12  items-center">
+      <div className="bg-white rounded-lg col-span-4 col-start-5 py-[37px] px-8">
+        <div className=" w-full h-1 flex justify-between">
+          <div className="h-[2px] bg-[#00BED7] w-1/3 rounded-full"></div>
+          <button onClick={handleOnCloseClick}>
+            <CrossIcon />
+          </button>
+        </div>
+        <h2 className="text-subheadline-m font-semibold py-6">Disclaimer</h2>
+        <div className="flex flex-col gap-4">
+          <p className="text-caption-m">
+            This masterplan has been designed solely to provide an impression of
+            the Rove Home projects as well as the approximate location of
+            existing and proposed facilities, services, and destinations and is
+            not intended for any other purpose.
+          </p>
+          <p className="text-caption-m">
+            All elements including the interior design used in the units and
+            images shown in the virtual tour are only for illustration. The
+            pictures of the proposed residential units, furniture, landscaping,
+            amenities, color schemes, fixtures, and accessories among all other
+            items are illustrative to showcase the units.
+          </p>
+          <p className="text-caption-m">
+            IRTH does not make any representation or give any warranty
+            concerning the future developments shown, or the current or future
+            amenities, location, or existence of any facilities, services, and
+            destinations. Any indications of distance, sizes, travel times, and
+            any other information are approximate and for indicative purposes
+            only and are not to scale.
+          </p>
+          <p className="text-caption-m">
+            IRTH gives notice that this virtual tour (including units,
+            amenities, plans of the property) does not constitute any part of a
+            sale offer or sale and purchase contract.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Disclaimer;
diff --git a/src/components/modals/ZoomHint.tsx b/src/components/modals/ZoomHint.tsx
index 0ce7661..6e09ea3 100644
--- a/src/components/modals/ZoomHint.tsx
+++ b/src/components/modals/ZoomHint.tsx
@@ -1,4 +1,3 @@
-import { useOnClickOutside } from "usehooks-ts";
 import { useEffect, useRef, useState } from "react";
 import SearchPlusIcon from "../icons/SearchIcon";
 import OpenFullscreenIcon from "../icons/OpenFullscreenIcon";
@@ -19,7 +18,8 @@ const ZoomHint = () => {
     }, 300);
   };
 
-  const handleClickOutside = () => {
+  const handleClick = () => {
+    console.log("first");
     setIsTransparent(true);
 
     const timeOut = setTimeout(() => {
@@ -29,19 +29,22 @@ const ZoomHint = () => {
   };
 
   useEffect(() => {
+    window.addEventListener("click", handleClick);
+    window.addEventListener("touchstart", handleClick);
+
     const map = document.querySelector(".react-transform-wrapper");
     if (!map) return;
     map.addEventListener("wheel", handleOnScroll);
     return () => {
       map.removeEventListener("wheel", handleOnScroll);
+      window.removeEventListener("click", handleClick);
+      window.removeEventListener("touchstart", handleClick);
     };
   }, []);
 
-  useOnClickOutside(ref, handleClickOutside);
-
   return (
     <div
-      className={`absolute z-10 m-auto top-1/2 left-1/2 flex flex-col items-center bg-[#0D192266] p-4 text-white gap-3 rounded-lg transition-opacity duration-300 ${
+      className={`absolute z-10 m-auto top-1/2 left-1/2 flex flex-col items-center bg-[#0D192266] backdrop-blur-md p-4 text-white gap-3 rounded-lg transition-opacity duration-300 ${
         isTransparent ? "opacity-0" : "opacity-100"
       }`}
       ref={ref}
diff --git a/src/consts/buttonColors.ts b/src/consts/buttonColors.ts
deleted file mode 100644
index f9453b3..0000000
--- a/src/consts/buttonColors.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { ButtonColor } from "../types/button";
-
-const backgroundColors: ButtonColor = {
-  cta: "bg-[#00BED7]",
-  primary: "bg-[#ffffff]",
-  tertiary: "bg-[#0D192266]",
-};
-
-const backgroundHoverColors: ButtonColor = {
-  cta: "hover:bg-[#00A8BE]",
-  primary: "hover:bg-[#F3F3F2]",
-  tertiary: "hover:bg-[#0D192266]",
-};
-
-const textColors: ButtonColor = {
-  cta: "text-[#ffffff]",
-  primary: "text-[#0D1922]",
-  tertiary: "text-[#ffffff]",
-};
-
-export { textColors, backgroundColors, backgroundHoverColors };
diff --git a/src/consts/buttonStyles.ts b/src/consts/buttonStyles.ts
new file mode 100644
index 0000000..e38c829
--- /dev/null
+++ b/src/consts/buttonStyles.ts
@@ -0,0 +1,31 @@
+import { ButtonStyle } from "../types/button";
+
+const backgroundColors: ButtonStyle = {
+  cta: "bg-[#00BED7] hover:bg-[#00A8BE]",
+  primary: "bg-[#ffffff] hover:bg-[#F3F3F2]",
+  tertiary: "bg-[#0D192266] hover:bg-[#0D1922B2]",
+  fab: "bg-[#ffffff] hover:bg-[#F3F3F2]",
+};
+
+const textColors: ButtonStyle = {
+  cta: "text-[#ffffff]",
+  primary: "text-[#0D1922]",
+  tertiary: "text-[#ffffff]",
+  fab: "text-[#ffffff]",
+};
+
+const borders: ButtonStyle = {
+  cta: "rounded-lg",
+  primary: "rounded-lg",
+  tertiary: "rounded-full",
+  fab: "rounded-full",
+};
+
+const paddings = {
+  cta: "py-3 px-6",
+  primary: "py-3 px-6",
+  tertiary: "py-1 px-3",
+  fab: "py-3 px-6",
+};
+
+export { textColors, backgroundColors, borders, paddings };
diff --git a/src/consts/markers.ts b/src/consts/markers.ts
index db2af38..0e56f08 100644
--- a/src/consts/markers.ts
+++ b/src/consts/markers.ts
@@ -2,19 +2,26 @@ import { Marker } from "../types/marker";
 
 const markers: Marker[] = [
   {
-    top: 37.5,
-    left: 50,
+    top: 38.2,
+    left: 54,
     itemNumber: 0,
     popup: "/images/markers/popups/1.svg",
     isPopupLeft: true,
   },
   {
-    top: 40.5,
+    top: 39.5,
     left: 56,
     itemNumber: 1,
     popup: "/images/markers/popups/1.svg",
     isPopupLeft: false,
   },
+  {
+    top: 73,
+    left: 22.5,
+    itemNumber: 2,
+    popup: "/images/markers/popups/1.svg",
+    isPopupLeft: false,
+  },
 ];
 
 export { markers };
diff --git a/src/pages/Masterplan.tsx b/src/pages/Masterplan.tsx
index 5238424..500179b 100644
--- a/src/pages/Masterplan.tsx
+++ b/src/pages/Masterplan.tsx
@@ -1,7 +1,9 @@
 import { useEffect } from "react";
 import useModal from "../store/useModal";
 import ZoomHint from "../components/modals/ZoomHint";
-import Map from "../components/map/Map";
+import Map from "../components/masterplanPage/map/Map";
+import TopPanel from "../components/masterplanPage/TopPanel";
+import ButtomPanel from "../components/masterplanPage/map/ButtomPanel";
 
 const Masterplan = () => {
   const { setModal } = useModal();
@@ -10,8 +12,10 @@ const Masterplan = () => {
   }, []);
 
   return (
-    <div>
+    <div className="overflow-hidden h-screen w-screen">
+      <TopPanel />
       <Map />
+      <ButtomPanel />
     </div>
   );
 };
diff --git a/src/types/button.ts b/src/types/button.ts
index d73a723..8cbf1cf 100644
--- a/src/types/button.ts
+++ b/src/types/button.ts
@@ -1,6 +1,6 @@
-type ButtonType = "primary" | "tertiary" | "cta";
-type ButtonColor = {
+type ButtonType = "primary" | "tertiary" | "cta" | "fab";
+type ButtonStyle = {
   [key in ButtonType]: string;
 };
 
-export type { ButtonColor, ButtonType };
+export type { ButtonStyle, ButtonType };
diff --git a/yarn.lock b/yarn.lock
index d8977ea..fc3eed1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1496,11 +1496,6 @@ locate-path@^6.0.0:
   dependencies:
     p-locate "^5.0.0"
 
-lodash.debounce@^4.0.8:
-  version "4.0.8"
-  resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
-  integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==
-
 lodash.merge@^4.6.2:
   version "4.6.2"
   resolved "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz"
@@ -2130,13 +2125,6 @@ use-sync-external-store@1.2.0:
   resolved "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz"
   integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
 
-usehooks-ts@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/usehooks-ts/-/usehooks-ts-3.1.0.tgz#156119f36efc85f1b1952616c02580f140950eca"
-  integrity sha512-bBIa7yUyPhE1BCc0GmR96VU/15l/9gP1Ch5mYdLcFBaFGQsdmXkvjV0TtOqW1yUd6VjIwDunm+flSciCQXujiw==
-  dependencies:
-    lodash.debounce "^4.0.8"
-
 util-deprecate@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz"