upd

client/src/components/AboutProject/AdvantageCard.tsx

@@ -7,7 +7,7 @@ function AdvantageCard({ title, image }: Props) {
   return (
     <div className="space-y-3 ">
       <div className="flex">
-        <img src={image} alt="" className="aspect-video  rounded-2xl w-full object-cover pointer-events-none" />
+        <img src={image} alt="" className="object-cover w-full pointer-events-none aspect-video rounded-2xl" />
       </div>
 
       <div className="flex items-center gap-1">

client/src/components/AboutProject/PlaceCard.tsx

@@ -6,15 +6,15 @@ interface Props {
 
 function AboutProjectPlaceCard({ title, desc, image }: Props) {
   return (
-    <div className="bg-white rounded-2xl flex flex-col gap-2 p-3">
+    <div className="flex flex-col justify-between gap-2 p-3 bg-white max-lg:h-44 rounded-2xl snap-center max-lg:aspect-square">
       <div className="space-y-1">
         <div className="flex items-center gap-1">
           <div className="w-3 h-3 bg-[#00BED7] rounded-full"></div>
-          <p className="leading-[20px]">{title}</p>
+          <p className="leading-[20px] text-[#0D1922]">{title}</p>
         </div>
         <p className="text-[#73787C] text-sm leading-[20px]">{desc}</p>
       </div>
-      <img src={image} alt="" className="w-16 h-16 self-end rounded-xl pointer-events-none" />
+      <img src={image} alt="" className="self-end w-16 h-16 pointer-events-none rounded-xl" />
     </div>
   );
 }

client/src/components/AboutProject/SliderMobile.tsx

@@ -0,0 +1,115 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { useEffect, useRef, useState } from "react";
+import { useSwipeable } from "react-swipeable";
+
+const slides = [
+  {
+    image: "/images/pages/AboutProject/slider/1.jpg",
+    title: "Rove Home",
+    desc1:
+      "Rove Home branded residences are an extension of the Rove Hotels brand. These branded residences are for hassle-free living, with personalized expressions of your ideal living environment. ",
+    desc2:
+      "We’ve handpicked prime locations to ensure you get the very best. From interiors that uplift and energise, and amenities that are thoughtful and engaging to contemporarily stylish yet cosy apartments, we decided that this is the kind of place where we’d like to live – so we set out to build exactly that. We think you’ll agree.",
+  },
+  {
+    image: "/images/pages/AboutProject/slider/2.jpg",
+    title: "A home for the young and young-at-heart",
+    desc1:
+      "The dynamic essence of Rove comes to life at an all new address - Marasi Drive, Business Bay. Enjoy an urban living experience beyond the ordinary. Join us on this exciting journey as we unfold innovations transforming your daily moments into unforgettable living experiences in true Rove style. ",
+    desc2:
+      "Enjoy every facet of contemporary lifestyle living, prioritizing value, efficiency, and a vibrant atmosphere. It is more than just a home.",
+  },
+  {
+    image: "/images/pages/AboutProject/slider/3.jpg",
+    title: "Marasi Drive",
+    desc1:
+      "In the heart of Dubai’s Business Bay, Marasi Drive offers a captivating canal-side stroll in a vibrant central district, blending residential, commercial, and leisure amenities seamlessly. ",
+    desc2:
+      "Marasi Drive’s proximity to Downtown Dubai, grants easy access to its iconic attractions, its strategic location ensures seamless connectivity to Al Khail Road and Sheikh Zayed Road, facilitating effortless travel across the city and beyond",
+  },
+  {
+    image: "/images/pages/AboutProject/slider/4.jpg",
+    title: "Unique and innovative",
+    desc1:
+      "At Rove Home Marasi Drive, you can feel the exhilaration in the atmosphere! We’ve expertly crafted an urban oasis where captivating design, vibrant art, and cutting-edge technology come together seamlessly. ",
+    desc2:
+      "Our commitment to shaping a space that tickles your artistic sensibilities and ignites your love for innovation is unparalleled. It’s a place that would surely excite and delight Rovers like no other!",
+  },
+];
+
+function SliderMobile() {
+  const [selectedIndex, setSelectedIndex] = useState<number>(0);
+  const [width, setWidth] = useState(0);
+  const refImages = useRef<HTMLDivElement>(null);
+
+  const handlers = useSwipeable({
+    onSwipedLeft: next,
+    onSwipedRight: prev,
+    trackMouse: true,
+  });
+
+  function next() {
+    if (selectedIndex === slides.length - 1) return;
+    setSelectedIndex((prev) => (prev + 1) % slides.length);
+  }
+
+  function prev() {
+    if (selectedIndex === 0) return;
+    setSelectedIndex((prev) => (prev - 1 + slides.length) % slides.length);
+  }
+
+  useEffect(() => {
+    setWidth(refImages.current!.clientWidth);
+  }, []);
+
+  return (
+    <div className="space-y-4">
+      <div
+        {...handlers}
+        className="overflow-hidden transition-all duration-300 rounded-2xl"
+      >
+        <div
+          ref={refImages}
+          className="flex transition-all duration-300"
+          style={{
+            transform: `translateX(-${width * selectedIndex}px)`,
+          }}
+        >
+          {slides.map(({ image }, index) => (
+            <img
+              key={index}
+              src={image}
+              alt=""
+              className="object-cover aspect-[4/3] pointer-events-none"
+            />
+          ))}
+        </div>
+        <div className="p-4 space-y-3 bg-white rounded-b-2xl max-sm:min-h-[262px]">
+          <p className="text-[#00BED7] text-xl font-semibold">
+            {slides[selectedIndex].title}
+          </p>
+          <p className="text-[#73787C] text-xs">
+            {slides[selectedIndex].desc1}
+          </p>
+          <p className="text-[#73787C] text-xs">
+            {slides[selectedIndex].desc2}
+          </p>
+        </div>
+      </div>
+      <div className="flex justify-center gap-1 ">
+        {slides.map((_, index) => (
+          <div
+            key={index}
+            className={`h-2 rounded-full transition-all duration-300 ${
+              index === selectedIndex
+                ? "bg-[#0D1922] w-6"
+                : "bg-[#0D1922]/40 w-2"
+            }`}
+          ></div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default SliderMobile;

client/src/components/AboutProject/UnitCard.tsx

@@ -1,3 +1,5 @@
+import { isMobile } from "react-device-detect";
+
 interface Props {
   title: string;
   desc1: string;
@@ -5,32 +7,43 @@ interface Props {
   square: number;
   price: number;
   image: string;
+  imageMobile: string;
 }
 
-function UnitCard({ title, desc1, desc2, square, price, image }: Props) {
+function UnitCard({
+  title,
+  desc1,
+  desc2,
+  square,
+  price,
+  image,
+  imageMobile,
+}: Props) {
   return (
-    <div className="grid grid-cols-2">
-      <div className="p-10 flex flex-col justify-between gap-4 bg-white rounded-2xl">
+    <div className="relative grid sm:grid-cols-2">
+      <div className="relative z-20 flex flex-col justify-between gap-8 p-8 bg-white z- lg:p-10 rounded-2xl">
         <div className="space-y-4">
-          <p className="text-2xl text-[#0D1922] font-semibold">{title}</p>
-          <div className="space-y-2.5 leading-[20px]">
+          <p className="sm:text-2xl text-xl text-[#0D1922] font-semibold">
+            {title}
+          </p>
+          <div className="space-y-2.5 leading-[20px] text-xs sm:text-sm lg:text-base">
             <p>{desc1}</p>
             <p>{desc2}</p>
           </div>
         </div>
         <div className="space-y-1">
-          <p className="text-sm text-[#0D1922]">{square} Sqft</p>
-          <p className="text-xl text-[#00BED7] font-semibold">
+          <p className="sm:text-sm text-xs text-[#0D1922]">{square} Sqft</p>
+          <p className="sm:text-xl text-[#00BED7] font-semibold">
             AED {Intl.NumberFormat("ar-AE").format(price)}
           </p>
         </div>
       </div>
       <div className="relative">
-        <div className="absolute h-full w-[10%] -translate-x-[50%] bg-white rounded-r-2xl"></div>
+        <div className="max-sm:hidden absolute sm:h-full h-[10%] sm:w-[10%] w-full sm:-translate-x-[50%] max-sm:-translate-y-[50%] bg-white sm:rounded-r-2xl rounded-b-2xl"></div>
         <img
-          src={image}
+          src={isMobile ? imageMobile : image}
           alt=""
-          className="w-full h-full aspect-square object-cover rounded-r-2xl pointer-events-none"
+          className="max-sm:-translate-y-[10%] object-cover w-full h-full pointer-events-none sm:aspect-square aspect-[16/10] sm:rounded-r-2xl rounded-b-2xl"
         />
       </div>
     </div>

client/src/components/modals/NavbarModal.tsx

@@ -15,7 +15,7 @@ function NavbarModal() {
   }, []);
 
   return (
-    <div className="fixed top-[56px] left-0 w-full h-[calc(100vh-56px)] bg-[#F3F3F2] z-[99999999] sm:p-4 p-3 space-y-4 overflow-y-auto">
+    <div className="fixed top-[56px] left-0 w-full h-[calc(100dvh-56px)] bg-[#F3F3F2] z-[99999999] sm:p-4 p-3 space-y-4 overflow-y-auto">
       <div className="grid sm:grid-cols-2 gap-2 border-b border-[#E2E2DC] pb-4">
         <div className="flex flex-col gap-2">
           <a

client/src/components/modals/UnitModal.tsx

@@ -205,7 +205,7 @@ function UnitModal({ unit, type }: Props) {
 
   return (
     <div
-      className={`fixed top-0 left-0 w-full overflow-y-scroll h-screen pt-[56px] z-40 backdrop-blur select-none`}
+      className={`fixed top-0 left-0 w-full overflow-y-scroll h-dvh pt-[56px] z-40 backdrop-blur select-none`}
     >
       <div className="flex justify-end min-h-full">
         <div className="bg-[#F3F3F2] lg:p-6 p-4 max-w-[1240px] w-full sm:space-y-20 space-y-10">
@@ -424,7 +424,7 @@ function UnitModal({ unit, type }: Props) {
                     ?.imageDesc
                 }
                 alt=""
-                className="lg:max-h-[644px] h-full rounded-2xl pointer-events-none object-cover max-sm:aspect-square"
+                className="lg:max-h-[644px] sm:h-full rounded-2xl pointer-events-none object-cover max-sm:aspect-square"
               />
               {/* <div
                 className="lg:max-h-[644px] sm:h-full max-sm:aspect-square bg-center bg-no-repeat bg-cover rounded-2xl"