Map disclaimer help

src/components/masterplanPage/TopPanel.tsx

@@ -1,12 +1,24 @@
+import useModal from "../../store/useModal";
 import Button from "../Button";
 import HintIcon from "../icons/HintIcon";
 import ResizeIcon from "../icons/ResizeIcon";
+import HelpModal from "../modals/HelpModal";
 
 const TopPanel = () => {
+  const { setModal } = useModal();
+
+  const handleOnHelpClick = () => {
+    setModal(<HelpModal />);
+  };
+
   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 />} />
+      <Button
+        buttonType="fab"
+        icon={<HintIcon />}
+        onClick={handleOnHelpClick}
+      />
     </div>
   );
 };

src/components/masterplanPage/map/ButtomPanel.tsx

@@ -1,27 +1,46 @@
 import Button from "../../Button";
 import DisclaimerIcon from "../../icons/DisclaimerIcon";
 import useModal from "../../../store/useModal";
-import Disclaimer from "../../modals/Disclaimer";
+import DisclaimerModal from "../../modals/DisclaimerModal";
 
 const ButtomPanel = () => {
   const { setModal } = useModal();
   const handleOnDisclaimerClick = () => {
-    setModal(<Disclaimer />);
+    setModal(<DisclaimerModal />);
   };
   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="absolute z-20 bottom-0 left-0 w-full select-none touch-none pointer-events-none flex gap-2 justify-between items-end">
       <div className="flex flex-col gap-2">
+        <div className="flex flex-col w-[325px] pl-6 pr-3 py-2 bg-[#00000033]">
+          <div className="flex gap-1">
+            <DisclaimerIcon />
+            <p className="text-s text-white">Work in progress</p>
+          </div>
+          <div className="text-white text-caption-m font-semibold opacity-80">
+            Mockups are in the early stages of development and may differ
+            significantly from the final version.
+          </div>
+        </div>
         <div className="flex gap-2 pb-6 pl-6">
           <Button
             text="Disclaimer"
             buttonType="tertiary"
+            className="pl-2"
             icon={<DisclaimerIcon />}
             onClick={handleOnDisclaimerClick}
           />
           <Button text="Privacy Policy" buttonType="tertiary" />
         </div>
       </div>
-      <img src="./images/masterplan/compass.png" alt="compass" />
+      <div className="p-6">
+        <div className="bg-[#0D192266] rounded-full backdrop-blur-sm">
+          <img
+            src="./images/masterplan/compass.png"
+            alt="compass"
+            className=""
+          />
+        </div>
+      </div>
     </div>
   );
 };

src/components/modals/DisclaimerModal.tsx

@@ -1,7 +1,7 @@
 import useModal from "../../store/useModal";
 import CrossIcon from "../icons/CrossIcon";
 
-const Disclaimer = () => {
+const DisclaimerModal = () => {
   const { setModal } = useModal();
   const handleOnCloseClick = () => {
     setModal(null);
@@ -50,4 +50,4 @@ const Disclaimer = () => {
   );
 };
 
-export default Disclaimer;
+export default DisclaimerModal;

src/components/modals/HelpModal.tsx

@@ -0,0 +1,63 @@
+import useModal from "../../store/useModal";
+import Button from "../Button";
+import CrossIcon from "../icons/CrossIcon";
+import LeftArrowSliderIcon from "../icons/LeftArrowSliderIcon";
+import RightArrowSliderIcon from "../icons/RightArrowSliderIcon";
+
+const HelpModal = () => {
+  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="h-full col-span-3 col-start-10 bg-[#F3F3F2] py-6 px-6 flex flex-col justify-between items-center">
+        <div className="flex flex-col gap-8">
+          <div className="flex justify-between pb-4 border-b border-[#E2E2DC]">
+            <h2 className="text-subheadline-m font-semibold">
+              Tips for working
+            </h2>
+            <Button
+              icon={<CrossIcon />}
+              buttonType="fab"
+              onClick={handleOnCloseClick}
+            />
+          </div>
+          <img
+            src="./images/masterplan/help/1.png"
+            alt="1"
+            className="rounded-2xl"
+          />
+          <div className="flex flex-col gap-2 text-[#0D1922]">
+            <h2 className="text-subheadline-m font-semibold">1. Workspace</h2>
+            <p className="text-m">
+              For more comfortable work with the general plan, size it to the
+              full screen.
+            </p>
+          </div>
+        </div>
+        <div className="flex gap-8">
+          <Button
+            icon={<LeftArrowSliderIcon />}
+            buttonType="fab"
+            className="text-black"
+          />
+          <div className="flex items-center gap-3">
+            <div className="bg-[#00BED7] rounded-full w-3 h-3"></div>
+            <div className="bg-[#E2E2DC] rounded-full w-3 h-3"></div>
+            <div className="bg-[#E2E2DC] rounded-full w-3 h-3"></div>
+            <div className="bg-[#E2E2DC] rounded-full w-3 h-3"></div>
+            <div className="bg-[#E2E2DC] rounded-full w-3 h-3"></div>
+          </div>
+          <Button
+            icon={<RightArrowSliderIcon />}
+            buttonType="fab"
+            className="text-black"
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default HelpModal;

src/components/modals/ZoomHintModal.tsx

@@ -19,7 +19,6 @@ const ZoomHint = () => {
   };
 
   const handleClick = () => {
-    console.log("first");
     setIsTransparent(true);
 
     const timeOut = setTimeout(() => {

src/pages/Masterplan.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from "react";
 import useModal from "../store/useModal";
-import ZoomHint from "../components/modals/ZoomHint";
+import ZoomHint from "../components/modals/ZoomHintModal";
 import Map from "../components/masterplanPage/map/Map";
 import TopPanel from "../components/masterplanPage/TopPanel";
 import ButtomPanel from "../components/masterplanPage/map/ButtomPanel";