From 3a4af48d8f449effc5568c18d11d3cbebb16664d Mon Sep 17 00:00:00 2001
From: C4rnivore <kirill.z13@mail.ru>
Date: Fri, 18 Jul 2025 18:34:23 +0500
Subject: [PATCH] Verstka complited 7 tasks

---
 src/components/FloorPopup.tsx     |  4 +-
 src/components/SequenceSlider.tsx |  2 +-
 src/components/UnitCard.tsx       |  4 +-
 src/components/UnitTypeCard.tsx   |  4 +-
 src/pages/FavoritesPage.tsx       | 11 +++--
 src/pages/SearchPage.tsx          | 69 +++++++++++++++++--------------
 src/pages/UnitTypesPage.tsx       |  9 ++--
 7 files changed, 55 insertions(+), 48 deletions(-)

diff --git a/src/components/FloorPopup.tsx b/src/components/FloorPopup.tsx
index 16ce84f..0064138 100644
--- a/src/components/FloorPopup.tsx
+++ b/src/components/FloorPopup.tsx
@@ -33,7 +33,7 @@ function FloorPopup({ title, complexName, data, onSelect }: FloorPopupProps) {
       <div className="flex 2xl:gap-[0.278vw] gap-1">
         <p className="2xl:px-[0.556vw] 2xl:py-[0.278vw] px-2 py-0.5 bg-[#F3F3F2] 2xl:rounded-[0.278vw] rounded text-caption-s text-[#0D1922]/70">
           {title && Number.isNaN(+title!.split(" ").at(-1)!)
-            ? "16 Amenties"
+            ? "16 Amen ties"
             : `${
                 complexName === "marasi-drive"
                   ? data[
@@ -84,7 +84,7 @@ function FloorPopup({ title, complexName, data, onSelect }: FloorPopupProps) {
               </p>
               <p className="text-caption-m text-[#0D1922]/70">
                 Indoor Amenties
-              </p>
+              </p >
             </div>
             <div className="flex 2xl:gap-[0.556vw] gap-2">
               <p className="bg-[#00BED7] rounded-full flex justify-center items-center font-mono text-caption-s text-white 2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4">
diff --git a/src/components/SequenceSlider.tsx b/src/components/SequenceSlider.tsx
index ce04a1a..9e9a1d1 100644
--- a/src/components/SequenceSlider.tsx
+++ b/src/components/SequenceSlider.tsx
@@ -232,7 +232,7 @@ function SequenceSlider({ complexName }: SequenceSliderProps) {
           <Compass
             imgStyle={{
               transform: `rotate(${
-                currentIndex + (complexName === "dubai-marina" ? 90 : 0)
+                currentIndex*3 + (complexName === "dubai-marina" ? 90 : 0)
               }deg)`,
             }}
           />
diff --git a/src/components/UnitCard.tsx b/src/components/UnitCard.tsx
index 317b889..aaed707 100644
--- a/src/components/UnitCard.tsx
+++ b/src/components/UnitCard.tsx
@@ -42,7 +42,7 @@ function UnitCard({ unit }: { unit: Unit }) {
     <Link
       target="_blank"
       to={`/complex/${complexNameToSlug(unit.project)}/${unit.unitNo}`}
-      className="2xl:p-[1.111vw] p-4 2xl:rounded-[1.111vw] rounded-2xl 2xl:space-y-[1.111vw] space-y-4 bg-white"
+      className="2xl:p-[1.111vw] p-4 2xl:rounded-[1.111vw] rounded-2xl 2xl:space-y-[1.111vw] space-y-4 bg-white hover:-translate-y-2 transition-[translate,box-shadow] duration-300 hover:[box-shadow:0_4px_16px_0_rgba(0,0,0,.1)]"
     >
       <div className="flex items-center justify-between">
         <div className="2xl:space-y-[0.278vw] space-y-1">
@@ -91,7 +91,7 @@ function UnitCard({ unit }: { unit: Unit }) {
             maximumFractionDigits: 2,
           })} Sqft`}
         </p>
-        {!unit.project.includes("Marasi Drive") && (
+        {(
           <p className="text-[#00BED7] text-h4 font-medium">
             {`AED ${Intl.NumberFormat("ar-AE", {
               currency: "AED",
diff --git a/src/components/UnitTypeCard.tsx b/src/components/UnitTypeCard.tsx
index 2d87988..2e64402 100644
--- a/src/components/UnitTypeCard.tsx
+++ b/src/components/UnitTypeCard.tsx
@@ -7,10 +7,10 @@ function UnitTypeCard({ project, type }: { project: Project; type: UnitType }) {
     <Link
       target="_blank"
       to={`/unit-types/${project.slug}/${type.slug}`}
-      className="bg-white p-4 2xl:p-[1.111vw] rounded-2xl 2xl:rounded-[1.111vw] space-y-4 2xl:space-y-[1.111vw]"
+      className="bg-white p-4 2xl:p-[1.111vw] rounded-2xl 2xl:rounded-[1.111vw] space-y-4 2xl:space-y-[1.111vw] hover:-translate-y-2 transition-[translate,box-shadow] duration-300 hover:[box-shadow:0_4px_16px_0_rgba(0,0,0,.1)]"
     >
       <div className="space-y-1 2xl:space-y-[0.278vw]">
-        <p className="text-s">{project.title}</p>
+        <p className="text-s text-[#00BED7]">{project.title}</p>
         <div className="flex items-center gap-2 2xl:gap-[0.556vw]">
           {type.wings && (
             <>
diff --git a/src/pages/FavoritesPage.tsx b/src/pages/FavoritesPage.tsx
index c61ac09..937588d 100644
--- a/src/pages/FavoritesPage.tsx
+++ b/src/pages/FavoritesPage.tsx
@@ -230,10 +230,10 @@ function FavoritesPage() {
                     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))]"
                   >
                     <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] 2xl:mb-[1.806vw] md:max-xl:mb-[4.427vw] mb-[5.556vw]">
-                      <div className="flex justify-between items-center">
-                        <p className="md:text-s text-caption-m">
+                      <div className="flex justify-between items-start">
+                        <p className="md:text-s text-caption-m 2xl:translate-y-[0.694vw] translate-y-2.5">
                           {formattedUnitTypes.get(unit.unitType)}
-                          <span className="max-md:hidden">
+                          <span className="max-md:hidden ">
                             {`, ${unit.squareFt.toLocaleString(undefined, {
                               maximumFractionDigits: 2,
                             })} Sqft`}
@@ -266,8 +266,7 @@ function FavoritesPage() {
                       />
                     </div>
                     <div className="2xl:space-y-[1.25vw] md:max-2xl:space-y-[3.385vw] space-y-[4.444vw] 2xl:mb-[3.889vw] md:max-2xl:mb-[7.292vw] mb-[11.111vw]">
-                      {!unit.project.includes("Marasi Drive") &&
-                        (!removeSimilar ||
+                      {(!removeSimilar ||
                           filteredFavoriteUnits.some(
                             ({ salesPrice }) => salesPrice !== unit.salesPrice
                           )) && (
@@ -279,7 +278,7 @@ function FavoritesPage() {
                               minimumFractionDigits: 0,
                             }).format(unit.salesPrice)}`}
                           />
-                        )}
+                      )}
 
                       {(!removeSimilar ||
                         filteredFavoriteUnits.some(
diff --git a/src/pages/SearchPage.tsx b/src/pages/SearchPage.tsx
index d84a97c..1ebf853 100644
--- a/src/pages/SearchPage.tsx
+++ b/src/pages/SearchPage.tsx
@@ -288,40 +288,45 @@ function SearchPage() {
           )}
         </AnimatePresence>
       </div>
-      {showButtons && (
-        <div
-          className={clsx(
-            "fixed left-1/2 -translate-x-1/2 flex justify-center 2xl:gap-[0.278vw] gap-2 transition-all z-2",
-            footerReached && !hasNextPage
-              ? "top-[calc(100dvh-17.222vw)] translate-y-0"
-              : "top-[calc(100dvh-2.222vw)] -translate-y-full"
-          )}
-        >
-          <Button variant="cta" onClick={() => setFiltersInModal(true)} className="relative">
-            <span className="2xl:size-[1.111vw] size-4 text-white">
-              <FiltersIcon />
-            </span>
-            <span className="text-caption-m">Filters</span>
-            {!!activeFiltersCount && (
-              <div className="absolute 2xl:top-[0.139vw] 2xl:right-[0.139vw] top-0.5 right-0.5 rounded-full w-4 h-4 text-caption-s bg-white text-[#00BED7] flex justify-center items-center font-mono ring ring-[#E2E2DC]">
-                {activeFiltersCount}
-              </div>
+      <AnimatePresence>
+        {showButtons && (
+          <motion.div
+            initial={{opacity:0}}
+            animate={{opacity:1}}
+            exit={{opacity:0}}
+            className={clsx(
+              "fixed left-1/2 -translate-x-1/2 flex justify-center 2xl:gap-[0.278vw] gap-2 transition-all z-2",
+              footerReached && !hasNextPage
+                ? "top-[calc(100dvh-17.222vw)] translate-y-0"
+                : "top-[calc(100dvh-2.222vw)] -translate-y-full"
             )}
-          </Button>
-          <Button
-            variant="secondary"
-            className="2xl:!outline-[0.069vw] !outline !outline-[#E2E2DC]"
-            onClick={() => {
-              window.location.href = "/search";
-            }}
           >
-            <span className="2xl:size-[1.111vw] size-4 text-[#0D1922]/70">
-              <RestartIcon />
-            </span>
-            <span className="text-caption-m">Reset</span>
-          </Button>
-        </div>
-      )}
+            <Button variant="cta" onClick={() => setFiltersInModal(true)} className="relative">
+              <span className="2xl:size-[1.111vw] size-4 text-white">
+                <FiltersIcon />
+              </span>
+              <span className="text-caption-m">Filters</span>
+              {!!activeFiltersCount && (
+                <div className="absolute 2xl:top-[0.139vw] 2xl:right-[0.139vw] top-0.5 right-0.5 rounded-full w-4 h-4 text-caption-s bg-white text-[#00BED7] flex justify-center items-center font-mono ring ring-[#E2E2DC]">
+                  {activeFiltersCount}
+                </div>
+              )}
+            </Button>
+            <Button
+              variant="secondary"
+              className="2xl:!outline-[0.069vw] !outline !outline-[#E2E2DC]"
+              onClick={() => {
+                window.location.href = "/search";
+              }}
+            >
+              <span className="2xl:size-[1.111vw] size-4 text-[#0D1922]/70">
+                <RestartIcon />
+              </span>
+              <span className="text-caption-m">Reset</span>
+            </Button>
+          </motion.div>
+        )}
+      </AnimatePresence>
       <div ref={observerRef} />
     </>
   );
diff --git a/src/pages/UnitTypesPage.tsx b/src/pages/UnitTypesPage.tsx
index 0c96290..0698681 100644
--- a/src/pages/UnitTypesPage.tsx
+++ b/src/pages/UnitTypesPage.tsx
@@ -24,8 +24,9 @@ function UnitTypesPage() {
           </p>
           <ProjectSelect
             projects={projects}
-            defaultProject={projects[0]}
+            defaultProject={null}
             onSelect={(project) => setSelectedProject(project)}
+            withAll
           />
         </div>
       </div>
@@ -38,9 +39,11 @@ function UnitTypesPage() {
           exit={{ opacity: 0 }}
           className="m-4 md:max-2xl:m-6 2xl:m-[2.222vw] grid grid-cols-1 md:max-2xl:grid-cols-2 2xl:grid-cols-4 gap-4 2xl:gap-[1.111vw]"
         >
-          {selectedProject?.types?.map((type, index) => (
+          {selectedProject ? selectedProject?.types?.map((type, index) => (
             <UnitTypeCard key={index} project={selectedProject} type={type} />
-          ))}
+          )) : projects.flatMap((proj) => proj.types.map((type, index)=> (
+            <UnitTypeCard key={index} project={proj} type={type} />
+          )))}
         </motion.div>
       </AnimatePresence>
     </div>