Merge pull request 'danil merge' (#1) from danil into master

Reviewed-on: http://192.168.1.163:3000/zojgame/IRTH/pulls/1

client/.env

@@ -1,4 +0,0 @@
-# VITE_SERVER_API=https://irth.graff.tech/api
-# VITE_SERVER_API=http://192.168.1.158:4003
-VITE_SERVER_API=http://194.26.138.94:4002
-# VITE_SERVER_API=http://194.26.138.94:4002

client/.env.development

@@ -0,0 +1 @@
+VITE_SERVER_API=http://localhost:4002

client/.env.production

@@ -0,0 +1 @@
+VITE_SERVER_API=https://irth.graff.tech/api

client/package.json

@@ -16,6 +16,7 @@
     "@uidotdev/usehooks": "^2.4.1",
     "gsap": "^3.12.5",
     "ky": "^1.3.0",
+    "lodash": "^4.17.21",
     "react": "^18.2.0",
     "react-device-detect": "^2.2.3",
     "react-dom": "^18.2.0",
@@ -31,6 +32,7 @@
     "zustand": "^4.5.2"
   },
   "devDependencies": {
+    "@types/lodash": "^4.17.7",
     "@types/node": "^20.14.8",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",

client/src/components/ApartmentSidebar.tsx

@@ -54,12 +54,12 @@ const ApartmentSidebar = ({ currentApartment }: ApartmentSidebarProps) => {
             <div className="flex justify-between text-m">
               <p className="text-[#73787C]">Size</p>
               <p className="text-[#0D1922]">
-                {currentApartment.Total_Area_Sqft} Sqft
+                {Number(currentApartment.Total_Area_Sqft).toFixed(2)} Sqft
               </p>
             </div>
           </div>
           <p className="text-[#00BED7] font-semibold text-subheadline-s leading-7">
-            Unvailiable
+            Unavailable
             {/* AED {formatNumber(1668888, ",", 3, 1)} */}
           </p>
         </div>

client/src/components/Checkbox2.tsx

@@ -0,0 +1,35 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { useState } from "react";
+import CheckIcon from "./icons/CheckIcon";
+
+interface Props {
+  filterName?: string;
+  defaultIsChecked?: boolean;
+  onChange: (isChecked: boolean, filterName: string) => void;
+}
+
+function Checkbox2({ filterName, defaultIsChecked, onChange }: Props) {
+  const [isChecked, setIsChecked] = useState<boolean>(
+    defaultIsChecked || false
+  );
+
+  function handleClick() {
+    setIsChecked((prev) => {
+      onChange(!prev, filterName || "");
+      return !prev;
+    });
+  }
+
+  return (
+    <div
+      className={`w-6 h-6 rounded flex items-center justify-center text-white cursor-pointer ${
+        isChecked ? "bg-[#00BED7]" : "bg-[#F3F3F2]"
+      }`}
+      onClick={handleClick}
+    >
+      {isChecked && <CheckIcon />}
+    </div>
+  );
+}
+
+export default Checkbox2;

client/src/components/Logo.tsx

@@ -1,4 +1,3 @@
-import { useNavigate } from "react-router-dom";
 import LogoIcon from "./icons/LogoIcon";
 
 interface LogoProps {
@@ -6,19 +5,13 @@ interface LogoProps {
 }
 
 const Logo = ({ className = "" }: LogoProps) => {
-  const navigate = useNavigate();
-
-  const handleOnLogoClick = () => {
-    navigate("../");
-  };
-
   return (
-    <div
+    <a
+      href="/"
       className={`text-[#0D1922] py-4 px-6 border-r border-r-[#F3F3F2] cursor-pointer select-none ${className}`}
-      onClick={handleOnLogoClick}
     >
       <LogoIcon />
-    </div>
+    </a>
   );
 };
 

client/src/components/UnitTypesPage/UnitTypeCard.tsx

@@ -0,0 +1,37 @@
+interface Props {
+  desc: string;
+  imageSrc: string;
+  onClick: () => void;
+}
+
+function UnitTypeCard({ desc, imageSrc, onClick }: Props) {
+  return (
+    <div
+      className="card space-y-6 bg-white p-4 rounded-2xl cursor-pointer select-none"
+      onClick={onClick}
+    >
+      <div className="flex items-start justify-between">
+        <div className="space-y-1">
+          <p className="text-sm text-[#00BED7]">Rove Home Marasi Drive</p>
+          <div className="text-xs font-semibold flex items-center gap-2">
+            <p>East Wing</p>
+            <div className="w-1 h-1 bg-[#E2E2DC] rounded-full"></div>
+            <p>Floor 11-35</p>
+          </div>
+        </div>
+        {/* <div className="text-white bg-[#00BED7] text-xs font-semibold px-2 py-[3px] rounded-full">
+          234 units
+        </div> */}
+      </div>
+      <div className="flex justify-center">
+        <img src={imageSrc} alt="" className="h-[294px] pointer-events-none" />
+      </div>
+      <div className="space-y-1">
+        <p className="text-sm">{desc}</p>
+        {/* <p className="text-xl text-[#00BED7] font-semibold">Unavailable</p> */}
+      </div>
+    </div>
+  );
+}
+
+export default UnitTypeCard;

client/src/components/aboutComplex/LivingSolutionSlider.tsx

@@ -8,10 +8,9 @@ import LeftArrowSliderIcon from "../icons/LeftArrowSliderIcon";
 import RightArrowSliderIcon from "../icons/RightArrowSliderIcon";
 
 const images: Image[] = [
-  { id: "1", src: "/images/aboutCompany/livingSolutionsSlider/1.png" },
-  { id: "2", src: "/images/aboutCompany/livingSolutionsSlider/2.png" },
-  { id: "3", src: "/images/aboutCompany/livingSolutionsSlider/3.png" },
-  { id: "4", src: "/images/aboutCompany/livingSolutionsSlider/4.png" },
+  { id: "1", src: "/images/aboutCompany/livingSolutionsSlider/1.jpg" },
+  { id: "2", src: "/images/aboutCompany/livingSolutionsSlider/2.jpg" },
+  { id: "3", src: "/images/aboutCompany/livingSolutionsSlider/3.jpg" },
 ];
 
 const getGapOffset = (screenWidth: number) => {
@@ -80,11 +79,11 @@ const LivingSolutionSlider = () => {
         >
           {images.map((image) => (
             <img
+              key={image.id}
               ref={imageRef}
               src={image.src}
               alt=""
-              key={image.id}
-              className="rounded-2xl sm:aspect-[6/5] object-cover 2xl:w-[calc(100vw*1/2)] xl:w-[calc(100vw*5/12)] pointer-events-none select-none w-[calc(100%-16px)]"
+              className="rounded-2xl 2xl:w-[calc(100vw*1/2)] xl:w-[calc(100vw*5/12)] pointer-events-none select-none w-[calc(100%-16px)]"
             />
           ))}
         </div>

client/src/components/aboutComplex/RoveHomeSlider.tsx

@@ -15,7 +15,7 @@ interface IRoveHomeSlide {
 const rovehomeSlides: IRoveHomeSlide[] = [
   {
     id: "1",
-    src: "/images/aboutCompany/roveHomeSlider/1.png",
+    src: "/images/aboutCompany/roveHomeSlider/1.jpg",
     title: "Rove Home",
     desc2:
       "We’ve handpicked prime locations to ensure you get the very best. From interiors that uplift and energise, and amenities that are thoughtful and engaging to contemporarily stylish yet cosy apartments, we decided that this is the kind of place where we’d like to live – so we set out to build exactly that. We think you’ll agree.",
@@ -24,7 +24,7 @@ const rovehomeSlides: IRoveHomeSlide[] = [
   },
   {
     id: "2",
-    src: "/images/aboutCompany/roveHomeSlider/2.png",
+    src: "/images/aboutCompany/roveHomeSlider/2.jpg",
     title: "Marasi Dri",
     desc2:
       "Marasi Drive’s proximity to Downtown Dubai, grants easy access to its iconic attractions, its strategic location ensures seamless connectivity to Al Khail Road and Sheikh Zayed Road, facilitating effortless travel across the city and beyond",
@@ -33,7 +33,7 @@ const rovehomeSlides: IRoveHomeSlide[] = [
   },
   {
     id: "3",
-    src: "/images/aboutCompany/roveHomeSlider/3.png",
+    src: "/images/aboutCompany/roveHomeSlider/3.jpg",
     title: "A home for the young and young-at-heart",
     desc2:
       "Enjoy every facet of contemporary lifestyle living, prioritizing value, efficiency, and a vibrant atmosphere. It is more than just a home.",
@@ -42,7 +42,7 @@ const rovehomeSlides: IRoveHomeSlide[] = [
   },
   {
     id: "4",
-    src: "/images/aboutCompany/roveHomeSlider/4.png",
+    src: "/images/aboutCompany/roveHomeSlider/4.jpg",
     title: "Unique and innovative",
     desc2:
       "Our commitment to shaping a space that tickles your artistic sensibilities and ignites your love for innovation is unparalleled. It’s a place that would surely excite and delight Rovers like no other!",
@@ -98,7 +98,7 @@ const RoveHomeSlider = () => {
       {...handlers}
     >
       {/* <div className="absolute w-full h-full z-50" ></div> */}
-      <div className="bg-[#F3F3F2] select-none p-8 z-50 xl:col-span-3 col-span-6 xl:col-start-3 rounded-2xl xl:min-h-[520px] sm:flex hidden flex-col justify-between">
+      <div className="bg-[#F3F3F2] select-none p-8 z-50 xl:col-span-3 col-span-6 xl:col-start-3 rounded-2xl xl:min-h-[528px] sm:flex hidden flex-col justify-between">
         <div>
           <h2 className="text-subheadline-m font-semibold text-[#00BED7] pb-4 ">
             {rovehomeSlides[offset * -1].title}
@@ -127,10 +127,9 @@ const RoveHomeSlider = () => {
           style={{ transform: `translateX(${offset * imageWidth}px)` }}
         >
           {rovehomeSlides.map((slide) => (
-            <div className="flex w-screen flex-col select-none">
+            <div key={slide.id} className="flex w-screen flex-col select-none">
               <img
                 ref={imageRef}
-                key={slide.id}
                 src={slide.src}
                 alt=""
                 className="select-none pointer-events-none xl:aspect-video sm:aspect-[7.6/10] aspect-video object-cover xl:h-auto"
@@ -148,6 +147,7 @@ const RoveHomeSlider = () => {
         <div className="flex gap-1 justify-center pt-4 ">
           {rovehomeSlides.map((_, index) => (
             <div
+              key={index}
               className={`rounded-full transition-all duration-300 ease-in-out sm:hidden ${
                 offset === -1 * index
                   ? "bg-[#0D1922] w-6"

client/src/components/apartmentPage/SimilarAppartmentCard.tsx

@@ -43,11 +43,11 @@ const SimilarAppartmentCard = ({ layoutCard, elementRef }: LayoutCardProps) => {
       </div>
       <div className="flex flex-col">
         <p className="text[#0D1922] text-s">
-          {Unit_Type}, {Total_Area_Sqft} Sqft
+          {Unit_Type}, {Number(Total_Area_Sqft).toFixed(2)} Sqft
         </p>
         <p className="text-[#00BED7] text-m font-bold">
           {/* AED {formatNumber(cost, ",", 3, 1)} */}
-          Unavailiable
+          Unavailable
         </p>
       </div>
     </div>

client/src/components/apartmentPage/SimilarSlider.tsx

@@ -96,9 +96,9 @@ const SimilarSlider = () => {
                         .slice(index * cols, cols + index * cols)
                         .map((card) => (
                           <SimilarAppartmentCard
+                            key={card.id}
                             elementRef={cardRef}
                             layoutCard={card}
-                            key={card.id}
                           />
                         ))}
                     </div>

client/src/components/apartmentPage/StudioDescriptionSection.tsx

@@ -21,8 +21,8 @@ const apartmentDescriptions: IApartmentDesc[] = [
     secondParagraph:
       "Every inch is designed to provide more space for comfort and convenience. This feature increase your unit size by 33%",
     id: "1",
-    totalArea: "Up to 365,54 Sqft",
-    cost: "Unavailiable",
+    totalArea: "Up to 365.54 Sqft",
+    cost: "Unavailable",
     apartmentType: "Studio Flex",
   },
   {
@@ -32,8 +32,8 @@ const apartmentDescriptions: IApartmentDesc[] = [
     secondParagraph:
       "When folded, it unveils a spacious living room creating a cohesive space that blends both style and functionality.",
     id: "2",
-    totalArea: "Up to 416,13 Sqft",
-    cost: "Unavailiable",
+    totalArea: "Up to 416.13 Sqft",
+    cost: "Unavailable",
     apartmentType: "Studio Squared",
   },
   {
@@ -43,8 +43,8 @@ const apartmentDescriptions: IApartmentDesc[] = [
     secondParagraph:
       "With pocket walls that disappear and a Flexibed that seamlessly converts, you can transform your living room into an extra bedroom, anytime you want!",
     id: "3",
-    totalArea: "Up to 770,05 Sqft",
-    cost: "Unavailiable",
+    totalArea: "Up to 770.05 Sqft",
+    cost: "Unavailable",
     apartmentType: "1 BR Squared",
   },
   {
@@ -54,8 +54,8 @@ const apartmentDescriptions: IApartmentDesc[] = [
     secondParagraph:
       "Whether you want to add a multipurpose spare room or double up your living space as a bedroom - every inch of space feels larger and works exactly how you want.",
     id: "4",
-    totalArea: "Up to 1057,55 Sqft",
-    cost: "Unavailiable",
+    totalArea: "Up to 1057.55 Sqft",
+    cost: "Unavailable",
     apartmentType: "2 BR Squared",
   },
 ];

client/src/components/companyPage/InvestmentPortfolio.tsx

@@ -21,8 +21,8 @@ const InvestmentPortfolio = () => {
 
         return (
           <div
-            className={`flex flex-col ${styles} sm:col-span-6 col-span-full`}
             key={project.id}
+            className={`flex flex-col ${styles} sm:col-span-6 col-span-full`}
           >
             <img
               src={project.image}

client/src/components/companyPage/OurValues/Slider.tsx

@@ -78,10 +78,10 @@ const Slider = () => {
         >
           {images.map((image) => (
             <img
+              key={image.id}
               ref={imageRef}
               src={image.src}
               alt=""
-              key={image.id}
               className="rounded-2xl sm:aspect-[6/5] object-cover 2xl:w-[calc(100vw*1/2)] xl:w-[calc(100vw*5/12)] pointer-events-none select-none w-[calc(100%-16px)]"
             />
           ))}

client/src/components/complexPage/ComplexTopPanel.tsx

@@ -56,7 +56,7 @@ const ComplexTopPanel = () => {
   };
 
   const handleOnAboutComplexClick = () => {
-    navigate(`../aboutComplex`);
+    navigate(`../about-projects`);
   };
 
   return (

client/src/components/complexPage/SequenceSlider.tsx

@@ -179,49 +179,37 @@ function SequenceSlider({ path }: SequenceSliderProps) {
         <div
           className={`duration-150 transition-opacity ease-in-out opacity-100`}
         >
-          {Array.from({ length: arrayLength }).map((_, index) => {
-            // const imgSrc = `${path}/${
-            //   !isAnimate && keyframes.includes(index + 1)
-            //     ? `${index + 1}-4k.jpg`
-            //     : `${index + 1}.jpg`
-            // }`;
-            return (
-              <>
-                <img
-                  key={index}
-                  width={`${width}px`}
-                  height={`${width}px`}
-                  // src={imgSrc}
-                  src={`${path}/${index + 1}.${isMobile ? "jpg" : "jpg"}`}
-                  alt=""
-                  className={`absolute z-10 ${
-                    index === selectedImageRightIndex
-                      ? "opacity-100"
-                      : "opacity-0"
-                  }`}
-                  onLoad={handleLoad}
-                />
-              </>
-            );
-          })}
+          {Array.from({ length: arrayLength }).map((_, index) => (
+            <img
+              key={index}
+              width={`${width}px`}
+              height={`${width}px`}
+              src={`${path}/${index + 1}.${isMobile ? "jpg" : "jpg"}`}
+              alt=""
+              className={`absolute z-10 ${
+                index === selectedImageRightIndex ? "opacity-100" : "opacity-0"
+              }`}
+              onLoad={handleLoad}
+            />
+          ))}
+
           {keyframes.map((keyframe, index) => {
             const imgSrc = `${path}/${
               keyframe === selectedImageRightIndex
                 ? `${keyframe + 1}-4k.jpg`
                 : ``
             }`;
+
             return (
-              <>
-                <img
-                  key={index}
-                  width={`${width}px`}
-                  height={`${width}px`}
-                  src={imgSrc}
-                  // src={`${path}/${index + 1}.${isMobile ? "jpg" : "jpg"}`}
-                  alt=""
-                  className={`absolute z-[11]`}
-                />
-              </>
+              <img
+                key={index}
+                width={`${width}px`}
+                height={`${width}px`}
+                src={imgSrc}
+                // src={`${path}/${index + 1}.${isMobile ? "jpg" : "jpg"}`}
+                alt=""
+                className={`absolute z-[11]`}
+              />
             );
           })}
         </div>

client/src/components/complexWingPage/FloorDescription.tsx

@@ -51,7 +51,7 @@ const FloorDescription = ({
                 </div>
                 <p className="text-s text-[#73787C] w-full">Studio Flex</p>
               </div>
-              <p className="text-s text-[#0D1922] text-nowrap">Unvailiable</p>
+              <p className="text-s text-[#0D1922] text-nowrap">Unavailable</p>
             </div>
             <div className="flex items-center justify-between gap-8">
               <div className="flex gap-2 items-center">
@@ -66,7 +66,7 @@ const FloorDescription = ({
                 </div>
                 <p className="text-s text-[#73787C]">Studio</p>
               </div>
-              <p className="text-s text-[#0D1922] text-nowrap">Unvailiable</p>
+              <p className="text-s text-[#0D1922] text-nowrap">Unavailable</p>
             </div>
             <div className="flex items-center justify-between gap-8">
               <div className="flex gap-2 items-center">
@@ -81,7 +81,7 @@ const FloorDescription = ({
                 </div>
                 <p className="text-s text-[#73787C]">1 Bedroom</p>
               </div>
-              <p className="text-s text-[#0D1922] text-nowrap">Unvailiable</p>
+              <p className="text-s text-[#0D1922] text-nowrap">Unavailable</p>
             </div>
             <div className="flex items-center justify-between gap-8">
               <div className="flex gap-2 items-center">
@@ -98,7 +98,7 @@ const FloorDescription = ({
                   2 Bedroom, Type A
                 </p>
               </div>
-              <p className="text-s text-[#0D1922] text-nowrap">Unvailiable</p>
+              <p className="text-s text-[#0D1922] text-nowrap">Unavailable</p>
             </div>
           </div>
           <div

client/src/components/complexWingPage/FloorSidebar/ApartmentDescription.tsx

@@ -39,7 +39,7 @@ const ApartmentDescription = ({
             <h2 className="text-[#0D1922] font-semibold">
               {hoveredApartment?.Unit_Type},{" "}
               {hoveredApartment &&
-                Math.round(hoveredApartment?.Total_Area_Sqft)}{" "}
+                Number(hoveredApartment?.Total_Area_Sqft).toFixed(2)}{" "}
               Sqft
             </h2>
             <div className="flex gap-2 items-center text-caption-m font-semibold  pt-1 border-b pb-4 justify-start">
@@ -51,7 +51,7 @@ const ApartmentDescription = ({
             </div>
             <div className="flex justify-between items-center pt-4 gap-14">
               <p className="font-semibold  text-[#00BED7] text-subheadline-s">
-                Unvailiable
+                Unavailable
               </p>
               {/* <p className="font-semibold  text-[#00BED7] text-subheadline-s">
             AED 1,668,888
@@ -67,7 +67,7 @@ const ApartmentDescription = ({
                 </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 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>
       )}

client/src/components/complexWingPage/FloorSidebar/FloorSidebar.tsx

@@ -1,17 +1,23 @@
 import { useState, useEffect, useRef } from "react";
 import { IDesctiptionFloor } from "../../../types/descriptionFloor";
 import ApartmentDescription from "./ApartmentDescription";
-import EastWingHighlighting from "./EastWingHighlighting";
-import EastWingLayout from "./EastWingLayout";
-import WestWingHighlighting from "./WestWingHighlighting";
-import WestWingLayout from "./WestWingLayout";
+// import EastWingHighlighting from "./EastWingHighlighting";
+// import EastWingLayout from "./EastWingLayout";
+// import WestWingHighlighting from "./WestWingHighlighting";
+// import WestWingLayout from "./WestWingLayout";
 import useModal from "../../../store/useModal";
 import AboutComplexModal from "../../modals/AboutComplexModal";
 import { IAparmentRes } from "../../../types/apartmentsRes";
-import WestWingTopLevelsLayout from "./WestWingTopLevelsLayout";
-import WestWingTopLevelsHighlighting from "./WestWingTopLevelsHighlighting";
+// import WestWingTopLevelsLayout from "./WestWingTopLevelsLayout";
+// import WestWingTopLevelsHighlighting from "./WestWingTopLevelsHighlighting";
 import { apartmentsWithoutVirtualTour } from "../../../consts/apartmentsWithoutVirtualTour";
 import { filterCurrentApartment } from "../../../calc/filterCurrentApartment";
+import WestWingFloorLayout from "./WestWingFloorLayout";
+import WestWingBottomFloorLayout from "./WestWingBottomFloorLayout";
+import EastWingFloorLayout from "./EastWingFloorLayout";
+import Button from "../../Button";
+import CloseIcon from "../../icons/CloseIcon";
+import useWingSidebar from "../../../store/useWingSidebar";
 
 interface IFloorSidebarProps {
   currentFloor: IDesctiptionFloor | null;
@@ -35,15 +41,16 @@ const FloorSidebar = ({
   const [apartments, setApartments] = useState<IAparmentRes[]>([]);
   const { setModal } = useModal();
   const descRef = useRef(null);
+  const { setIsSidebar } = useWingSidebar();
 
   function handleMouseMove(e: MouseEvent) {
-    const y = e.clientY - 175;
-    const x = e.clientX - window.innerWidth / 2 - 50;
+    const y = e.clientY - 80;
+    const x = e.clientX - window.innerWidth / 2 - 335;
     setMousePos([x, y]);
   }
 
   function handleOnApartmentClick(
-    event: React.MouseEvent<SVGSVGElement, MouseEvent>
+    event: React.MouseEvent<SVGSVGElement | SVGPathElement, MouseEvent>
   ) {
     const apartmentType = event.currentTarget.dataset.type;
     if (!apartmentType) return;
@@ -67,7 +74,7 @@ const FloorSidebar = ({
   }
 
   function handleOnMouseOver(
-    event: React.MouseEvent<SVGSVGElement, MouseEvent>
+    event: React.MouseEvent<SVGSVGElement | SVGPathElement, MouseEvent>
   ): void {
     const apartmentType = event.currentTarget.dataset.type;
     if (!apartmentType) return;
@@ -125,7 +132,7 @@ const FloorSidebar = ({
   return (
     <>
       <div
-        className="absolute z-[99999] w-fit h-fit top-0 left-0"
+        className="absolute z-[9999999]"
         style={{ top: `${mousePos[1]}px`, left: `${mousePos[0]}px` }}
       >
         <ApartmentDescription
@@ -137,7 +144,7 @@ const FloorSidebar = ({
       </div>
       <div
         ref={descRef}
-        className="absolute h-full right-0 w-full z-30 bg-[#F3F3F2] p-6 flex flex-col top-[56px] "
+        className="absolute w-full h-[calc(100vh-56px)] right-0 z-30 bg-[#F3F3F2] p-6 top-[56px] flex flex-col"
         onMouseOver={onMouseEnter}
       >
         <div className="flex justify-between pb-4">
@@ -147,84 +154,109 @@ const FloorSidebar = ({
             </h1>
             <p className="text-s text-[#73787C]">{currentFloor?.wing}</p>
           </div>
-          <div className="bg-[#00BED7] text-white text-s px-2 py-[3px] rounded-3xl flex h-fit">
-            <div className="leading-5">{floorApartments.length} units</div>
-          </div>
+          <Button
+            buttonType="cta"
+            icon={<CloseIcon />}
+            onClick={() => setIsSidebar(false)}
+          />
         </div>
-        <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>
+
+        <div className="px-4 py-[18px] bg-white flex justify-between text-[#73787C] font-semibold text-caption-m rounded-2xl mb-2">
+          <div className="flex gap-6">
+            <div className="gap-2 flex items-center">
+              <div className="rounded-full bg-[#A19E9E] w-3 h-3"></div>
+              <p>Studio Flex</p>
+            </div>
+            <div className="gap-2 flex items-center">
+              <div className="rounded-full bg-[#8299AD] w-3 h-3"></div>
+              <p>Studio</p>
+            </div>
+            <div className="gap-2 flex items-center">
+              <div className="rounded-full bg-[#A19E9E] w-3 h-3"></div>
+              <p>1 Bedroom</p>
+            </div>
+            <div className="gap-2 flex items-center">
+              <div className="rounded-full bg-[#BFC9D1] w-3 h-3"></div>
+              <p>1 Bedroom</p>
+            </div>
+            <div className="gap-2 flex items-center">
+              <div className="rounded-full bg-[#B2B8C4] w-3 h-3"></div>
+              <p>2 Bedroom</p>
+            </div>
           </div>
-          <div className="gap-2 flex items-center">
-            <div className="rounded-full bg-[#8299AD] w-3 h-3"></div>
-            <p>Studio</p>
-          </div>
-          <div className="gap-2 flex items-center">
-            <div className="rounded-full bg-[#A19E9E] w-3 h-3"></div>
-            <p>1 Bedroom</p>
-          </div>
-          <div className="gap-2 flex items-center">
-            <div className="rounded-full bg-[#BFC9D1] w-3 h-3"></div>
-            <p>1 Bedroom</p>
-          </div>
-          <div className="gap-2 flex items-center">
-            <div className="rounded-full bg-[#B2B8C4] w-3 h-3"></div>
-            <p>2 Bedroom</p>
+          <div className="bg-[#00BED7] text-white text-s px-2 py-[3px] rounded-3xl flex h-fit">
+            {floorApartments.length} units
           </div>
         </div>
 
-        <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 className="flex-1 px-10 bg-white font-semibold text-caption-m rounded-2xl py-4">
           {currentFloor?.wing === "West Wing" ? (
             currentFloor && currentFloor.floor <= 21 ? (
-              <svg
-                className="rotate-[135deg]"
-                xmlns="http://www.w3.org/2000/svg"
-                width="400"
-                height="700"
-                fill="none"
-                viewBox="0 0 204 600"
-              >
-                <WestWingLayout />
-                <WestWingHighlighting
-                  handleOnApartmentClick={handleOnApartmentClick}
-                  handleOnMouseOut={handleOnMouseOut}
-                  handleOnMouseOver={handleOnMouseOver}
-                />
-              </svg>
+              // <svg
+              //   className="rotate-[135deg]"
+              //   xmlns="http://www.w3.org/2000/svg"
+              //   width="400"
+              //   height="700"
+              //   fill="none"
+              //   viewBox="0 0 204 600"
+              // >
+              //   <WestWingLayout />
+              //   <WestWingHighlighting
+              //     handleOnApartmentClick={handleOnApartmentClick}
+              //     handleOnMouseOut={handleOnMouseOut}
+              //     handleOnMouseOver={handleOnMouseOver}
+              //   />
+              // </svg>
+              <WestWingBottomFloorLayout
+                handleMouseEnter={handleOnMouseOver}
+                handleMouseLeave={handleOnMouseOut}
+                handleClick={handleOnApartmentClick}
+              />
             ) : (
-              <svg
-                className="rotate-[135deg]"
-                xmlns="http://www.w3.org/2000/svg"
-                width="400"
-                height="700"
-                fill="none"
-                viewBox="0 0 204 600"
-              >
-                <WestWingTopLevelsLayout />
-                <WestWingTopLevelsHighlighting
-                  handleOnApartmentClick={handleOnApartmentClick}
-                  handleOnMouseOut={handleOnMouseOut}
-                  handleOnMouseOver={handleOnMouseOver}
+              // <svg
+              //   className="rotate-[135deg]"
+              //   xmlns="http://www.w3.org/2000/svg"
+              //   width="400"
+              //   height="700"
+              //   fill="none"
+              //   viewBox="0 0 204 600"
+              // >
+              //   <WestWingTopLevelsLayout />
+              //   <WestWingTopLevelsHighlighting
+              //     handleOnApartmentClick={handleOnApartmentClick}
+              //     handleOnMouseOut={handleOnMouseOut}
+              //     handleOnMouseOver={handleOnMouseOver}
+              //   />
+              // </svg>
+              <>
+                <WestWingFloorLayout
+                  handleMouseEnter={handleOnMouseOver}
+                  handleMouseLeave={handleOnMouseOut}
+                  handleClick={handleOnApartmentClick}
                 />
-              </svg>
+              </>
             )
           ) : (
-            <svg
-              className="rotate-[135deg]"
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              width="672"
-              height="280"
-              viewBox="0 0 672 280"
-            >
-              <EastWingLayout />
-              <EastWingHighlighting
-                handleOnApartmentClick={handleOnApartmentClick}
-                handleOnMouseOut={handleOnMouseOut}
-                handleOnMouseOver={handleOnMouseOver}
-              />
-            </svg>
+            // <svg
+            //   className="rotate-[135deg]"
+            //   xmlns="http://www.w3.org/2000/svg"
+            //   fill="none"
+            //   width="672"
+            //   height="280"
+            //   viewBox="0 0 672 280"
+            // >
+            //   <EastWingLayout />
+            //   <EastWingHighlighting
+            //     handleOnApartmentClick={handleOnApartmentClick}
+            //     handleOnMouseOut={handleOnMouseOut}
+            //     handleOnMouseOver={handleOnMouseOver}
+            //   />
+            // </svg>
+            <EastWingFloorLayout
+              handleMouseEnter={handleOnMouseOver}
+              handleMouseLeave={handleOnMouseOut}
+              handleClick={handleOnApartmentClick}
+            />
           )}
           {/* {currentFloor?.wing === "West Wing" ? (
             <svg
@@ -242,7 +274,7 @@ const FloorSidebar = ({
               />
             </svg>
           ) : } */}
-        </div>
+        </svg>
       </div>
     </>
   );