ivans fixes

src/components/Checkbox.tsx

@@ -11,7 +11,7 @@ const Checkbox = ({ onClick, checkbox }: CheckboxProps) => {
   return (
     <div
       onClick={() => onClick(checkbox.id)}
-      className={`flex justify-between bg-white p-3 rounded-2xl  transition-[background] duration-300 ease-in-out select-none ${
+      className={`flex justify-between bg-white p-3 rounded-lg  transition-[background] duration-300 ease-in-out select-none ${
         checkbox.disabled
           ? "pointer-events-none touch-none"
           : "hover:bg-[#F3F3F2] cursor-pointer"

src/components/MasterInput.tsx

@@ -0,0 +1,25 @@
+interface MasterInputProps {
+  placeholder: string;
+  isRequired: boolean;
+  title: string;
+}
+
+const MasterInput = ({ placeholder, isRequired, title }: MasterInputProps) => {
+  return (
+    <div className="flex flex-col">
+      <div className="flex pb-2">
+        <p className="text-[#0D192266] font-semibold text-caption-m">{title}</p>
+        {isRequired && <p className="text-[#E12E25] text-caption-m">*</p>}
+      </div>
+      <div className="bg-white py-[14px] px-4 rounded-lg">
+        <input
+          type="text"
+          className="outline-transparent outline"
+          placeholder={placeholder}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default MasterInput;

src/components/MasterSelector.tsx

@@ -13,11 +13,9 @@ interface MasterSelectorProps {
   options?: IOptions[];
 }
 
-// const formatPhone =
-
 const MasterSelector = ({ title }: MasterSelectorProps) => {
   return (
-    <div className="pb-8">
+    <div className="">
       <p className="text-[#0D192266] text-caption-m font-semibold pb-2">
         {title}
       </p>

src/components/MultiRangeSlider.tsx

@@ -70,7 +70,7 @@ const MultiRangeSlider = ({
 
   return (
     <div className="">
-      <div className="flex justify-between p-3 bg-white rounded-2xl relative flex-col">
+      <div className="flex justify-between p-3 bg-white rounded-lg relative flex-col">
         <div className="flex justify-between">
           {/* <input
             ref={firstInputRef}

src/components/complexWingPage/FloorDescription.tsx

@@ -80,7 +80,7 @@ const FloorDescription = ({ descriptionFloor }: FloorDescriptionProps) => {
         </div>
       </div> */}
       <div
-        className={`bg-white rounded-lg p-6 flex flex-col gap-4 w-[364px] absolute left-[414px] transition-opacity duration-300 desc-shadow ${
+        className={`bg-white rounded-2xl p-6 flex flex-col gap-4 w-[364px] absolute left-[414px] transition-opacity duration-300 desc-shadow ${
           isSidebar && descriptionFloor?.wing === "West Wing"
             ? "opacity-100"
             : "opacity-100"

src/components/complexWingPage/FloorSidebar/ApartmentDescription.tsx

@@ -1,24 +1,44 @@
+import VirtualTourIcon from "../../icons/VirtualTourIcon";
+
 interface ApartmentDescriptionProps {
   isVisible: boolean;
+  is3DTourAvailable: boolean;
 }
 
-const ApartmentDescription = ({ isVisible }: ApartmentDescriptionProps) => {
+const ApartmentDescription = ({
+  isVisible,
+  is3DTourAvailable,
+}: ApartmentDescriptionProps) => {
   return (
     <div className="p-6 py-3">
       <div
-        className={`bg-white rounded-lg p-6 flex flex-col text-subheadline-s relative text-nowrap desc-shadow py-2  ${
+        className={`bg-white rounded-2xl p-6 flex flex-col text-subheadline-s relative text-nowrap desc-shadow py-2  ${
           isVisible ? "opacity-100" : "opacity-0"
         } duration-300 ease-in-out transition-opacity`}
       >
         <h2 className="text-[#0D1922] font-semibold">1 bedroom, 609 Sqft</h2>
-        <div className="flex gap-2 items-center text-caption-m font-semibold  pt-1 border-b pb-4 justify-center">
+        <div className="flex gap-2 items-center text-caption-m font-semibold  pt-1 border-b pb-4 justify-start">
           <p className="text-[#0D1922B2]">East Wing</p>
           <div className="w-1 h-1 bg-[#E2E2DC] rounded-full"></div>
           <p className="text-[#0D1922B2]">Floor 11</p>
           <div className="w-1 h-1 bg-[#E2E2DC] rounded-full"></div>
           <p className="text-[#0D1922B2]">E-213</p>
         </div>
-        <p className="font-semibold pt-4 text-[#00BED7]">AED 1,668,888</p>
+        <div className="flex justify-between items-center pt-4 gap-14">
+          <p className="font-semibold  text-[#00BED7] text-subheadline-s">
+            AED 1,668,888
+          </p>
+          <div
+            className={`bg-[#30B21614] text-[#30B216] px-2 py-[6px] flex gap-1 items-center rounded-lg ${
+              is3DTourAvailable ? "opacity-100" : "opacity-0"
+            }`}
+          >
+            <VirtualTourIcon />
+            <p className="text-caption-m font-semibold text-[#30B216]">
+              3D-tour
+            </p>
+          </div>
+        </div>
         <div className="w-0 h-0 border-transparent border-t-[14px] border-x-[6px] border-b-0 absolute left-6 -bottom-[13px] border-t-white"></div>
       </div>
     </div>

src/components/complexWingPage/FloorSidebar/FloorSidebar.tsx

@@ -14,6 +14,7 @@ interface IFloorSidebarProps {
 const FloorSidebar = ({ currentFloor, onMouseEnter }: IFloorSidebarProps) => {
   const [mousePos, setMousePos] = useState<number[]>([0, 0]);
   const [isDescVisible, setIsDescVisible] = useState(false);
+  const [is3DTourAvailable] = useState(true);
   const { setIsSidebar } = useWingSidebar();
 
   const navigate = useNavigate();
@@ -50,7 +51,10 @@ const FloorSidebar = ({ currentFloor, onMouseEnter }: IFloorSidebarProps) => {
         className="absolute z-[99999] w-fit h-fit top-0 left-0"
         style={{ top: `${mousePos[1]}px`, left: `${mousePos[0]}px` }}
       >
-        <ApartmentDescription isVisible={isDescVisible} />
+        <ApartmentDescription
+          isVisible={isDescVisible}
+          is3DTourAvailable={is3DTourAvailable}
+        />
       </div>
       <div
         className="absolute h-full right-0 w-full z-30 bg-[#F3F3F2] p-6 flex flex-col top-[56px] "
@@ -67,7 +71,7 @@ const FloorSidebar = ({ currentFloor, onMouseEnter }: IFloorSidebarProps) => {
             <div className="leading-5">234 units</div>
           </div>
         </div>
-        <div className="px-4 py-[18px] bg-white flex gap-6 text-[#73787C] font-semibold text-caption-m rounded-lg mb-2">
+        <div className="px-4 py-[18px] bg-white flex gap-6 text-[#73787C] font-semibold text-caption-m rounded-2xl mb-2">
           <div className="gap-2 flex items-center">
             <div className="rounded-full bg-[#A19E9E] w-3 h-3"></div>
             <p>Studio Flex</p>
@@ -90,7 +94,7 @@ const FloorSidebar = ({ currentFloor, onMouseEnter }: IFloorSidebarProps) => {
           </div>
         </div>
 
-        <div className="px-10 bg-white flex gap-6 font-semibold text-caption-m rounded-lg justify-center items-center flex-1 py-4">
+        <div className="px-10 bg-white flex gap-6 font-semibold text-caption-m rounded-2xl justify-center items-center flex-1 py-4">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             fill="none"

src/components/complexWingPage/SkygardenDescription.tsx

@@ -2,7 +2,7 @@ const SkygardenDescription = () => {
   return (
     <div className=" p-6">
       <div
-        className={`bg-white rounded-lg p-6 flex flex-col gap-4 transition-all duration-300 ease-in-out absolute w-[364px] left-[414px] desc-shadow`}
+        className={`bg-white rounded-2xl p-6 flex flex-col gap-4 transition-all duration-300 ease-in-out absolute w-[364px] left-[414px] desc-shadow`}
       >
         <div className="relative ">
           <div className="flex justify-between border-b pb-4">

src/components/complexWingPage/SkygardenSidebar/SkygardenSidebar.tsx

@@ -42,7 +42,7 @@ const SkygardenSidebar = ({ onMouseEnter }: ISkygardenSidebarProps) => {
         </div>
       </div>
       <div className="overflow-y-scroll py-6">
-        <div className="px-4 bg-white font-semibold text-caption-m rounded-lg justify-center items-center mb-4 pb-4 mx-6 flex flex-col gap-1 pt-4">
+        <div className="px-4 bg-white font-semibold text-caption-m rounded-2xl justify-center items-center mb-4 pb-4 mx-6 flex flex-col gap-1 pt-4">
           <LayoutSlider />
         </div>
         <div className="grid grid-cols-3 gap-4 border-t pt-4 pb-4 mx-6">

src/components/favoritesPage/FavoriteApartmentCard.tsx

@@ -2,8 +2,10 @@ import useModal from "../../store/useModal";
 import { ILayoutCard } from "../../types/layoutCard";
 import Button from "../Button";
 import BookingIcon from "../icons/BookingIcon";
-import CrossIcon from "../icons/CrossIcon";
 import HeartIcon from "../icons/Heart";
+import { SendEnquiryModal } from "../modals/SendEnquryModal";
+import { MobileModalWrapper } from "../modals/mobile/MobileModalWrapper";
+import SendEnquiryMobileModal from "../modals/mobile/SendEnquiryMobileModal";
 
 interface FavoriteAppartmentCardProps {
   card: ILayoutCard;
@@ -18,8 +20,17 @@ const FavoriteAppartmentCard = ({ card }: FavoriteAppartmentCardProps) => {
   const handleOnSendEquiryClick = () => {
     setModal(<SendEnquiryModal />);
   };
+
+  const handleOnMobileSendEquiryClick = () => {
+    setModal(
+      <MobileModalWrapper>
+        <SendEnquiryMobileModal />
+      </MobileModalWrapper>
+    );
+  };
+
   return (
-    <div className="bg-white flex flex-col p-4 rounded-lg gap-4 cursor-pointer select-none">
+    <div className="bg-white flex flex-col p-4 rounded-2xl gap-4 cursor-pointer select-none">
       <div className="flex gap-4  justify-between">
         <div className="flex gap-1 flex-col">
           <p className="text-[#00BED7] text-s leading-5">
@@ -56,67 +67,20 @@ const FavoriteAppartmentCard = ({ card }: FavoriteAppartmentCardProps) => {
         <Button
           icon={<BookingIcon />}
           text="Send Enquiry"
-          className="flex justify-center"
+          className="justify-center hidden lg:flex"
           buttonType="cta"
           onClick={handleOnSendEquiryClick}
         />
+        <Button
+          icon={<BookingIcon />}
+          text="Send Enquiry"
+          className="justify-center lg:hidden flex"
+          buttonType="cta"
+          onClick={handleOnMobileSendEquiryClick}
+        />
       </div>
     </div>
   );
 };
 
-const SendEnquiryModal = () => {
-  const { setModal } = useModal();
-
-  const handleOnModalClick = () => {
-    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 w-full">
-          <div className="flex justify-between pb-4 border-b border-[#E2E2DC] ">
-            <h2 className="text-subheadline-m font-semibold">
-              Apartment purchase enquiry
-            </h2>
-            <Button
-              buttonType="tertiary"
-              icon={<CrossIcon />}
-              onClick={handleOnModalClick}
-            />
-          </div>
-          <div className="rounded-lg bg-white p-4 flex flex-col gap-4">
-            <div className="flex flex-col gap-1">
-              <p className="text-subheadline-s font-semibold text-[#0D1922]">
-                1 bedroom, 609 Sqft{" "}
-              </p>
-              <p className="text-subheadline-s font-semibold text-[#0D192266]">
-                AED 1,668,888
-              </p>
-            </div>
-            <div className="flex flex-col gap-1">
-              <p className="text-[#00BED7] text-s">1 bedroom, 609 Sqft </p>
-              <div className="flex gap-1 flex-col">
-                <div className="text-[#73787C] flex gap-2 items-center w-fit">
-                  <p className="text-caption-m font-semibold leading-4">
-                    East Wing
-                  </p>
-                  <div className="w-1 h-1 bg-[#E2E2DC] rounded-full"></div>
-                  <p className="text-caption-m font-semibold leading-4">
-                    Floor 11
-                  </p>
-                  <div className="w-1 h-1 bg-[#E2E2DC] rounded-full"></div>
-                  <p className="text-caption-m font-semibold leading-4">
-                    № 213
-                  </p>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
 export default FavoriteAppartmentCard;

src/components/favoritesPage/FavoriteCardList.tsx

@@ -7,7 +7,7 @@ interface FavoriteCardListProps {
 
 const FavoriteCardList = ({ cards }: FavoriteCardListProps) => {
   return (
-    <div className="grid grid-cols-4 gap-4">
+    <div className="grid lg:grid-cols-4 gap-4 grid-cols-2">
       {cards.map((card) => (
         <FavoriteAppartmentCard card={card} key={card.id} />
       ))}

src/components/favoritesPage/FavoriteSlider.tsx

@@ -4,18 +4,45 @@ import FavoriteSliderCard from "./FavoriteSliderCard";
 import Button from "../Button";
 import RightArrowIcon from "../icons/RightArrowIcon";
 import LeftArrowIcon from "../icons/LeftArrowIcon";
+import { useSwipeable } from "react-swipeable";
 
 interface FavoritesSliderProps {
   cards: ILayoutCard[];
 }
 
-const cols = 4;
-
 const FavoritesSlider = ({ cards }: FavoritesSliderProps) => {
   const [offset, setOffset] = useState(0);
   const cardRef = useRef<HTMLDivElement | null>(null);
   const [cardWidth, setCardWidth] = useState(0);
   const [buttonTopPos, setButtonTopPos] = useState(0);
+  const [cols, setCols] = useState(2);
+
+  const handlers = useSwipeable({
+    trackMouse: true,
+    onSwipedRight: () => handleOnLeftBtnClick(),
+    onSwipedLeft: () => handleOnRightBtnClick(),
+  });
+
+  const handleOnLeftBtnClick = () => {
+    if (0 > offset) {
+      setOffset((prev) => prev + 1);
+    }
+  };
+
+  const handleOnRightBtnClick = () => {
+    if (offset > -cards.length + cols + 1) {
+      setOffset((prev) => prev - 1);
+    }
+  };
+
+  useEffect(() => {
+    const screenWidth = window.innerWidth;
+    if (screenWidth >= 1024) {
+      setCols(4);
+    } else {
+      setCols(2);
+    }
+  }, [window.innerWidth]);
 
   useEffect(() => {
     const cardElement = cardRef.current;
@@ -27,22 +54,10 @@ const FavoritesSlider = ({ cards }: FavoritesSliderProps) => {
       setCardWidth(width);
       setButtonTopPos(_buttonTopPos);
     }
-  }, []);
+  }, [cardRef.current]);
-
-  const handleOnLeftBtnClick = () => {
-    if (0 > offset) {
-      setOffset((prev) => prev + 1);
-    }
-  };
-
-  const handleOnRightBtnClick = () => {
-    if (offset > -cards.length + cols) {
-      setOffset((prev) => prev - 1);
-    }
-  };
 
   return (
-    <div className="w-[calc(100vw - 48px)] relative">
+    <div className="w-[calc(100vw - 48px)] relative ">
       <div
         className="absolute -left-2 z-30"
         style={{ top: `${buttonTopPos}px` }}
@@ -63,7 +78,7 @@ const FavoritesSlider = ({ cards }: FavoritesSliderProps) => {
           onClick={handleOnRightBtnClick}
         />
       </div>
-      <div className="w-full overflow-hidden">
+      <div className="w-full overflow-hidden" {...handlers}>
         <div
           className="transition-all ease-in-out duration-300"
           style={{ transform: `translateX(${offset * cardWidth}px)` }}
@@ -73,7 +88,7 @@ const FavoritesSlider = ({ cards }: FavoritesSliderProps) => {
               (_, index) => {
                 return (
                   <div
-                    className="grid grid-cols-4 gap-4 w-[calc(100vw-48px)] h-fit"
+                    className="grid lg:grid-cols-4 grid-cols-2 gap-4 w-[calc(100vw-48px)] h-fit"
                     key={index}
                   >
                     {cards

src/components/favoritesPage/FavoriteSliderCard.tsx

@@ -10,17 +10,21 @@ interface FavoriteSliderCardProps {
 
 const FavoriteSliderCard = ({ card, elementRef }: FavoriteSliderCardProps) => {
   return (
-    <div className="rounded-lg flex flex-col overflow-clip gap-6">
+    <div className="rounded-ss-2xl rounded-se-2xl flex flex-col overflow-clip gap-6">
       <div className="flex flex-col gap-4 bg-white p-4" ref={elementRef}>
         <div className="flex justify-between">
-          <div className="flex text-subheadline-s font-semibold text-[#0D1922]">
+          <div className="flex text-subheadline-s font-semibold text-[#0D1922] select-none">
             <h2>
               {card.apartmentType}, {card.square} Sqft
             </h2>
           </div>
           <Button buttonType="favorite" icon={<HeartIcon isFilled />} />
         </div>
-        <img src="/images/layout-1.png" alt="" className="w-full" />
+        <img
+          src="/images/layout-1.png"
+          alt=""
+          className="w-full pointer-events-none select-none"
+        />
       </div>
       <div className="flex flex-col gap-1 pb-6 border-b">
         <p className="text-s text-[#73787C]">Price</p>

src/components/header/Auth/AuthDesktop.tsx

@@ -1,5 +1,6 @@
 import useModal from "../../../store/useModal";
 import Button from "../../Button";
+import AuthIcon from "../../icons/AuthIcon";
 import LoginModal from "../../modals/LoginModal";
 
 interface AuthProps {
@@ -30,7 +31,12 @@ const AuthDesktop = ({ isAuth, userName }: AuthProps) => {
           </div>
         </>
       ) : (
-        <Button buttonType="cta" text="Login" onClick={handleOnLoginBtnClick} />
+        <Button
+          buttonType="cta"
+          text="Login"
+          onClick={handleOnLoginBtnClick}
+          icon={<AuthIcon />}
+        />
       )}
     </div>
   );

src/components/header/Auth/AuthMobile.tsx

@@ -1,4 +1,5 @@
 import Button from "../../Button";
+import AuthIcon from "../../icons/AuthIcon";
 
 interface AuthProps {
   isAuth: boolean;
@@ -17,7 +18,12 @@ const AuthMobile = ({ isAuth, userName }: AuthProps) => {
         </div>
       ) : (
         <div className="flex gap-4 text-black justify-center w-full items-center">
-          <Button buttonType="cta" text="Login" className="w-full" />
+          <Button
+            buttonType="cta"
+            text="Login"
+            icon={<AuthIcon />}
+            className="w-full justify-center"
+          />
         </div>
       )}
     </>

src/components/header/Header/DesktopHeader.tsx

@@ -10,7 +10,7 @@ const DesktopHeader = () => (
       <Location />
     </div>
     <Navbar />
-    <Auth />
+    <Auth isAuth={false} />
   </header>
 );
 

src/components/icons/AuthIcon.tsx

@@ -0,0 +1,20 @@
+const AuthIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      fill="none"
+      viewBox="0 0 20 20"
+    >
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M6.458 16.667c0 .345.28.625.625.625h7.083A2.292 2.292 0 0016.459 15V5a2.292 2.292 0 00-2.291-2.292H7.082a.625.625 0 000 1.25h7.083c.576 0 1.042.467 1.042 1.042v10c0 .575-.466 1.042-1.042 1.042H7.083a.625.625 0 00-.625.625zm3.103-3.259a.625.625 0 00.884-.007l2.917-2.963a.625.625 0 000-.876l-2.917-2.963a.625.625 0 10-.89.877l1.87 1.899H4.166a.625.625 0 000 1.25h7.257l-1.87 1.9a.625.625 0 00.007.883z"
+        clipRule="evenodd"
+      ></path>
+    </svg>
+  );
+};
+
+export default AuthIcon;

src/components/icons/VirtualTourIcon.tsx

@@ -0,0 +1,24 @@
+const VirtualTourIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      fill="none"
+      viewBox="0 0 20 20"
+    >
+      <path
+        fill="currentColor"
+        d="M7.332 13.334c1.204 0 1.946-.909 1.946-2.145s-.719-1.704-1.452-1.854l1.172-1.357a.823.823 0 00.195-.537c0-.427-.312-.774-.696-.774H6.096c-.307 0-.556.277-.556.618 0 .341.249.618.556.618h1.568L6.599 9.202a.77.77 0 00-.152.636l.004.019c.064.314.314.536.603.536.664 0 1.058.3 1.058.834 0 .505-.317.814-.765.814-.32 0-.584-.095-.823-.275-.294-.222-.699-.26-.945.024-.204.236-.227.61-.008.828.435.435 1.008.716 1.76.716zM9.603 11.971c0 .69.502 1.25 1.123 1.25h.985c1.698 0 2.872-1.432 2.872-3.277 0-1.863-1.174-3.277-2.872-3.277h-.985c-.62 0-1.123.56-1.123 1.25v4.054zm1.563-.051c-.207 0-.374-.187-.374-.417V8.385c0-.23.167-.417.374-.417h.545c.973 0 1.629.815 1.629 1.976 0 1.18-.656 1.976-1.63 1.976h-.544z"
+      ></path>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M2.083 9.167c.345 0 .625.28.625.625v.347a7.153 7.153 0 006.594 7.131l-.266-.266a.833.833 0 010-1.179l.295-.295 2.3 2.3a.417.417 0 01-.295.712H9.861a8.403 8.403 0 01-8.403-8.403v-.347c0-.345.28-.625.625-.625zM17.916 10.834a.625.625 0 01-.625-.625V9.86a7.153 7.153 0 00-6.594-7.13l.267.266a.833.833 0 010 1.178l-.295.295-2.3-2.3a.417.417 0 01.294-.712h1.476a8.403 8.403 0 018.402 8.403v.348c0 .345-.28.625-.625.625z"
+        clipRule="evenodd"
+      ></path>
+    </svg>
+  );
+};
+
+export default VirtualTourIcon;

src/components/modals/MasterplanFilters.tsx

@@ -10,28 +10,45 @@ import { ICheckbox } from "../../types/checkbox";
 import { IMultirangeSlider } from "../../types/multirangeSlider";
 import { ISwitcher } from "../../types/switcher";
 import {
-  initialCheckboxes,
+  initialAparmentTypeCheckboxes,
   initialSliders,
   initialSwitchers,
+  initialViewCheckboxes,
 } from "../../consts/initialMasterplanFilters";
 
 const MasterplanFilters = () => {
   const { setModal } = useModal();
-  const [checkboxes, setCheckboxes] = useState<ICheckbox[]>(initialCheckboxes);
+  const [apartmentTypeCheckbox, setAparmentTypeCheckboxes] = useState<
+    ICheckbox[]
+  >(initialAparmentTypeCheckboxes);
+  const [viewCheckboxes, setViewCheckboxes] = useState<ICheckbox[]>(
+    initialViewCheckboxes
+  );
   const [sliders, setSliders] = useState<IMultirangeSlider[]>(initialSliders);
   const [switchers, setSwitchers] = useState<ISwitcher[]>(initialSwitchers);
 
   const handleOnCloseClick = () => setModal(null);
 
-  const handleOnCheckboxClick = (checkboxId: string) => {
+  const handleOnApartmentTypeCheckboxClick = (checkboxId: string) => {
-    const updatedCheckboxes = checkboxes.map((cbox) => {
+    const updatedCheckboxes = apartmentTypeCheckbox.map((cbox) => {
       if (checkboxId !== cbox.id) return cbox;
       const isSelected = !cbox.selected;
 
       return { ...cbox, selected: isSelected };
     });
 
-    setCheckboxes(updatedCheckboxes);
+    setAparmentTypeCheckboxes(updatedCheckboxes);
+  };
+
+  const handleOnViewCheckboxClick = (checkboxId: string) => {
+    const updatedCheckboxes = viewCheckboxes.map((cbox) => {
+      if (checkboxId !== cbox.id) return cbox;
+      const isSelected = !cbox.selected;
+
+      return { ...cbox, selected: isSelected };
+    });
+
+    setViewCheckboxes(updatedCheckboxes);
   };
 
   const handleOnSliderValueChange = (
@@ -63,33 +80,33 @@ const MasterplanFilters = () => {
   };
 
   const handleOnResetClick = () => {
-    setCheckboxes(initialCheckboxes);
+    setAparmentTypeCheckboxes(initialAparmentTypeCheckboxes);
+    setViewCheckboxes(initialViewCheckboxes);
     setSliders(initialSliders);
     setSwitchers(initialSwitchers);
   };
 
   return (
     <div className="absolute z-[99999901] top-0 left-0 w-screen bg-[#0D192266] h-screen backdrop-blur-[6px] items-center ">
-      <div className="h-full bg-[#F3F3F2] flex flex-col items-center justify-between w-[360px]">
+      <div className="h-screen bg-[#F3F3F2] flex flex-col items-center justify-between w-[360px] overflow-y-scroll">
         <div className="w-full py-6 px-6 flex flex-col items-center">
           <div className="flex justify-between border-b border-[#E2E2DC] w-full pb-4">
             <h2 className="text-subheadline-m font-semibold">Filters</h2>
             <Button
               icon={<CrossIcon />}
               buttonType="fab"
+              isCircleRounded
               onClick={handleOnCloseClick}
             />
           </div>
           <div className="flex flex-col pt-6 w-full">
-            <p className="text-[#0D1922] text-m font-semibold pb-4">
+            <p className="text-[#0D1922] text-s pb-4">Apartment type</p>
-              Apartment type
-            </p>
             <div className="flex flex-col gap-2">
-              {checkboxes.map((checkbox) => (
+              {apartmentTypeCheckbox.map((checkbox) => (
                 <Checkbox
                   checkbox={checkbox}
                   key={checkbox.id}
-                  onClick={handleOnCheckboxClick}
+                  onClick={handleOnApartmentTypeCheckboxClick}
                 />
               ))}
             </div>
@@ -98,12 +115,8 @@ const MasterplanFilters = () => {
             {sliders.map((slider) => (
               <div className="flex flex-col gap-2">
                 <div className="flex justify-between items-center">
-                  <p className="text-[#0D1922] text-m font-semibold ">
+                  <p className="text-[#0D1922] text-s ">{slider.title}</p>
-                    {slider.title}
+                  <p className="text-[#73787C] text-s">{slider.unit}</p>
-                  </p>
-                  <p className="text-[#73787C] text-m font-semibold">
-                    {slider.unit}
-                  </p>
                 </div>
                 <MultiRangeSlider
                   onChange={handleOnSliderValueChange}
@@ -121,6 +134,18 @@ const MasterplanFilters = () => {
               ))}
             </div>
           </div>
+          <div className="flex flex-col pt-6 w-full">
+            <p className="text-[#0D1922] text-s pb-4">View</p>
+            <div className="flex flex-col gap-2">
+              {viewCheckboxes.map((checkbox) => (
+                <Checkbox
+                  checkbox={checkbox}
+                  key={checkbox.id}
+                  onClick={handleOnViewCheckboxClick}
+                />
+              ))}
+            </div>
+          </div>
         </div>
 
         <div className="w-full justify-items-end p-6 flex gap-2 justify-center bg-white rounded-se-2xl rounded-ss-2xl">

src/components/modals/SendEnquryModal.tsx

@@ -0,0 +1,95 @@
+import useModal from "../../store/useModal";
+import Button from "../Button";
+import CrossIcon from "../icons/CrossIcon";
+import MasterInput from "../MasterInput";
+import MasterSelector from "../MasterSelector";
+
+const SendEnquiryModal = () => {
+  const { setModal } = useModal();
+
+  const handleOnCloseClick = () => {
+    setModal(null);
+  };
+
+  return (
+    <div className="absolute z-[99999998] 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 overflow-y-scroll">
+        <div className="flex flex-col w-full">
+          <div className="flex justify-between pb-4 border-b border-[#E2E2DC] ">
+            <h2 className="text-subheadline-m font-semibold">
+              Apartment purchase enquiry
+            </h2>
+            <Button
+              buttonType="tertiary"
+              icon={<CrossIcon />}
+              onClick={handleOnCloseClick}
+            />
+          </div>
+          <div className="py-4 border-b">
+            <div className="rounded-lg bg-white p-4 flex flex-col gap-4">
+              <div className="flex flex-col gap-1">
+                <p className="text-subheadline-s font-semibold text-[#0D1922]">
+                  1 bedroom, 609 Sqft{" "}
+                </p>
+                <p className="text-subheadline-s font-semibold text-[#0D192266]">
+                  AED 1,668,888
+                </p>
+              </div>
+              <div className="flex flex-col gap-1">
+                <p className="text-[#00BED7] text-s">1 bedroom, 609 Sqft </p>
+                <div className="flex gap-1 flex-col">
+                  <div className="text-[#73787C] flex gap-2 items-center w-fit">
+                    <p className="text-caption-m font-semibold leading-4">
+                      East Wing
+                    </p>
+                    <div className="w-1 h-1 bg-[#E2E2DC] rounded-full"></div>
+                    <p className="text-caption-m font-semibold leading-4">
+                      Floor 11
+                    </p>
+                    <div className="w-1 h-1 bg-[#E2E2DC] rounded-full"></div>
+                    <p className="text-caption-m font-semibold leading-4">
+                      № 213
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <h2 className="text-subheadline-s text-[#0D1922] font-semibold py-6">
+            Specify the client data to send the request
+          </h2>
+          <div className="flex flex-col gap-4 pb-4">
+            <MasterInput title="Name" isRequired={true} placeholder="Name" />
+            <MasterInput
+              title="Email"
+              isRequired={false}
+              placeholder="sample@mail.com"
+            />
+            <MasterSelector title="Contact number" />
+          </div>
+        </div>
+        <div>
+          <div className="flex gap-4 border w-full">
+            <Button
+              onClick={handleOnCloseClick}
+              text="Cancel"
+              buttonType="cta"
+              className="w-full justify-center"
+            />
+            <Button
+              text="Send"
+              buttonType="fab"
+              className="w-full justify-center"
+            />
+          </div>
+          <p className="text-caption-m font-semibold text-[#0D192266] text-center pt-4">
+            By clicking on the “Send” button, you accept the privacy policy and
+            consent to the processing of personal data.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export { SendEnquiryModal };

src/components/modals/mobile/MasterplanFiltersModal.tsx

@@ -9,16 +9,22 @@ import Switch from "../../Switch";
 import ResetIcon from "../../icons/ResetIcon";
 import { useSwipeable } from "react-swipeable";
 import {
-  initialCheckboxes,
+  initialAparmentTypeCheckboxes,
   initialSliders,
   initialSwitchers,
+  initialViewCheckboxes,
 } from "../../../consts/initialMasterplanFilters";
+import { ICheckbox } from "../../../types/checkbox";
 
 const MasterplanFiltersModal = () => {
   const { setModal } = useModal();
   const { setIsAnimate } = useContext(MobileModalWrapperContext);
-  const [apartmentTypeCheckboxes, setApartmentTypeCheckboxes] =
+  const [apartmentTypeCheckboxes, setApartmentTypeCheckboxes] = useState<
-    useState(initialCheckboxes);
+    ICheckbox[]
+  >(initialAparmentTypeCheckboxes);
+  const [viewCheckboxes, setViewCheckboxes] = useState<ICheckbox[]>(
+    initialViewCheckboxes
+  );
   const [switchers, setSwitchers] = useState(initialSwitchers);
   const [multirangeSliders, setMultirangeSliders] = useState(initialSliders);
   const handlers = useSwipeable({
@@ -70,6 +76,17 @@ const MasterplanFiltersModal = () => {
     setMultirangeSliders(updatedSliders);
   };
 
+  const handleOnViewCheckboxClick = (checkboxId: string) => {
+    const updatedCheckboxes = viewCheckboxes.map((cbox) => {
+      if (checkboxId !== cbox.id) return cbox;
+      const isSelected = !cbox.selected;
+
+      return { ...cbox, selected: isSelected };
+    });
+
+    setViewCheckboxes(updatedCheckboxes);
+  };
+
   const handleOnShowApartmentClick = () => {
     if (setIsAnimate) {
       setIsAnimate(false);
@@ -81,14 +98,15 @@ const MasterplanFiltersModal = () => {
   };
 
   const handleOnResetClick = () => {
+    setViewCheckboxes(initialViewCheckboxes);
     setSwitchers(initialSwitchers);
     setMultirangeSliders(initialSliders);
-    setApartmentTypeCheckboxes(initialCheckboxes);
+    setApartmentTypeCheckboxes(initialAparmentTypeCheckboxes);
   };
 
   return (
     <div
-      className="bg-[#F3F3F2] rounded-ss-lg rounded-se-lg h-full p-6 flex flex-col gap-6"
+      className="bg-[#F3F3F2] rounded-ss-2xl rounded-se-2xl h-full p-6 flex flex-col gap-6"
       {...handlers}
     >
       <div className="flex justify-between pb-6 border-b">
@@ -104,9 +122,7 @@ const MasterplanFiltersModal = () => {
         />
       </div>
       <div className="flex flex-col w-full">
-        <p className="text-[#0D1922] text-m font-semibold pb-4">
+        <p className="text-[#0D1922] text-s pb-4">Apartment type</p>
-          Apartment type
-        </p>
         <div className="grid grid-cols-2 gap-2">
           {apartmentTypeCheckboxes.map((checkbox) => (
             <Checkbox
@@ -121,12 +137,8 @@ const MasterplanFiltersModal = () => {
         {multirangeSliders.map((slider) => (
           <div className="flex flex-col gap-3">
             <div className="flex justify-between items-center">
-              <p className="text-[#0D1922] text-m font-semibold ">
+              <p className="text-[#0D1922] text-s ">{slider.title}</p>
-                {slider.title}
+              <p className="text-[#73787C] text-s">{slider.unit}</p>
-              </p>
-              <p className="text-[#73787C] text-m font-semibold">
-                {slider.unit}
-              </p>
             </div>
             <MultiRangeSlider
               onChange={handleOnSliderValueChange}
@@ -143,6 +155,18 @@ const MasterplanFiltersModal = () => {
           ))}
         </div>
       </div>
+      <div className="flex flex-col w-full">
+        <p className="text-[#0D1922] text-s pb-4">Apartment type</p>
+        <div className="grid grid-cols-2 gap-2">
+          {viewCheckboxes.map((checkbox) => (
+            <Checkbox
+              checkbox={checkbox}
+              key={checkbox.id}
+              onClick={handleOnViewCheckboxClick}
+            />
+          ))}
+        </div>
+      </div>
       <div className="flex justify-between">
         <p className="text-[#00BED7] text-m">195 apartments found</p>
         <Button

src/components/modals/mobile/MobileModalWrapper.tsx

@@ -30,8 +30,8 @@ const MobileModalWrapper = ({ children }: MobileModalWrapperProps) => {
 
   return (
     <div
-      className={`h-screen w-screen pt-20 absolute z-[99999999] top-0 duration-300 ease-in-out ${
+      className={`h-screen w-screen pt-20 absolute z-[99999999] top-0 transition-all duration-300 ease-in-out ${
-        isAnimate ? "backdrop-blur-sm" : "backdrop-blur-none"
+        isAnimate ? "backdrop-blur-sm bg-[#0D192266]" : "backdrop-blur-none"
       }`}
     >
       <div

src/components/modals/mobile/SendEnquiryMobileModal.tsx

@@ -0,0 +1,131 @@
+import { useSwipeable } from "react-swipeable";
+import Button from "../../Button";
+import useModal from "../../../store/useModal";
+import CrossIcon from "../../icons/CrossIcon";
+import { useContext } from "react";
+import { MobileModalWrapperContext } from "./MobileModalWrapper";
+import MasterInput from "../../MasterInput";
+import MasterSelector from "../../MasterSelector";
+
+const SendEnquiryMobileModal = () => {
+  const { setModal } = useModal();
+  const { setIsAnimate } = useContext(MobileModalWrapperContext);
+
+  const handleOnCrossClick = () => {
+    if (setIsAnimate) {
+      setIsAnimate(false);
+      const timeout = setTimeout(() => {
+        setModal(null);
+        clearTimeout(timeout);
+      }, 300);
+    }
+  };
+
+  const handlers = useSwipeable({
+    onSwipedDown: () => handleOnCrossClick(),
+  });
+
+  return (
+    <div
+      className="bg-[#F3F3F2] rounded-ss-2xl rounded-se-2xl h-full p-6 flex flex-col"
+      {...handlers}
+    >
+      <div className="flex justify-between pb-6 border-b">
+        <h2 className="text-[#0D1922] text-subheadline-m font-semibold">
+          Apartment purchase enquiry
+        </h2>
+        <Button
+          buttonType="secondary"
+          isCircleRounded
+          icon={<CrossIcon />}
+          className="text-[#0D1922B2]"
+          onClick={handleOnCrossClick}
+        />
+      </div>
+      <div className="py-6">
+        <div className="bg-white rounded-2xl p-6 grid grid-cols-8">
+          <div className="col-span-4 aspect-square">
+            <img src="/images/layout-1.png" alt="" className="w-full" />
+          </div>
+          <div className="col-span-4 flex flex-col justify-between">
+            <h2 className="text-[#0D1922] text-subheadline-s font-semibold">
+              Studio Flex, 607,08 Sqft
+            </h2>
+            <p className="text-s text-[#00BED7] pt-2">Rove Home Marasi Drive</p>
+            <div className="text-[#0D1922B2] text-caption-m font-semibold flex gap-2 items-center pt-1 border-b pb-4">
+              <p>East Wing</p>
+              <div className="w-1 h-1 rounded-full bg-[#E2E2DC]"></div>
+              <p>Floor 11</p>
+              <div className="w-1 h-1 rounded-full bg-[#E2E2DC]"></div>
+              <p>E-503</p>
+            </div>
+            <div className="flex flex-col gap-3 pt-4">
+              <div className="flex justify-between">
+                <p className="text-[#0D192266] text-m">Total Area</p>
+                <p className="text-m text-[#0D1922] text-right">607,08 Sqft</p>
+              </div>
+              <div className="flex justify-between">
+                <p className="text-[#0D192266] text-m">Suite Area</p>
+                <p className="text-m text-[#0D1922] text-right">485,67 Sqft</p>
+              </div>
+              <div className="flex justify-between">
+                <p className="text-[#0D192266] text-m">Balcony Area</p>
+                <p className="text-m text-[#0D1922] text-right">121,42 Sqft</p>
+              </div>
+              <div className="flex justify-between">
+                <p className="text-[#0D192266] text-m">Status</p>
+                <p className="text-m text-[#0D1922] text-right">Available</p>
+              </div>
+              <div className="flex justify-between">
+                <p className="text-[#0D192266] text-m">Parking Space</p>
+                <p className="text-m text-[#0D1922] text-right">1</p>
+              </div>
+            </div>
+            <p className="text-[#00BED7] font-semibold text-subheadline-s pt-6">
+              AED 1,668,888
+            </p>
+          </div>
+        </div>
+      </div>
+      <div className="grid grid-cols-8 gap-x-4 pb-4">
+        <h2 className="col-span-4 text-subheadline-s font-semibold">
+          Specify the client data to send the request
+        </h2>
+        <div className="col-span-4 col-start-1 pt-6">
+          <MasterInput title="Name" isRequired={true} placeholder="Name" />
+        </div>
+        <div className="col-span-4 pt-6">
+          <MasterInput
+            title="Email"
+            isRequired={false}
+            placeholder="sample@mail.com"
+          />
+        </div>
+        <div className="col-span-4 pt-4">
+          <MasterSelector title="Contact number" />
+        </div>
+      </div>
+      <div>
+        <div className="flex gap-4 border-t w-full pt-4">
+          <Button
+            onClick={handleOnCrossClick}
+            text="Cancel"
+            buttonType="cta"
+            className="w-full justify-center"
+          />
+          <Button
+            text="Send"
+            buttonType="fab"
+            className="w-full justify-center"
+          />
+        </div>
+        <p className="text-caption-m font-semibold text-[#0D192266] text-center pt-4">
+          By clicking on the “Send” button, you accept the privacy policy and
+          consent to the processing of personal data.
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default SendEnquiryMobileModal;

src/components/searchApartment/ApartmentLayout.tsx

@@ -13,7 +13,7 @@ const ApartmentLayout = () => {
     setCurrentLabel(label);
   };
   return (
-    <div className="p-10 pt-6 rounded-lg bg-white flex flex-col items-center gap-8 relative h-full">
+    <div className="p-10 pt-6 rounded-2xl bg-white flex flex-col items-center gap-8 relative h-full">
       <div className="w-full xl:px-[304px] sm:px-24 h-full">
         <img
           className="w-full h-full object-cover"

src/components/searchApartment/ApartmentSidebar.tsx

@@ -1,9 +1,15 @@
+import { useNavigate } from "react-router-dom";
 import Button from "../Button";
 
 const ApartmentSidebar = () => {
+  const navigate = useNavigate();
+
+  const handleOn3DTourClick = () => {
+    navigate(`../virtual-tour/apartments-studio-1`);
+  };
   return (
     <div className="flex lg:flex-col gap-2 h-full">
-      <div className="rounded-lg overflow-clip lg:flex-1 flex-none relative">
+      <div className="rounded-2xl overflow-clip lg:flex-1 flex-none relative">
         <p className="absolute top-[30px] left-6 font-semibold text-m text-white">
           View from window
         </p>
@@ -14,7 +20,7 @@ const ApartmentSidebar = () => {
         />
       </div>
       <div className="flex gap-2 flex-col flex-1 lg:flex-none">
-        <div className="flex flex-col rounded-lg bg-white p-6 gap-6 ">
+        <div className="flex flex-col rounded-2xl bg-white p-6 gap-6 ">
           <h2 className="font-semibold text-[#0D1922] text-subheadline-s">
             Parameters
           </h2>
@@ -41,12 +47,13 @@ const ApartmentSidebar = () => {
             </div>
           </div>
         </div>
-        <div className="rounded-lg bg-white flex flex-col p-6 gap-4 flex-1 lg:flex-none justify-between">
+        <div className="rounded-2xl bg-white flex flex-col p-6 gap-4 flex-1 lg:flex-none justify-between">
           <p className="text-[#00BED7] font-semibold text-subheadline-s leading-7">
             AED 1,668,888
           </p>
           <div className="flex gap-2">
             <Button
+              onClick={handleOn3DTourClick}
               text="3D Tour"
               buttonType="secondary"
               className="w-full flex justify-center"

src/components/searchApartment/SimilarAppartmentCard.tsx

@@ -27,7 +27,7 @@ const SimilarAppartmentCard = ({ layoutCard, elementRef }: LayoutCardProps) => {
   return (
     <div
       ref={elementRef}
-      className="bg-white flex flex-col p-4 rounded-lg gap-4 cursor-pointer select-none touch-none"
+      className="bg-white flex flex-col p-4 rounded-2xl gap-4 cursor-pointer select-none touch-none"
       onClick={handleOnClick}
     >
       <div className="flex gap-4  justify-between">

src/components/searchApartment/StudioDescriptionSection.tsx

@@ -0,0 +1,42 @@
+const StudioDescriptionSection = () => {
+  return (
+    <section className="grid grid-cols-12 lg:gap-4 gap-3">
+      <div className="bg-white rounded-2xl lg:col-span-3 col-span-6 flex flex-col justify-between p-8">
+        <div className="flex flex-col">
+          <h2 className="text-[#0D1922] text-subheadline-l font-bold">
+            Studio flex
+          </h2>
+          <p className="text-[#00BED7] text-subheadline-s font-semibold">
+            Live in the future, today.
+          </p>
+          <div className="flex flex-col gap-[10px]">
+            <p className="text-m text-[#73787C]">
+              Live in the future, today. In Studio Flex explore the ORI Cloud
+              Bed, optimizing your living space with functionality and smart
+              living.
+            </p>
+            <p className="text-m text-[#73787C]">
+              Every inch is designed to provide more space for comfort and
+              convenience. This feature increase your unit size by 33%
+            </p>
+          </div>
+        </div>
+        <div className="flex flex-col gap-1">
+          <p className="text-[#0D1922B2] text-s">Up to 365,54 Sqft </p>
+          <p className="text-subheadline-s font-semibold text-[#00BED7]">
+            from AED 1,668,888
+          </p>
+        </div>
+      </div>
+      <div className="lg:col-span-9 rounded-2xl overflow-clip col-span-6">
+        <img
+          src="/images/searchApartment/StudioFlex.png"
+          alt=""
+          className="w-full object-cover h-full"
+        />
+      </div>
+    </section>
+  );
+};
+
+export default StudioDescriptionSection;

src/components/searchPage/LayoutCard.tsx

@@ -25,7 +25,7 @@ const LayoutCard = ({ layoutCard }: LayoutCardProps) => {
 
   return (
     <div
-      className="bg-white flex flex-col p-4 rounded-lg gap-4 cursor-pointer select-none"
+      className="bg-white flex flex-col p-4 rounded-2xl gap-4 cursor-pointer select-none"
       onClick={handleOnClick}
     >
       <div className="flex gap-4  justify-between">

src/consts/initialMasterplanFilters.ts

@@ -31,16 +31,30 @@ const initialSliders: IMultirangeSlider[] = [
   },
 ];
 
-const initialCheckboxes: ICheckbox[] = [
+const initialAparmentTypeCheckboxes: ICheckbox[] = [
   { title: "Studio Flex", id: "1", disabled: true, selected: false },
   { title: "Studio", id: "2", selected: false },
   { title: "1 Bedroom", id: "3", selected: false },
   { title: "2 Bedroom", id: "4", selected: false },
 ];
 
+const initialViewCheckboxes: ICheckbox[] = [
+  { title: "Burj Khalifa", id: "1", disabled: true, selected: false },
+  { title: "Amenties", id: "2", selected: false },
+  { title: "Downtown", id: "3", selected: false },
+  { title: "Canal", id: "4", selected: false },
+  { title: "Business Bay", id: "5", selected: false },
+  { title: "Park", id: "6", selected: false },
+];
+
 const initialSwitchers: ISwitcher[] = [
   { id: "1", title: "Not the first floor", isSwitched: false },
   { id: "2", title: "Not the top floor", isSwitched: false },
 ];
 
-export { initialCheckboxes, initialSliders, initialSwitchers };
+export {
+  initialAparmentTypeCheckboxes,
+  initialSliders,
+  initialSwitchers,
+  initialViewCheckboxes,
+};

src/index.css

@@ -82,6 +82,7 @@ html {
 
   .mobile-subheadline-m {
   }
+
   .rubber-headline-indent {
     text-indent: clamp(209px, -0.4197rem + 16.8396vw, 842px);
   }

src/pages/SearchApartment.tsx

@@ -3,11 +3,12 @@ import ButtonPanel from "../components/searchApartment/ButtonPanel";
 import ApartmentLayout from "../components/searchApartment/ApartmentLayout";
 import ApartmentSidebar from "../components/searchApartment/ApartmentSidebar";
 import SimilarSlider from "../components/searchApartment/SimilarSlider";
+import StudioDescriptionSection from "../components/searchApartment/StudioDescriptionSection";
 
 const SearchApartment = () => {
   return (
     <div className="overflow-scroll h-screen w-screen pt-14">
-      <div className="grid grid-cols-9 border px-4 pt-6 pb-16 gap-4">
+      <div className="grid grid-cols-9 px-4 pt-6 pb-16 gap-4">
         <div className="flex flex-col lg:col-span-7 col-span-full">
           <ButtonPanel />
           <ApartmentLayout />
@@ -15,6 +16,9 @@ const SearchApartment = () => {
         <div className="lg:col-span-2 rounded-lg col-span-full">
           <ApartmentSidebar />
         </div>
+        <div className="col-span-full">
+          <StudioDescriptionSection />
+        </div>
         <div className="col-span-full">
           <SimilarSlider />
         </div>