diff --git a/client/public/images/pages/AboutProject/units/mobile/1.jpg b/client/public/images/pages/AboutProject/units/mobile/1.jpg new file mode 100644 index 0000000..b5e9703 Binary files /dev/null and b/client/public/images/pages/AboutProject/units/mobile/1.jpg differ diff --git a/client/public/images/pages/AboutProject/units/mobile/2.jpg b/client/public/images/pages/AboutProject/units/mobile/2.jpg new file mode 100644 index 0000000..09e1bdd Binary files /dev/null and b/client/public/images/pages/AboutProject/units/mobile/2.jpg differ diff --git a/client/public/images/pages/AboutProject/units/mobile/3.jpg b/client/public/images/pages/AboutProject/units/mobile/3.jpg new file mode 100644 index 0000000..8fee017 Binary files /dev/null and b/client/public/images/pages/AboutProject/units/mobile/3.jpg differ diff --git a/client/public/images/pages/AboutProject/units/mobile/4.jpg b/client/public/images/pages/AboutProject/units/mobile/4.jpg new file mode 100644 index 0000000..c4f463b Binary files /dev/null and b/client/public/images/pages/AboutProject/units/mobile/4.jpg differ diff --git a/client/src/components/AboutProject/AdvantageCard.tsx b/client/src/components/AboutProject/AdvantageCard.tsx index 182feef..da4794a 100644 --- a/client/src/components/AboutProject/AdvantageCard.tsx +++ b/client/src/components/AboutProject/AdvantageCard.tsx @@ -7,7 +7,7 @@ function AdvantageCard({ title, image }: Props) { return (
- +
diff --git a/client/src/components/AboutProject/PlaceCard.tsx b/client/src/components/AboutProject/PlaceCard.tsx index ddae9f0..b832ae2 100644 --- a/client/src/components/AboutProject/PlaceCard.tsx +++ b/client/src/components/AboutProject/PlaceCard.tsx @@ -6,15 +6,15 @@ interface Props { function AboutProjectPlaceCard({ title, desc, image }: Props) { return ( -
+
-

{title}

+

{title}

{desc}

- +
); } diff --git a/client/src/components/AboutProject/SliderMobile.tsx b/client/src/components/AboutProject/SliderMobile.tsx new file mode 100644 index 0000000..be7407e --- /dev/null +++ b/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(0); + const [width, setWidth] = useState(0); + const refImages = useRef(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 ( +
+
+
+ {slides.map(({ image }, index) => ( + + ))} +
+
+

+ {slides[selectedIndex].title} +

+

+ {slides[selectedIndex].desc1} +

+

+ {slides[selectedIndex].desc2} +

+
+
+
+ {slides.map((_, index) => ( +
+ ))} +
+
+ ); +} + +export default SliderMobile; diff --git a/client/src/components/AboutProject/UnitCard.tsx b/client/src/components/AboutProject/UnitCard.tsx index 54efa80..49c5a41 100644 --- a/client/src/components/AboutProject/UnitCard.tsx +++ b/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 ( -
-
+
+
-

{title}

-
+

+ {title} +

+

{desc1}

{desc2}

-

{square} Sqft

-

+

{square} Sqft

+

AED {Intl.NumberFormat("ar-AE").format(price)}

-
+
diff --git a/client/src/components/modals/NavbarModal.tsx b/client/src/components/modals/NavbarModal.tsx index 9602bb3..79824a7 100644 --- a/client/src/components/modals/NavbarModal.tsx +++ b/client/src/components/modals/NavbarModal.tsx @@ -15,7 +15,7 @@ function NavbarModal() { }, []); return ( -
+
@@ -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" /> {/*
{ Welcome to IRTH – a name etched in legacy

-
+
@@ -63,7 +64,7 @@ const AboutPage = () => {
@@ -79,8 +80,8 @@ const AboutPage = () => { Our foundation is built upon three core values

-
-
+
+

Trust

@@ -98,7 +99,7 @@ const AboutPage = () => {

-
+

Strength

@@ -115,7 +116,7 @@ const AboutPage = () => {

-
+

Agility

diff --git a/client/src/pages/AboutProjectsPage.tsx b/client/src/pages/AboutProjectsPage.tsx index 2e2d212..b45d11f 100644 --- a/client/src/pages/AboutProjectsPage.tsx +++ b/client/src/pages/AboutProjectsPage.tsx @@ -7,26 +7,27 @@ import ArrowLeftIcon from "../components/icons/ArrowLeftIcon"; import Logo2Icon from "../components/icons/Logo2Icon"; import ConsultantCard from "../components/AboutProject/ConsultantCard"; import Slider from "../components/AboutProject/Slider"; +import SliderMobile from "../components/AboutProject/SliderMobile"; function AboutProjectsPage() { const navigate = useNavigate(); 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

-

+

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{" "} @@ -43,23 +44,28 @@ function AboutProjectsPage() {

-
- +
+ + + + + +
-
-
-
-

+

+
+
+

ROVE AROUND THE CITY

-
+
-
+
-
+
-
+

ADVANTAGES

-
+
-

+

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.

-

+

ORI introduces a revolutionary solution to apartment living, where space is not just a constraint but an opportunity.

@@ -173,30 +179,32 @@ function AboutProjectsPage() {

Effortless

-
+
- - +
+ + +
-
+

UNITS DESCRIPTION

-
+
-
-

+

+

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 @@ -263,13 +275,13 @@ function AboutProjectsPage() {

- navigate("/about")}>Learn more + navigate("/about")} className="max-lg:min-w-48 min-w-40">Learn more
diff --git a/client/src/pages/SearchPage.tsx b/client/src/pages/SearchPage.tsx index 260fb84..c960fc6 100644 --- a/client/src/pages/SearchPage.tsx +++ b/client/src/pages/SearchPage.tsx @@ -407,7 +407,7 @@ function SearchPage() { return (
@@ -677,7 +677,7 @@ function SearchPage() {
-
+

View

@@ -832,11 +832,26 @@ function SearchPage() {
+
+
+

{filteredUnits.length} apartments found

+ +
+ setShowFilters(false)}> + Show Apartments + +
-

+

Units{" "} {filteredUnits.length}