rovehome slider

src/components/aboutComplex/LivingSolutionSlider.tsx

@@ -67,7 +67,7 @@ const LivingSolutionSlider = () => {
   }, [imageWidth, selectedImageIndex, window.innerWidth]);
 
   return (
-    <div className="flex flex-col gap-6 " {...handlers}>
+    <div className="flex flex-col gap-6" {...handlers}>
       <div
         className="relative col-span-full overflow-x-hidden flex flex-col"
         style={{ height: "clamp(30rem, 12.6318rem + 21.6933vw, 75rem)" }}

src/components/aboutComplex/RoveHomeSlider.tsx

@@ -0,0 +1,164 @@
+import { useEffect, useRef, useState } from "react";
+import Button from "../Button";
+import LeftArrowIcon from "../icons/LeftArrowIcon";
+import RightArrowIcon from "../icons/RightArrowIcon";
+import { useSwipeable } from "react-swipeable";
+
+interface IRoveHomeSlide {
+  src: string;
+  title: string;
+  desc1: string;
+  desc2: string;
+  id: string;
+}
+
+const rovehomeSlides: IRoveHomeSlide[] = [
+  {
+    id: "1",
+    src: "/images/aboutCompany/roveHomeSlider/1.png",
+    title: "Rove Home",
+    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.",
+    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. ",
+  },
+  {
+    id: "2",
+    src: "/images/aboutCompany/roveHomeSlider/2.png",
+    title: "Marasi Dri",
+    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",
+    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. Enjoy every facet of contemporary lifestyle living, prioritizing value, efficiency, and a vibrant atmosphere. It is more than just a home.",
+  },
+  {
+    id: "3",
+    src: "/images/aboutCompany/roveHomeSlider/3.png",
+    title: "A home for the young and young-at-heart",
+    desc2:
+      "Enjoy every facet of contemporary lifestyle living, prioritizing value, efficiency, and a vibrant atmosphere. It is more than just a home.",
+    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. ",
+  },
+  {
+    id: "4",
+    src: "/images/aboutCompany/roveHomeSlider/4.png",
+    title: "Unique and innovative",
+    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!",
+    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.",
+  },
+];
+
+const RoveHomeSlider = () => {
+  const [offset, setOffset] = useState(0);
+  const [imageWidth, setImageWidth] = useState(0);
+  const imageRef = useRef<HTMLImageElement>(null);
+
+  const handlers = useSwipeable({
+    onSwipedLeft: next,
+    onSwipedRight: prev,
+    trackMouse: true,
+  });
+
+  function next() {
+    if (offset > -1 * (rovehomeSlides.length - 1)) {
+      setOffset((prev) => prev - 1);
+    }
+  }
+
+  function prev() {
+    if (offset < 0) {
+      setOffset((prev) => prev + 1);
+    }
+  }
+
+  // const handleOnRightClick = () => {
+  //   if (offset > -1 * (rovehomeSlides.length - 1)) {
+  //     setOffset((prev) => prev - 1);
+  //   }
+  // };
+
+  // const handleOnLeftClick = () => {
+  //   if (offset < 0) {
+  //     setOffset((prev) => prev + 1);
+  //   }
+  // };
+
+  useEffect(() => {
+    if (!imageRef.current) return;
+    const width = imageRef.current.width;
+    setImageWidth(width);
+  }, [imageRef.current?.width]);
+
+  return (
+    <div
+      className="col-span-full relative xl:aspect-video sm:aspect-[7.6/10] grid grid-cols-12 items-end pb-6 sm:pl-4 sm:px-0 px-4"
+      {...handlers}
+    >
+      {/* <div className="absolute w-full h-full z-50" ></div> */}
+      <div className="bg-[#F3F3F2] select-none p-8 z-50 xl:col-span-3 col-span-6 xl:col-start-3 rounded-2xl xl:min-h-[520px] sm:flex hidden flex-col justify-between">
+        <div>
+          <h2 className="text-subheadline-m font-semibold text-[#00BED7] pb-4 ">
+            {rovehomeSlides[offset * -1].title}
+          </h2>
+          <p className="text-[#73787C] text-m ">
+            {rovehomeSlides[offset * -1].desc1}
+          </p>
+          <p className="text-[#73787C] text-m pt-4">
+            {rovehomeSlides[offset * -1].desc2}
+          </p>
+        </div>
+        <div className="flex justify-between items-end justify-self-end">
+          <div className="flex gap-3 pt-8">
+            <Button icon={<LeftArrowIcon />} onClick={prev} />
+            <Button icon={<RightArrowIcon />} onClick={next} />
+          </div>
+          <p className="text-l text-[#00BED7]">
+            {rovehomeSlides.length - rovehomeSlides.length + 1 - offset}/
+            {rovehomeSlides.length}
+          </p>
+        </div>
+      </div>
+      <div className="sm:absolute lg:w-[calc(100vw-5px)] sm:w-screen w-[calc(100vw-32px)] overflow-hidden xl:aspect-video sm:aspect-[7.6/10]  rounded-2xl sm:rounded-ee-2xl sm:rounded-es-2xl rounded-ee-none rounded-es-none">
+        <div
+          className="w-fit flex transition-transform duration-300 ease-in-out"
+          style={{ transform: `translateX(${offset * imageWidth}px)` }}
+        >
+          {rovehomeSlides.map((slide) => (
+            <div className="flex w-screen flex-col select-none">
+              <img
+                ref={imageRef}
+                key={slide.id}
+                src={slide.src}
+                alt=""
+                className="select-none pointer-events-none xl:aspect-video sm:aspect-[7.6/10] aspect-video object-cover xl:h-auto"
+              />
+              <div className="flex p-4 flex-col gap-3 bg-white rounded-ee-2xl rounded-es-2xl  sm:w-full w-[calc(100vw-32px)] h-full sm:hidden">
+                <h2 className="text-[#00BED7] font-semibold text-subheadline-m">
+                  {slide.title}
+                </h2>
+                <p className="mobile-text-s text-[#73787C]">{slide.desc1}</p>
+                <p className="mobile-text-s text-[#73787C]">{slide.desc2}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+        <div className="flex gap-1 justify-center pt-4 ">
+          {rovehomeSlides.map((_, index) => (
+            <div
+              className={`rounded-full transition-all duration-300 ease-in-out sm:hidden ${
+                offset === -1 * index
+                  ? "bg-[#0D1922] w-6"
+                  : "bg-[#0D192266] w-2"
+              }   h-2`}
+            ></div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default RoveHomeSlider;

src/index.css

@@ -74,6 +74,14 @@ html {
   .text-button-m {
   }
 
+  .mobile-text-s {
+    font-family: "Usual", sans-serif;
+    line-height: 140%;
+    font-size: clamp(10px, 0.01rem + 0.93vw, 20px);
+  }
+
+  .mobile-subheadline-m {
+  }
   .rubber-headline-indent {
     text-indent: clamp(209px, -0.4197rem + 16.8396vw, 842px);
   }

src/pages/AboutComplex.tsx

@@ -3,6 +3,7 @@ import Footer from "../components/Footer";
 import Button from "../components/Button";
 import LeftArrowIcon from "../components/icons/LeftArrowIcon";
 import LivingSolutionSlider from "../components/aboutComplex/LivingSolutionSlider";
+import RoveHomeSlider from "../components/aboutComplex/RoveHomeSlider";
 
 interface ICityItem {
   time: number;
@@ -158,13 +159,7 @@ const AboutComplex = () => {
           </div>
         </div>
         {/* RoveHome roof */}
-        <div className="col-span-full">
-          <img
-            src="/images/aboutCompany/rovehome_roof.png"
-            alt=""
-            className="w-full"
-          />
-        </div>
+        <RoveHomeSlider />
         {/* Rove around the city */}
         <div className="col-span-full px-6 grid grid-cols-12 xl:pt-[100px] sm:pt-16 pt-14">
           <div className="text-caption-m font-semibold text-[#73787C] xl:col-span-1 col-span-full uppercase pb-3">