search page + favorite page

client/src/components/Footer.tsx

@@ -2,15 +2,15 @@ import Logo from "./Logo";
 
 const Footer = () => {
   return (
-    <footer className="grid xl:grid-cols-12 sm:grid-cols-8 bg-white pr-7 py-8 gap-4 rounded-ss-2xl rounded-se-2xl">
+    <footer className="grid  sm:grid-cols-8 bg-white pr-7 py-8 gap-4 rounded-ss-2xl rounded-se-2xl">
       <div className="flex flex-col justify-between sm:row-span-2 sm:col-span-2 col-span-8">
         <Logo />
-        <p className="text-caption-s text-[#73787C] font-semibold hidden sm:block pl-7">
+        <p className="text-caption-s text-[#73787C] font-semibold block pl-7">
           Privacy Policy
         </p>
       </div>
-      <div className="border-t flex justify-between 2xl:col-start-7 2xl:col-span-3 xl:col-span-4 xl:col-start-5 sm:col-start-5 sm:col-span-full col-span-8">
-        <p className="text-[#73787C] py-3">COMPANY</p>
+      <div className="border-t flex justify-between sm:col-start-5 sm:col-span-full col-span-8 mr-4">
+        <p className="text-[#73787C] py-3 text-[33.75px]">COMPANY</p>
         <div className="flex flex-col text-m text-[#73787C] text-left w-[5em]">
           <p className="py-3">Masterplan</p>
           <p className="py-3">Search</p>
@@ -18,8 +18,8 @@ const Footer = () => {
           <p className="py-3 text-s">Company</p>
         </div>
       </div>
-      <div className="border-t flex justify-between 2xl:col-span-3 xl:col-span-4 sm:col-start-5 sm:col-span-full col-span-8">
-        <p className="text-[#73787C] py-3">FOLLOW US</p>
+      <div className="border-t flex justify-between sm:col-start-5 sm:col-span-full col-span-8 mr-4">
+        <p className="text-[#73787C] py-3 text-[33.75px]">FOLLOW US</p>
         <div className="flex flex-col text-m text-[#73787C] text-left w-[5em]">
           <a
             className="py-3"
@@ -58,11 +58,6 @@ const Footer = () => {
           </a>
         </div>
       </div>
-      <div className="block sm:hidden col-span-8 border-t">
-        <p className="text-caption-s text-[#73787C] font-semibold pt-3">
-          Privacy Policy
-        </p>
-      </div>
     </footer>
   );
 };

client/src/components/aboutComplex/LivingSolutionSlider.tsx

@@ -2,9 +2,6 @@
 import { useSwipeable } from "react-swipeable";
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { Image } from "../../types/image";
-import Button from "../Button";
-import LeftArrowSliderIcon from "../icons/LeftArrowSliderIcon";
-import RightArrowSliderIcon from "../icons/RightArrowSliderIcon";
 
 const isMobile = true;
 
@@ -16,10 +13,10 @@ const images: Image[] = [
 ];
 
 const getGapOffset = (screenWidth: number) => {
-  if (screenWidth > 1600) return 16;
-  if (screenWidth > 1280) return 24;
-  if (screenWidth > 640) return 16;
-  return 16;
+  // if (screenWidth > 1600) return 16;
+  // if (screenWidth > 1280) return 24;
+  if (screenWidth > 640) return 45;
+  return 45;
 };
 
 const LivingSolutionSlider = () => {
@@ -56,25 +53,18 @@ const LivingSolutionSlider = () => {
     const screenWidth = window.innerWidth;
     const gapOffset = getGapOffset(screenWidth);
 
-    const _rightImageOffset =
-      screenWidth > 1280
-        ? `${"calc(clamp(315px, 7.0317rem + 19.0319vw, 485px)"} + ${
-            // ? `${"calc(clamp(315px, 6.9317rem + 17.0319vw, 420px)"} + ${
-            selectedImageIndex * (imageWidth + gapOffset)
-          }px)`
-        : `${(selectedImageIndex + 1) * (imageWidth + gapOffset)}px`;
+    const _rightImageOffset = `${
+      (selectedImageIndex + 1) * (imageWidth + gapOffset)
+    }px`;
 
     setRightImageOffset(_rightImageOffset);
   }, [imageWidth, selectedImageIndex, window.innerWidth]);
 
   return (
     <div className="flex flex-col gap-6" {...handlers}>
-      <div
-        className="relative col-span-full overflow-x-hidden flex flex-col"
-        style={{ height: "clamp(30rem, 12.6318rem + 21.6933vw, 75rem)" }}
-      >
+      <div className="relative col-span-full overflow-x-hidden flex flex-col h-[1122px]">
         <div
-          className={`flex gap-4 w-full absolute h-full transition-all duration-300 ease-in-out select-none xl:px-0 px-4`}
+          className={`flex gap-4 w-full absolute h-full transition-all duration-300 ease-in-out select-none`}
           style={{
             right: `${rightImageOffset}`,
           }}
@@ -85,32 +75,20 @@ const LivingSolutionSlider = () => {
               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 sm:aspect-[6/5] object-cover pointer-events-none select-none w-[calc(100%-16px)]"
             />
           ))}
         </div>
-        <Button
+        {/* <Button
           onClick={prev}
           icon={<LeftArrowSliderIcon />}
-          className="absolute text-[#73787C] top-[calc(50%-22px)] xl:left-solution-slider-btn-offset left-6 hidden sm:block"
+          className="absolute text-[#73787C] top-[calc(50%-22px)] left-6 hidden sm:block"
         />
         <Button
           onClick={next}
           icon={<RightArrowSliderIcon />}
           className="absolute text-[#73787C] top-[calc(50%-22px)] right-6 hidden sm:block"
-        />
-      </div>
-      <div className="self-center gap-1 sm:hidden flex">
-        {images.map((image, index) => (
-          <div
-            key={image.id}
-            className={`transition-all duration-300 ease-in-out rounded-full h-2  ${
-              index - 1 === selectedImageIndex
-                ? "w-6 bg-[#0D1922]"
-                : "w-2 bg-[#0D192266]"
-            }`}
-          ></div>
-        ))}
+        /> */}
       </div>
     </div>
   );

client/src/components/aboutComplex/RoveHomeSlider.tsx

@@ -74,18 +74,6 @@ const RoveHomeSlider = () => {
     }
   }
 
-  // const handleOnRightClick = () => {
-  //   if (offset > -1 * (rovehomeSlides.length - 1)) {
-  //     setOffset((prev) => prev - 1);
-  //   }
-  // };
-
-  // const handleOnLeftClick = () => {
-  //   if (offset < 0) {
-  //     setOffset((prev) => prev + 1);
-  //   }
-  // };
-
   useEffect(() => {
     if (!imageRef.current) return;
     const width = imageRef.current.width;
@@ -94,13 +82,12 @@ const RoveHomeSlider = () => {
 
   return (
     <div
-      className="col-span-full relative xl:aspect-video sm:aspect-[7.6/10] grid grid-cols-12 items-end pb-6 sm:pl-4 sm:px-0 px-4"
+      className="col-span-full relative sm:aspect-[7.6/10] grid grid-cols-12 items-end pb-6 px-4"
       {...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-[67.5px] z-50 col-span-6 rounded-2xl sm:flex hidden flex-col justify-between">
         <div>
-          <h2 className="text-subheadline-m font-semibold text-[#00BED7] pb-4 ">
+          <h2 className="text-subheadline-m font-semibold text-[#00BED7] pb-4">
             {rovehomeSlides[offset * -1].title}
           </h2>
           <p className="text-[#73787C] text-m ">
@@ -115,13 +102,14 @@ const RoveHomeSlider = () => {
             <Button icon={<LeftArrowIcon />} onClick={prev} />
             <Button icon={<RightArrowIcon />} onClick={next} />
           </div>
-          <p className="text-l text-[#00BED7]">
+          <p className="text-s text-[#00BED7]">
             {rovehomeSlides.length - rovehomeSlides.length + 1 - offset}/
             {rovehomeSlides.length}
           </p>
         </div>
       </div>
-      <div className="sm:absolute lg:w-[calc(100vw-5px)] sm:w-screen w-[calc(100vw-32px)] overflow-hidden xl:aspect-video sm:aspect-[7.6/10]  rounded-2xl sm:rounded-ee-2xl sm:rounded-es-2xl rounded-ee-none rounded-es-none">
+      {/* <div className="sm:absolute lg:w-[calc(100vw-5px)] sm:w-screen w-[calc(100vw-32px)] overflow-hidden xl:aspect-video sm:aspect-[7.6/10]  rounded-2xl sm:rounded-ee-2xl sm:rounded-es-2xl rounded-ee-none rounded-es-none"> */}
+      <div className="sm:absolute sm:w-screen overflow-hidden sm:aspect-[7.6/10]  rounded-2xl sm:rounded-ee-2xl sm:rounded-es-2xl">
         <div
           className="w-fit flex transition-transform duration-300 ease-in-out"
           style={{ transform: `translateX(${offset * imageWidth}px)` }}
@@ -133,19 +121,12 @@ const RoveHomeSlider = () => {
                 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"
+                className="select-none pointer-events-none sm:aspect-[7.6/10] aspect-video object-cover"
               />
-              <div className="flex p-4 flex-col gap-3 bg-white rounded-ee-2xl rounded-es-2xl sm:hidden sm:w-full w-[calc(100vw-32px)] h-full">
-                <h2 className="text-[#00BED7] font-semibold text-subheadline-m">
-                  {slide.title}
-                </h2>
-                <p className="mobile-text-s text-[#73787C]">{slide.desc1}</p>
-                <p className="mobile-text-s text-[#73787C]">{slide.desc2}</p>
-              </div>
             </div>
           ))}
         </div>
-        <div className="flex gap-1 justify-center pt-4 ">
+        <div className="flex justify-center pt-4">
           {rovehomeSlides.map((_, index) => (
             <div
               className={`rounded-full transition-all duration-300 ease-in-out sm:hidden ${

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

@@ -18,6 +18,7 @@ import MobileFloorDescription from "./MobileFloorDescription";
 import WingFloorModal from "../../modals/mobile/WingFloorModal";
 import MobileSkygardenDescription from "./MobileSkygardenDescription";
 import SkygardenModal from "../../modals/mobile/SkygardenModal";
+import LoaderModal from "../../modals/LoaderModal";
 
 // const skyGardenFloor = 22;
 
@@ -34,8 +35,8 @@ const SequenceWing = () => {
     null
   );
   const [, setIsWrapperHovered] = useState(false);
-  const [isSkygardenSidebar, setIsSkygardenSidebar] = useState(false);
-  const [isFloorSidebar, setIsFloorSidebar] = useState(false);
+  const [isSkygardenSidebar] = useState(false);
+  const [isFloorSidebar] = useState(false);
   const { setModal } = useModal();
   const [apartments, setApartments] = useState<IAparmentRes[]>([]);
   const [currentHoveredApartments, setCurrentHoveredApartments] = useState<
@@ -268,13 +269,13 @@ const SequenceWing = () => {
     sortList,
   ]);
 
-  // useEffect(() => {
-  //   if (isLoading) {
-  //     setModal(<LoaderModal />);
-  //   } else {
-  //     setModal(null);
-  //   }
-  // }, [isLoading, setModal]);
+  useEffect(() => {
+    if (isLoading) {
+      setModal(<LoaderModal />);
+    } else {
+      setModal(null);
+    }
+  }, [isLoading, setModal]);
 
   return (
     <div className="absolute left-0 overflow-hidden h-screen w-screen select-none ">

client/src/components/favoritesPage/FavoriteApartmentCard.tsx

@@ -75,15 +75,11 @@ const FavoriteAppartmentCard = ({ card }: FavoriteAppartmentCardProps) => {
         className="bg-white flex flex-col p-4 rounded-2xl gap-4 cursor-pointer select-none"
         onClick={handleOnFavoriteCardClick}
       >
-        <div className="flex gap-4  justify-between">
+        <div className="flex gap-4 justify-between">
           <div className="flex gap-1 flex-col">
-            <p className="text-[#00BED7] text-s leading-5">
-              Rove Home {Unit_Type}
-            </p>
+            <p className="text-[#00BED7] text-s">Rove Home {Unit_Type}</p>
             <div className="text-[#73787C] flex gap-2 items-center w-fit">
-              <p className="text-caption-m font-semibold leading-4">
-                {wing} Wing
-              </p>
+              <p className="text-caption-m font-semibold">{wing} Wing</p>
               <div className="w-1 h-1 bg-[#E2E2DC] rounded-full"></div>
               <p className="text-caption-m font-semibold leading-4">
                 Floor {Floor}

client/src/components/favoritesPage/FavoriteCardList.tsx

@@ -4,7 +4,7 @@ import FavoriteAppartmentCard from "./FavoriteApartmentCard";
 const FavoriteCardList = () => {
   const { favorites } = useFavorites();
   return (
-    <div className="grid lg:grid-cols-4 gap-4 grid-cols-2">
+    <div className="grid gap-4 grid-cols-2">
       {favorites.map((card) => (
         <FavoriteAppartmentCard card={card} key={card.id} />
       ))}

client/src/components/favoritesPage/FavoriteSlider.tsx

@@ -33,18 +33,18 @@ const FavoritesSlider = () => {
   };
 
   useEffect(() => {
-    const screenWidth = window.innerWidth;
-    if (screenWidth >= 1024) {
-      setCols(4);
-    } else {
-      setCols(2);
-    }
+    // const screenWidth = window.innerWidth;
+    // if (screenWidth >= 1024) {
+    //   setCols(4);
+    // } else {
+    setCols(2);
+    // }
   }, [window.innerWidth]);
 
   useEffect(() => {
     const cardElement = cardRef.current;
     if (cardElement) {
-      const gap = 16;
+      const gap = 45;
       const width = cardElement.clientWidth + gap;
       const buttonHeight = cardElement.clientHeight;
       const _buttonTopPos = buttonHeight / 2 + 20;
@@ -54,7 +54,7 @@ const FavoritesSlider = () => {
   }, [cardRef.current]);
 
   return (
-    <div className="w-[calc(100vw - 48px)] relative">
+    <div className="w-[calc(100vw - 135px)] relative">
       <div
         className="absolute -left-2 z-30"
         style={{ top: `${buttonTopPos}px` }}
@@ -85,10 +85,9 @@ const FavoritesSlider = () => {
           <div className="flex w-fit gap-4">
             {Array.from({ length: Math.ceil(favorites.length / cols) }).map(
               (_, index) => {
-                console.log("index", index);
                 return (
                   <div
-                    className="grid lg:grid-cols-4 grid-cols-2 gap-4 w-[calc(100vw-48px)] h-fit"
+                    className="grid grid-cols-2 gap-4 w-[calc(100vw-135px)] h-fit "
                     key={index}
                   >
                     {favorites

client/src/components/header/Navbar/NavbarTabDesktop.tsx

@@ -26,7 +26,7 @@ const NavbarTabDesktop = ({
         {tab.value}
       </div>
       {tab.count !== 0 && (
-        <div className="absolute top-2 right-0 w-4 h-4 bg-[#00BED7] rounded-full text-white text-[24px] flex items-center justify-center pt-0.5 pr-[1px]">
+        <div className="absolute top-[24px] right-0 w-[38.4px] h-[38.4px] bg-[#00BED7] rounded-full text-white text-[24px] flex items-center justify-center pt-[0.5] pr-[1px]">
           <span className="leading-none">{tab.count}</span>
         </div>
       )}

client/src/components/modals/mobile/SearchFiltersModal.tsx

@@ -126,7 +126,7 @@ const SearchFiltersModal = () => {
 
   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">

client/src/components/searchPage/LayoutCard.tsx

@@ -84,19 +84,13 @@ const LayoutCard = ({ apartmentCard }: LayoutCardProps) => {
     >
       <div className="flex gap-4 justify-between">
         <div className="flex gap-1 flex-col">
-          <p className="text-[#00BED7] text-s leading-5">{projectName}</p>
+          <p className="text-[#00BED7] text-s">{projectName}</p>
           <div className="text-[#73787C] flex gap-2 items-center w-fit">
-            <p className="text-caption-m font-semibold leading-4">
-              {wing} Wing
-            </p>
+            <p className="text-caption-m font-semibold">{wing} Wing</p>
             <div className="w-1 h-1 bg-[#E2E2DC] rounded-full"></div>
-            <p className="text-caption-m font-semibold leading-4">
-              Floor {floor}
-            </p>
+            <p className="text-caption-m font-semibold">Floor {floor}</p>
             <div className="w-1 h-1 bg-[#E2E2DC] rounded-full"></div>
-            <p className="text-caption-m font-semibold leading-4">
-              № {unitNumber}
-            </p>
+            <p className="text-caption-m font-semibold">№ {unitNumber}</p>
           </div>
         </div>
         <Button

client/src/components/searchPage/LayoutOptions.tsx

@@ -120,10 +120,10 @@ const LayoutOptions = () => {
   ]);
 
   return (
-    <section className="w-full p-6 flex flex-col">
+    <section className="w-full p-6 flex flex-col pt-[156px]">
       <div className="flex justify-between items-center border-b">
-        <div className="flex w-full justify-between pb-4 lg:flex-row lg:items-center flex-col">
-          <div className="flex gap-4 font-semibold text-subheadline-s leading-7 py-[6px]">
+        <div className="flex w-full justify-between pb-4 flex-col gap-4">
+          <div className="flex gap-4 font-semibold text-subheadline-s">
             <h2 className="text-[#0D1922]">Units</h2>
             <p className="text-[#73787C]">
               {apartments ? apartments.length : 0}
@@ -131,10 +131,11 @@ const LayoutOptions = () => {
           </div>
           <SortButton sortList={sortList} onClick={handleOnSortClick} />
         </div>
-        <div className="lg:hidden block">
+        <div className="self-start">
           <Button
             icon={<FilterIcon />}
             text="Filters"
+            buttonType="primary"
             className="text-[#0D1922B2]"
             onClick={handleOnFilterClick}
           />
@@ -143,7 +144,7 @@ const LayoutOptions = () => {
       {isLoading ? (
         <SearchLoader />
       ) : (
-        <div className="grid 2xl:grid-cols-4 xl:grid-cols-3 grid-cols-2 gap-4 pt-6">
+        <div className="grid grid-cols-2 gap-4 pt-6">
           {apartments &&
             apartments.map((apartment) => (
               <LayoutCard apartmentCard={apartment} key={apartment.id} />
@@ -151,10 +152,13 @@ const LayoutOptions = () => {
         </div>
       )}
       <div
-        className="bg-white rounded-lg mt-4 py-[10px] flex justify-center select-none cursor-pointer items-center gap-2"
+        className="bg-white rounded-lg mt-4 py-[28.75px] flex justify-center select-none cursor-pointer items-center gap-2"
         onClick={handleOnShowMoreBtnClick}
       >
-        <SearchIcon /> Show 12 more apartments
+        <div className="zoom-280">
+          <SearchIcon />{" "}
+        </div>{" "}
+        <p className="text-[39.38px]">Show 12 more apartments</p>
       </div>
     </section>
   );

client/src/components/searchPage/SidebarFilters.tsx

@@ -99,7 +99,7 @@ const SidebarFilters = () => {
 
   return (
     <div>
-      <div className=" h-full w-[360px] bg-[#F3F3F2] flex-col items-center justify-between border-r lg:flex hidden">
+      <div className=" h-full w-[360px] bg-[#F3F3F2] flex-col items-center justify-between border-r hidden">
         <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>

client/src/components/searchPage/SortButton.tsx

@@ -26,7 +26,7 @@ const SortButton = ({ sortList, onClick }: SortButtonProps) => {
           {sortList.find((sort) => sort.isSelected)?.title.toLocaleLowerCase()}{" "}
         </div>
         <div
-          className={`transition-all duration-300 ease-in-out ${
+          className={`zoom-280 transition-all duration-300 ease-in-out ${
             isSelected ? "rotate-180" : "rotate-0"
           }`}
         >