about masterpan page

src/components/MasterSelector.tsx

@@ -1,4 +1,4 @@
-import { NumericFormat, PatternFormat } from "react-number-format";
+import { PatternFormat } from "react-number-format";
 import ChevronDownIcon from "./icons/ChevronDownIcon";
 
 interface IOptions {

src/components/aboutComplex/LivingSolutionSlider.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import { useSwipeable } from "react-swipeable";
-import { useLayoutEffect, useRef, useState } from "react";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { Image } from "../../types/image";
 import { isMobile } from "react-device-detect";
 import Button from "../Button";
@@ -27,27 +27,6 @@ const LivingSolutionSlider = () => {
   const [imageWidth, setImageWidth] = useState(0);
   const imageRef = useRef<HTMLImageElement>(null);
 
-  useLayoutEffect(() => {
-    if (!imageRef.current?.src) return;
-    const width = imageRef.current.width;
-    setImageWidth(width);
-  }, [imageRef.current, window.innerWidth]);
-
-  useLayoutEffect(() => {
-    const screenWidth = window.innerWidth;
-    const gapOffset = getGapOffset(screenWidth);
-
-    const _rightImageOffset =
-      screenWidth > 1280
-        ? `${"calc(clamp(315px, 7.0317rem + 19.0319vw, 485px)"} + ${
-            // ? `${"calc(clamp(315px, 6.9317rem + 17.0319vw, 420px)"} + ${
-            selectedImageIndex * (imageWidth + gapOffset)
-          }px)`
-        : `${(selectedImageIndex + 1) * (imageWidth + gapOffset)}px`;
-
-    setRightImageOffset(_rightImageOffset);
-  }, [imageWidth, selectedImageIndex, window.innerWidth]);
-
   const handlers = useSwipeable({
     onSwipedLeft: next,
     onSwipedRight: prev,
@@ -66,6 +45,27 @@ const LivingSolutionSlider = () => {
     setSelectedImageIndex((prev) => prev - 1);
   }
 
+  useEffect(() => {
+    if (!imageRef.current) return;
+    const width = imageRef.current.width;
+    setImageWidth(width);
+  }, [imageRef.current?.width]);
+
+  useLayoutEffect(() => {
+    const screenWidth = window.innerWidth;
+    const gapOffset = getGapOffset(screenWidth);
+
+    const _rightImageOffset =
+      screenWidth > 1280
+        ? `${"calc(clamp(315px, 7.0317rem + 19.0319vw, 485px)"} + ${
+            // ? `${"calc(clamp(315px, 6.9317rem + 17.0319vw, 420px)"} + ${
+            selectedImageIndex * (imageWidth + gapOffset)
+          }px)`
+        : `${(selectedImageIndex + 1) * (imageWidth + gapOffset)}px`;
+
+    setRightImageOffset(_rightImageOffset);
+  }, [imageWidth, selectedImageIndex, window.innerWidth]);
+
   return (
     <div className="flex flex-col gap-6 " {...handlers}>
       <div

src/components/searchApartment/SimilarSlider.tsx

@@ -11,7 +11,7 @@ const desktopCols = 4;
 const laptopCols = 2;
 
 const SimilarSlider = () => {
-  const [cards, setCards] = useState(layoutsCards);
+  const [cards] = useState(layoutsCards);
   const [offset, setOffset] = useState(0);
   const cardRef = useRef<HTMLDivElement | null>(null);
   const [cardWidth, setCardWidth] = useState(0);

src/pages/AboutComplex.tsx

@@ -2,7 +2,6 @@ import { isMobile } from "react-device-detect";
 import Footer from "../components/Footer";
 import Button from "../components/Button";
 import LeftArrowIcon from "../components/icons/LeftArrowIcon";
-import { Project } from "../types/project";
 import LivingSolutionSlider from "../components/aboutComplex/LivingSolutionSlider";
 
 interface ICityItem {
@@ -109,26 +108,6 @@ const advantages: IAdvantages[] = [
   },
 ];
 
-interface IUnitDesc {
-  title: string;
-  desc: string;
-  id: string;
-  sqft: number;
-  aed: number;
-  image: string;
-}
-
-const unitsDesc: IUnitDesc[] = [
-  {
-    id: "1",
-    image: "/images/aboutCompany/unitsDescription/1.png",
-    aed: 1048888,
-    title: "Studio flex",
-    sqft: 341,
-    desc: "Live in the future, today. In Studio Flex explore the ORI Cloud Bed, optimizing your living space with functionality and smart living. Every inch is designed to provide more space for comfort and convenience. This feature increase your unit size by 33%",
-  },
-];
-
 const advStyles = [
   "xl:col-start-3 xl:col-end-7",
   "xl:col-span-4",
@@ -139,50 +118,63 @@ const advStyles = [
 
 const AboutComplex = () => {
   return (
+    <>
       <section
-      className={`xl:pt-16 pt-10 font-usual ${
-        isMobile ? "pt-24" : ""
+        className={`xl:pt-16 sm:pt-10 font-usual ${
+          isMobile ? "pt-16" : ""
         } grid grid-cols-12`}
       >
         <div className="flex px-6 py-4 col-span-full h-16 relative">
-        <div className="fixed">
-          <Button text="Masterplan" icon={<LeftArrowIcon />} buttonType="cta" />
+          <div className="fixed z-50">
+            <Button
+              text="Masterplan"
+              icon={<LeftArrowIcon />}
+              buttonType="cta"
+            />
           </div>
         </div>
+        {/* About Rove Home */}
         <h1 className="uppercase xl:rubber-headline-indent text-headline-s xl:px-6 px-4 col-span-full pb-6">
-        Rove Home this residence a complete ecosystem that has everything you’ll
-        ever need. This isn’t just where you’ll live. It’s where you’ll thrive.
+          Rove Home this residence a complete ecosystem that has everything
+          you’ll ever need. This isn’t just where you’ll live. It’s where you’ll
+          thrive.
         </h1>
 
         <div className="col-span-full px-6 grid grid-cols-12">
-        <div className="text-caption-m font-semibold text-[#73787C] col-span-1 uppercase">
+          <div className="text-caption-m font-semibold text-[#73787C] xl:col-span-1 uppercase col-span-full pb-3">
             About rove home
           </div>
-        <div className="col-start-3 col-span-full grid grid-cols-10 gap-6 pb-[100px]">
+          <div className="xl:col-start-3 col-span-full grid grid-cols-10 gap-6 xl:pb-[100px] sm:pb-16 pb-20">
             <img
               src="/images/aboutCompany/rovehome.png"
               alt=""
               className="col-span-full"
             />
-          <div className="col-span-4 text-l text-[#73787C]">
+            <div className="xl:col-span-4 sm:col-span-6 col-span-full text-l text-[#73787C]">
               Embrace Rove’s forever-young spirit at Rove Home, where inspiring
               design and vibrant art installations converge with an exceptional
               location and an extended playlist of life-enhancing{" "}
             </div>
           </div>
         </div>
+        {/* RoveHome roof */}
         <div className="col-span-full">
-        <img src="/images/aboutCompany/rovehome_roof.png" alt="" />
+          <img
+            src="/images/aboutCompany/rovehome_roof.png"
+            alt=""
+            className="w-full"
+          />
         </div>
-      <div className="col-span-full px-6 grid grid-cols-12 pt-[100px]">
-        <div className="text-caption-m font-semibold text-[#73787C] col-span-1 uppercase">
+        {/* 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">
             ROVE AROUND THE CITY
           </div>
-        <div className="col-start-3 col-span-full grid grid-cols-10 gap-6 ">
-          <div className="col-span-4 grid grid-cols-4 gap-4">
+          <div className="xl:col-start-3 col-span-full grid grid-cols-10 gap-6">
+            <div className="xl:col-span-4 grid grid-cols-4 gap-4 order-2 xl:order-1 col-span-full">
               {roveAroundTheCity.map((item) => (
                 <div
-                className="col-span-2 bg-white rounded-lg flex flex-col p-3"
+                  className="xl:col-span-2 sm:col-span-1 col-span-2 bg-white rounded-lg flex flex-col p-3"
                   key={item.id}
                 >
                   <div className="flex gap-1 items-center">
@@ -194,26 +186,31 @@ const AboutComplex = () => {
                 </div>
               ))}
             </div>
-          <div className="col-span-full col-start-5">
-            <img src="/images/aboutCompany/Map.png" alt="" />
+            <div className="col-span-full xl:col-start-5 order-1 xl:order-2">
+              <img
+                src="/images/aboutCompany/Map.png"
+                alt=""
+                className="w-full"
+              />
             </div>
           </div>
         </div>
-      <div className="col-span-full grid grid-cols-12 px-6 gap-x-4 pt-[140px]">
-        <div className="uppercase text-[#73787C] font-semibold col-span-1 pb-3 text-caption-m">
+        {/* Advantages */}
+        <div className="col-span-full grid grid-cols-12 px-6 gap-x-4 xl:pt-[140px] sm:pt-16 pt-14">
+          <div className="uppercase text-[#73787C] font-semibold xl:col-span-1 pb-3 text-caption-m col-span-full">
             ADVANTAGES
           </div>
-        <p className="text-subheadline-m font-semibold col-start-3 col-span-full pb-6 text-[#00BED7]">
+          <p className="text-subheadline-m font-semibold xl:col-start-3 col-span-full xl:pb-6 text-[#00BED7] pb-3">
             What makes a rove home?
           </p>
           {advantages.map((adv, index) => {
-          const styles = `${advStyles[index]} sm:col-start-1 ${
-            index === advantages.length - 1 ? "" : "pb-14"
+            const styles = `${advStyles[index]} ${
+              index === advantages.length - 1 ? "" : "xl:pb-14 pb-6"
             }`;
 
             return (
               <div
-              className={`flex flex-col ${styles} col-span-4 col-start-1`}
+                className={`flex flex-col ${styles} xl:col-span-4 sm:col-span-6 col-span-full`}
                 key={adv.id}
               >
                 <img
@@ -229,16 +226,17 @@ const AboutComplex = () => {
             );
           })}
         </div>
-      <h1 className="uppercase xl:rubber-headline-indent text-headline-s xl:px-6 px-4 col-span-full pb-6 pt-[140px]">
+        {/* EXPANDABLE LIVING SOLUTIONS */}
+        <h1 className="uppercase xl:rubber-headline-indent text-headline-s xl:px-6 px-4 col-span-full pb-6 xl:pt-[140px] sm:pt-[100px] pt-20">
           Live in the future, today. Designed to embody Rove’s unique look and
           feel, the interiors will feature intelligent and modular living
           solutions by ORI, never seen before in UAE and the region.
         </h1>
         <div className="col-span-full grid grid-cols-12 px-6">
-        <div className="text-caption-m font-semibold text-[#73787C] col-span-2 uppercase col-start-1">
+          <div className="text-caption-m font-semibold text-[#73787C] xl:col-span-2 uppercase col-start-1 col-span-full pb-3">
             EXPANDABLE LIVING SOLUTIONS
           </div>
-        <div className="flex flex-col gap-6 col-start-3 col-span-4">
+          <div className="flex flex-col gap-6 xl:col-start-3 xl:col-span-4 col-span-full">
             <div className="text-[#00BED7] text-subheadline-m">
               ORI introduces a revolutionary solution to apartment living, where
               space is not just a constraint but an opportunity.{" "}
@@ -262,32 +260,234 @@ const AboutComplex = () => {
             <LivingSolutionSlider />
           </div>
         </div>
-      <div className="col-span-full px-6 grid grid-cols-12 pt-[100px]">
-        <div className="text-caption-m font-semibold text-[#73787C] col-span-1 uppercase">
-          ROVE AROUND THE CITY
+        {/* Units description */}
+        <div className="col-span-full px-6 grid grid-cols-12 xl:pt-[140px] xm:pt-[100px] pt-[80px]">
+          <div className="text-caption-m font-semibold text-[#73787C] xl:col-span-1 col-span-full uppercase pb-3">
+            UNITS DESCRIPTION
+          </div>
+          <div className="xl:col-start-3 col-span-full grid grid-cols-10 gap-6">
+            <div className="lg:col-span-5 col-span-full grid relative grid-cols-5">
+              <div className="sm:col-span-3 col-span-full h-full bg-white rounded-2xl flex flex-col justify-between p-8 sm:mr-[-32px] gap-6">
+                <div>
+                  <h2 className="text-[#0D1922] font-bold text-subheadline-l">
+                    Studio flex
+                  </h2>
+                  <p className="text-m text-[#73787C] pt-4">
+                    Live in the future, today. In Studio Flex explore the ORI
+                    Cloud Bed, optimizing your living space with functionality
+                    and smart living.
+                  </p>
+                  <p className="text-m text-[#73787C] mt-[10px]">
+                    Every inch is designed to provide more space for comfort and
+                    convenience. This feature increase your unit size by 33%
+                  </p>
+                </div>
+                <div>
+                  <p className="text-s text-[#0D1922]">341 Sqft</p>
+                  <p className="font-bold text-m text-[#00BED7]">
+                    AED 2,408,888
+                  </p>
                 </div>
-        <div className="col-start-3 col-span-full grid grid-cols-10 gap-6">
-          {unitsDesc.map((unit) => (
-            <div className="col-span-5 grid relative grid-cols-5">
-              <div className="col-span-3 h-full bg-white rounded-se-lg rounded-ee-lg">
-                sdfsdfdsfsd
               </div>
               <img
-                src={unit.image}
+                src="/images/aboutCompany/unitsDescription/1.png"
                 alt=""
-                className="absolute right-0 top-0 -z-40"
+                className="sm:col-span-2 col-span-full -z-10 sm:h-full w-full object-cover rounded-2xl xl:aspect-auto sm:aspect-square aspect-[3.3/2] mt-[-32px] sm:mt-0"
+              />
+            </div>
+            <div className="lg:col-span-5 col-span-full grid relative grid-cols-5">
+              <div className="sm:col-span-3 col-span-full h-full bg-white rounded-2xl flex flex-col justify-between p-8 sm:mr-[-32px] gap-6">
+                <div>
+                  <h2 className="text-[#0D1922] font-bold text-subheadline-l">
+                    Studio<sup>2</sup>
+                  </h2>
+                  <p className="text-m text-[#73787C] pt-4">
+                    In Studio 2 experience the Flexibed, a smart innovation for
+                    modern living. When folded, it unveils a spacious living
+                    room creating a cohesive space that blends both style and
+                    functionality.
+                  </p>
+                </div>
+                <div>
+                  <p className="text-s text-[#0D1922]">390 Sqft</p>
+                  <p className="font-bold text-m text-[#00BED7]">
+                    AED 1,138,888
+                  </p>
+                </div>
+              </div>
+              <img
+                src="/images/aboutCompany/unitsDescription/2.png"
+                alt=""
+                className="sm:col-span-2 col-span-full -z-10 sm:h-full w-full object-cover rounded-2xl xl:aspect-auto sm:aspect-square aspect-[3.3/2] mt-[-32px] sm:mt-0"
+              />
+            </div>
+            <div className="lg:col-span-5 col-span-full grid relative grid-cols-5">
+              <div className="sm:col-span-3 col-span-full h-full bg-white rounded-2xl flex flex-col justify-between p-8 sm:mr-[-32px] gap-6">
+                <div>
+                  <h2 className="text-[#0D1922] font-bold text-subheadline-l">
+                    1 Bedroom<sup>2</sup>
+                  </h2>
+                  <p className="text-m text-[#73787C] pt-4">
+                    In 1 Bedroom 2 double up your space with next generation
+                    features that enhance smart living.
+                  </p>
+                  <p className="text-m text-[#73787C] mt-[10px]">
+                    With pocket walls that disappear and a Flexibed that
+                    seamlessly converts, you can transform your living room into
+                    an extra bedroom, anytime you want!
+                  </p>
+                </div>
+                <div>
+                  <p className="text-s text-[#0D1922]">609 Sqft</p>
+                  <p className="font-bold text-m text-[#00BED7]">
+                    AED 1,668,888
+                  </p>
+                </div>
+              </div>
+              <img
+                src="/images/aboutCompany/unitsDescription/3.png"
+                alt=""
+                className="sm:col-span-2 col-span-full -z-10 sm:h-full w-full object-cover rounded-2xl xl:aspect-auto sm:aspect-square aspect-[3.3/2] mt-[-32px] sm:mt-0"
+              />
+            </div>
+            <div className="lg:col-span-5 col-span-full grid relative grid-cols-5">
+              <div className="sm:col-span-3 col-span-full h-full bg-white rounded-2xl flex flex-col justify-between p-8 sm:mr-[-32px] gap-6">
+                <div>
+                  <h2 className="text-[#0D1922] font-bold text-subheadline-l">
+                    2 Bedroom<sup>2</sup>
+                  </h2>
+                  <p className="text-m text-[#73787C] pt-4">
+                    In 2 Bedroom 2 discover extra functionality with added space
+                    and maximum value.
+                  </p>
+                  <p className="text-m text-[#73787C] mt-[10px]">
+                    Whether you want to add a multipurpose spare room or double
+                    up your living space as a bedroom - every inch of space
+                    feels larger and works exactly how you want.
+                  </p>
+                </div>
+                <div>
+                  <p className="text-s text-[#0D1922]">891 Sqft</p>
+                  <p className="font-bold text-m text-[#00BED7]">
+                    AED 2,408,888
+                  </p>
+                </div>
+              </div>
+              <img
+                src="/images/aboutCompany/unitsDescription/4.png"
+                alt=""
+                className="sm:col-span-2 col-span-full -z-10 w-full object-cover rounded-2xl xl:aspect-auto sm:aspect-square aspect-[3.3/2] h-full mt-[-32px] sm:mt-0"
+              />
+            </div>
+          </div>
+        </div>
+        {/* About the developer */}
+        <h1 className="uppercase xl:rubber-headline-indent text-headline-s xl:px-6 px-4 col-span-full xl:pb-16 sm:pb-10 pb-7 xl:pt-[140px] sm:pt-[100px] pt-20">
+          Founded under Alshamsi family, IRTH is a real estate investment
+          platform - based on the philosophy of value creation, innovation and
+          building world-class living experiences.
+        </h1>
+        <div className="col-span-full grid xl:grid-cols-12 grid-cols-8 px-6 gap-6">
+          <div className="text-caption-m font-semibold text-[#73787C] xl:col-span-1 col-span-full uppercase">
+            ABOUT THE DEVELOPER
+          </div>
+          <div className="xl:col-start-3 xl:col-span-3 text-[#73787C] flex-col flex justify-between col-span-5 gap-6">
+            <div>
+              <p className="text-m">
+                IRTH’s vision is long-term, supported with a proactive approach,
+                swift actions, strong financial backing, and high-quality
+                projects - bridging the gap between ambition and success. IRTH
+                continues seeking new opportunities and broadening horizons –
+                thriving in any market situation through an extensive land bank
+                and strategic partnerships.
+              </p>
+              <p className="text-m pt-4">
+                At IRTH, we take pride in offering the best-inclass locations
+                and properties for value-based investment opportunities -
+                setting new standards in the real estate market in the region.
+                We are IRTH – The Future of Real Estate.
+              </p>
+            </div>
+            <Button
+              text="Learn more"
+              buttonType="cta"
+              className="justify-center w-fit px-[51px]"
+            />
+          </div>
+          <div className="xl:col-start-7 xl:col-span-7 col-span-full">
+            <img
+              src="/images/aboutCompany/about_the_developer.png"
+              alt=""
+              className="w-full"
+            />
+          </div>
+        </div>
+        {/* MAIN CONSULTANTS */}
+        <div className="col-span-full grid xl:grid-cols-12 grid-cols-8 px-6 xl:pt-[140px] xl:pb-[140px] sm:pt-[100px] pt-20 pb-10">
+          <div className="text-caption-m font-semibold text-[#73787C] xl:col-span-2 uppercase pb-3 col-span-full">
+            MAIN CONSULTANTS
+          </div>
+          <div className="col-span-full grid xl:grid-cols-12 grid-cols-8 gap-4">
+            <div className="xl:col-start-3 col-start-1 sm:col-span-2 col-span-4 bg-white rounded-2xl p-6 h-[280px] justify-between flex flex-col">
+              <div className="flex gap-1 items-center">
+                <div className="bg-[#00BED7] w-3 h-3 rounded-full"></div>
+                <p className="text-m text-[#0D1922]">Architect</p>
+              </div>
+              <img
+                src="/images/aboutCompany/mainConsultants/1.png"
+                alt=""
+                className="self-end"
+              />
+            </div>
+            <div className="sm:col-span-2 bg-white rounded-2xl col-span-4 p-6 h-[280px] justify-between flex flex-col">
+              <div className="flex gap-1 items-center">
+                <div className="bg-[#00BED7] w-3 h-3 rounded-full"></div>
+                <p className="text-m text-[#0D1922]">Landscape architect</p>
+              </div>
+              <img
+                src="/images/aboutCompany/mainConsultants/2.png"
+                alt=""
+                className="self-end"
+              />
+            </div>
+            <div className="sm:col-span-2 bg-white rounded-2xl col-span-full p-6 h-[280px] justify-between flex flex-col xl:col-start-9 sm:col-start-7">
+              <div className="flex gap-1 items-center">
+                <div className="bg-[#00BED7] w-3 h-3 rounded-full"></div>
+                <p className="text-m text-[#0D1922]">Art team</p>
+              </div>
+              <img
+                src="/images/aboutCompany/mainConsultants/3.png"
+                alt=""
+                className="self-end"
+              />
+            </div>
+            <div className="sm:col-span-2 bg-white rounded-2xl col-span-4 p-6 h-[280px] justify-between flex flex-col xl:col-start-5 sm:col-start-3">
+              <div className="flex gap-1 items-center">
+                <div className="bg-[#00BED7] w-3 h-3 rounded-full"></div>
+                <p className="text-m text-[#0D1922]">Id team</p>
+              </div>
+              <img
+                src="/images/aboutCompany/mainConsultants/4.png"
+                alt=""
+                className="self-end"
+              />
+            </div>
+            <div className="sm:col-span-2 bg-white rounded-2xl col-span-4 p-6 h-[280px] justify-between flex flex-col">
+              <div className="flex gap-1 items-center">
+                <div className="bg-[#00BED7] w-3 h-3 rounded-full"></div>
+                <p className="text-m text-[#0D1922]">Sales and marketing</p>
+              </div>
+              <img
+                src="/images/aboutCompany/mainConsultants/5.png"
+                alt=""
+                className="self-end"
               />
             </div>
-          ))}
-
-          <div className="col-span-5"></div>
-          <div className="col-span-5"></div>
-          <div className="col-span-5"></div>
           </div>
         </div>
-
-      <Footer />
       </section>
+      <Footer />
+    </>
   );
 };