From 501ed130be1c23f3bffce3c1d6003bd6f01ce43f Mon Sep 17 00:00:00 2001
From: Lanskikh <lanskikh-mikhail@mail.ru>
Date: Thu, 15 May 2025 19:03:24 +0500
Subject: [PATCH] started favorites compare

---
 src/components/Footer.tsx            |  88 +++----
 src/components/Header.tsx            |   2 +-
 src/components/ProjectSelect.tsx     |   5 +-
 src/components/SearchFilters.tsx     |  12 +-
 src/components/icons/RestartIcon.tsx |   2 +-
 src/components/icons/SquaresIcon.tsx |  13 +
 src/index.css                        |  52 +---
 src/layout/DefaultLayout.tsx         |  16 +-
 src/pages/FavouritesPage.tsx         | 351 ++++++++++++++++++++++++---
 9 files changed, 400 insertions(+), 141 deletions(-)
 create mode 100644 src/components/icons/SquaresIcon.tsx

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index b15fbbc..acff929 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,109 +1,109 @@
-import { Link } from 'react-router';
-import YoutubeIcon from './icons/YoutubeIcon';
-import InstagramIcon from './icons/InstagramIcon';
-import FacebookIcon from './icons/FacebookIcon';
-import LinkedInIcon from './icons/LinkedInIcon';
-import TwitterIcon from './icons/TwitterIcon';
-import ChevronDownIcon from './icons/ChevronDownIcon';
+import { Link } from "react-router";
+import YoutubeIcon from "./icons/YoutubeIcon";
+import InstagramIcon from "./icons/InstagramIcon";
+import FacebookIcon from "./icons/FacebookIcon";
+import LinkedInIcon from "./icons/LinkedInIcon";
+import TwitterIcon from "./icons/TwitterIcon";
+import ChevronDownIcon from "./icons/ChevronDownIcon";
 
 function Footer() {
   return (
-    <footer className='z-1 2xl:px-[2.222vw] 2xl:pb-[2.222vw] 2xl:pt-[2.778vw] md:max-2xl:p-6 px-4 py-6 grid 2xl:grid-cols-6 md:max-2xl:grid-cols-4 grid-cols-2 2xl:grid-rows-2 2xl:gap-x-[1.667vw] 2xl:gap-y-[1.111vw] max-2xl:gap-y-6 2xl:rounded-t-[1.667vw] rounded-t-3xl outline outline-[#E2E2DC] bg-white'>
+    <footer className="z-1 2xl:px-[2.222vw] 2xl:pb-[2.222vw] 2xl:pt-[2.778vw] md:max-2xl:p-6 px-4 py-6 grid 2xl:grid-cols-6 md:max-2xl:grid-cols-4 grid-cols-2 2xl:grid-rows-2 2xl:gap-x-[1.667vw] 2xl:gap-y-[1.111vw] max-2xl:gap-y-6 2xl:rounded-t-[1.667vw] rounded-t-3xl outline outline-[#E2E2DC] bg-white">
       <img
-        src='/images/logo.svg'
-        className='2xl:w-[5.972vw] w-[86px] cursor-pointer'
+        src="/images/logo.svg"
+        className="2xl:w-[5.972vw] w-[86px] cursor-pointer"
         onClick={() => {
-          window.location.href = '/';
+          window.location.href = "/";
         }}
-        alt='IRTH'
+        alt="IRTH"
       />
 
-      <p className='2xl:max-w-[17.083vw] text-s text-[#0D1922]/40 2xl:col-start-1 md:max-2xl:col-start-3 max-2xl:col-span-3 md:max-2xl:row-start-2 max-md:row-start-3 md:max-2xl:mt-[52px] max-md:mt-12'>
+      <p className="2xl:max-w-[17.083vw] text-s text-[#0D1922]/40 2xl:col-start-1 md:max-2xl:col-start-3 max-2xl:col-span-3 md:max-2xl:row-start-2 max-md:row-start-3 md:max-2xl:mt-[52px] max-md:mt-12">
         For more information, visit
         <br />
         our website: 
-        <Link className='text-[#00BED7] underline' to={'https://www.irth.ae'}>
+        <Link className="text-[#00BED7] underline" to={"https://www.irth.ae"}>
           www.irth.ae
         </Link>
       </p>
 
-      <div className='2xl:space-y-[0.833vw] space-y-3 md:max-2xl:col-start-3 max-2xl:col-span-3 md:max-2xl:row-start-3 max-md:row-start-4 max-md:mt-6'>
-        <p className='text-s text-[#0D1922]/40'>Follow us for more:</p>
-        <div className='flex 2xl:gap-[0.278vw] gap-1'>
-          <div className='2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded'>
-            <div className='2xl:w-[2.222vw] 2xl:h-[2.222vw] md:max-2xl:w-8 md:max-2xl:h-8 w-9 h-9 text-[#0D1922]/70'>
+      <div className="2xl:space-y-[0.833vw] space-y-3 md:max-2xl:col-start-3 max-2xl:col-span-3 md:max-2xl:row-start-3 max-md:row-start-4 max-md:mt-6">
+        <p className="text-s text-[#0D1922]/40">Follow us for more:</p>
+        <div className="flex 2xl:gap-[0.278vw] gap-1">
+          <div className="2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded">
+            <div className="2xl:w-[2.222vw] 2xl:h-[2.222vw] md:max-2xl:w-8 md:max-2xl:h-8 w-9 h-9 text-[#0D1922]/70">
               <YoutubeIcon />
             </div>
           </div>
-          <div className='2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded'>
-            <div className='2xl:w-[2.222vw] 2xl:h-[2.222vw] md:max-2xl:w-8 md:max-2xl:h-8 w-9 h-9 text-[#0D1922]/70'>
+          <div className="2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded">
+            <div className="2xl:w-[2.222vw] 2xl:h-[2.222vw] md:max-2xl:w-8 md:max-2xl:h-8 w-9 h-9 text-[#0D1922]/70">
               <InstagramIcon />
             </div>
           </div>
-          <div className='2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded'>
-            <div className='2xl:w-[2.222vw] 2xl:h-[2.222vw] md:max-2xl:w-8 md:max-2xl:h-8 w-9 h-9 text-[#0D1922]/70'>
+          <div className="2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded">
+            <div className="2xl:w-[2.222vw] 2xl:h-[2.222vw] md:max-2xl:w-8 md:max-2xl:h-8 w-9 h-9 text-[#0D1922]/70">
               <FacebookIcon />
             </div>
           </div>
-          <div className='2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded'>
-            <div className='2xl:w-[2.222vw] 2xl:h-[2.222vw] md:max-2xl:w-8 md:max-2xl:h-8 w-9 h-9 text-[#0D1922]/70'>
+          <div className="2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded">
+            <div className="2xl:w-[2.222vw] 2xl:h-[2.222vw] md:max-2xl:w-8 md:max-2xl:h-8 w-9 h-9 text-[#0D1922]/70">
               <LinkedInIcon />
             </div>
           </div>
-          <div className='2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded'>
-            <div className='2xl:w-[2.222vw] 2xl:h-[2.222vw] md:max-2xl:w-8 md:max-2xl:h-8 w-9 h-9 text-[#0D1922]/70'>
+          <div className="2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded">
+            <div className="2xl:w-[2.222vw] 2xl:h-[2.222vw] md:max-2xl:w-8 md:max-2xl:h-8 w-9 h-9 text-[#0D1922]/70">
               <TwitterIcon />
             </div>
           </div>
         </div>
       </div>
 
-      <div className='2xl:border-l-[0.069vw] border-l border-[#E2E2DC] 2xl:pl-[1.111vw] pl-4 flex flex-col items-start 2xl:col-start-4 2xl:row-start-1 2xl:row-span-2 md:max-2xl:col-start-3 col-start-1'>
+      <div className="2xl:border-l-[0.069vw] border-l border-[#E2E2DC] 2xl:pl-[1.111vw] pl-4 flex flex-col items-start 2xl:col-start-4 2xl:row-start-1 2xl:row-span-2 md:max-2xl:col-start-3 col-start-1">
         <Link
-          to={'/'}
-          className='text-btn-l flex-1 content-center md:my-4 my-[13px] text-[#0D1922]/70'
+          to={"/"}
+          className="text-btn-l flex-1 content-center md:my-4 my-[13px] text-[#0D1922]/70"
         >
           Map
         </Link>
         <Link
-          to={'/unit-types'}
-          className='text-btn-l flex-1 content-center md:my-4 my-[13px] text-[#0D1922]/70'
+          to={"/unit-types"}
+          className="text-btn-l flex-1 content-center md:my-4 my-[13px] text-[#0D1922]/70"
         >
           Unit Types
         </Link>
         <Link
-          to={'/about-irth'}
-          className='text-btn-l flex-1 content-center md:my-4 my-[13px] text-[#0D1922]/70'
+          to={"/about-irth"}
+          className="text-btn-l flex-1 content-center md:my-4 my-[13px] text-[#0D1922]/70"
         >
           About IRTH
         </Link>
       </div>
 
-      <div className='2xl:border-l-[0.069vw] border-l border-[#E2E2DC] 2xl:pl-[1.111vw] md:max-2xl:pl-6 pl-3.5 flex flex-col items-start 2xl:col-start-5 2xl:row-start-1 2xl:row-span-2'>
+      <div className="2xl:border-l-[0.069vw] border-l border-[#E2E2DC] 2xl:pl-[1.111vw] md:max-2xl:pl-6 pl-3.5 flex flex-col items-start 2xl:col-start-5 2xl:row-start-1 2xl:row-span-2">
         <Link
-          to={'/favorites'}
-          className='text-btn-l flex-1 content-center md:my-4 my-[13px] text-[#0D1922]/70'
+          to={"/favorites"}
+          className="text-btn-l flex-1 content-center md:my-4 my-[13px] text-[#0D1922]/70"
         >
           Favorites
         </Link>
         <Link
-          to={'/search'}
-          className='text-btn-l flex-1 content-center md:my-4 my-2.5 text-[#0D1922]/70'
+          to={"/search"}
+          className="text-btn-l flex-1 content-center md:my-4 my-[13px] text-[#0D1922]/70"
         >
           Search
         </Link>
-        <button className='text-btn-l flex-1 content-center md:my-3 text-[#0D1922]/70 flex items-center gap-2'>
+        <button className="text-btn-l flex-1 content-center md:my-3 my-[13px] text-[#0D1922]/70 flex items-center gap-2">
           <span>Brochures</span>
-          <div className='2xl:w-[1.667vw] 2xl:h-[1.667vw] md:max-2xl:w-6 md:max-2xl:h-6 w-5 h-5'>
+          <div className="2xl:w-[1.667vw] 2xl:h-[1.667vw] md:max-2xl:w-6 md:max-2xl:h-6 w-5 h-5">
             <ChevronDownIcon />
           </div>
         </button>
       </div>
 
-      <div className='content-end 2xl:text-right 2xl:col-start-6 2xl:row-start-1 2xl:row-span-2 md:max-2xl:col-start-1 md:max-2xl:row-start-3 max-md:col-span-3 max-md:pt-3 max-md:border-t border-[#E2E2DC]'>
+      <div className="content-end 2xl:text-right 2xl:col-start-6 2xl:row-start-1 2xl:row-span-2 md:max-2xl:col-start-1 md:max-2xl:row-start-3 max-md:col-span-3 max-md:pt-3 max-md:border-t border-[#E2E2DC]">
         <Link
-          to={'/'}
-          className='md:text-caption-m text-caption-s max-2xl:text-[#73787C] text-[#0D1922]/70'
+          to={"/"}
+          className="md:text-caption-m text-caption-s max-2xl:text-[#73787C] text-[#0D1922]/70"
         >
           Privacy Policy
         </Link>
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 791e117..89cc718 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -67,7 +67,7 @@ function Header() {
             ref={burgerRef}
             onlyIcon
             variant="secondary"
-            className="2xl:hidden !outline !outline-[#E2E2DC] md:mr-6 mr-4"
+            className="2xl:hidden !bg-[#F3F3F2] md:mr-6 mr-4"
             onClick={(e) => {
               e.stopPropagation();
               if (modal) setModal(null);
diff --git a/src/components/ProjectSelect.tsx b/src/components/ProjectSelect.tsx
index 78e0235..ba46435 100644
--- a/src/components/ProjectSelect.tsx
+++ b/src/components/ProjectSelect.tsx
@@ -67,7 +67,10 @@ function ProjectSelect<T extends boolean = false>({
         ))}
       </div>
       <Select
-        options={["All", ...projects.map((project) => project.title)]}
+        options={[
+          ...(withAll ? ["All"] : []),
+          ...projects.map((project) => project.title),
+        ]}
         onSelect={(option) =>
           setSelectedProject(
             projects.find((project) => project.title === option) ||
diff --git a/src/components/SearchFilters.tsx b/src/components/SearchFilters.tsx
index 689c210..62d3e61 100644
--- a/src/components/SearchFilters.tsx
+++ b/src/components/SearchFilters.tsx
@@ -388,6 +388,7 @@ function SearchFilters({
       prev.delete("unitTypes");
       return prev;
     });
+    if (inModal) setInModal(false);
   }
 
   function applyFilters() {
@@ -644,19 +645,14 @@ function SearchFilters({
             onlyIcon={!inModal && innerWidth < 768}
             onClick={resetFilters}
             className={clsx(
-              !inModal && "max-md:bg-[#F3F3F2]",
-              "max-md:!transition-none"
+              !inModal ? "max-md:bg-[#F3F3F2]" : "max-md:w-full",
+              "max-md:!transition-none justify-center"
             )}
           >
             <span className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 text-[#0D1922]/70">
               <RestartIcon />
             </span>
-            <p
-              className={clsx(
-                "text-s max-md:w-full",
-                !inModal && "max-md:hidden"
-              )}
-            >
+            <p className={clsx("text-s", !inModal && "max-md:hidden")}>
               Reset filters
             </p>
           </Button>
diff --git a/src/components/icons/RestartIcon.tsx b/src/components/icons/RestartIcon.tsx
index cc36c16..f757f10 100644
--- a/src/components/icons/RestartIcon.tsx
+++ b/src/components/icons/RestartIcon.tsx
@@ -4,7 +4,7 @@ function RestartIcon() {
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="m14.26 3.583.95-.557a.75.75 0 0 0-.758-1.294L11.848 3.26a1 1 0 0 0-.33 1.413l1.53 2.32a.75.75 0 0 0 1.252-.826l-.806-1.224c3.288.687 5.756 3.596 5.756 7.078 0 3.991-3.244 7.23-7.25 7.23s-7.25-3.239-7.25-7.23a7.2 7.2 0 0 1 1.838-4.812c.276-.309.302-.78.023-1.087s-.755-.331-1.037-.027A8.7 8.7 0 0 0 3.25 12.02c0 4.823 3.92 8.73 8.75 8.73s8.75-3.907 8.75-8.73c0-4.044-2.753-7.443-6.49-8.437"
+        d="m14.26 3.583.95-.557a.75.75 0 0 0-.758-1.294L11.848 3.26a1 1 0 0 0-.33 1.413l1.53 2.32a.75.75 0 0 0 1.252-.826l-.806-1.223c3.288.686 5.756 3.595 5.756 7.077 0 3.991-3.244 7.23-7.25 7.23s-7.25-3.239-7.25-7.23a7.2 7.2 0 0 1 1.838-4.812c.276-.309.302-.78.023-1.087s-.755-.331-1.037-.027A8.7 8.7 0 0 0 3.25 12.02c0 4.823 3.92 8.73 8.75 8.73s8.75-3.907 8.75-8.73c0-4.043-2.753-7.443-6.49-8.437"
         fill="currentColor"
       />
     </svg>
diff --git a/src/components/icons/SquaresIcon.tsx b/src/components/icons/SquaresIcon.tsx
new file mode 100644
index 0000000..6ad4bdf
--- /dev/null
+++ b/src/components/icons/SquaresIcon.tsx
@@ -0,0 +1,13 @@
+function SquaresIcon() {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M10 13.75H5a.25.25 0 0 0-.25.25v5c0 .138.112.25.25.25h5a.25.25 0 0 0 .25-.25v-5l-.005-.05a.25.25 0 0 0-.245-.2Zm9 0h-5a.25.25 0 0 0-.25.25v5c0 .138.112.25.25.25h5a.25.25 0 0 0 .25-.25v-5l-.005-.05a.25.25 0 0 0-.245-.2Zm0-9h-5a.25.25 0 0 0-.25.25v5c0 .138.112.25.25.25h5a.25.25 0 0 0 .25-.25V5l-.005-.05a.25.25 0 0 0-.245-.2Zm-9 0H5a.25.25 0 0 0-.25.25v5c0 .138.112.25.25.25h5a.25.25 0 0 0 .25-.25V5l-.005-.05a.25.25 0 0 0-.245-.2Z"
+        stroke="currentColor"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+export default SquaresIcon;
diff --git a/src/index.css b/src/index.css
index 50a4d74..31aeab8 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,13 +1,13 @@
-@import url('/fonts/Usual/stylesheet.css');
-@import url('/fonts/Mixcase/stylesheet.css');
-@import 'tailwindcss';
+@import url("/fonts/Usual/stylesheet.css");
+@import url("/fonts/Mixcase/stylesheet.css");
+@import "tailwindcss";
 
 @theme {
   --breakpoint-2xl: 1440px;
 }
 
 body {
-  font-family: 'Usual', sans-serif;
+  font-family: "Usual", sans-serif;
   color: #0d1922;
 }
 
@@ -17,48 +17,6 @@ button {
 }
 
 @layer utilities {
-  .text-headline-l {
-    @apply 2xl:text-[clamp(56px,3.889vw,68px)] md:max-2xl:text-[clamp(44px,6.366vw,56px)] text-[44px] leading-none;
-  }
-
-  .text-h4 {
-    @apply 2xl:text-[clamp(20px,1.389vw,28px)] text-[20px] leading-[120%];
-  }
-
-  .text-h5 {
-    @apply 2xl:text-[clamp(14px,0.972vw,20px)] text-[14px] leading-[125%];
-  }
-
-  .text-subheadline-l {
-    @apply 2xl:text-[clamp(40px,2.778vw,48px)] md:max-2xl:text-[clamp(32px,4.63vw,40px)] text-[32px] leading-[135%];
-  }
-
-  .text-subheadline-m {
-    @apply 2xl:text-[clamp(24px,1.667vw,28px)] md:max-2xl:text-[clamp(20px,2.894vw,24px)] text-xl leading-[135%];
-  }
-
-  .text-subheadline-s {
-    @apply 2xl:text-[clamp(20px,1.389vw,24px)] md:max-2xl:text-[clamp(16px,2.315vw,20px)] text-xl leading-[140%];
-  }
-
-  .text-m {
-    @apply 2xl:text-[clamp(16px,1.111vw,19px)] md:max-2xl:text-[clamp(13px,1.881vw,16px)] text-[13px] leading-[125%];
-  }
-
-  .text-s {
-    @apply 2xl:text-[clamp(14px,0.972vw,16px)] md:max-2xl:text-[clamp(12px,1.737vw,14px)] text-sm leading-[140%];
-  }
-
-  .text-caption-m {
-    @apply 2xl:text-[clamp(12px,0.833vw,14px)] md:max-2xl:text-[clamp(12px,1.563vw,12px)] text-[clamp(12px,3.333vw,12px)] leading-[135%];
-  }
-
-  .text-caption-s {
-    @apply 2xl:text-[clamp(10px,0.694vw,12px)] text-[10px] leading-[135%];
-  }
-
-  /*  */
-
   .text-h1 {
     @apply 2xl:text-[3.889vw] text-[56px] leading-none;
   }
@@ -117,5 +75,5 @@ button {
 }
 
 @utility font-mixcase-unmixed {
-  font-family: 'Mixcase Unmixed', sans-serif;
+  font-family: "Mixcase Unmixed", sans-serif;
 }
diff --git a/src/layout/DefaultLayout.tsx b/src/layout/DefaultLayout.tsx
index ea67195..6b98ecd 100644
--- a/src/layout/DefaultLayout.tsx
+++ b/src/layout/DefaultLayout.tsx
@@ -1,20 +1,20 @@
-import Header from '../components/Header';
-import { Outlet, useLocation } from 'react-router';
-import Footer from '../components/Footer';
-import clsx from 'clsx';
+import Header from "../components/Header";
+import { Outlet, useLocation } from "react-router";
+import Footer from "../components/Footer";
+import clsx from "clsx";
 
 function DefaultLayout() {
   const { pathname } = useLocation();
-  console.log(pathname);
+
   return (
     <div
       className={clsx(
-        'min-h-dvh flex flex-col select-none',
-        pathname.endsWith('/about') ? 'bg-white' : 'bg-[#F3F3F2]'
+        "min-h-dvh flex flex-col select-none",
+        pathname.endsWith("/about") ? "bg-white" : "bg-[#F3F3F2]"
       )}
     >
       <Header />
-      <div className='flex-1 flex flex-col justify-between'>
+      <div className="flex-1 flex flex-col justify-between">
         <Outlet />
       </div>
       <Footer />
diff --git a/src/pages/FavouritesPage.tsx b/src/pages/FavouritesPage.tsx
index 94be009..5e43615 100644
--- a/src/pages/FavouritesPage.tsx
+++ b/src/pages/FavouritesPage.tsx
@@ -8,9 +8,14 @@ import { useFavoritesUnitsStore } from "../stores/useFavoritesUnitsStore";
 import UnitCard from "../components/UnitCard";
 import { useState } from "react";
 import { SORT_OPTIONS } from "../data/sortOptions";
+import SquaresIcon from "../components/icons/SQuaresIcon";
+import ArrowLeftIcon from "../components/icons/ArrowLeftIcon";
+import ArrowRightIcon from "../components/icons/ArrowRightIcon";
+import { motion } from "motion/react";
+import FilledHeartIcon from "../components/icons/FilledHeartIcon";
 
 function FavoritesPage() {
-  const { favoriteUnits } = useFavoritesUnitsStore();
+  const { favoriteUnits, setFavoriteUnits } = useFavoritesUnitsStore();
 
   const [sort, setSort] = useState<keyof typeof SORT_OPTIONS>(
     "Sort by ascending price"
@@ -18,15 +23,21 @@ function FavoritesPage() {
 
   const [selectedProject, setSelectedProject] = useState<string>();
 
+  const [viewMode, setViewMode] = useState<"Collection" | "Compare">("Compare");
+
+  const [removeSimilar, setRemoveSimilar] = useState(false);
+
+  const [current, setCurrent] = useState(0);
+
   return (
-    <div className="flex flex-col gap-6">
+    <div className="flex flex-col 2xl:gap-y-[1.667vw] gap-y-6 2xl:pb-[1.667vw] pb-6">
       <div
         className={clsx(
           "2xl:p-[2.222vw] md:max-2xl:p-6 p-4 bg-white 2xl:rounded-b-[1.667vw] rounded-b-3xl 2xl:space-y-[2.222vw] md:max-2xl:space-y-8 space-y-4",
           "2xl:px-[2.222vw] md:max-2xl:px-6 px-4"
         )}
       >
-        <div className="2xl:space-y-[1.111vw] space-y-4">
+        <div className="flex flex-col 2xl:gap-y-[1.111vw] gap-y-4">
           <p className="text-h2 font-medium">Favorites</p>
           <ProjectSelect
             projects={projects}
@@ -36,42 +47,320 @@ function FavoritesPage() {
           />
         </div>
       </div>
-      <div className="2xl:px-[2.222vw] md:max-2xl:px-6 px-4">
-        <div className="flex 2xl:gap-[1.111vw] gap-4">
+      <div className="2xl:px-[2.222vw] md:max-2xl:px-6 px-4 flex flex-col 2xl:gap-y-[1.667vw] gap-y-6">
+        <div className="flex 2xl:gap-[1.111vw] gap-4 max-md:flex-col">
           <Select
             options={Object.keys(SORT_OPTIONS)}
             defaultOption={sort}
             onSelect={(opt) => setSort(opt as keyof typeof SORT_OPTIONS)}
-            className="2xl:w-[22.778vw] md:max-2xl:max-w-[45.833vw]"
+            className="2xl:w-[22.778vw] w-full"
           />
-          <Button variant="secondary" size="large">
-            <div className="2xl:w-[1.667vw] 2xl:h-[1.667vw] w-6 h-6">
-              <ChartIcon />
+          <Button
+            variant="secondary"
+            size="large"
+            className="max-2xl:w-full"
+            onClick={() =>
+              setViewMode(viewMode === "Collection" ? "Compare" : "Collection")
+            }
+          >
+            <div className="2xl:w-[1.667vw] 2xl:h-[1.667vw] w-6 h-6 2xl:[&_path]:stroke-[clamp(1.5px,0.104vw,2px)] [&_path]:stroke-[1.5px]">
+              {viewMode === "Compare" ? <ChartIcon /> : <SquaresIcon />}
             </div>
-            <p className="text-btn-l">Compare</p>
+            <p className="text-btn-l">{viewMode}</p>
           </Button>
         </div>
-        <div className="2xl:grid-cols-4 md:max-2xl:grid-cols-2 grid 2xl:gap-[1.111vw] gap-4 py-6">
-          {favoriteUnits
-            .filter(
-              (unit) => !selectedProject || unit.project === selectedProject
-            )
-            .sort((a, b) => {
-              if (sort === "Sort by ascending price") {
-                return a.salesPrice - b.salesPrice;
-              } else if (sort === "Sort by descending price") {
-                return b.salesPrice - a.salesPrice;
-              } else if (sort === "Sort by ascending area") {
-                return a.squareFt - b.squareFt;
-              } else if (sort === "Sort by descending area") {
-                return b.squareFt - a.squareFt;
-              }
-              return 0;
-            })
-            .map((unit) => (
-              <UnitCard key={unit.id} unit={unit} />
-            ))}
-        </div>
+        {viewMode === "Collection" ? (
+          <div className="2xl:grid-cols-4 md:max-2xl:grid-cols-2 grid 2xl:gap-[1.111vw] gap-4">
+            {favoriteUnits
+              .filter(
+                (unit) => !selectedProject || unit.project === selectedProject
+              )
+              .sort((a, b) => {
+                if (sort === "Sort by ascending price") {
+                  return a.salesPrice - b.salesPrice;
+                } else if (sort === "Sort by descending price") {
+                  return b.salesPrice - a.salesPrice;
+                } else if (sort === "Sort by ascending area") {
+                  return a.squareFt - b.squareFt;
+                } else if (sort === "Sort by descending area") {
+                  return b.squareFt - a.squareFt;
+                }
+                return 0;
+              })
+              .map((unit) => (
+                <UnitCard key={unit.id} unit={unit} />
+              ))}
+          </div>
+        ) : (
+          <div className="2xl:rounded-[1.667vw] rounded-3xl 2xl:p-[2.222vw] md:max-2xl:p-[clamp(24px,3.125vw,32px)] p-[clamp(16px,4.444vw,24px)] bg-white flex flex-col 2xl:gap-[1.111vw] gap-4 relative overflow-hidden">
+            <div className="flex justify-between">
+              <Button
+                onlyIcon
+                className="!bg-[#F3F3F2]"
+                onClick={() => {
+                  setCurrent(Math.max(current - 1, 0));
+                }}
+              >
+                <span className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 text-[#0D1922]">
+                  <ArrowLeftIcon />
+                </span>
+              </Button>
+              <div className="flex 2xl:gap-[0.556vw] gap-2 items-center">
+                <div
+                  className="2xl:w-[2.778vw] w-10 2xl:p-[0.139vw] p-0.5 rounded-full bg-[#E2E2DC] cursor-pointer"
+                  onClick={() => setRemoveSimilar((prev) => !prev)}
+                >
+                  <motion.div
+                    className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 rounded-full bg-white"
+                    animate={{
+                      x: removeSimilar ? "80%" : 0,
+                    }}
+                    transition={{ bounce: 0, duration: 0.15 }}
+                  />
+                </div>
+                <p className="text-s">
+                  Remove similar
+                  <span className="max-md:hidden"> parameters</span>
+                </p>
+              </div>
+              <Button
+                onlyIcon
+                className="!bg-[#F3F3F2]"
+                onClick={() => {
+                  setCurrent(
+                    Math.min(current + 1, favoriteUnits.length * 6 - 1)
+                  );
+                }}
+              >
+                <span className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 text-[#0D1922]">
+                  <ArrowRightIcon />
+                </span>
+              </Button>
+            </div>
+            <hr className="border-[#E2E2DC] 2xl:border-t-[0.069vw] border-t" />
+            <div
+              className="flex 2xl:gap-[2.222vw] md:max-2xl:gap-[clamp(24px,3.125vw,32px)] gap-[clamp(16px,4.444vw,24px)] transition-transform"
+              style={{
+                transform:
+                  innerWidth >= 1440
+                    ? `translateX(calc((25% + 2.222vw / 4) * ${-current}))`
+                    : innerWidth >= 768
+                    ? `translateX(calc((50% + clamp(12px, 1.5625vw, 16px)) * ${-current}))`
+                    : `translateX(calc((50% + clamp(8px, 2.222vw, 12px)) * ${-current}))`,
+              }}
+            >
+              {favoriteUnits
+                .concat(favoriteUnits)
+                .concat(favoriteUnits)
+                .concat(favoriteUnits)
+                .concat(favoriteUnits)
+                .concat(favoriteUnits)
+                .map((unit, index) => (
+                  <div
+                    key={index}
+                    className="group flex-shrink-0 2xl:w-[calc(25%-3*2.222vw/4)] md:max-2xl:w-[calc(50%-clamp(12px,1.5625vw,16px))] w-[calc(50%-clamp(8px,2.222vw,12px))] 2xl:space-y-[3.889vw] md:max-2xl:space-y-[7.292vw] space-y-[11.111vw]"
+                  >
+                    <div className="2xl:p-[1.111vw] 2xl:pt-[0.556vw] md:max-2xl:p-4 md:max-2xl:pt-2 p-3 flex flex-col 2xl:gap-[0.556vw] gap-2 2xl:rounded-[1.111vw] rounded-2xl bg-[#F3F3F2] 2xl:aspect-[310/334] md:max-2xl:aspect-[320/334] aspect-[144/158]">
+                      <div className="flex justify-between items-center">
+                        <p className="md:text-s text-caption-m">
+                          {unit.unitType}
+                          <span className="max-md:hidden">
+                            {`, ${unit.squareFt.toLocaleString(undefined, {
+                              maximumFractionDigits: 2,
+                            })} Sqft`}
+                          </span>
+                        </p>
+                        <Button
+                          variant="secondary"
+                          onlyIcon
+                          className="!bg-[#F3F3F2]"
+                          onClick={() =>
+                            setFavoriteUnits(
+                              favoriteUnits.filter((u) => u.id !== unit.id)
+                            )
+                          }
+                        >
+                          <span className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5">
+                            <FilledHeartIcon />
+                          </span>
+                        </Button>
+                      </div>
+                    </div>
+                    <div className="2xl:space-y-[1.25vw] md:max-2xl:space-y-[3.385vw] space-y-[4.444vw]">
+                      <div className="2xl:space-y-[1.111vw] md:max-2xl:space-y-[0.556vw] space-y-[0.781vw]">
+                        <div
+                          className="flex items-center 2xl:gap-[1.111vw] gap-4 2xl:h-[calc(0.694vw*1.35)] h-[13.5px] transition-transform group-not-first:opacity-0"
+                          style={{
+                            transform:
+                              innerWidth >= 1440
+                                ? `translateX(calc((100% + 2.222vw) * ${current}))`
+                                : innerWidth >= 768
+                                ? `translateX(calc((100% + clamp(24px, 3.125vw, 32px)) * ${current}))`
+                                : `translateX(calc((100% + clamp(16px, 4.444vw, 24px)) * ${current}))`,
+                          }}
+                        >
+                          <p className="opacity-40 text-caption-s">Price</p>
+                          <hr className="flex-1 border-[#E2E2DC] 2xl:h-[0.069vw] h-px 2xl:min-w-[88.264vw] md:max-2xl:min-w-[80.078vw] min-w-[70.833vw]" />
+                        </div>
+
+                        <p className="md:text-m text-caption-m text-[#00BED7]">{`AED ${Intl.NumberFormat(
+                          "ar-AE",
+                          {
+                            currency: "AED",
+                            minimumFractionDigits: 0,
+                          }
+                        ).format(unit.salesPrice)}`}</p>
+                      </div>
+
+                      <div className="2xl:space-y-[1.111vw] md:max-2xl:space-y-[0.556vw] space-y-[0.781vw]">
+                        <div
+                          className="flex items-center 2xl:gap-[1.111vw] gap-4 2xl:h-[calc(0.694vw*1.35)] h-[13.5px] transition-transform"
+                          style={{
+                            transform:
+                              innerWidth >= 1440
+                                ? `translateX(calc((100% + 2.222vw) * ${current}))`
+                                : innerWidth >= 768
+                                ? `translateX(calc((100% + clamp(24px, 3.125vw, 32px)) * ${current}))`
+                                : `translateX(calc((100% + clamp(16px, 4.444vw, 24px)) * ${current}))`,
+                          }}
+                        >
+                          <p className="group-first:block hidden opacity-40 text-caption-s">
+                            Total area
+                          </p>
+                          <hr className="flex-1 border-[#E2E2DC] 2xl:h-[0.069vw] h-px 2xl:min-w-[88.264vw] md:max-2xl:min-w-[80.078vw] min-w-[70.833vw]" />
+                        </div>
+                        <p className="md:text-m text-caption-m">{`${unit.squareFt.toLocaleString(
+                          undefined,
+                          {
+                            maximumFractionDigits: 2,
+                          }
+                        )} Sqft`}</p>
+                      </div>
+                      <div className="2xl:space-y-[1.111vw] md:max-2xl:space-y-[0.556vw] space-y-[0.781vw]">
+                        <div
+                          className="flex items-center 2xl:gap-[1.111vw] gap-4 2xl:h-[calc(0.694vw*1.35)] h-[13.5px] transition-transform"
+                          style={{
+                            transform:
+                              innerWidth >= 1440
+                                ? `translateX(calc((100% + 2.222vw) * ${current}))`
+                                : innerWidth >= 768
+                                ? `translateX(calc((100% + clamp(24px, 3.125vw, 32px)) * ${current}))`
+                                : `translateX(calc((100% + clamp(16px, 4.444vw, 24px)) * ${current}))`,
+                          }}
+                        >
+                          <p className="group-first:block hidden opacity-40 text-caption-s">
+                            Suite area
+                          </p>
+                          <hr className="flex-1 border-[#E2E2DC] 2xl:h-[0.069vw] h-px 2xl:min-w-[88.264vw] md:max-2xl:min-w-[80.078vw] min-w-[70.833vw]" />
+                        </div>
+                        <p className="md:text-m text-caption-m">{`${unit.suitsArea.toLocaleString(
+                          undefined,
+                          {
+                            maximumFractionDigits: 2,
+                          }
+                        )} Sqft`}</p>
+                      </div>
+                      <div className="2xl:space-y-[1.111vw] md:max-2xl:space-y-[0.556vw] space-y-[0.781vw]">
+                        <div
+                          className="flex items-center 2xl:gap-[1.111vw] gap-4 2xl:h-[calc(0.694vw*1.35)] h-[13.5px] transition-transform"
+                          style={{
+                            transform:
+                              innerWidth >= 1440
+                                ? `translateX(calc((100% + 2.222vw) * ${current}))`
+                                : innerWidth >= 768
+                                ? `translateX(calc((100% + clamp(24px, 3.125vw, 32px)) * ${current}))`
+                                : `translateX(calc((100% + clamp(16px, 4.444vw, 24px)) * ${current}))`,
+                          }}
+                        >
+                          <p className="group-first:block hidden opacity-40 text-caption-s">
+                            Balcony area
+                          </p>
+                          <hr className="flex-1 border-[#E2E2DC] 2xl:h-[0.069vw] h-px 2xl:min-w-[88.264vw] md:max-2xl:min-w-[80.078vw] min-w-[70.833vw]" />{" "}
+                          <hr className="flex-1 border-[#E2E2DC] 2xl:h-[0.069vw] h-px 2xl:min-w-[88.264vw] md:max-2xl:min-w-[80.078vw] min-w-[70.833vw] group-[&:nth-child(2n)]:-translate-x-[2.222vw] group-[&:nth-child(3n)]:-translate-x-[2.222vw]" />
+                        </div>
+                        <p className="md:text-m text-caption-m">{`${unit.balconyArea.toLocaleString(
+                          undefined,
+                          {
+                            maximumFractionDigits: 2,
+                          }
+                        )} Sqft`}</p>
+                      </div>
+                      <div className="2xl:space-y-[1.111vw] md:max-2xl:space-y-[0.556vw] space-y-[0.781vw]">
+                        <div
+                          className="flex items-center 2xl:gap-[1.111vw] gap-4 2xl:h-[calc(0.694vw*1.35)] h-[13.5px] transition-transform"
+                          style={{
+                            transform:
+                              innerWidth >= 1440
+                                ? `translateX(calc((100% + 2.222vw) * ${current}))`
+                                : innerWidth >= 768
+                                ? `translateX(calc((100% + clamp(24px, 3.125vw, 32px)) * ${current}))`
+                                : `translateX(calc((100% + clamp(16px, 4.444vw, 24px)) * ${current}))`,
+                          }}
+                        >
+                          <p className="group-first:block hidden opacity-40 text-caption-s">
+                            Project
+                          </p>
+                          <hr className="flex-1 border-[#E2E2DC] 2xl:h-[0.069vw] h-px 2xl:min-w-[88.264vw] md:max-2xl:min-w-[80.078vw] min-w-[70.833vw]" />{" "}
+                          <hr className="flex-1 border-[#E2E2DC] 2xl:h-[0.069vw] h-px 2xl:min-w-[88.264vw] md:max-2xl:min-w-[80.078vw] min-w-[70.833vw] group-[&:nth-child(2n)]:-translate-x-[2.222vw] group-[&:nth-child(3n)]:-translate-x-[2.222vw]" />
+                        </div>
+                        <p className="md:text-[#00BED7] text-caption-m text-nowrap">
+                          {unit.project}
+                        </p>
+                      </div>
+                      <div className="2xl:space-y-[1.111vw] md:max-2xl:space-y-[0.556vw] space-y-[0.781vw]">
+                        <div
+                          className="flex items-center 2xl:gap-[1.111vw] gap-4 2xl:h-[calc(0.694vw*1.35)] h-[13.5px] transition-transform"
+                          style={{
+                            transform:
+                              innerWidth >= 1440
+                                ? `translateX(calc((100% + 2.222vw) * ${current}))`
+                                : innerWidth >= 768
+                                ? `translateX(calc((100% + clamp(24px, 3.125vw, 32px)) * ${current}))`
+                                : `translateX(calc((100% + clamp(16px, 4.444vw, 24px)) * ${current}))`,
+                          }}
+                        >
+                          <p className="group-first:block hidden opacity-40 text-caption-s">
+                            Number
+                          </p>
+                          <hr className="flex-1 border-[#E2E2DC] 2xl:h-[0.069vw] h-px 2xl:min-w-[88.264vw] md:max-2xl:min-w-[80.078vw] min-w-[70.833vw]" />{" "}
+                          <hr className="flex-1 border-[#E2E2DC] 2xl:h-[0.069vw] h-px 2xl:min-w-[88.264vw] md:max-2xl:min-w-[80.078vw] min-w-[70.833vw] group-[&:nth-child(2n)]:-translate-x-[2.222vw] group-[&:nth-child(3n)]:-translate-x-[2.222vw]" />
+                        </div>
+                        <p className="md:text-m text-caption-m">
+                          {unit.unitNo}
+                        </p>
+                      </div>
+                      {/* section */}
+                      <div className="2xl:space-y-[1.111vw] md:max-2xl:space-y-[0.556vw] space-y-[0.781vw]">
+                        <div
+                          className="flex items-center 2xl:gap-[1.111vw] gap-4 2xl:h-[calc(0.694vw*1.35)] h-[13.5px] transition-transform"
+                          style={{
+                            transform:
+                              innerWidth >= 1440
+                                ? `translateX(calc((100% + 2.222vw) * ${current}))`
+                                : innerWidth >= 768
+                                ? `translateX(calc((100% + clamp(24px, 3.125vw, 32px)) * ${current}))`
+                                : `translateX(calc((100% + clamp(16px, 4.444vw, 24px)) * ${current}))`,
+                          }}
+                        >
+                          <p className="group-first:block hidden opacity-40 text-caption-s">
+                            Floor
+                          </p>
+                          <hr className="flex-1 border-[#E2E2DC] 2xl:h-[0.069vw] h-px 2xl:min-w-[88.264vw] md:max-2xl:min-w-[80.078vw] min-w-[70.833vw]" />{" "}
+                          <hr className="flex-1 border-[#E2E2DC] 2xl:h-[0.069vw] h-px 2xl:min-w-[88.264vw] md:max-2xl:min-w-[80.078vw] min-w-[70.833vw] group-[&:nth-child(2n)]:-translate-x-[2.222vw] group-[&:nth-child(3n)]:-translate-x-[2.222vw]" />
+                        </div>
+                        <p className="md:text-m text-caption-m">
+                          Floor {unit.floor}
+                        </p>
+                      </div>
+                    </div>
+                    <Button size="large" className="w-full">
+                      Book
+                    </Button>
+                  </div>
+                ))}
+            </div>
+          </div>
+        )}
       </div>
     </div>
   );