Merge branch 'main' of http://192.168.1.163:3000/inmake/irth-new-client

.env

@@ -1 +1 @@
-VITE_API_URL=http://192.168.1.170:3000
+VITE_API_URL=http://194.26.138.94:4002

src/components/FloorSelect.tsx

@@ -56,11 +56,11 @@ function FloorSelect({ complexName }: { complexName: string }) {
       >
         {Object.entries(
           floorsMasks[complexName as keyof typeof floorsMasks]
-        ).map(([floor, d]) => (
+        ).map(([floorTitle, d]) => (
           <path
-            onMouseEnter={() => setHoveredFloor(floor)}
+            onMouseEnter={() => setHoveredFloor(floorTitle)}
             onMouseLeave={() => setHoveredFloor(null)}
-            key={floor}
+            key={floorTitle}
             d={d}
             className="fill-[#00BED7] cursor-pointer transition-opacity duration-300 opacity-20 hover:opacity-60 peer"
           />

src/components/Footer.tsx

@@ -4,23 +4,23 @@ 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 ChevronDownIcon from "./icons/ChevronDownIcon";
 import { useFavoritesUnitsStore } from "../stores/useFavoritesUnitsStore";
-import { AnimatePresence, motion } from "motion/react";
-import { useState } from "react";
-import { BrochureButton } from "./Header";
-import clsx from "clsx";
-import { useClickAway } from "@uidotdev/usehooks";
-import Button from "./ui/Button";
+// import { AnimatePresence, motion } from "motion/react";
+// import { useState } from "react";
+// import { BrochureButton } from "./Header";
+// import clsx from "clsx";
+// import { useClickAway } from "@uidotdev/usehooks";
+// import Button from "./ui/Button";
 import useModalStore from "../stores/useModalStore";
 import PrivacyPolicyModal from "./modals/PrivacyPolicyModal";
 
 function Footer() {
   const { favoriteUnits } = useFavoritesUnitsStore();
 
-  const [opened, setOpened] = useState(false);
+  // const [opened, setOpened] = useState(false);
 
-  const ref = useClickAway<HTMLDivElement>(() => setOpened(false));
+  // const ref = useClickAway<HTMLDivElement>(() => setOpened(false));
 
   const { setModal } = useModalStore();
 
@@ -38,7 +38,7 @@ function Footer() {
       <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: 
+        our website:{" "}
         <Link className="text-[#00BED7] underline" to={"https://www.irth.ae"}>
           www.irth.ae
         </Link>

src/components/Header.tsx

@@ -222,16 +222,16 @@ function NavItem({ href, title }: { href: string; title: string }) {
   );
 }
 
-function ProfileBar() {
-  return (
-    <Button
-      variant="secondary"
-      className="2xl:mr-[2.222vw] mr-4 text-[#0D1922]/70 !bg-[#F3F3F2]"
-    >
-      Login
-    </Button>
-  );
-}
+// function ProfileBar() {
+//   return (
+//     <Button
+//       variant="secondary"
+//       className="2xl:mr-[2.222vw] mr-4 text-[#0D1922]/70 !bg-[#F3F3F2]"
+//     >
+//       Login
+//     </Button>
+//   );
+// }
 
 function BrochuresDropdown() {
   const [opened, setOpened] = useState(false);

src/components/SearchFilters.tsx

@@ -623,8 +623,8 @@ function SearchFilters({
                     ...
                   </motion.span>
                 )}
-              </AnimatePresence>
-               Apartments found
+              </AnimatePresence>{" "}
+              Apartments found
             </p>
           )}
           <Button

src/components/SimilarList.tsx

@@ -1,33 +0,0 @@
-import ChevronLeftIcon from "./icons/ChevronLeftIcon";
-import ChevronRightIcon from "./icons/ChevronRightIcon";
-import Button from "./ui/Button";
-
-interface SimilarListProps {
-  type: "units" | "apartments";
-  relatedTitle: string;
-  limit: number;
-}
-
-function SimilarList({ relatedTitle, type, limit }: SimilarListProps) {
-  return (
-    <div className="2xl:space-y-[1.111vw] space-y-4">
-      <div className="flex justify-between items-center">
-        <p className="md:text-h2 text-h3 font-medium">Similar {type}</p>
-        <div className="flex 2xl:gap-[0.556vw] gap-2">
-          <Button onlyIcon variant="secondary">
-            <span className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5">
-              <ChevronLeftIcon />
-            </span>
-          </Button>
-          <Button onlyIcon variant="secondary">
-            <span className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5">
-              <ChevronRightIcon />
-            </span>
-          </Button>
-        </div>
-      </div>
-      <div className="flex 2xl:gap-[1.111vw] md:max-2xl:gap-4 gap-2"></div>
-    </div>
-  );
-}
-export default SimilarList;

src/components/Slider.tsx

@@ -3,6 +3,7 @@ import ArrowLeftIcon from './icons/ArrowLeftIcon';
 import ArrowRightIcon from './icons/ArrowRightIcon';
 import { dubaiMarinaSlider } from '../data/aboutDubaiMarina';
 import { AnimatePresence, motion } from 'motion/react';
+import { useSwipeable } from 'react-swipeable';
 import Button from './ui/Button';
 
 function Slider({
@@ -27,13 +28,26 @@ function Slider({
     }
   };
 
+  const handlers = useSwipeable({
+    onSwipedLeft: handleNextSlide,
+    onSwipedRight: handlePreviousSlide,
+    preventScrollOnSwipe: true,
+    touchEventOptions: {
+      passive: false,
+    },
+    trackMouse: true,
+  });
+
   useEffect(() => {
     setCurrentSlide(0);
   }, [categoryName]);
 
   return (
-    <div className='relative w-[63.333vw] h-[27.639vw] rounded-3xl overflow-hidden max-md:w-[91.111vw] max-md:h-[110.556vw]'>
-      <AnimatePresence custom={direction}>
+    <div
+      {...handlers}
+      className='relative w-[63.333vw] h-[27.639vw] rounded-3xl overflow-hidden max-md:w-[91.111vw] max-md:h-[110.556vw]'
+    >
+      <AnimatePresence custom={direction} initial={false}>
         <motion.div
           key={currentSlide}
           className='absolute inset-0 bg-cover bg-no-repeat bg-center before:absolute before:inset-0 before:bg-[#0D1922]/20 before:z-10'
@@ -54,7 +68,7 @@ function Slider({
           <AnimatePresence mode='wait'>
             <motion.h3
               key={`title-${currentSlide}`}
-              className='text-subheadline-m text-white max-md:text-h5'
+              className='text-h3 text-white max-md:text-h5'
               initial={{ opacity: 0 }}
               animate={{ opacity: 1 }}
               exit={{ opacity: 0 }}

src/components/modals/UnitFiltersModal.tsx

@@ -1,7 +0,0 @@
-import SearchFilters from "../SearchFilters";
-
-function UnitFiltersModal() {
-  return <SearchFilters inModal />;
-}
-
-export default UnitFiltersModal;

src/pages/SearchPage.tsx

@@ -227,7 +227,7 @@ function SearchPage() {
       {showButtons && (
         <div
           className={clsx(
-            "fixed left-1/2 -translate-x-1/2 flex justify-center 2xl:gap-[0.278vw] gap-2 transition-all",
+            "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"

vite.config.ts

@@ -7,5 +7,9 @@ export default defineConfig({
   plugins: [react(), tailwindcss()],
   server: {
     host: true,
+    port: 4001,
+  },
+  preview: {
+    port: 4001,
   },
 });