modals

client/src/components/complexWingPage/MobileApartmentDescription.tsx

@@ -58,7 +58,7 @@ const MobileApartmentDescription = ({
       {apartment && (
         <div className="p-6 py-3">
           <div
-            className={`bg-white rounded-2xl p-6 flex flex-col text-subheadline-s relative text-nowrap desc-shadow py-2  duration-300 ease-in-out transition-opacity min-w-[344px]`}
+            className={`bg-white rounded-2xl p-6 flex flex-col text-subheadline-s relative text-nowrap desc-shadow py-2 duration-300 ease-in-out transition-opacity min-w-[825px]`}
           >
             <h2 className="text-[#0D1922] font-semibold pt-6">
               {apartment?.Unit_Type},{" "}
@@ -80,16 +80,18 @@ const MobileApartmentDescription = ({
           </p> */}
               {isVirtualTourAvailiable && (
                 <div
-                  className={`bg-[#30B21614] text-[#30B216] px-2 py-[6px] flex gap-1 items-center rounded-lg opacity-100`}
+                  className={`bg-[#30B21614] text-[#30B216] px-[19.2px] py-[9.6px] flex gap-[9.6px] items-center rounded-lg opacity-100`}
                 >
-                  <VirtualTourIcon />
+                  <div className="zoom-280">
+                    <VirtualTourIcon />
+                  </div>
                   <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 className="w-0 h-0 border-transparent border-t-[33px] border-x-[14px] border-b-0 absolute left-[57.6px] -bottom-[32px] border-t-white"></div>
             <div className="w-full pb-6 ">
               <Button
                 buttonType="cta"

client/src/components/complexWingPage/SequenceWing/MobileFloorDescription.tsx

@@ -18,7 +18,7 @@ const MobileFloorDescription = ({
   return (
     <>
       <div
-        className={`bg-white rounded-2xl p-6 flex flex-col gap-4 w-[825px] absolute left-[414px] transition-opacity duration-300 desc-shadow h-[816px]`}
+        className={`bg-white rounded-2xl p-6 flex flex-col gap-4 w-[825px] absolute left-[414px] transition-opacity duration-300 desc-shadow `}
       >
         <div className="relative">
           <div className="flex justify-between border-b pb-4">

client/src/components/complexWingPage/SkygardenSidebar/ActivityCard.tsx

@@ -10,7 +10,7 @@ const ActivityCard = ({ icon, title }: ActivityCardProps) => {
         <div className="w-3 h-3 bg-[#E2E2DC] rounded-full"></div>
         <p className="text-m text-[#0D1922]">{title}</p>
       </div>
-      <div className="w-14 h-14 rounded-lg bg-[#F3F3F2] self-end text-[#00BED7]">
+      <div className="w-[56px] h-[56px] rounded-lg bg-[#F3F3F2] self-end text-[#00BED7] zoom-280">
         {icon}
       </div>
     </div>

client/src/components/complexWingPage/SkygardenSidebar/SkygardenIndoorLayout.tsx

@@ -1,6 +1,7 @@
 function SkygardenIndoorLayout() {
   return (
     <img
+      className="zoom-280"
       src="/images/masterplanWing/skygardenIndoor.png"
       alt=""
       width={672}

client/src/components/complexWingPage/SkygardenSidebar/SkygardenOutdoorLayout.tsx

@@ -1,6 +1,7 @@
 const SkygardenOutdoorLayout = () => {
   return (
     <img
+      className="zoom-280"
       src="/images/masterplanWing/skygardenOutdoor.png"
       width={672}
       height={544}

client/src/components/complexWingPage/SkygardenSidebar/ZoneSlider.tsx

@@ -1,11 +1,10 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import { useSwipeable } from "react-swipeable";
-import { Image } from "../../../types/image";
 import { useLayoutEffect, useRef, useState } from "react";
+import { Image } from "../../../types/image";
 import Button from "../../Button";
 import LeftArrowSliderIcon from "../../icons/LeftArrowSliderIcon";
 import RightArrowSliderIcon from "../../icons/RightArrowSliderIcon";
-import { isMobile } from "react-device-detect";
 
 const images: Image[] = [
   { id: "1", src: "/images/company/slider/1.png" },
@@ -14,7 +13,7 @@ const images: Image[] = [
 ];
 
 const getGapOffset = (screenWidth: number) => {
-  if (screenWidth > 1600) return 16;
+  if (screenWidth > 1600) return 45;
   if (screenWidth > 1280) return 24;
   if (screenWidth > 640) return 16;
   return 16;
@@ -37,7 +36,8 @@ const ZoneSlider = () => {
     const gapOffset = getGapOffset(screenWidth);
 
     const _rightImageOffset = `${
-      -24 + (selectedImageIndex + 1) * (imageWidth + gapOffset)
+      // -24 + (selectedImageIndex + 1) * (imageWidth + gapOffset)
+      -57.5 + (selectedImageIndex + 1) * (imageWidth + gapOffset)
     }px`;
 
     setRightImageOffset(_rightImageOffset);
@@ -50,7 +50,7 @@ const ZoneSlider = () => {
   });
 
   function next() {
-    const lastIndex = isMobile ? images.length - 2 : images.length - 3;
+    const lastIndex = images.length - 3;
 
     if (selectedImageIndex === lastIndex + 1) return;
     setSelectedImageIndex((prev) => prev + 1);
@@ -62,8 +62,10 @@ const ZoneSlider = () => {
   }
 
   return (
-    <div className="flex flex-col gap-6 " {...handlers}>
-      <div className="relative col-span-full overflow-x-hidden flex flex-col h-[372px] ">
+    <div className="flex flex-col gap-6 pt-[1147px] pb-[96px]" {...handlers}>
+      {/* <div className="flex flex-col gap-6 pt-[1108.5px]" {...handlers}> */}
+      <div className="relative col-span-full overflow-x-hidden flex flex-col h-[892px] border-b">
+        {/* <div className="relative col-span-full overflow-x-hidden flex flex-col h-[372px] "> */}
         <div
           className={`flex gap-4 w-full absolute h-full transition-all duration-300 ease-in-out select-none xl:px-0 px-4`}
           style={{
@@ -81,24 +83,26 @@ const ZoneSlider = () => {
           ))}
         </div>
         <Button
+          isCircleRounded
           onClick={prev}
           icon={<LeftArrowSliderIcon />}
           className="absolute text-[#73787C] top-[calc(50%-22px)] left-8 hidden sm:block"
         />
         <Button
+          isCircleRounded
           onClick={next}
           icon={<RightArrowSliderIcon />}
           className="absolute text-[#73787C] top-[calc(50%-22px)] right-8 hidden sm:block"
         />
       </div>
-      <div className="self-center gap-1 sm:hidden flex">
+      <div className="self-center gap-[4px] sm:hidden flex zoom-280">
         {images.map((image, index) => (
           <div
             key={image.id}
-            className={`transition-all duration-300 ease-in-out rounded-full h-2  ${
+            className={`transition-all duration-300 ease-in-out rounded-full h-[8px]  ${
               index - 1 === selectedImageIndex
-                ? "w-6 bg-[#0D1922]"
-                : "w-2 bg-[#0D192266]"
+                ? "w-[24px] bg-[#0D1922]"
+                : "w-[8px] bg-[#0D192266]"
             }`}
           ></div>
         ))}