diff --git a/public/images/about-complex/marasi-drive/buisness_bay.jpg b/public/images/about-complex/marasi-drive/business_bay.jpg similarity index 100% rename from public/images/about-complex/marasi-drive/buisness_bay.jpg rename to public/images/about-complex/marasi-drive/business_bay.jpg diff --git a/public/images/about-complex/marasi-drive/city_walk.jpg b/public/images/about-complex/marasi-drive/city_walk.jpg index dc65d44..b570ccd 100644 Binary files a/public/images/about-complex/marasi-drive/city_walk.jpg and b/public/images/about-complex/marasi-drive/city_walk.jpg differ diff --git a/public/images/about-complex/marasi-drive/downtown.jpg b/public/images/about-complex/marasi-drive/downtown.jpg index c646116..a6818c8 100644 Binary files a/public/images/about-complex/marasi-drive/downtown.jpg and b/public/images/about-complex/marasi-drive/downtown.jpg differ diff --git a/public/images/about-complex/marasi-drive/mall.jpg b/public/images/about-complex/marasi-drive/mall.jpg index 3f8dcd5..b11d0d1 100644 Binary files a/public/images/about-complex/marasi-drive/mall.jpg and b/public/images/about-complex/marasi-drive/mall.jpg differ diff --git a/public/images/about-complex/marasi-drive/dubai_international_airport.png b/public/images/about-complex/marasi-drive/map/airport.png similarity index 100% rename from public/images/about-complex/marasi-drive/dubai_international_airport.png rename to public/images/about-complex/marasi-drive/map/airport.png diff --git a/public/images/about-complex/marasi-drive/arena.png b/public/images/about-complex/marasi-drive/map/arena.png similarity index 100% rename from public/images/about-complex/marasi-drive/arena.png rename to public/images/about-complex/marasi-drive/map/arena.png diff --git a/public/images/about-complex/marasi-drive/burj_halifa.png b/public/images/about-complex/marasi-drive/map/burj_khalifa.png similarity index 100% rename from public/images/about-complex/marasi-drive/burj_halifa.png rename to public/images/about-complex/marasi-drive/map/burj_khalifa.png diff --git a/public/images/about-complex/marasi-drive/city_walk.png b/public/images/about-complex/marasi-drive/map/city_walk.png similarity index 100% rename from public/images/about-complex/marasi-drive/city_walk.png rename to public/images/about-complex/marasi-drive/map/city_walk.png diff --git a/public/images/about-complex/marasi-drive/rove_city_walk_hotel.png b/public/images/about-complex/marasi-drive/map/city_walk_hotel.png similarity index 100% rename from public/images/about-complex/marasi-drive/rove_city_walk_hotel.png rename to public/images/about-complex/marasi-drive/map/city_walk_hotel.png diff --git a/public/images/about-complex/marasi-drive/rove_downtown_hotel.png b/public/images/about-complex/marasi-drive/map/downtown_hotel.png similarity index 100% rename from public/images/about-complex/marasi-drive/rove_downtown_hotel.png rename to public/images/about-complex/marasi-drive/map/downtown_hotel.png diff --git a/public/images/about-complex/marasi-drive/dubai_fountain.png b/public/images/about-complex/marasi-drive/map/fountain.png similarity index 100% rename from public/images/about-complex/marasi-drive/dubai_fountain.png rename to public/images/about-complex/marasi-drive/map/fountain.png diff --git a/public/images/about-complex/marasi-drive/dubai_mall.png b/public/images/about-complex/marasi-drive/map/mall.png similarity index 100% rename from public/images/about-complex/marasi-drive/dubai_mall.png rename to public/images/about-complex/marasi-drive/map/mall.png diff --git a/public/images/about-complex/marasi-drive/map/map.png b/public/images/about-complex/marasi-drive/map/map.png new file mode 100644 index 0000000..f0b9ab8 Binary files /dev/null and b/public/images/about-complex/marasi-drive/map/map.png differ diff --git a/public/images/about-complex/marasi-drive/dubai_opera.png b/public/images/about-complex/marasi-drive/map/opera.png similarity index 100% rename from public/images/about-complex/marasi-drive/dubai_opera.png rename to public/images/about-complex/marasi-drive/map/opera.png diff --git a/public/images/about-complex/marasi-drive/marasi_promenade.png b/public/images/about-complex/marasi-drive/map/promenade.png similarity index 100% rename from public/images/about-complex/marasi-drive/marasi_promenade.png rename to public/images/about-complex/marasi-drive/map/promenade.png diff --git a/public/images/about-complex/marasi-drive/podium.png b/public/images/about-complex/marasi-drive/podium.png new file mode 100644 index 0000000..cec4242 Binary files /dev/null and b/public/images/about-complex/marasi-drive/podium.png differ diff --git a/public/images/about-complex/marasi-drive/promenade.jpg b/public/images/about-complex/marasi-drive/promenade.jpg index 8b7ce75..e8672b9 100644 Binary files a/public/images/about-complex/marasi-drive/promenade.jpg and b/public/images/about-complex/marasi-drive/promenade.jpg differ diff --git a/src/components/AboutMarasiDrive.tsx b/src/components/AboutMarasiDrive.tsx index b308fdf..deb74d5 100644 --- a/src/components/AboutMarasiDrive.tsx +++ b/src/components/AboutMarasiDrive.tsx @@ -2,12 +2,15 @@ import { marasiDriveFeatures, marasiDriveDescriptionBadges, marasiDriveExpandable, + marasiDriveMapCards, } from "../data/aboutMarasiDrive"; import MarariDriveNeighboursSlider from "./MarasiDriveNeighboursSlider"; import MarasiDriveInteriorsSlider from "./MarasiDriveInteriorsSlider"; import TextBox from "./ui/TextBox"; -import { useEffect, useRef } from "react"; +import { useRef } from "react"; import { useScroll } from "motion/react"; +import MarasiDriveMapCard from "./MarasiDriveMapCard"; +import BrochureButton from "./ui/BrochureButton"; function AboutMarasiDrive() { const target = useRef(null); @@ -16,12 +19,6 @@ function AboutMarasiDrive() { target, }); - useEffect(() => { - scrollYProgress.on("change", (latest) => { - console.log(latest); - }); - }, [scrollYProgress]); - return (
@@ -48,7 +45,7 @@ function AboutMarasiDrive() {

-
+

@@ -90,7 +87,11 @@ function AboutMarasiDrive() {
{marasiDriveExpandable.map((image) => (
- Expandable Living Solutions + Expandable Living Solutions
))}
@@ -109,6 +110,8 @@ function AboutMarasiDrive() {

+
+

@@ -123,11 +126,11 @@ function AboutMarasiDrive() {

-
+

@@ -148,16 +151,71 @@ function AboutMarasiDrive() { Rove around the city

- Located in the heart of Dubai Marina, Rove Home Dubai Marina is - where active living meets modern convenience. Enjoy an energetic - lifestyle surrounded by trendy cafés, shops, and entertainment - options – all within reach. + {`Located in the heart of Dubai Marina, Rove Home Dubai Marina is where active + living meets modern convenience. Enjoy an energetic lifestyle surrounded by + trendy cafés, shops, and entertainment options - all within reach.`}

-
+
+ {marasiDriveMapCards.map((card) => ( + + ))} +
+ +
+
+
+
+
+ +
+
+
+

+ {`Live Different + with Rove Home`} +

+

+ {`Experience the difference with Rove Home where modern amenities, + trendy interiors, and smart features cater to your unique style.`} +

+
+
+
Download our brochures
+
+ + + + + +
+
+
-
); } diff --git a/src/components/FloorPlanMarasiDriveWestUpper.tsx b/src/components/FloorPlanMarasiDriveWestUpper.tsx index 15fc780..9169cc8 100644 --- a/src/components/FloorPlanMarasiDriveWestUpper.tsx +++ b/src/components/FloorPlanMarasiDriveWestUpper.tsx @@ -1178,6 +1178,7 @@ function FloorPlanMarasiDriveEast({ {unitsOnFloor.map((unit) => floorPlanMarasiDriveWestUpperMasks.has(unit.unitNo.slice(-2)) ? ( ); } - -export function BrochureButton({ - title, - link, -}: { - title: string; - link: string; -}) { - const handleDownload = () => { - const anchor = document.createElement("a"); - anchor.href = link; - anchor.download = title; // Use the title as the filename - anchor.style.display = "none"; - document.body.appendChild(anchor); - anchor.click(); - document.body.removeChild(anchor); - }; - - return ( - - ); -} diff --git a/src/components/MarasiDriveInteriorsSlider.tsx b/src/components/MarasiDriveInteriorsSlider.tsx index d6d9a24..86e6841 100644 --- a/src/components/MarasiDriveInteriorsSlider.tsx +++ b/src/components/MarasiDriveInteriorsSlider.tsx @@ -8,7 +8,7 @@ import { AnimatePresence, motion } from "motion/react"; import { useSwipeable } from "react-swipeable"; function MarasiDriveInteriorsSlider() { - const [currentIndex, setCurrentIndex] = useState(0); + const [currentIndex, setCurrentIndex] = useState(1); const handlers = useSwipeable({ onSwipedLeft: () => diff --git a/src/components/MarasiDriveMapCard.tsx b/src/components/MarasiDriveMapCard.tsx index 5d54066..54d0ab3 100644 --- a/src/components/MarasiDriveMapCard.tsx +++ b/src/components/MarasiDriveMapCard.tsx @@ -11,7 +11,7 @@ function MarasiDriveMapCard({ }) { return (
@@ -21,7 +21,7 @@ function MarasiDriveMapCard({
{title} diff --git a/src/components/ui/BrochureButton.tsx b/src/components/ui/BrochureButton.tsx new file mode 100644 index 0000000..8b6d051 --- /dev/null +++ b/src/components/ui/BrochureButton.tsx @@ -0,0 +1,36 @@ +import DownloadIcon from "../icons/DownloadIcon"; +import Button from "./Button"; + +export default function BrochureButton({ + title, + link, +}: { + title: string; + link: string; +}) { + const handleDownload = () => { + const anchor = document.createElement("a"); + anchor.href = link; + anchor.download = title; // Use the title as the filename + anchor.style.display = "none"; + document.body.appendChild(anchor); + anchor.click(); + document.body.removeChild(anchor); + }; + + return ( + + ); +} diff --git a/src/data/aboutMarasiDrive.ts b/src/data/aboutMarasiDrive.ts index 2193bbe..37ef7a7 100644 --- a/src/data/aboutMarasiDrive.ts +++ b/src/data/aboutMarasiDrive.ts @@ -75,46 +75,51 @@ export const marasiDriveMapCards = [ { title: "Burj Khalifa", mins: 10, - image: "/images/about-complex/marasi-drive/burj_khalifa.jpg", + image: "/images/about-complex/marasi-drive/map/burj_khalifa.png", }, { title: "Dubai Fountain", - mins: 15, - image: "/images/about-complex/marasi-drive/fountain.jpg", + mins: 10, + image: "/images/about-complex/marasi-drive/map/fountain.png", }, { title: "Dubai Mall", - mins: 15, - image: "/images/about-complex/marasi-drive/mall.jpg", + mins: 8, + image: "/images/about-complex/marasi-drive/map/mall.png", }, { title: "Dubai Opera", - mins: 15, - image: "/images/about-complex/marasi-drive/opera.jpg", + mins: 11, + image: "/images/about-complex/marasi-drive/map/opera.png", }, { title: "Marasi Promenade", - mins: 15, - image: "/images/about-complex/marasi-drive/promenade.jpg", + mins: 4, + image: "/images/about-complex/marasi-drive/map/promenade.png", }, { title: "Rove Downtown Hotel", - mins: 15, - image: "/images/about-complex/marasi-drive/rovedowntown.jpg", + mins: 10, + image: "/images/about-complex/marasi-drive/map/downtown_hotel.png", }, { title: "Rove City Walk Hotel", - mins: 15, - image: "/images/about-complex/marasi-drive/rovecitywalk.jpg", + mins: 12, + image: "/images/about-complex/marasi-drive/map/city_walk_hotel.png", + }, + { + title: "City Walk", + mins: 12, + image: "/images/about-complex/marasi-drive/map/city_walk.png", }, { title: "Coca-Cola Arena", - mins: 15, - image: "/images/about-complex/marasi-drive/arena.jpg", + mins: 14, + image: "/images/about-complex/marasi-drive/map/arena.png", }, { title: "Dubai International Airport", - mins: 15, - image: "/images/about-complex/marasi-drive/airport.jpg", + mins: 10, + image: "/images/about-complex/marasi-drive/map/airport.png", }, ] as const;