diff --git a/public/images/aboutCompany/about_the_developer.png b/public/images/aboutCompany/about_the_developer.png new file mode 100644 index 0000000..7a718db Binary files /dev/null and b/public/images/aboutCompany/about_the_developer.png differ diff --git a/public/images/aboutCompany/mainConsultants/1.png b/public/images/aboutCompany/mainConsultants/1.png new file mode 100644 index 0000000..f05446f Binary files /dev/null and b/public/images/aboutCompany/mainConsultants/1.png differ diff --git a/public/images/aboutCompany/mainConsultants/2.png b/public/images/aboutCompany/mainConsultants/2.png new file mode 100644 index 0000000..e206566 Binary files /dev/null and b/public/images/aboutCompany/mainConsultants/2.png differ diff --git a/public/images/aboutCompany/mainConsultants/3.png b/public/images/aboutCompany/mainConsultants/3.png new file mode 100644 index 0000000..ccc54ec Binary files /dev/null and b/public/images/aboutCompany/mainConsultants/3.png differ diff --git a/public/images/aboutCompany/mainConsultants/4.png b/public/images/aboutCompany/mainConsultants/4.png new file mode 100644 index 0000000..8997372 Binary files /dev/null and b/public/images/aboutCompany/mainConsultants/4.png differ diff --git a/public/images/aboutCompany/mainConsultants/5.png b/public/images/aboutCompany/mainConsultants/5.png new file mode 100644 index 0000000..0d1a626 Binary files /dev/null and b/public/images/aboutCompany/mainConsultants/5.png differ diff --git a/src/components/MasterSelector.tsx b/src/components/MasterSelector.tsx index 61c8f7f..9415c95 100644 --- a/src/components/MasterSelector.tsx +++ b/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 { diff --git a/src/components/aboutComplex/LivingSolutionSlider.tsx b/src/components/aboutComplex/LivingSolutionSlider.tsx index c7426ba..c2183e8 100644 --- a/src/components/aboutComplex/LivingSolutionSlider.tsx +++ b/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(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 (
{ - const [cards, setCards] = useState(layoutsCards); + const [cards] = useState(layoutsCards); const [offset, setOffset] = useState(0); const cardRef = useRef(null); const [cardWidth, setCardWidth] = useState(0); diff --git a/src/pages/AboutComplex.tsx b/src/pages/AboutComplex.tsx index 0d37b66..88753ad 100644 --- a/src/pages/AboutComplex.tsx +++ b/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,155 +118,376 @@ const advStyles = [ const AboutComplex = () => { return ( -
-
-
-
-
-

- 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. -

+ {/* About Rove Home */} +

+ 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. +

-
-
- About rove home +
+
+ About rove home +
+
+ +
+ 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{" "} +
+
-
+ {/* RoveHome roof */} +
-
- 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{" "} +
+ {/* Rove around the city */} +
+
+ ROVE AROUND THE CITY
-
-
-
- -
-
-
- ROVE AROUND THE CITY -
-
-
- {roveAroundTheCity.map((item) => ( -
-
-
-
{item.title}
+
+
+ {roveAroundTheCity.map((item) => ( +
+
+
+
{item.title}
+
+

{item.time} mins

+
-

{item.time} mins

- -
- ))} -
-
- -
-
-
-
-
- ADVANTAGES -
-

- What makes a rove home? -

- {advantages.map((adv, index) => { - const styles = `${advStyles[index]} sm:col-start-1 ${ - index === advantages.length - 1 ? "" : "pb-14" - }`; - - return ( -
+ ))} +
+
{adv.title} -
-
-
{adv.title}
-
-
- ); - })} -
-

- 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. -

-
-
- EXPANDABLE LIVING SOLUTIONS -
-
-
- ORI introduces a revolutionary solution to apartment living, where - space is not just a constraint but an opportunity.{" "} -
-
-
-
-

Simple

-
-
-
-

Safe

-
-
-
-

Effortless

-
-
-
-
- -
-
-
-
- ROVE AROUND THE CITY -
-
- {unitsDesc.map((unit) => ( -
-
- sdfsdfdsfsd -
-
- ))} - -
-
-
+
-
+ {/* Advantages */} +
+
+ ADVANTAGES +
+

+ What makes a rove home? +

+ {advantages.map((adv, index) => { + const styles = `${advStyles[index]} ${ + index === advantages.length - 1 ? "" : "xl:pb-14 pb-6" + }`; + return ( +
+ {adv.title} +
+
+
{adv.title}
+
+
+ ); + })} +
+ {/* EXPANDABLE LIVING SOLUTIONS */} +

+ 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. +

+
+
+ EXPANDABLE LIVING SOLUTIONS +
+
+
+ ORI introduces a revolutionary solution to apartment living, where + space is not just a constraint but an opportunity.{" "} +
+
+
+
+

Simple

+
+
+
+

Safe

+
+
+
+

Effortless

+
+
+
+
+ +
+
+ {/* Units description */} +
+
+ UNITS DESCRIPTION +
+
+
+
+
+

+ Studio flex +

+

+ 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% +

+
+
+

341 Sqft

+

+ AED 2,408,888 +

+
+
+ +
+
+
+
+

+ Studio2 +

+

+ 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. +

+
+
+

390 Sqft

+

+ AED 1,138,888 +

+
+
+ +
+
+
+
+

+ 1 Bedroom2 +

+

+ In 1 Bedroom 2 double up your space with next generation + features that enhance smart living. +

+

+ With pocket walls that disappear and a Flexibed that + seamlessly converts, you can transform your living room into + an extra bedroom, anytime you want! +

+
+
+

609 Sqft

+

+ AED 1,668,888 +

+
+
+ +
+
+
+
+

+ 2 Bedroom2 +

+

+ In 2 Bedroom 2 discover extra functionality with added space + and maximum value. +

+

+ 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. +

+
+
+

891 Sqft

+

+ AED 2,408,888 +

+
+
+ +
+
+
+ {/* About the developer */} +

+ 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. +

+
+
+ ABOUT THE DEVELOPER +
+
+
+

+ 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. +

+

+ 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. +

+
+
+
+ +
+
+ {/* MAIN CONSULTANTS */} +
+
+ MAIN CONSULTANTS +
+
+
+
+
+

Architect

+
+ +
+
+
+
+

Landscape architect

+
+ +
+
+
+
+

Art team

+
+ +
+
+
+
+

Id team

+
+ +
+
+
+
+

Sales and marketing

+
+ +
+
+
+