From e93cc7ceea31fb98b9ee8b1671f0331660499c85 Mon Sep 17 00:00:00 2001
From: zojgame <zogame002@gmail.com>
Date: Fri, 5 Jul 2024 17:46:34 +0500
Subject: [PATCH] search page + favorite page

---
 client/src/components/Footer.tsx              |  17 +--
 .../aboutComplex/LivingSolutionSlider.tsx     |  48 ++----
 .../aboutComplex/RoveHomeSlider.tsx           |  35 +----
 .../SequenceWing/SequenceWing.tsx             |  19 +--
 .../favoritesPage/FavoriteApartmentCard.tsx   |  10 +-
 .../favoritesPage/FavoriteCardList.tsx        |   2 +-
 .../favoritesPage/FavoriteSlider.tsx          |  19 ++-
 .../header/Navbar/NavbarTabDesktop.tsx        |   2 +-
 .../modals/mobile/SearchFiltersModal.tsx      |   2 +-
 .../src/components/searchPage/LayoutCard.tsx  |  14 +-
 .../components/searchPage/LayoutOptions.tsx   |  18 ++-
 .../components/searchPage/SidebarFilters.tsx  |   2 +-
 .../src/components/searchPage/SortButton.tsx  |   2 +-
 client/src/consts/buttonStyles.ts             |  12 +-
 client/src/index.css                          |   7 +-
 client/src/pages/AboutComplex.tsx             | 118 +++++++--------
 client/src/pages/Favorites.tsx                | 143 +-----------------
 client/src/pages/Search.tsx                   |   4 +-
 client/tailwind.config.js                     |   7 +
 19 files changed, 151 insertions(+), 330 deletions(-)

diff --git a/client/src/components/Footer.tsx b/client/src/components/Footer.tsx
index fe0c7f3..9122e7e 100644
--- a/client/src/components/Footer.tsx
+++ b/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>
   );
 };
diff --git a/client/src/components/aboutComplex/LivingSolutionSlider.tsx b/client/src/components/aboutComplex/LivingSolutionSlider.tsx
index e9b8b27..405f3cf 100644
--- a/client/src/components/aboutComplex/LivingSolutionSlider.tsx
+++ b/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>
   );
diff --git a/client/src/components/aboutComplex/RoveHomeSlider.tsx b/client/src/components/aboutComplex/RoveHomeSlider.tsx
index 4cace65..b33bbfc 100644
--- a/client/src/components/aboutComplex/RoveHomeSlider.tsx
+++ b/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 ${
diff --git a/client/src/components/complexWingPage/SequenceWing/SequenceWing.tsx b/client/src/components/complexWingPage/SequenceWing/SequenceWing.tsx
index af14f00..f191f84 100644
--- a/client/src/components/complexWingPage/SequenceWing/SequenceWing.tsx
+++ b/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 ">
diff --git a/client/src/components/favoritesPage/FavoriteApartmentCard.tsx b/client/src/components/favoritesPage/FavoriteApartmentCard.tsx
index bd85b4a..4aa8785 100644
--- a/client/src/components/favoritesPage/FavoriteApartmentCard.tsx
+++ b/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}
diff --git a/client/src/components/favoritesPage/FavoriteCardList.tsx b/client/src/components/favoritesPage/FavoriteCardList.tsx
index e66679f..842ce65 100644
--- a/client/src/components/favoritesPage/FavoriteCardList.tsx
+++ b/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} />
       ))}
diff --git a/client/src/components/favoritesPage/FavoriteSlider.tsx b/client/src/components/favoritesPage/FavoriteSlider.tsx
index e1d67c1..98d42cf 100644
--- a/client/src/components/favoritesPage/FavoriteSlider.tsx
+++ b/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
diff --git a/client/src/components/header/Navbar/NavbarTabDesktop.tsx b/client/src/components/header/Navbar/NavbarTabDesktop.tsx
index 9a43e1e..ec7e24c 100644
--- a/client/src/components/header/Navbar/NavbarTabDesktop.tsx
+++ b/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>
       )}
diff --git a/client/src/components/modals/mobile/SearchFiltersModal.tsx b/client/src/components/modals/mobile/SearchFiltersModal.tsx
index 289d5ef..184b515 100644
--- a/client/src/components/modals/mobile/SearchFiltersModal.tsx
+++ b/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">
diff --git a/client/src/components/searchPage/LayoutCard.tsx b/client/src/components/searchPage/LayoutCard.tsx
index 6b582f7..3962e56 100644
--- a/client/src/components/searchPage/LayoutCard.tsx
+++ 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
diff --git a/client/src/components/searchPage/LayoutOptions.tsx b/client/src/components/searchPage/LayoutOptions.tsx
index 1d95018..48ee968 100644
--- a/client/src/components/searchPage/LayoutOptions.tsx
+++ b/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>
   );
diff --git a/client/src/components/searchPage/SidebarFilters.tsx b/client/src/components/searchPage/SidebarFilters.tsx
index 3dc8c24..cf73360 100644
--- a/client/src/components/searchPage/SidebarFilters.tsx
+++ b/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>
diff --git a/client/src/components/searchPage/SortButton.tsx b/client/src/components/searchPage/SortButton.tsx
index 991fa25..7aace40 100644
--- a/client/src/components/searchPage/SortButton.tsx
+++ b/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"
           }`}
         >
diff --git a/client/src/consts/buttonStyles.ts b/client/src/consts/buttonStyles.ts
index a736851..05483aa 100644
--- a/client/src/consts/buttonStyles.ts
+++ b/client/src/consts/buttonStyles.ts
@@ -1,13 +1,13 @@
 import { ButtonStyle } from "../types/button";
 
 const backgroundColors: ButtonStyle = {
-  cta: "bg-[#00BED7] hover:bg-[#00A8BE]",
-  primary: "bg-[#ffffff] hover:bg-[#F3F3F2] active:bg-[#fff]",
-  secondary: "bg-[#ffffff] hover:bg-[#F3F3F2] active:bg-[#fff]",
+  cta: "bg-[#00BED7] hover:bg-none",
+  primary: "bg-[#ffffff] hover:bg-none active:bg-[#fff]",
+  secondary: "bg-[#ffffff] hover:bg-none active:bg-[#fff]",
   tertiary: "",
-  fab: "bg-[#ffffff] hover:bg-[#F3F3F2]",
-  favorite: "bg-[#FFFFFF] hover:bg-[#F3F3F2]",
-  special: "bg-[#0D192266] hover:bg-[#0D1922B2]",
+  fab: "bg-[#ffffff] hover:bg-none",
+  favorite: "bg-[#FFFFFF] hover:bg-none",
+  special: "bg-[#0D192266] hover:bg-none",
 };
 
 const textColors: ButtonStyle = {
diff --git a/client/src/index.css b/client/src/index.css
index a3939a1..b8a07bf 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -176,7 +176,8 @@ html {
   @media (min-width: 1280px) {
     .text-caption-s {
       font-family: "Usual", sans-serif;
-      font-size: clamp(10px, 0.3744rem + 0.313vw, 12px);
+      font-size: 28.13px;
+      /* font-size: clamp(10px, 0.3744rem + 0.313vw, 12px); */
       line-height: 135%;
     }
 
@@ -184,7 +185,7 @@ html {
       font-family: "Usual", sans-serif;
       line-height: 135%;
       /* font-size: clamp(12px, 0.4994rem + 0.313vw, 14px); */
-      font-size: 28.8px;
+      font-size: 33.75px;
     }
 
     .text-s {
@@ -204,7 +205,7 @@ html {
     .text-subheadline-s {
       /* text-[48px] */
       font-family: "Usual", sans-serif;
-      line-height: 140%;
+      /* line-height: 140%; */
       font-size: 48px;
     }
 
diff --git a/client/src/pages/AboutComplex.tsx b/client/src/pages/AboutComplex.tsx
index 00ef162..27ac5fb 100644
--- a/client/src/pages/AboutComplex.tsx
+++ b/client/src/pages/AboutComplex.tsx
@@ -110,13 +110,13 @@ const advantages: IAdvantages[] = [
   },
 ];
 
-const advStyles = [
-  "xl:col-start-3 xl:col-end-7",
-  "xl:col-span-4",
-  "xl:col-start-5 xl:col-end-9",
-  "xl:col-span-4",
-  "xl:col-start-3 xl:col-span-4",
-];
+// const advStyles = [
+//   "xl:col-start-3 xl:col-end-7",
+//   "xl:col-span-4",
+//   "xl:col-start-5 xl:col-end-9",
+//   "xl:col-span-4",
+//   "xl:col-start-3 xl:col-span-4",
+// ];
 
 const AboutComplex = () => {
   const navigate = useNavigate();
@@ -127,7 +127,7 @@ const AboutComplex = () => {
 
   return (
     <>
-      <section className={`xl:pt-16 font-usual grid grid-cols-12 select-none`}>
+      <section className={`pt-16 font-usual grid grid-cols-12 select-none`}>
         <div className="flex px-6 py-4 col-span-full h-[180px] relative">
           <div className="fixed z-[100]">
             <Button
@@ -139,21 +139,21 @@ const AboutComplex = () => {
           </div>
         </div>
         {/* About Rove Home */}
-        <h1 className="uppercase text-headline-s px-4 col-span-full pb-6">
+        <h1 className="uppercase text-headline-s px-6 col-span-full pb-6">
           Rove Home this residence a complete ecosystem that has everything
           you’ll ever need. This isn’t just where you’ll live. It’s where you’ll
           thrive.
         </h1>
 
-        <div className="col-span-full px-6 grid grid-cols-12">
+        <div className="col-span-full px-6 grid grid-cols-12 ">
           <div className="text-caption-m font-semibold text-[#73787C] uppercase col-span-full pb-3">
             About rove home
           </div>
-          <div className="col-span-full grid grid-cols-10 gap-6 pb-20">
+          <div className="col-span-full grid grid-cols-10 gap-6 pb-[180px]">
             <img
               src="/images/aboutCompany/rovehome.png"
               alt=""
-              className="col-span-full"
+              className="col-span-full w-full"
             />
             <div className="col-span-5 text-s text-[#73787C]">
               Embrace Rove’s forever-young spirit at Rove Home, where inspiring
@@ -165,15 +165,15 @@ const AboutComplex = () => {
         {/* RoveHome roof */}
         <RoveHomeSlider />
         {/* Rove around the city */}
-        <div className="col-span-full px-6 grid grid-cols-12  pt-14">
-          <div className="text-caption-m font-semibold text-[#73787C] xl:col-span-1 col-span-full uppercase pb-3">
+        <div className="col-span-full px-6 grid grid-cols-12 pt-14">
+          <div className="text-caption-m font-semibold text-[#73787C] col-span-full uppercase pb-3">
             ROVE AROUND THE CITY
           </div>
-          <div className="xl:col-start-3 col-span-full grid grid-cols-10 gap-6">
-            <div className="xl:col-span-4 xl:grid grid-cols-4 gap-4 order-2 xl:order-1 col-span-full flex flex-nowrap overflow-x-scroll">
+          <div className=" col-span-full grid grid-cols-10 gap-3">
+            <div className="gap-4 order-2 col-span-full flex flex-nowrap overflow-x-scroll">
               {roveAroundTheCity.map((item) => (
                 <div
-                  className="xl:col-span-2 sm:col-span-1 col-span-2 bg-white rounded-lg flex flex-col p-3 xl:min-w-full sm:min-w-[calc(25vw-24px)] min-w-[calc(50vw-30px)]"
+                  className="col-span-1 bg-white rounded-lg flex flex-col p-3 sm:min-w-[calc(25vw-24px)] gap-1"
                   key={item.id}
                 >
                   <div className="flex gap-1 items-center">
@@ -181,11 +181,15 @@ const AboutComplex = () => {
                     <div className="text-[#0D1922] text-m">{item.title}</div>
                   </div>
                   <p className="text-s text-[#73787C]">{item.time} mins</p>
-                  <img className="w-16 h-16 self-end" src={item.image} alt="" />
+                  <img
+                    className="w-16 h-16 self-end mt-auto"
+                    src={item.image}
+                    alt=""
+                  />
                 </div>
               ))}
             </div>
-            <div className="col-span-full xl:col-start-5 order-1 xl:order-2">
+            <div className="col-span-full order-1">
               <img
                 src="/images/aboutCompany/Map.png"
                 alt=""
@@ -195,21 +199,19 @@ const AboutComplex = () => {
           </div>
         </div>
         {/* Advantages */}
-        <div className="col-span-full grid grid-cols-12 px-6 gap-x-4 xl:pt-[140px] sm:pt-16 pt-14">
-          <div className="uppercase text-[#73787C] font-semibold xl:col-span-1 pb-3 text-caption-m col-span-full">
+        <div className="col-span-full grid grid-cols-12 px-6 gap-x-4 pt-16">
+          <div className="uppercase text-[#73787C] font-semibold pb-3 text-caption-m col-span-full">
             ADVANTAGES
           </div>
-          <p className="text-subheadline-m font-semibold xl:col-start-3 col-span-full xl:pb-6 text-[#00BED7] pb-3">
+          <p className="text-subheadline-m font-semibold col-span-full text-[#00BED7] pb-3">
             What makes a rove home?
           </p>
           {advantages.map((adv, index) => {
-            const styles = `${advStyles[index]} ${
-              index === advantages.length - 1 ? "" : "xl:pb-14 pb-6"
-            }`;
+            const styles = `${index === advantages.length - 1 ? "" : "pb-6"}`;
 
             return (
               <div
-                className={`flex flex-col ${styles} xl:col-span-4 sm:col-span-6 col-span-full`}
+                className={`flex flex-col ${styles} sm:col-span-6 col-span-full`}
                 key={adv.id}
               >
                 <img
@@ -226,16 +228,16 @@ const AboutComplex = () => {
           })}
         </div>
         {/* EXPANDABLE LIVING SOLUTIONS */}
-        <h1 className="uppercase xl:rubber-headline-indent text-headline-s xl:px-6 px-4 col-span-full pb-6 xl:pt-[140px] sm:pt-[100px] pt-20">
+        <h1 className="uppercase text-headline-s px-6 col-span-full pb-6 sm:pt-[280px]">
           Live in the future, today. Designed to embody Rove’s unique look and
           feel, the interiors will feature intelligent and modular living
           solutions by ORI, never seen before in UAE and the region.
         </h1>
         <div className="col-span-full grid grid-cols-12 px-6">
-          <div className="text-caption-m font-semibold text-[#73787C] xl:col-span-2 uppercase col-start-1 col-span-full pb-3">
+          <div className="text-caption-m font-semibold text-[#73787C] uppercase col-start-1 col-span-full pb-3">
             EXPANDABLE LIVING SOLUTIONS
           </div>
-          <div className="flex flex-col gap-6 xl:col-start-3 xl:col-span-4 col-span-full">
+          <div className="flex flex-col gap-6 col-span-8">
             <div className="text-[#00BED7] text-subheadline-m">
               ORI introduces a revolutionary solution to apartment living, where
               space is not just a constraint but an opportunity.{" "}
@@ -260,12 +262,12 @@ const AboutComplex = () => {
           </div>
         </div>
         {/* Units description */}
-        <div className="col-span-full px-6 grid grid-cols-12 xl:pt-[140px] xm:pt-[100px] pt-[80px]">
-          <div className="text-caption-m font-semibold text-[#73787C] xl:col-span-1 col-span-full uppercase pb-3">
+        <div className="col-span-full px-6 grid grid-cols-12 pt-[80px]">
+          <div className="text-caption-m font-semibold text-[#73787C] col-span-full uppercase pb-3">
             UNITS DESCRIPTION
           </div>
-          <div className="xl:col-start-3 col-span-full grid grid-cols-10 gap-6">
-            <div className="lg:col-span-5 col-span-full grid relative grid-cols-5">
+          <div className="col-span-full grid grid-cols-10 gap-6">
+            <div className="col-span-full grid relative grid-cols-5">
               <div className="sm:col-span-3 col-span-full h-full bg-white rounded-2xl flex flex-col justify-between p-8 sm:mr-[-32px] gap-6">
                 <div>
                   <h2 className="text-[#0D1922] font-bold text-subheadline-l">
@@ -289,10 +291,10 @@ const AboutComplex = () => {
               <img
                 src="/images/aboutCompany/unitsDescription/1.png"
                 alt=""
-                className="sm:col-span-2 col-span-full -z-10 sm:h-full w-full object-cover rounded-2xl xl:aspect-auto sm:aspect-square aspect-[3.3/2] mt-[-32px] sm:mt-0"
+                className="sm:col-span-2 col-span-full -z-10 sm:h-full w-full object-cover rounded-2xl sm:aspect-square aspect-[3.3/2] mt-[-32px] sm:mt-0"
               />
             </div>
-            <div className="lg:col-span-5 col-span-full grid relative grid-cols-5">
+            <div className=" col-span-full grid relative grid-cols-5">
               <div className="sm:col-span-3 col-span-full h-full bg-white rounded-2xl flex flex-col justify-between p-8 sm:mr-[-32px] gap-6">
                 <div>
                   <h2 className="text-[#0D1922] font-bold text-subheadline-l">
@@ -307,18 +309,17 @@ const AboutComplex = () => {
                 </div>
                 <div>
                   <p className="text-s text-[#0D1922]">390 Sqft</p>
-                  <p className="font-bold text-m text-[#00BED7]">
-                    AED 1,138,888
-                  </p>
+                  <p className="font-bold text-m text-[#00BED7]">Unvailiable</p>
+                  {/* AED 1,138,888 */}
                 </div>
               </div>
               <img
                 src="/images/aboutCompany/unitsDescription/2.png"
                 alt=""
-                className="sm:col-span-2 col-span-full -z-10 sm:h-full w-full object-cover rounded-2xl xl:aspect-auto sm:aspect-square aspect-[3.3/2] mt-[-32px] sm:mt-0"
+                className="sm:col-span-2 col-span-full -z-10 sm:h-full w-full object-cover rounded-2xl sm:aspect-square aspect-[3.3/2] mt-[-32px] sm:mt-0"
               />
             </div>
-            <div className="lg:col-span-5 col-span-full grid relative grid-cols-5">
+            <div className="col-span-full grid relative grid-cols-5">
               <div className="sm:col-span-3 col-span-full h-full bg-white rounded-2xl flex flex-col justify-between p-8 sm:mr-[-32px] gap-6">
                 <div>
                   <h2 className="text-[#0D1922] font-bold text-subheadline-l">
@@ -342,10 +343,10 @@ const AboutComplex = () => {
               <img
                 src="/images/aboutCompany/unitsDescription/3.png"
                 alt=""
-                className="sm:col-span-2 col-span-full -z-10 sm:h-full w-full object-cover rounded-2xl xl:aspect-auto sm:aspect-square aspect-[3.3/2] mt-[-32px] sm:mt-0"
+                className="sm:col-span-2 col-span-full -z-10 sm:h-full w-full object-cover rounded-2xl sm:aspect-square aspect-[3.3/2] mt-[-32px] sm:mt-0"
               />
             </div>
-            <div className="lg:col-span-5 col-span-full grid relative grid-cols-5">
+            <div className="col-span-full grid relative grid-cols-5">
               <div className="sm:col-span-3 col-span-full h-full bg-white rounded-2xl flex flex-col justify-between p-8 sm:mr-[-32px] gap-6">
                 <div>
                   <h2 className="text-[#0D1922] font-bold text-subheadline-l">
@@ -363,30 +364,29 @@ const AboutComplex = () => {
                 </div>
                 <div>
                   <p className="text-s text-[#0D1922]">891 Sqft</p>
-                  <p className="font-bold text-m text-[#00BED7]">
-                    AED 2,408,888
-                  </p>
+                  <p className="font-bold text-m text-[#00BED7]">Unvailiable</p>
+                  {/* AED 2,408,888 */}
                 </div>
               </div>
               <img
                 src="/images/aboutCompany/unitsDescription/4.png"
                 alt=""
-                className="sm:col-span-2 col-span-full -z-10 w-full object-cover rounded-2xl xl:aspect-auto sm:aspect-square aspect-[3.3/2] h-full mt-[-32px] sm:mt-0"
+                className="sm:col-span-2 col-span-full -z-10 w-full object-cover rounded-2xl sm:aspect-square aspect-[3.3/2] h-full sm:mt-0"
               />
             </div>
           </div>
         </div>
         {/* About the developer */}
-        <h1 className="uppercase xl:rubber-headline-indent text-headline-s xl:px-6 px-4 col-span-full xl:pb-16 sm:pb-10 pb-7 xl:pt-[140px] sm:pt-[100px] pt-20">
+        <h1 className="uppercase text-headline-s px-6 col-span-full sm:pb-10 pb-7 sm:pt-[100px] pt-20">
           Founded under Alshamsi family, IRTH is a real estate investment
           platform - based on the philosophy of value creation, innovation and
           building world-class living experiences.
         </h1>
-        <div className="col-span-full grid xl:grid-cols-12 grid-cols-8 px-6 gap-6">
-          <div className="text-caption-m font-semibold text-[#73787C] xl:col-span-1 col-span-full uppercase">
+        <div className="col-span-full grid grid-cols-8 px-6 gap-6">
+          <div className="text-caption-m font-semibold text-[#73787C] col-span-full uppercase">
             ABOUT THE DEVELOPER
           </div>
-          <div className="xl:col-start-3 xl:col-span-3 text-[#73787C] flex-col flex justify-between col-span-5 gap-6">
+          <div className="text-[#73787C] flex-col flex justify-between col-span-5 gap-6">
             <div>
               <p className="text-m">
                 IRTH’s vision is long-term, supported with a proactive approach,
@@ -409,7 +409,7 @@ const AboutComplex = () => {
               className="justify-center w-fit px-[51px]"
             />
           </div>
-          <div className="xl:col-start-7 xl:col-span-7 col-span-full">
+          <div className="col-span-full">
             <img
               src="/images/aboutCompany/about_the_developer.png"
               alt=""
@@ -418,12 +418,12 @@ const AboutComplex = () => {
           </div>
         </div>
         {/* MAIN CONSULTANTS */}
-        <div className="col-span-full grid xl:grid-cols-12 grid-cols-8 px-6 xl:pt-[140px] xl:pb-[140px] sm:pt-[100px] pt-20 pb-10">
-          <div className="text-caption-m font-semibold text-[#73787C] xl:col-span-2 uppercase pb-3 col-span-full">
+        <div className="col-span-full grid xl:grid-cols-12 grid-cols-8 px-6 sm:pt-[280px] pb-[112px]">
+          <div className="text-caption-m font-semibold text-[#73787C] uppercase pb-3 col-span-full">
             MAIN CONSULTANTS
           </div>
-          <div className="col-span-full grid xl:grid-cols-12 grid-cols-8 gap-4">
-            <div className="xl:col-start-3 col-start-1 sm:col-span-2 col-span-4 bg-white rounded-2xl p-6 h-[280px] justify-between flex flex-col">
+          <div className="col-span-full grid grid-cols-8 gap-4">
+            <div className="col-start-1 sm:col-span-2 col-span-4 bg-white rounded-2xl p-6 h-[630px] justify-between flex flex-col">
               <div className="flex gap-1 items-center">
                 <div className="bg-[#00BED7] w-3 h-3 rounded-full"></div>
                 <p className="text-m text-[#0D1922]">Architect</p>
@@ -434,7 +434,7 @@ const AboutComplex = () => {
                 className="self-end"
               />
             </div>
-            <div className="sm:col-span-2 bg-white rounded-2xl col-span-4 p-6 h-[280px] justify-between flex flex-col">
+            <div className="sm:col-span-2 bg-white rounded-2xl col-span-4 p-6 h-[630px] justify-between flex flex-col">
               <div className="flex gap-1 items-center">
                 <div className="bg-[#00BED7] w-3 h-3 rounded-full"></div>
                 <p className="text-m text-[#0D1922]">Landscape architect</p>
@@ -445,7 +445,7 @@ const AboutComplex = () => {
                 className="self-end"
               />
             </div>
-            <div className="sm:col-span-2 bg-white rounded-2xl col-span-full p-6 h-[280px] justify-between flex flex-col xl:col-start-9 sm:col-start-7">
+            <div className="sm:col-span-2 bg-white rounded-2xl col-span-full p-6 h-[630px] justify-between flex flex-col sm:col-start-7">
               <div className="flex gap-1 items-center">
                 <div className="bg-[#00BED7] w-3 h-3 rounded-full"></div>
                 <p className="text-m text-[#0D1922]">Art team</p>
@@ -456,7 +456,7 @@ const AboutComplex = () => {
                 className="self-end"
               />
             </div>
-            <div className="sm:col-span-2 bg-white rounded-2xl col-span-4 p-6 h-[280px] justify-between flex flex-col xl:col-start-5 sm:col-start-3">
+            <div className="sm:col-span-2 bg-white rounded-2xl col-span-4 p-6 h-[630px] justify-between flex flex-col sm:col-start-3">
               <div className="flex gap-1 items-center">
                 <div className="bg-[#00BED7] w-3 h-3 rounded-full"></div>
                 <p className="text-m text-[#0D1922]">Id team</p>
@@ -467,7 +467,7 @@ const AboutComplex = () => {
                 className="self-end"
               />
             </div>
-            <div className="sm:col-span-2 bg-white rounded-2xl col-span-4 p-6 h-[280px] justify-between flex flex-col">
+            <div className="sm:col-span-2 bg-white rounded-2xl col-span-4 p-6 h-[630px] justify-between flex flex-col">
               <div className="flex gap-1 items-center">
                 <div className="bg-[#00BED7] w-3 h-3 rounded-full"></div>
                 <p className="text-m text-[#0D1922]">Sales and marketing</p>
diff --git a/client/src/pages/Favorites.tsx b/client/src/pages/Favorites.tsx
index 92d9185..f116bfb 100644
--- a/client/src/pages/Favorites.tsx
+++ b/client/src/pages/Favorites.tsx
@@ -11,141 +11,6 @@ import FavoritesSlider from "../components/favoritesPage/FavoriteSlider";
 import FavoriteCardList from "../components/favoritesPage/FavoriteCardList";
 import useFavorites from "../store/useFavorites";
 
-// const favoriteCards: ILayoutCard[] = [
-//   {
-//     id: "1",
-//     roveHome: "Marasi Drive",
-//     apartmentType: "Studio Flex",
-//     wing: "East Wing",
-//     floorStart: 11,
-//     floorEnd: 35,
-//     units: 234,
-//     cost: 10488888,
-//     square: 619,
-//   },
-//   {
-//     id: "2",
-//     roveHome: "Marasi Drive",
-//     apartmentType: "1 Bedroom",
-//     wing: "East Wing",
-//     floorStart: 11,
-//     floorEnd: 35,
-//     units: 234,
-//     cost: 1668888,
-//     square: 619,
-//   },
-//   {
-//     id: "3",
-//     roveHome: "Marasi Drive",
-//     apartmentType: "1 Bedroom",
-//     wing: "East Wing",
-//     floorStart: 11,
-//     floorEnd: 35,
-//     units: 234,
-//     cost: 1668888,
-//     square: 609,
-//   },
-//   {
-//     id: "4",
-//     roveHome: "Marasi Drive",
-//     apartmentType: "1 Bedroom",
-//     wing: "East Wing",
-//     floorStart: 11,
-//     floorEnd: 35,
-//     units: 234,
-//     cost: 1138888,
-//     square: 609,
-//   },
-//   {
-//     id: "5",
-//     roveHome: "Marasi Drive",
-//     apartmentType: "Studio Flex",
-//     wing: "East Wing",
-//     floorStart: 11,
-//     floorEnd: 35,
-//     units: 234,
-//     cost: 10488888,
-//     square: 609,
-//   },
-//   {
-//     id: "6",
-//     roveHome: "Marasi Drive",
-//     apartmentType: "1 Bedroom",
-//     wing: "East Wing",
-//     floorStart: 11,
-//     floorEnd: 35,
-//     units: 234,
-//     cost: 1668888,
-//     square: 609,
-//   },
-//   {
-//     id: "7",
-//     roveHome: "Marasi Drive",
-//     apartmentType: "1 Bedroom",
-//     wing: "East Wing",
-//     floorStart: 11,
-//     floorEnd: 35,
-//     units: 234,
-//     cost: 1668888,
-//     square: 609,
-//   },
-//   {
-//     id: "8",
-//     roveHome: "Marasi Drive",
-//     apartmentType: "1 Bedroom",
-//     wing: "East Wing",
-//     floorStart: 11,
-//     floorEnd: 35,
-//     units: 234,
-//     cost: 1138888,
-//     square: 609,
-//   },
-//   {
-//     id: "9",
-//     roveHome: "Marasi Drive",
-//     apartmentType: "Studio Flex",
-//     wing: "East Wing",
-//     floorStart: 11,
-//     floorEnd: 35,
-//     units: 234,
-//     cost: 10488888,
-//     square: 609,
-//   },
-//   {
-//     id: "10",
-//     roveHome: "Marasi Drive",
-//     apartmentType: "1 Bedroom",
-//     wing: "East Wing",
-//     floorStart: 11,
-//     floorEnd: 35,
-//     units: 234,
-//     cost: 1668888,
-//     square: 609,
-//   },
-//   {
-//     id: "11",
-//     roveHome: "Marasi Drive",
-//     apartmentType: "1 Bedroom",
-//     wing: "East Wing",
-//     floorStart: 11,
-//     floorEnd: 35,
-//     units: 234,
-//     cost: 1668888,
-//     square: 609,
-//   },
-//   {
-//     id: "12",
-//     roveHome: "Marasi Drive",
-//     apartmentType: "1 Bedroom",
-//     wing: "East Wing",
-//     floorStart: 11,
-//     floorEnd: 35,
-//     units: 234,
-//     cost: 1138888,
-//     square: 609,
-//   },
-// ];
-
 const initialCollectionCompareSwitcher: ISwitcher = {
   id: "1",
   title: "collection/compare",
@@ -186,12 +51,12 @@ const Favorites = () => {
   }, [setFavorites, sortList]);
 
   return (
-    <div className="overflow-scroll h-screen w-screen pt-14 select-none">
+    <div className="overflow-scroll h-screen w-screen pt-[134px] select-none">
       <div className="p-6 pb-16">
         <div className="pb-6">
-          <div className="flex justify-between w-full items-center border-b pb-[11px]">
-            <div className="flex items-center gap-8">
-              <div className="flex gap-4 font-semibold text-subheadline-s leading-7 py-[6px]">
+          <div className="flex justify-between w-full items-center border-b pb-4">
+            <div className="flex gap-4 flex-col">
+              <div className="flex gap-4 font-semibold text-subheadline-s leading-7 ">
                 <h2 className="text-[#0D1922]">Units</h2>
                 <p className="text-[#73787C]">{favorites.length}</p>
               </div>
diff --git a/client/src/pages/Search.tsx b/client/src/pages/Search.tsx
index a2bc7e8..d4c6b73 100644
--- a/client/src/pages/Search.tsx
+++ b/client/src/pages/Search.tsx
@@ -1,12 +1,12 @@
 import Footer from "../components/Footer";
 import LayoutOptions from "../components/searchPage/LayoutOptions";
-import SidebarFilters from "../components/searchPage/SidebarFilters";
+// import SidebarFilters from "../components/searchPage/SidebarFilters";
 
 const Search = () => {
   return (
     <div className="overflow-scroll h-screen w-screen pt-14 select-none">
       <div className="flex">
-        <SidebarFilters />
+        {/* <SidebarFilters /> */}
         <LayoutOptions />
       </div>
       <Footer />
diff --git a/client/tailwind.config.js b/client/tailwind.config.js
index 730c25b..a9fcbd6 100644
--- a/client/tailwind.config.js
+++ b/client/tailwind.config.js
@@ -9,8 +9,10 @@ export default {
       },
       borderWidth: {
         DEFAULT: "2.4px",
+        2: "4.8px",
       },
       padding: {
+        8: "90px",
         6: "67.5px",
         1: "11.25px",
         4: "45px",
@@ -19,6 +21,7 @@ export default {
         16: "180px",
       },
       margin: {
+        8: "90px",
         6: "67.5px",
         1: "11.25px",
         4: "45px",
@@ -27,6 +30,7 @@ export default {
         16: "180px",
       },
       gap: {
+        1: "11.25px",
         2: "22.5px",
         3: "33.75px",
         4: "45px",
@@ -36,10 +40,12 @@ export default {
       },
       width: {
         3: "33.75px",
+        16: "180px",
       },
       height: {
         6: "57.6px",
         3: "33.75px",
+        16: "180px",
       },
       minHeight: {
         6: "57.6px",
@@ -53,6 +59,7 @@ export default {
       inset: {
         6: "67.5px",
         4: "45px",
+        2: "22.5px",
       },
     },
   },