layout hovering start

src/components/MasterSelector.tsx

@@ -21,7 +21,7 @@ const MasterSelector = ({ title }: MasterSelectorProps) => {
       <p className="text-[#0D192266] text-caption-m font-semibold pb-2">
         {title}
       </p>
-      <div className="bg-white rounded-lg flex px-4 py-[14px] items-center border">
+      <div className="bg-white rounded-lg flex px-4 py-[14px] items-center">
         <div className="text-m text-[#00BED7] pr-2 border-r flex items-center gap-2">
           +971 <ChevronDownIcon width="20" height="20" />
         </div>

src/components/complexWingPage/FloorSidebar/ApartmentDescription.tsx

@@ -0,0 +1,22 @@
+interface ApartmentDescriptionProps {
+  isVisible?: boolean;
+}
+
+const ApartmentDescription = ({
+  isVisible = true,
+}: ApartmentDescriptionProps) => {
+  return (
+    <div
+      className={`bg-white rounded-lg shadow-xl p-6 flex flex-col text-subheadline-s relative ${
+        isVisible ? "opacity-100" : "opacity-0"
+      } duration-300 ease-in-out transition-opacity`}
+    >
+      <h2 className="text-[#0D1922] font-semibold pb-4 border-b">
+        1 bedroom, 609 Sqft
+      </h2>
+      <p className="font-semibold pt-4">AED 1,668,888</p>
+    </div>
+  );
+};
+
+export default ApartmentDescription;

src/components/complexWingPage/FloorSidebar/FloorSidebar.tsx

@@ -1,5 +1,4 @@
 import { IDesctiptionFloor } from "../../../types/descriptionFloor";
-import FloorEastWingLayout from "./FloorEastWingLayout";
 import FloorWestWingLayout from "./FloorWestWingLayout";
 
 interface IFloorSidebarProps {
@@ -9,7 +8,7 @@ interface IFloorSidebarProps {
 const FloorSidebar = ({ currentFloor, onMouseEnter }: IFloorSidebarProps) => {
   return (
     <div
-      className="absolute h-full right-0 w-full z-20 bg-[#F3F3F2] p-6 flex flex-col top-[56px] "
+      className="absolute h-full right-0 w-full z-30 bg-[#F3F3F2] p-6 flex flex-col top-[56px] "
       onMouseOver={onMouseEnter}
     >
       <div className="flex justify-between pb-4">
@@ -45,12 +44,15 @@ const FloorSidebar = ({ currentFloor, onMouseEnter }: IFloorSidebarProps) => {
           <p>2 Bedroom</p>
         </div>
       </div>
-      <div className="px-4  bg-white flex gap-6 font-semibold text-caption-m rounded-lg justify-center h-full items-center">
+      {/* <div className="px-4 bg-white flex gap-6 font-semibold text-caption-m rounded-lg justify-center items-center flex-1">
         {currentFloor?.wing === "West Wing" ? (
           <FloorWestWingLayout />
         ) : (
           <FloorEastWingLayout />
         )}
+      </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">
+        <FloorWestWingLayout />
       </div>
     </div>
   );

src/components/complexWingPage/FloorSidebar/FloorWestWingHighlighting.tsx

@@ -0,0 +1,440 @@
+import { useEffect, useState } from "react";
+import ApartmentDescription from "./ApartmentDescription";
+import { createPortal } from "react-dom";
+import { div } from "three/examples/jsm/nodes/Nodes.js";
+
+const FloorWestWingHighlighting = () => {
+  const [mousePos, setMousePos] = useState<number[]>([0, 0]);
+  const [isDescVisible, setisDescVisible] = useState(true);
+
+  function handleMouseMove(e: MouseEvent) {
+    const top = window.innerWidth / 2 - window.innerHeight / 2;
+    setMousePos([e.clientX, e.clientY]);
+  }
+
+  useEffect(() => {
+    window.addEventListener("mousemove", handleMouseMove);
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+    };
+  }, []);
+
+  function handleOnMouseOut(
+    event: MouseEvent<SVGSVGElement, MouseEvent>
+  ): void {
+    throw new Error("Function not implemented.");
+  }
+  function handleOnMouseOver(
+    event: MouseEvent<SVGSVGElement, MouseEvent>
+  ): void {
+    console.log("event", event);
+  }
+
+  return (
+    <>
+      <div
+        className="absolute z-[99999] w-fit h-fit top-0 left-0 overflow-hidden"
+        // style={{ top: `150px`, left: `100px` }}
+        style={{ top: `${mousePos[1]}px`, left: `${mousePos[0]}px` }}
+      >
+        <ApartmentDescription isVisible={isDescVisible} />
+      </div>
+      ,
+      {/* {createPortal(
+        document.body
+      )} */}
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="645"
+        height="269"
+        fill="none"
+        viewBox="0 0 645 269"
+      >
+        <svg
+          className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity"
+          onMouseOut={handleOnMouseOut}
+          onMouseOver={handleOnMouseOver}
+          y={36}
+          x={205}
+          width="44"
+          height="106"
+          viewBox="0 0 44 106"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M42.3823 24.9009H0.359375V97.8101H7.9572V105.272H22.6334H34.8467H37.109V100.705H43.7573V79.9505H42.3823V24.9009Z"
+            fill="#00BED7"
+            fillOpacity="0.2"
+          />
+          <path
+            d="M0.359375 0.260742V24.2741H36.4415V0.260742H0.359375Z"
+            fill="#00BED7"
+            fillOpacity="0.2"
+          />
+        </svg>
+
+        <svg
+          className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity"
+          onMouseOut={handleOnMouseOut}
+          onMouseOver={handleOnMouseOver}
+          y={36}
+          x={250}
+          width="79"
+          height="106"
+          viewBox="0 0 79 106"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12.5613 27.1557V0.260742H64.7246V27.1557H12.5613Z"
+            fill="#00BED7"
+            fillOpacity="0.2"
+          />
+          <path
+            d="M40.135 105.272H42.9899H55.4758H71.5709V100.831H78.1781V27.7953H0.601562V69.6856H6.50497V87.2022H40.135V105.272Z"
+            fill="#00BED7"
+            fillOpacity="0.2"
+          />
+        </svg>
+
+        <svg
+          className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity"
+          onMouseOut={handleOnMouseOut}
+          onMouseOver={handleOnMouseOver}
+          y={36}
+          x={328}
+          width="45"
+          height="106"
+          viewBox="0 0 45 106"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M5.46074 105.272H7.77297H20.0741H34.5026V97.8198H44.2163V79.9546H42.7182V24.8632H0.527344V100.831H5.46074V105.272Z"
+            fill="#00BED7"
+            fillOpacity="0.2"
+          />
+          <path
+            d="M44.2343 24.3467V0.260742H6.2179V24.3467H44.2343Z"
+            fill="#00BED7"
+            fillOpacity="0.2"
+          />
+        </svg>
+
+        <svg
+          className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity"
+          onMouseOut={handleOnMouseOut}
+          onMouseOver={handleOnMouseOver}
+          y={36}
+          x={371}
+          width="44"
+          height="106"
+          viewBox="0 0 44 106"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M0.561732 24.3467V0.260742H38.6071V24.3467H0.561732Z"
+            fill="#00BED7"
+            fillOpacity="0.2"
+          />
+          <path
+            d="M9.94651 105.272H24.5738H36.8158H39.0738V100.809H43.9301V24.8632H2.1926V79.9546H0.431641V97.8198H9.94651V105.272Z"
+            fill="#00BED7"
+            fillOpacity="0.2"
+          />
+        </svg>
+
+        <svg
+          className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity"
+          onMouseOut={handleOnMouseOut}
+          onMouseOver={handleOnMouseOver}
+          y={36}
+          x={415}
+          width="71"
+          height="106"
+          viewBox="0 0 71 106"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M7.02476 105.272H21.006H33.2654H36.0836V96.3415H70.4738V79.9445H68.4842V24.8632C68.4842 24.7534 23.0364 24.8175 0.3125 24.8632V100.809H7.02476V105.272Z"
+            fill="#00BED7"
+            fillOpacity="0.2"
+          />
+          <path
+            d="M5.97511 24.3467V0.260742H64.7066V24.3467H5.97511Z"
+            fill="#00BED7"
+            fillOpacity="0.2"
+          />
+        </svg>
+
+        <svg
+          className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity"
+          onMouseOut={handleOnMouseOut}
+          onMouseOver={handleOnMouseOver}
+          y={36}
+          x={484}
+          width="73"
+          height="106"
+          viewBox="0 0 73 106"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M6.13354 24.3467V0.260742H65.0465V24.3467H6.13354Z"
+            fill="#00BED7"
+            fillOpacity="0.2"
+          />
+          <path
+            d="M34.759 105.272H37.4603H49.7081H63.7972V100.747H72.0123V79.9445H70.5538V24.8632H2.27054V79.9445H0.451172V96.3415H34.759V105.272Z"
+            fill="#00BED7"
+            fillOpacity="0.2"
+          />
+        </svg>
+
+        <svg
+          className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity"
+          onMouseOut={handleOnMouseOut}
+          onMouseOver={handleOnMouseOver}
+          y={159}
+          x={415}
+          width="71"
+          height="106"
+          viewBox="0 0 71 106"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M20.9668 0.661621H6.96945V5.32833H0.261719V80.9172H68.4544V34.4298H70.3789V9.7041H36.3524V0.661621H33.3042H20.9668Z"
+            fill="#00BED7"
+            fillOpacity="0.2"
+          />
+          <path
+            d="M6.1191 81.578V105.836H64.6981V81.578H6.1191Z"
+            fill="#00BED7"
+            fillOpacity="0.2"
+          />
+        </svg>
+
+        <svg
+          className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity"
+          onMouseOut={handleOnMouseOut}
+          onMouseOver={handleOnMouseOver}
+          y={158}
+          x={370}
+          width="44"
+          height="106"
+          viewBox="0 0 44 106"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M0.499184 105.836V81.578H38.5893V105.836H0.499184Z"
+            fill="#00BED7"
+            fillOpacity="0.2"
+          />
+          <path
+            d="M24.5502 0.661621H9.83178V8.07267H0.457031V25.9785H2.14908V80.9172H43.9965V5.32833H39.038V0.661621H36.8668H24.5502Z"
+            fill="#00BED7"
+            fillOpacity="0.2"
+          />
+        </svg>
+
+        <svg
+          className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity"
+          onMouseOut={handleOnMouseOut}
+          onMouseOver={handleOnMouseOver}
+          y={158}
+          x={328}
+          width="45"
+          height="106"
+          viewBox="0 0 45 106"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M7.84464 0.661621H5.47846V5.3367H0.5625V80.9172H42.7255V25.9785H44.144V8.07267H34.6755V0.661621H19.9571H7.84464Z"
+            fill="#00BED7"
+            fillOpacity="0.2"
+          />
+          <path
+            d="M6.26025 81.578V105.836H44.1438V81.578H6.26025Z"
+            fill="#00BED7"
+            fillOpacity="0.2"
+          />
+        </svg>
+
+        <svg
+          className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity"
+          onMouseOut={handleOnMouseOut}
+          onMouseOver={handleOnMouseOver}
+          y={158}
+          x={285}
+          width="43"
+          height="106"
+          viewBox="0 0 43 106"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M0.277344 81.578V105.836H36.6695V81.578H0.277344Z"
+            fill="#00BED7"
+            fillOpacity="0.2"
+          />
+          <path
+            d="M22.5797 0.661621H8.23243V7.98497H0.277344V80.9172H42.2V5.3367H37.265V0.661621H35.0572H22.5797Z"
+            fill="#00BED7"
+            fillOpacity="0.2"
+          />
+        </svg>
+
+        <svg
+          className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity"
+          onMouseOut={handleOnMouseOut}
+          onMouseOver={handleOnMouseOver}
+          y={158}
+          x={242}
+          width="42"
+          height="106"
+          viewBox="0 0 42 106"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M7.64475 0.661621H5.31482V5.3367H0.339844V80.9172H41.9907V7.98497H34.5503V0.661621H20.1009H7.64475Z"
+            fill="#00BED7"
+            fillOpacity="0.2"
+          />
+          <path
+            d="M5.8841 81.578V105.836H41.9907V81.578H5.8841Z"
+            fill="#00BED7"
+            fillOpacity="0.2"
+          />
+        </svg>
+
+        <svg
+          className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity"
+          onMouseOut={handleOnMouseOut}
+          onMouseOver={handleOnMouseOver}
+          x={70}
+          y={157}
+          width="71"
+          height="106"
+          viewBox="0 0 71 106"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M38.0132 0.661621H35.0456V9.66792H0.753906V25.983H2.51649V80.9811H70.932V5.34202H64.4125V0.661621H50.3588H38.0132Z"
+            fill="#00BED7"
+            fillOpacity="0.2"
+          />
+          <path
+            d="M65.2246 105.844V81.6648H6.6537V105.844H65.2246Z"
+            fill="#00BED7"
+            fillOpacity="0.2"
+          />
+        </svg>
+
+        <svg
+          className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity"
+          onMouseOut={handleOnMouseOut}
+          onMouseOver={handleOnMouseOver}
+          xmlns="http://www.w3.org/2000/svg"
+          y={157}
+          x={2}
+          width="71"
+          height="106"
+          fill="none"
+          viewBox="0 0 71 106"
+        >
+          <path
+            fill="#00BED7"
+            fillOpacity="0.2"
+            d="M7.344 5.342c0-.198-4.45-.082-6.676 0v75.64h68.289V25.982h1.758V9.668H36.556V.683H21.503c0-.124-9.44-.051-14.159 0v4.659zM6.305 81.794H65.17v24.05H6.305v-24.05z"
+          ></path>
+        </svg>
+        <svg
+          className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity"
+          onMouseOut={handleOnMouseOut}
+          onMouseOver={handleOnMouseOver}
+          xmlns="http://www.w3.org/2000/svg"
+          y={4.94}
+          x={92.12}
+          width="116"
+          height="136"
+          fill="none"
+          viewBox="0 0 116 136"
+        >
+          <path
+            fill="#00BED7"
+            fillOpacity="0.2"
+            d="M29.82 66.993l3.874 3.874 28.864-29.093-3.722-3.993L29.82 66.993z"
+          ></path>
+          <path
+            fill="#00BED7"
+            fillOpacity="0.2"
+            fillRule="evenodd"
+            d="M.123 46.739l7.559 7.405-5.387 5.61 67.537 67.513v7.842h15.651v-7.299h26.13v-3.193h3.512V61.745h-30.77l-24.789-25.11 5.234-5.58-15.107-15.16-9.099-9.687L.123 46.738zm33.57 24.128l-3.873-3.874L58.836 37.78l3.722 3.993-28.864 29.093z"
+            clipRule="evenodd"
+          ></path>
+          <path
+            fill="#00BED7"
+            fillOpacity="0.2"
+            d="M115.125 30.26h-3.781a40.718 40.718 0 01-28.515-11.65L64.8.921 50.244 15.348l15.493 15.707-5.15 5.58 24.037 24.306h30.502V30.26z"
+          ></path>
+        </svg>
+        <svg
+          className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity"
+          onMouseOut={handleOnMouseOut}
+          onMouseOver={handleOnMouseOver}
+          y={35.26}
+          x={555.27}
+          xmlns="http://www.w3.org/2000/svg"
+          width="91"
+          height="106"
+          fill="none"
+          viewBox="0 0 91 106"
+        >
+          <path
+            fill="#00BED7"
+            fillOpacity="0.2"
+            d="M7.439 31.683V.26h77.623a5.22 5.22 0 015.192 5.765L83.15 73.733a4.176 4.176 0 01-4.153 3.74h-3.315v-45.79H7.44z"
+          ></path>
+          <path
+            fill="#00BED7"
+            fillOpacity="0.2"
+            d="M8.525 105.272h53.067v-3.992h10.89V82.87H68.87V41.562h6.055v-9.45H2.121v47.833H.266v20.802h8.259v4.525z"
+          ></path>
+        </svg>
+        <svg
+          className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity"
+          onMouseOut={handleOnMouseOut}
+          onMouseOver={handleOnMouseOver}
+          y={158.26}
+          x={556}
+          xmlns="http://www.w3.org/2000/svg"
+          width="89"
+          height="106"
+          fill="none"
+          viewBox="0 0 89 106"
+        >
+          <path
+            fill="#00BED7"
+            fillOpacity="0.2"
+            d="M18.27.662H6.546v4.666H.262v69.043h73.382V64.289h-6.55V23.126h3.422V4.792H59.593V.662H18.27z"
+          ></path>
+          <path
+            fill="#00BED7"
+            fillOpacity="0.2"
+            d="M75.398 75.868H5.453v29.893h77.519a5.22 5.22 0 005.192-5.763l-7.01-67.103a5.22 5.22 0 00-5.191-4.678h-.565v47.65z"
+          ></path>
+        </svg>
+      </svg>
+    </>
+  );
+};
+
+export default FloorWestWingHighlighting;

src/data/appartments.json

@@ -1,6 +1,6 @@
 [
   {
-    "id": "appartments-studio-1",
+    "id": "apartments-studio-1",
     "spheres": [
       {
         "id": "studio-1_sp-01",