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" />
+        <img src={image} alt="" className="aspect-video  rounded-2xl w-full object-cover pointer-events-none" />
       </div>
 
       <div className="flex items-center gap-1">

client/src/components/AboutProject/ConsultantCard.tsx

@@ -0,0 +1,20 @@
+interface Props {
+  title: string;
+  image: string;
+}
+
+function ConsultantCard({ title, image }: Props) {
+  return (
+    <div className="aspect-[4/3] rounded-2xl bg-white p-6 flex flex-col justify-between">
+      <div className="flex items-center gap-1">
+        <div className="w-3 h-3 bg-[#00BED7] rounded-full"></div>
+        <p className="text-[#0D1922] leading-[20px]">{title}</p>
+      </div>
+      <div className="self-end">
+        <img src={image} alt="" className="pointer-events-none" />
+      </div>
+    </div>
+  );
+}
+
+export default ConsultantCard;

client/src/components/AboutProject/PlaceCard.tsx

@@ -14,7 +14,7 @@ function AboutProjectPlaceCard({ title, desc, image }: Props) {
         </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" />
+      <img src={image} alt="" className="w-16 h-16 self-end rounded-xl pointer-events-none" />
     </div>
   );
 }

client/src/components/AboutProject/Slider.tsx

@@ -0,0 +1,126 @@
+import { useEffect, useRef, useState } from "react";
+import Button2 from "../Button2";
+import ArrowLeftIcon from "../icons/ArrowLeftIcon";
+import ArrowRightIcon from "../icons/ArrowRightIcon";
+
+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 Slider() {
+  const [selectedSlideIndex, setSelectedSlideIndex] = useState<number>(0);
+  const imageWrapperRef = useRef<HTMLDivElement>(null);
+
+  function prev() {
+    if (selectedSlideIndex === 0) return;
+    setSelectedSlideIndex((prev) => prev - 1);
+  }
+
+  function next() {
+    if (selectedSlideIndex === slides.length - 1) return;
+    setSelectedSlideIndex((prev) => prev + 1);
+  }
+
+  useEffect(() => {
+    if (!imageWrapperRef.current) return;
+  }, []);
+
+  return (
+    <>
+      <div className="relative overflow-hidden rounded-2xl">
+        <div
+          ref={imageWrapperRef}
+          className="flex transition-transform duration-300"
+          style={{
+            transform: `translateX(-${
+              imageWrapperRef.current &&
+              selectedSlideIndex * imageWrapperRef.current.clientWidth
+            }px)`,
+          }}
+        >
+          {slides.map((slide, index) => (
+            <img key={index} src={slide.image} alt="" className="w-full pointer-events-none" />
+          ))}
+        </div>
+
+        <div className="absolute bottom-6 left-6 w-[378px] h-[536px] p-8 rounded-2xl flex flex-col justify-between gap-8 bg-[#F3F3F2]">
+          <div className="space-y-4">
+            <p className="text-2xl text-[#00BED7] font-semibold">
+              {slides[selectedSlideIndex].title}
+            </p>
+            <p>{slides[selectedSlideIndex].desc1}</p>
+            <p>{slides[selectedSlideIndex].desc2}</p>
+          </div>
+          <div className="flex justify-between">
+            <div className="flex gap-3">
+              <Button2
+                variant="secondary"
+                size="small"
+                icon={
+                  <ArrowLeftIcon
+                    className={`w-5 h-5 transition-opacity ${
+                      selectedSlideIndex === 0 ? "opacity-25" : ""
+                    }`}
+                  />
+                }
+                onlyIcon
+                onClick={prev}
+              />
+              <Button2
+                variant="secondary"
+                size="small"
+                icon={
+                  <ArrowRightIcon
+                    className={`w-5 h-5 transition-opacity ${
+                      selectedSlideIndex === slides.length - 1
+                        ? "opacity-25"
+                        : ""
+                    }`}
+                  />
+                }
+                onlyIcon
+                onClick={next}
+              />
+            </div>
+            <p className="text-xl text-[#00BED7]">
+              {selectedSlideIndex + 1}/{slides.length}
+            </p>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default Slider;

client/src/components/AboutProject/UnitCard.tsx

@@ -30,7 +30,7 @@ function UnitCard({ title, desc1, desc2, square, price, image }: Props) {
         <img
           src={image}
           alt=""
-          className="w-full h-full aspect-square object-cover rounded-r-2xl"
+          className="w-full h-full aspect-square object-cover rounded-r-2xl pointer-events-none"
         />
       </div>
     </div>