From 152c46edf7448f96857662597fc2270f8e6f675f Mon Sep 17 00:00:00 2001
From: zojgame <zogame002@gmail.com>
Date: Wed, 5 Jun 2024 12:01:10 +0500
Subject: [PATCH] mouse move apartment desc + hightlighting

---
 .../complexWingPage/FloorDescription.tsx      |  2 +-
 .../FloorSidebar/ApartmentDescription.tsx     | 33 +++++---
 .../FloorSidebar/FloorSidebar.tsx             | 52 ++++++++++--
 .../FloorWestWingHighlighting.tsx             | 82 ++++++-------------
 .../FloorSidebar/FloorWestWingLayout.tsx      | 11 +--
 .../complexWingPage/SkygardenDescription.tsx  | 46 ++++++-----
 src/index.css                                 |  4 +
 7 files changed, 118 insertions(+), 112 deletions(-)

diff --git a/src/components/complexWingPage/FloorDescription.tsx b/src/components/complexWingPage/FloorDescription.tsx
index 0697285..ced1c96 100644
--- a/src/components/complexWingPage/FloorDescription.tsx
+++ b/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 delay-100 ${
+        className={`bg-white rounded-lg 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"
diff --git a/src/components/complexWingPage/FloorSidebar/ApartmentDescription.tsx b/src/components/complexWingPage/FloorSidebar/ApartmentDescription.tsx
index f603592..64208c2 100644
--- a/src/components/complexWingPage/FloorSidebar/ApartmentDescription.tsx
+++ b/src/components/complexWingPage/FloorSidebar/ApartmentDescription.tsx
@@ -1,20 +1,27 @@
+import { useEffect } from "react";
+
 interface ApartmentDescriptionProps {
-  isVisible?: boolean;
+  isVisible: boolean;
 }
 
-const ApartmentDescription = ({
-  isVisible = true,
-}: ApartmentDescriptionProps) => {
+const ApartmentDescription = ({ isVisible }: ApartmentDescriptionProps) => {
+  useEffect(() => {
+    console.log("isVisible", isVisible);
+  }, [isVisible]);
+
   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 className="p-6">
+      <div
+        className={`bg-white rounded-lg 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 pb-4 border-b">
+          1 bedroom, 609 Sqft
+        </h2>
+        <p className="font-semibold pt-4">AED 1,668,888</p>
+        <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>
   );
 };
diff --git a/src/components/complexWingPage/FloorSidebar/FloorSidebar.tsx b/src/components/complexWingPage/FloorSidebar/FloorSidebar.tsx
index ddc0d56..898f532 100644
--- a/src/components/complexWingPage/FloorSidebar/FloorSidebar.tsx
+++ b/src/components/complexWingPage/FloorSidebar/FloorSidebar.tsx
@@ -1,11 +1,38 @@
+import { useState, useEffect } from "react";
 import { IDesctiptionFloor } from "../../../types/descriptionFloor";
+import ApartmentDescription from "./ApartmentDescription";
+import FloorWestWingHighlighting from "./FloorWestWingHighlighting";
 import FloorWestWingLayout from "./FloorWestWingLayout";
 
 interface IFloorSidebarProps {
   currentFloor: IDesctiptionFloor | null;
   onMouseEnter: () => void;
 }
+
 const FloorSidebar = ({ currentFloor, onMouseEnter }: IFloorSidebarProps) => {
+  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 - top]);
+    setMousePos([e.clientX - 752, e.clientY - Math.abs(top) + 5]);
+  }
+
+  function handleOnMouseOut(): void {
+    setIsDescVisible(false);
+  }
+  function handleOnMouseOver(): void {
+    setIsDescVisible(true);
+  }
+
+  useEffect(() => {
+    window.addEventListener("mousemove", handleMouseMove);
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+    };
+  }, []);
+
   return (
     <div
       className="absolute h-full right-0 w-full z-30 bg-[#F3F3F2] p-6 flex flex-col top-[56px] "
@@ -44,15 +71,24 @@ 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 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
+          className="absolute z-[99999] w-fit h-fit top-0 left-0 overflow-hidden"
+          style={{ top: `${mousePos[1]}px`, left: `${mousePos[0]}px` }}
+        >
+          <ApartmentDescription isVisible={isDescVisible} />
+        </div>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 645 269"
+        >
+          <FloorWestWingLayout />
+          <FloorWestWingHighlighting
+            handleOnMouseOut={handleOnMouseOut}
+            handleOnMouseOver={handleOnMouseOver}
+          />
+        </svg>
       </div>
     </div>
   );
diff --git a/src/components/complexWingPage/FloorSidebar/FloorWestWingHighlighting.tsx b/src/components/complexWingPage/FloorSidebar/FloorWestWingHighlighting.tsx
index 2306cd4..7c94ff9 100644
--- a/src/components/complexWingPage/FloorSidebar/FloorWestWingHighlighting.tsx
+++ b/src/components/complexWingPage/FloorSidebar/FloorWestWingHighlighting.tsx
@@ -1,48 +1,14 @@
-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);
-  }
+interface FloorWestWingHighlightingProps {
+  handleOnMouseOut: () => void;
+  handleOnMouseOver: () => void;
+}
 
+const FloorWestWingHighlighting = ({
+  handleOnMouseOut,
+  handleOnMouseOver,
+}: FloorWestWingHighlightingProps) => {
   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"
@@ -51,7 +17,7 @@ const FloorWestWingHighlighting = () => {
         viewBox="0 0 645 269"
       >
         <svg
-          className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity"
+          className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
           onMouseOut={handleOnMouseOut}
           onMouseOver={handleOnMouseOver}
           y={36}
@@ -75,7 +41,7 @@ const FloorWestWingHighlighting = () => {
         </svg>
 
         <svg
-          className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity"
+          className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
           onMouseOut={handleOnMouseOut}
           onMouseOver={handleOnMouseOver}
           y={36}
@@ -99,7 +65,7 @@ const FloorWestWingHighlighting = () => {
         </svg>
 
         <svg
-          className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity"
+          className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
           onMouseOut={handleOnMouseOut}
           onMouseOver={handleOnMouseOver}
           y={36}
@@ -123,7 +89,7 @@ const FloorWestWingHighlighting = () => {
         </svg>
 
         <svg
-          className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity"
+          className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
           onMouseOut={handleOnMouseOut}
           onMouseOver={handleOnMouseOver}
           y={36}
@@ -147,7 +113,7 @@ const FloorWestWingHighlighting = () => {
         </svg>
 
         <svg
-          className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity"
+          className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
           onMouseOut={handleOnMouseOut}
           onMouseOver={handleOnMouseOver}
           y={36}
@@ -171,7 +137,7 @@ const FloorWestWingHighlighting = () => {
         </svg>
 
         <svg
-          className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity"
+          className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
           onMouseOut={handleOnMouseOut}
           onMouseOver={handleOnMouseOver}
           y={36}
@@ -195,7 +161,7 @@ const FloorWestWingHighlighting = () => {
         </svg>
 
         <svg
-          className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity"
+          className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
           onMouseOut={handleOnMouseOut}
           onMouseOver={handleOnMouseOver}
           y={159}
@@ -219,7 +185,7 @@ const FloorWestWingHighlighting = () => {
         </svg>
 
         <svg
-          className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity"
+          className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
           onMouseOut={handleOnMouseOut}
           onMouseOver={handleOnMouseOver}
           y={158}
@@ -243,7 +209,7 @@ const FloorWestWingHighlighting = () => {
         </svg>
 
         <svg
-          className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity"
+          className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
           onMouseOut={handleOnMouseOut}
           onMouseOver={handleOnMouseOver}
           y={158}
@@ -267,7 +233,7 @@ const FloorWestWingHighlighting = () => {
         </svg>
 
         <svg
-          className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity"
+          className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
           onMouseOut={handleOnMouseOut}
           onMouseOver={handleOnMouseOver}
           y={158}
@@ -291,7 +257,7 @@ const FloorWestWingHighlighting = () => {
         </svg>
 
         <svg
-          className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity"
+          className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
           onMouseOut={handleOnMouseOut}
           onMouseOver={handleOnMouseOver}
           y={158}
@@ -315,7 +281,7 @@ const FloorWestWingHighlighting = () => {
         </svg>
 
         <svg
-          className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity"
+          className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
           onMouseOut={handleOnMouseOut}
           onMouseOver={handleOnMouseOver}
           x={70}
@@ -339,7 +305,7 @@ const FloorWestWingHighlighting = () => {
         </svg>
 
         <svg
-          className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity"
+          className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
           onMouseOut={handleOnMouseOut}
           onMouseOver={handleOnMouseOver}
           xmlns="http://www.w3.org/2000/svg"
@@ -357,7 +323,7 @@ const FloorWestWingHighlighting = () => {
           ></path>
         </svg>
         <svg
-          className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity"
+          className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
           onMouseOut={handleOnMouseOut}
           onMouseOver={handleOnMouseOver}
           xmlns="http://www.w3.org/2000/svg"
@@ -387,7 +353,7 @@ const FloorWestWingHighlighting = () => {
           ></path>
         </svg>
         <svg
-          className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity"
+          className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
           onMouseOut={handleOnMouseOut}
           onMouseOver={handleOnMouseOver}
           y={35.26}
@@ -410,7 +376,7 @@ const FloorWestWingHighlighting = () => {
           ></path>
         </svg>
         <svg
-          className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity"
+          className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
           onMouseOut={handleOnMouseOut}
           onMouseOver={handleOnMouseOver}
           y={158.26}
diff --git a/src/components/complexWingPage/FloorSidebar/FloorWestWingLayout.tsx b/src/components/complexWingPage/FloorSidebar/FloorWestWingLayout.tsx
index 372faa8..458b966 100644
--- a/src/components/complexWingPage/FloorSidebar/FloorWestWingLayout.tsx
+++ b/src/components/complexWingPage/FloorSidebar/FloorWestWingLayout.tsx
@@ -1,14 +1,7 @@
-import FloorWestWingHighlighting from "./FloorWestWingHighlighting";
-
 function FloorWestWingLayout() {
   return (
     <>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        // className="w-full h-full"
-        fill="none"
-        viewBox="0 0 645 269"
-      >
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 645 269">
         <path
           fill="#F0F0E9"
           d="M1.246 146.952v15.187h141.468V257.7h70.793v-95.561h375.844v-24.076H144.315L6.229 140.227l-4.983 6.725z"
@@ -134,7 +127,6 @@ function FloorWestWingLayout() {
           d="M123.178 72.894l3.711 3.71 27.647-27.865-3.565-3.825-27.793 27.98z"
         ></path>
         <path
-          className="fill-white hover:fill-black"
           fill="#fff"
           fillRule="evenodd"
           d="M94.734 53.495l7.24 7.093-5.16 5.372 64.689 64.666v7.511h14.99v-6.991h25.028v-3.059h3.364V67.868h-29.473L151.67 43.817l5.013-5.345-14.47-14.52-8.715-9.278-38.764 38.82zm32.155 23.11l-3.711-3.71 27.793-27.98 3.565 3.824-27.647 27.866z"
@@ -453,7 +445,6 @@ function FloorWestWingLayout() {
           fillOpacity="0.7"
           d="M160.95 99h-5.22v-7.68h5.15v1.15h-3.74v2.09h3.26v1.14h-3.26v2.15h3.81V99zm.819-2.4v-1.16h2.46v1.16h-2.46zm3.948 2.4v-1.1h1.74v-4.8c-.55.35-1.15.57-1.74.73v-1.14c.81-.24 1.49-.57 2.04-1.03h1.09v6.24h1.72V99h-4.85zm8.636.11c-2.3 0-2.79-1.83-2.79-3.77 0-1.93.48-3.79 2.78-3.79 2.31 0 2.8 1.83 2.8 3.77 0 1.93-.48 3.79-2.79 3.79zm0-1.08c1.27 0 1.4-1.39 1.4-2.7 0-1.31-.13-2.7-1.4-2.7-1.28 0-1.4 1.39-1.4 2.7 0 1.31.12 2.7 1.4 2.7zm4.196.97v-1.1h1.74v-4.8c-.55.35-1.15.57-1.74.73v-1.14c.81-.24 1.49-.57 2.04-1.03h1.09v6.24h1.72V99h-4.85zM218.95 99h-5.22v-7.68h5.15v1.15h-3.74v2.09h3.26v1.14h-3.26v2.15h3.81V99zm.819-2.4v-1.16h2.46v1.16h-2.46zm3.948 2.4v-1.1h1.74v-4.8c-.55.35-1.15.57-1.74.73v-1.14c.81-.24 1.49-.57 2.04-1.03h1.09v6.24h1.72V99h-4.85zm8.636.11c-2.3 0-2.79-1.83-2.79-3.77 0-1.93.48-3.79 2.78-3.79 2.31 0 2.8 1.83 2.8 3.77 0 1.93-.48 3.79-2.79 3.79zm0-1.08c1.27 0 1.4-1.39 1.4-2.7 0-1.31-.13-2.7-1.4-2.7-1.28 0-1.4 1.39-1.4 2.7 0 1.31.12 2.7 1.4 2.7zm4.196.97v-1.1h1.74v-4.8c-.55.35-1.15.57-1.74.73v-1.14c.81-.24 1.49-.57 2.04-1.03h1.09v6.24h1.72V99h-4.85zM278.95 99h-5.22v-7.68h5.15v1.15h-3.74v2.09h3.26v1.14h-3.26v2.15h3.81V99zm.819-2.4v-1.16h2.46v1.16h-2.46zm3.948 2.4v-1.1h1.74v-4.8c-.55.35-1.15.57-1.74.73v-1.14c.81-.24 1.49-.57 2.04-1.03h1.09v6.24h1.72V99h-4.85zm8.636.11c-2.3 0-2.79-1.83-2.79-3.77 0-1.93.48-3.79 2.78-3.79 2.31 0 2.8 1.83 2.8 3.77 0 1.93-.48 3.79-2.79 3.79zm0-1.08c1.27 0 1.4-1.39 1.4-2.7 0-1.31-.13-2.7-1.4-2.7-1.28 0-1.4 1.39-1.4 2.7 0 1.31.12 2.7 1.4 2.7zm4.196.97v-1.1h1.74v-4.8c-.55.35-1.15.57-1.74.73v-1.14c.81-.24 1.49-.57 2.04-1.03h1.09v6.24h1.72V99h-4.85zM340.95 99h-5.22v-7.68h5.15v1.15h-3.74v2.09h3.26v1.14h-3.26v2.15h3.81V99zm.819-2.4v-1.16h2.46v1.16h-2.46zm3.948 2.4v-1.1h1.74v-4.8c-.55.35-1.15.57-1.74.73v-1.14c.81-.24 1.49-.57 2.04-1.03h1.09v6.24h1.72V99h-4.85zm8.636.11c-2.3 0-2.79-1.83-2.79-3.77 0-1.93.48-3.79 2.78-3.79 2.31 0 2.8 1.83 2.8 3.77 0 1.93-.48 3.79-2.79 3.79zm0-1.08c1.27 0 1.4-1.39 1.4-2.7 0-1.31-.13-2.7-1.4-2.7-1.28 0-1.4 1.39-1.4 2.7 0 1.31.12 2.7 1.4 2.7zm4.196.97v-1.1h1.74v-4.8c-.55.35-1.15.57-1.74.73v-1.14c.81-.24 1.49-.57 2.04-1.03h1.09v6.24h1.72V99h-4.85zM340.95 202h-5.22v-7.68h5.15v1.15h-3.74v2.09h3.26v1.14h-3.26v2.15h3.81V202zm.819-2.4v-1.16h2.46v1.16h-2.46zm3.948 2.4v-1.1h1.74v-4.8c-.55.35-1.15.57-1.74.73v-1.14c.81-.24 1.49-.57 2.04-1.03h1.09v6.24h1.72v1.1h-4.85zm8.636.11c-2.3 0-2.79-1.83-2.79-3.77 0-1.93.48-3.79 2.78-3.79 2.31 0 2.8 1.83 2.8 3.77 0 1.93-.48 3.79-2.79 3.79zm0-1.08c1.27 0 1.4-1.39 1.4-2.7 0-1.31-.13-2.7-1.4-2.7-1.28 0-1.4 1.39-1.4 2.7 0 1.31.12 2.7 1.4 2.7zm4.196.97v-1.1h1.74v-4.8c-.55.35-1.15.57-1.74.73v-1.14c.81-.24 1.49-.57 2.04-1.03h1.09v6.24h1.72v1.1h-4.85zM297.95 202h-5.22v-7.68h5.15v1.15h-3.74v2.09h3.26v1.14h-3.26v2.15h3.81V202zm.819-2.4v-1.16h2.46v1.16h-2.46zm3.948 2.4v-1.1h1.74v-4.8c-.55.35-1.15.57-1.74.73v-1.14c.81-.24 1.49-.57 2.04-1.03h1.09v6.24h1.72v1.1h-4.85zm8.636.11c-2.3 0-2.79-1.83-2.79-3.77 0-1.93.48-3.79 2.78-3.79 2.31 0 2.8 1.83 2.8 3.77 0 1.93-.48 3.79-2.79 3.79zm0-1.08c1.27 0 1.4-1.39 1.4-2.7 0-1.31-.13-2.7-1.4-2.7-1.28 0-1.4 1.39-1.4 2.7 0 1.31.12 2.7 1.4 2.7zm4.196.97v-1.1h1.74v-4.8c-.55.35-1.15.57-1.74.73v-1.14c.81-.24 1.49-.57 2.04-1.03h1.09v6.24h1.72v1.1h-4.85zM255.95 202h-5.22v-7.68h5.15v1.15h-3.74v2.09h3.26v1.14h-3.26v2.15h3.81V202zm.819-2.4v-1.16h2.46v1.16h-2.46zm3.948 2.4v-1.1h1.74v-4.8c-.55.35-1.15.57-1.74.73v-1.14c.81-.24 1.49-.57 2.04-1.03h1.09v6.24h1.72v1.1h-4.85zm8.636.11c-2.3 0-2.79-1.83-2.79-3.77 0-1.93.48-3.79 2.78-3.79 2.31 0 2.8 1.83 2.8 3.77 0 1.93-.48 3.79-2.79 3.79zm0-1.08c1.27 0 1.4-1.39 1.4-2.7 0-1.31-.13-2.7-1.4-2.7-1.28 0-1.4 1.39-1.4 2.7 0 1.31.12 2.7 1.4 2.7zm4.196.97v-1.1h1.74v-4.8c-.55.35-1.15.57-1.74.73v-1.14c.81-.24 1.49-.57 2.04-1.03h1.09v6.24h1.72v1.1h-4.85zM97.95 202h-5.22v-7.68h5.15v1.15h-3.74v2.09h3.26v1.14h-3.26v2.15h3.81V202zm.82-2.4v-1.16h2.459v1.16h-2.46zm3.947 2.4v-1.1h1.74v-4.8c-.55.35-1.15.57-1.74.73v-1.14c.81-.24 1.49-.57 2.04-1.03h1.09v6.24h1.72v1.1h-4.85zm8.636.11c-2.3 0-2.79-1.83-2.79-3.77 0-1.93.48-3.79 2.78-3.79 2.31 0 2.8 1.83 2.8 3.77 0 1.93-.48 3.79-2.79 3.79zm0-1.08c1.27 0 1.4-1.39 1.4-2.7 0-1.31-.13-2.7-1.4-2.7-1.28 0-1.4 1.39-1.4 2.7 0 1.31.12 2.7 1.4 2.7zm4.196.97v-1.1h1.74v-4.8c-.55.35-1.15.57-1.74.73v-1.14c.81-.24 1.49-.57 2.04-1.03h1.09v6.24h1.72v1.1h-4.85zM28.95 202h-5.22v-7.68h5.15v1.15h-3.74v2.09h3.26v1.14h-3.26v2.15h3.81V202zm.82-2.4v-1.16h2.46v1.16h-2.46zm3.947 2.4v-1.1h1.74v-4.8c-.55.35-1.15.57-1.74.73v-1.14c.81-.24 1.49-.57 2.04-1.03h1.09v6.24h1.72v1.1h-4.85zm8.636.11c-2.3 0-2.79-1.83-2.79-3.77 0-1.93.48-3.79 2.78-3.79 2.31 0 2.8 1.83 2.8 3.77 0 1.93-.48 3.79-2.79 3.79zm0-1.08c1.27 0 1.4-1.39 1.4-2.7 0-1.31-.13-2.7-1.4-2.7-1.28 0-1.4 1.39-1.4 2.7 0 1.31.12 2.7 1.4 2.7zm4.196.97v-1.1h1.74v-4.8c-.55.35-1.15.57-1.74.73v-1.14c.81-.24 1.49-.57 2.04-1.03h1.09v6.24h1.72v1.1h-4.85zM386.95 99h-5.22v-7.68h5.15v1.15h-3.74v2.09h3.26v1.14h-3.26v2.15h3.81V99zm.819-2.4v-1.16h2.46v1.16h-2.46zm3.948 2.4v-1.1h1.74v-4.8c-.55.35-1.15.57-1.74.73v-1.14c.81-.24 1.49-.57 2.04-1.03h1.09v6.24h1.72V99h-4.85zm8.636.11c-2.3 0-2.79-1.83-2.79-3.77 0-1.93.48-3.79 2.78-3.79 2.31 0 2.8 1.83 2.8 3.77 0 1.93-.48 3.79-2.79 3.79zm0-1.08c1.27 0 1.4-1.39 1.4-2.7 0-1.31-.13-2.7-1.4-2.7-1.28 0-1.4 1.39-1.4 2.7 0 1.31.12 2.7 1.4 2.7zm4.196.97v-1.1h1.74v-4.8c-.55.35-1.15.57-1.74.73v-1.14c.81-.24 1.49-.57 2.04-1.03h1.09v6.24h1.72V99h-4.85zM386.95 202h-5.22v-7.68h5.15v1.15h-3.74v2.09h3.26v1.14h-3.26v2.15h3.81V202zm.819-2.4v-1.16h2.46v1.16h-2.46zm3.948 2.4v-1.1h1.74v-4.8c-.55.35-1.15.57-1.74.73v-1.14c.81-.24 1.49-.57 2.04-1.03h1.09v6.24h1.72v1.1h-4.85zm8.636.11c-2.3 0-2.79-1.83-2.79-3.77 0-1.93.48-3.79 2.78-3.79 2.31 0 2.8 1.83 2.8 3.77 0 1.93-.48 3.79-2.79 3.79zm0-1.08c1.27 0 1.4-1.39 1.4-2.7 0-1.31-.13-2.7-1.4-2.7-1.28 0-1.4 1.39-1.4 2.7 0 1.31.12 2.7 1.4 2.7zm4.196.97v-1.1h1.74v-4.8c-.55.35-1.15.57-1.74.73v-1.14c.81-.24 1.49-.57 2.04-1.03h1.09v6.24h1.72v1.1h-4.85zM441.95 99h-5.22v-7.68h5.15v1.15h-3.74v2.09h3.26v1.14h-3.26v2.15h3.81V99zm.819-2.4v-1.16h2.46v1.16h-2.46zm3.948 2.4v-1.1h1.74v-4.8c-.55.35-1.15.57-1.74.73v-1.14c.81-.24 1.49-.57 2.04-1.03h1.09v6.24h1.72V99h-4.85zm8.636.11c-2.3 0-2.79-1.83-2.79-3.77 0-1.93.48-3.79 2.78-3.79 2.31 0 2.8 1.83 2.8 3.77 0 1.93-.48 3.79-2.79 3.79zm0-1.08c1.27 0 1.4-1.39 1.4-2.7 0-1.31-.13-2.7-1.4-2.7-1.28 0-1.4 1.39-1.4 2.7 0 1.31.12 2.7 1.4 2.7zm4.196.97v-1.1h1.74v-4.8c-.55.35-1.15.57-1.74.73v-1.14c.81-.24 1.49-.57 2.04-1.03h1.09v6.24h1.72V99h-4.85zM441.95 202h-5.22v-7.68h5.15v1.15h-3.74v2.09h3.26v1.14h-3.26v2.15h3.81V202zm.819-2.4v-1.16h2.46v1.16h-2.46zm3.948 2.4v-1.1h1.74v-4.8c-.55.35-1.15.57-1.74.73v-1.14c.81-.24 1.49-.57 2.04-1.03h1.09v6.24h1.72v1.1h-4.85zm8.636.11c-2.3 0-2.79-1.83-2.79-3.77 0-1.93.48-3.79 2.78-3.79 2.31 0 2.8 1.83 2.8 3.77 0 1.93-.48 3.79-2.79 3.79zm0-1.08c1.27 0 1.4-1.39 1.4-2.7 0-1.31-.13-2.7-1.4-2.7-1.28 0-1.4 1.39-1.4 2.7 0 1.31.12 2.7 1.4 2.7zm4.196.97v-1.1h1.74v-4.8c-.55.35-1.15.57-1.74.73v-1.14c.81-.24 1.49-.57 2.04-1.03h1.09v6.24h1.72v1.1h-4.85zM511.95 99h-5.22v-7.68h5.15v1.15h-3.74v2.09h3.26v1.14h-3.26v2.15h3.81V99zm.819-2.4v-1.16h2.46v1.16h-2.46zm3.948 2.4v-1.1h1.74v-4.8c-.55.35-1.15.57-1.74.73v-1.14c.81-.24 1.49-.57 2.04-1.03h1.09v6.24h1.72V99h-4.85zm8.636.11c-2.3 0-2.79-1.83-2.79-3.77 0-1.93.48-3.79 2.78-3.79 2.31 0 2.8 1.83 2.8 3.77 0 1.93-.48 3.79-2.79 3.79zm0-1.08c1.27 0 1.4-1.39 1.4-2.7 0-1.31-.13-2.7-1.4-2.7-1.28 0-1.4 1.39-1.4 2.7 0 1.31.12 2.7 1.4 2.7zm4.196.97v-1.1h1.74v-4.8c-.55.35-1.15.57-1.74.73v-1.14c.81-.24 1.49-.57 2.04-1.03h1.09v6.24h1.72V99h-4.85zM583.95 99h-5.22v-7.68h5.15v1.15h-3.74v2.09h3.26v1.14h-3.26v2.15h3.81V99zm.819-2.4v-1.16h2.46v1.16h-2.46zm3.948 2.4v-1.1h1.74v-4.8c-.55.35-1.15.57-1.74.73v-1.14c.81-.24 1.49-.57 2.04-1.03h1.09v6.24h1.72V99h-4.85zm8.636.11c-2.3 0-2.79-1.83-2.79-3.77 0-1.93.48-3.79 2.78-3.79 2.31 0 2.8 1.83 2.8 3.77 0 1.93-.48 3.79-2.79 3.79zm0-1.08c1.27 0 1.4-1.39 1.4-2.7 0-1.31-.13-2.7-1.4-2.7-1.28 0-1.4 1.39-1.4 2.7 0 1.31.12 2.7 1.4 2.7zm4.196.97v-1.1h1.74v-4.8c-.55.35-1.15.57-1.74.73v-1.14c.81-.24 1.49-.57 2.04-1.03h1.09v6.24h1.72V99h-4.85zM583.95 202h-5.22v-7.68h5.15v1.15h-3.74v2.09h3.26v1.14h-3.26v2.15h3.81V202zm.819-2.4v-1.16h2.46v1.16h-2.46zm3.948 2.4v-1.1h1.74v-4.8c-.55.35-1.15.57-1.74.73v-1.14c.81-.24 1.49-.57 2.04-1.03h1.09v6.24h1.72v1.1h-4.85zm8.636.11c-2.3 0-2.79-1.83-2.79-3.77 0-1.93.48-3.79 2.78-3.79 2.31 0 2.8 1.83 2.8 3.77 0 1.93-.48 3.79-2.79 3.79zm0-1.08c1.27 0 1.4-1.39 1.4-2.7 0-1.31-.13-2.7-1.4-2.7-1.28 0-1.4 1.39-1.4 2.7 0 1.31.12 2.7 1.4 2.7zm4.196.97v-1.1h1.74v-4.8c-.55.35-1.15.57-1.74.73v-1.14c.81-.24 1.49-.57 2.04-1.03h1.09v6.24h1.72v1.1h-4.85z"
         ></path>
-        <FloorWestWingHighlighting />
       </svg>
     </>
   );
diff --git a/src/components/complexWingPage/SkygardenDescription.tsx b/src/components/complexWingPage/SkygardenDescription.tsx
index 2e11d5e..341abd8 100644
--- a/src/components/complexWingPage/SkygardenDescription.tsx
+++ b/src/components/complexWingPage/SkygardenDescription.tsx
@@ -1,31 +1,33 @@
 const SkygardenDescription = () => {
   return (
-    <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]`}
-    >
-      <div className="relative">
-        <div className="flex justify-between border-b pb-4">
-          <p
-            className={`text-[#0D1922] font-semibold text-[20px] duration-300 ease-in-out `}
-          >
-            Sky Garden
-          </p>
-          <div className="py-[3px] px-2 rounded-full bg-[#00BED7] text-white">
-            17 amenties
+    <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`}
+      >
+        <div className="relative ">
+          <div className="flex justify-between border-b pb-4">
+            <p
+              className={`text-[#0D1922] font-semibold text-[20px] duration-300 ease-in-out `}
+            >
+              Sky Garden
+            </p>
+            <div className="py-[3px] px-2 rounded-full bg-[#00BED7] text-white">
+              17 amenties
+            </div>
           </div>
-        </div>
-        <div className="flex flex-col gap-4 pt-4">
-          <div className="flex items-center justify-between gap-[178px]">
-            <p className="text-s text-[#73787C] w-full">Indoor</p>
-            <p className="text-s text-[#0D1922] text-nowrap">3 amenties</p>
-          </div>
-          <div className="flex items-center justify-between">
-            <p className="text-s text-[#73787C]">Outdoor </p>
+          <div className="flex flex-col gap-4 pt-4">
+            <div className="flex items-center justify-between gap-[178px]">
+              <p className="text-s text-[#73787C] w-full">Indoor</p>
+              <p className="text-s text-[#0D1922] text-nowrap">3 amenties</p>
+            </div>
+            <div className="flex items-center justify-between">
+              <p className="text-s text-[#73787C]">Outdoor </p>
 
-            <p className="text-s text-[#0D1922] text-nowrap">14 amenties</p>
+              <p className="text-s text-[#0D1922] text-nowrap">14 amenties</p>
+            </div>
           </div>
+          <div className="w-0 h-0 border-t-0 border-r-[7px] border-b-[12px] border-l-[7px] border-transparent border-b-white -rotate-90 absolute top-0 -left-[35px]"></div>
         </div>
-        <div className="w-0 h-0 border-t-0 border-r-[7px] border-b-[12px] border-l-[7px] border-transparent border-b-white -rotate-90 absolute top-0 -left-[35px]"></div>
       </div>
     </div>
   );
diff --git a/src/index.css b/src/index.css
index ffddb23..4eafcc7 100644
--- a/src/index.css
+++ b/src/index.css
@@ -18,6 +18,10 @@ html {
 }
 
 @layer components {
+  .desc-shadow {
+    box-shadow: 0px 4px 20px 1px #00000026;
+  }
+
   .text-caption-s {
     font-family: "Usual", sans-serif;
     font-size: clamp(10px, 0.3744rem + 0.313vw, 12px);