styles fix

src/components/ButtomPanel.tsx

@@ -11,16 +11,6 @@ const ButtomPanel = () => {
   return (
     <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"
@@ -34,11 +24,7 @@ const ButtomPanel = () => {
       </div>
       <div className="p-6">
         <div className="bg-[#0D192266] rounded-full backdrop-blur-sm">
-          <img
-            src="../images/masterplan/compass.png"
-            alt="compass"
-            className=""
-          />
+          <img src="../images/masterplan/compass.png" alt="compass" />
         </div>
       </div>
     </div>

src/components/complexPage/ComplexButtomPanel.tsx

@@ -0,0 +1,38 @@
+import useModal from "../../store/useModal";
+import Button from "../Button";
+import DisclaimerIcon from "../icons/DisclaimerIcon";
+import DisclaimerModal from "../modals/DisclaimerModal";
+
+const ButtomPanel = () => {
+  const { setModal } = useModal();
+  const handleOnDisclaimerClick = () => {
+    setModal(<DisclaimerModal />);
+  };
+  return (
+    <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 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>
+      <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>
+  );
+};
+
+export default ButtomPanel;

src/components/complexPage/ComplexTopPanel.tsx

@@ -42,54 +42,61 @@ const ComplexTopPanel = () => {
   };
 
   return (
-    <div
-      className={`absolute ${
-        isFullMode ? "" : "top-[62px]"
-      } left-0 z-50 w-full p-4 grid grid-cols-12`}
-    >
-      <div className="flex gap-2 col-span-3">
-        <Button
-          icon={<LeftArrowSliderIcon />}
-          buttonType="cta"
-          onClick={handleOnBackClick}
-        />
-        <Button
-          icon={<FilterIcon />}
-          buttonType="primary"
-          text="Filters"
-          onClick={handleOnFiltersClick}
-        />
-        <Button icon={<InfoIcon />} buttonType="primary" text="About Complex" />
+    <>
+      <div className="absolute top-0 w-screen z-20">
+        <img src="../images/top_shadow.png" className="w-screen" alt="" />
       </div>
-      <div className="flex flex-col col-start-6 col-span-2 text-white text-center">
-        <h2 className="font-bold text-subheadline-s drop-shadow drop-shadow-[0_2px_8px_0px_rgba(62, 84, 100, 0.25)]">
-          ROVE Home Marasi Drive
-        </h2>
-        <p className="text-s drop-shadow drop-shadow-[0_2px_8px_0px_rgba(62, 84, 100, 0.25)]">
-          Select a wing
-        </p>
-      </div>
-      <div className="flex gap-2 col-span-2 col-start-11 justify-end">
-        {isFullMode ? (
+      <div
+        className={`absolute top-[62px] left-0 z-20 w-full p-4 grid grid-cols-12`}
+      >
+        <div className="flex gap-2 col-span-3">
+          <Button
+            icon={<LeftArrowSliderIcon />}
+            buttonType="cta"
+            onClick={handleOnBackClick}
+          />
+          <Button
+            icon={<FilterIcon />}
+            buttonType="primary"
+            text="Filters"
+            onClick={handleOnFiltersClick}
+          />
+          <Button
+            icon={<InfoIcon />}
+            buttonType="primary"
+            text="About Complex"
+          />
+        </div>
+        <div className="flex flex-col col-start-6 col-span-2 text-white text-center">
+          <h2 className="font-semibold text-subheadline-s drop-shadow drop-shadow-[0_2px_8px_0px_rgba(62, 84, 100, 0.25)]">
+            ROVE Home Marasi Drive
+          </h2>
+          <p className="text-s drop-shadow drop-shadow-[0_2px_8px_0px_rgba(62, 84, 100, 0.25)]">
+            Select a wing
+          </p>
+        </div>
+        <div className="flex gap-2 col-span-2 col-start-11 justify-end">
+          {isFullMode ? (
+            <Button
+              buttonType="fab"
+              icon={<ActiveResizeIcon />}
+              onClick={handleOnFullScreenClick}
+            />
+          ) : (
+            <Button
+              buttonType="fab"
+              icon={<ResizeIcon />}
+              onClick={handleOnFullScreenClick}
+            />
+          )}
           <Button
             buttonType="fab"
-            icon={<ActiveResizeIcon />}
-            onClick={handleOnFullScreenClick}
+            icon={<HintIcon />}
+            onClick={handleOnHelpClick}
           />
-        ) : (
-          <Button
-            buttonType="fab"
-            icon={<ResizeIcon />}
-            onClick={handleOnFullScreenClick}
-          />
-        )}
-        <Button
-          buttonType="fab"
-          icon={<HintIcon />}
-          onClick={handleOnHelpClick}
-        />
+        </div>
       </div>
-    </div>
+    </>
   );
 };
 

src/components/complexPage/FloorLayout.tsx

@@ -0,0 +1,5 @@
+const FloorLayout = () => {
+  return <></>;
+};
+
+export default FloorLayout;

src/components/complexPage/SequenceSlider.tsx

@@ -4,6 +4,10 @@ import { useState, useEffect } from "react";
 import { isMobile } from "react-device-detect";
 import { useSwipeable } from "react-swipeable";
 import { Transition } from "react-transition-group";
+import Button from "../Button";
+import ActiveResizeIcon from "../icons/ActiveResizeIcon";
+import LeftArrowSliderIcon from "../icons/LeftArrowSliderIcon";
+import RightArrowSliderIcon from "../icons/RightArrowSliderIcon";
 
 // const marks = [
 //     {
@@ -49,13 +53,13 @@ interface SequenceSliderProps {
 
 function SequenceSlider({ path }: SequenceSliderProps) {
   const [selectedImageRightIndex, setSelectedRightImageIndex] =
-    useState<number>(keyframes[0]);
+    useState<number>(keyframes[3]);
   const [selectedImageLeftIndex, setSelectedImageLeftIndex] = useState<number>(
-    arrayLength - keyframes[0]
+    arrayLength - keyframes[3]
   );
   const [isAnimate, setIsAnimate] = useState<boolean>(false);
 
-  const [keyframeIndex, setKeyframeIndex] = useState<number>(0);
+  const [keyframeIndex, setKeyframeIndex] = useState<number>(3);
   const handlers = useSwipeable({
     trackMouse: true,
     onSwipedLeft: () => !isAnimate && next(),
@@ -158,16 +162,10 @@ function SequenceSlider({ path }: SequenceSliderProps) {
     return () => window.removeEventListener("resize", handleResize);
   }, []);
 
-  useEffect(() => {
-    console.log("selectedRightIn", selectedImageRightIndex);
-
-    return () => {};
-  }, []);
-
   return (
     <div
       {...handlers}
-      className="absolute w-full h-full overflow-hidden bg-black top-0 left-0"
+      className="absolute w-full h-full overflow-hidden bg-black top-0 left-0 z-10"
     >
       <div
         className="absolute left-0"
@@ -189,26 +187,22 @@ function SequenceSlider({ path }: SequenceSliderProps) {
           </>
         ))}
       </div>
-
-      <button
-        disabled={isAnimate}
-        className={`p-3 bg-[#0079C2] hover:bg-[#0069A8] rounded-full transition-colors absolute left-6 top-[calc(50%-24px)] z-50 ${
+      <Button
+        className={`p-3 rounded-full transition-colors absolute left-6 top-[calc(50%-24px)] z-50 ${
           isAnimate ? "opacity-50" : "opacity-100"
         }`}
+        buttonType="fab"
+        icon={<LeftArrowSliderIcon />}
         onClick={prev}
-      >
-        {/* <ChevronLeftIcon /> */}
-      </button>
-      <button
-        disabled={isAnimate}
-        className={`p-3 bg-[#0079C2] hover:bg-[#0069A8] rounded-full transition-all absolute right-6 top-[calc(50%-24px)] z-50 ${
+      />
+      <Button
+        className={`p-3 rounded-full transition-colors absolute right-6 top-[calc(50%-24px)] z-50 ${
           isAnimate ? "opacity-50" : "opacity-100"
         }`}
+        buttonType="fab"
+        icon={<RightArrowSliderIcon />}
         onClick={next}
-      >
-        {/* <ChevronRightIcon /> */}
-      </button>
-
+      />
       <div
         className="absolute left-0 z-40 select-none"
         style={{ width: `${width}px`, height: `${width}px`, top: `-${top}px` }}
@@ -219,9 +213,7 @@ function SequenceSlider({ path }: SequenceSliderProps) {
               ? "opacity-100"
               : "opacity-0"
           }`}
-        >
-          {/* <MainMarksContainer marks={marks} keyframeIndex={keyframeIndex} /> */}
-        </div>
+        ></div>
       </div>
 
       <Transition

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 absolute left-0 top-0 z-20 font-usual text-m">
+  <header className="bg-white w-full text-white sm:grid grid-cols-6 absolute left-0 top-0 z-50 font-usual text-m">
     <div className="flex gap-4 col-span-2">
       <Logo />
       <Location />

src/components/header/Header/Layout.tsx

@@ -17,8 +17,8 @@ const Layout = () => {
   }, []);
   return (
     <>
-      {isMobile ? <MobileHeader /> : <DesktopHeader />}
       <FullScreen handle={onFullscreenHandle}>
+        {isMobile ? <MobileHeader /> : <DesktopHeader />}
         {modal}
         <Outlet />
       </FullScreen>

src/components/icons/RightArrowSliderIcon.tsx

@@ -1,18 +1,18 @@
 const RightArrowSliderIcon = () => {
   return (
     <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M18 12L6 12M18 12L11.6364 18M18 12L11.6364 6"
+        d="M15 10L5 10M15 10L9.69697 15M15 10L9.69697 5"
         stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
       />
     </svg>
   );

src/components/masterplanPage/TopPanel.tsx

@@ -28,30 +28,33 @@ const TopPanel = () => {
   };
 
   return (
-    <div
-      className={`absolute ${
-        isFullMode ? "" : "top-[62px]"
-      }  left-0 z-20 w-full p-4 flex justify-end gap-2`}
-    >
-      {isFullMode ? (
+    <>
+      <div className="absolute top-0 w-screen z-10">
+        <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`}
+      >
+        {isFullMode ? (
+          <Button
+            buttonType="fab"
+            icon={<ActiveResizeIcon />}
+            onClick={handleOnFullScreenClick}
+          />
+        ) : (
+          <Button
+            buttonType="fab"
+            icon={<ResizeIcon />}
+            onClick={handleOnFullScreenClick}
+          />
+        )}
         <Button
           buttonType="fab"
-          icon={<ActiveResizeIcon />}
-          onClick={handleOnFullScreenClick}
+          icon={<HintIcon />}
+          onClick={handleOnHelpClick}
         />
-      ) : (
-        <Button
-          buttonType="fab"
-          icon={<ResizeIcon />}
-          onClick={handleOnFullScreenClick}
-        />
-      )}
-      <Button
-        buttonType="fab"
-        icon={<HintIcon />}
-        onClick={handleOnHelpClick}
-      />
-    </div>
+      </div>
+    </>
   );
 };
 

src/components/modals/HelpModal.tsx

@@ -24,7 +24,7 @@ const HelpModal = () => {
             />
           </div>
           <img
-            src="./images/masterplan/help/1.png"
+            src="../images/masterplan/help/1.png"
             alt="1"
             className="rounded-2xl"
           />

src/consts/buttonStyles.ts

@@ -13,7 +13,7 @@ const textColors: ButtonStyle = {
   primary: "text-[#0D1922]",
   secondary: "text-[#0D1922]",
   tertiary: "text-[#ffffff]",
-  fab: "text-[#ffffff]",
+  fab: "text-[#0D1922]",
 };
 
 const borders: ButtonStyle = {