From a68d001ef92f207b7df27e4ced6be30664160ad2 Mon Sep 17 00:00:00 2001 From: C4rnivore Date: Fri, 18 Jul 2025 17:25:10 +0500 Subject: [PATCH] About Marasi Drive Table Mobile --- bun.lock | 3 + src/components/AboutMarasiDrive.tsx | 65 +++++++++------- .../MarasiDriveInteriorsSliderMobile.tsx | 29 +++++++ src/components/MarasiDriveMapMobile.tsx | 44 +++++++++++ .../MarasiDriveNeighboursSliderMobile.tsx | 28 +++++++ .../MarasiDriveNeighboursSliderTablet.tsx | 4 +- src/components/ui/ScrollBar.tsx | 78 +++++++++++++++++++ 7 files changed, 222 insertions(+), 29 deletions(-) create mode 100644 src/components/MarasiDriveInteriorsSliderMobile.tsx create mode 100644 src/components/MarasiDriveMapMobile.tsx create mode 100644 src/components/MarasiDriveNeighboursSliderMobile.tsx create mode 100644 src/components/ui/ScrollBar.tsx diff --git a/bun.lock b/bun.lock index 705670d..53844cc 100644 --- a/bun.lock +++ b/bun.lock @@ -12,6 +12,7 @@ "clsx": "^2.1.1", "date-fns": "^4.1.0", "date-fns-tz": "^3.2.0", + "eruda": "^3.4.3", "gsap": "^3.12.7", "ky": "^1.8.1", "motion": "^12.6.3", @@ -314,6 +315,8 @@ "enhanced-resolve": ["enhanced-resolve@5.18.1", "", { "dependencies": { "graceful-fs": "^4.2.4", "tapable": "^2.2.0" } }, "sha512-ZSW3ma5GkcQBIpwZTSRAI8N71Uuwgs93IezB7mf7R60tC8ZbJideoDNKjHn2O9KIlx6rkGTTEk1xUCK2E1Y2Yg=="], + "eruda": ["eruda@3.4.3", "", {}, "sha512-J2TsF4dXSspOXev5bJ6mljv0dRrxj21wklrDzbvPmYaEmVoC+2psylyRi70nUPFh1mTQfIBsSusUtAMZtUN+/w=="], + "esbuild": ["esbuild@0.25.2", "", { "optionalDependencies": { "@esbuild/aix-ppc64": "0.25.2", "@esbuild/android-arm": "0.25.2", "@esbuild/android-arm64": "0.25.2", "@esbuild/android-x64": "0.25.2", "@esbuild/darwin-arm64": "0.25.2", "@esbuild/darwin-x64": "0.25.2", "@esbuild/freebsd-arm64": "0.25.2", "@esbuild/freebsd-x64": "0.25.2", "@esbuild/linux-arm": "0.25.2", "@esbuild/linux-arm64": "0.25.2", "@esbuild/linux-ia32": "0.25.2", "@esbuild/linux-loong64": "0.25.2", "@esbuild/linux-mips64el": "0.25.2", "@esbuild/linux-ppc64": "0.25.2", "@esbuild/linux-riscv64": "0.25.2", "@esbuild/linux-s390x": "0.25.2", "@esbuild/linux-x64": "0.25.2", "@esbuild/netbsd-arm64": "0.25.2", "@esbuild/netbsd-x64": "0.25.2", "@esbuild/openbsd-arm64": "0.25.2", "@esbuild/openbsd-x64": "0.25.2", "@esbuild/sunos-x64": "0.25.2", "@esbuild/win32-arm64": "0.25.2", "@esbuild/win32-ia32": "0.25.2", "@esbuild/win32-x64": "0.25.2" }, "bin": { "esbuild": "bin/esbuild" } }, "sha512-16854zccKPnC+toMywC+uKNeYSv+/eXkevRAfwRD/G9Cleq66m8XFIrigkbvauLLlCfDL45Q2cWegSg53gGBnQ=="], "escape-string-regexp": ["escape-string-regexp@4.0.0", "", {}, "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="], diff --git a/src/components/AboutMarasiDrive.tsx b/src/components/AboutMarasiDrive.tsx index aa77902..37dc7cc 100644 --- a/src/components/AboutMarasiDrive.tsx +++ b/src/components/AboutMarasiDrive.tsx @@ -5,15 +5,21 @@ import { } from "../data/aboutMarasiDrive"; import MarariDriveNeighboursSliderDesktop from "./MarasiDriveNeighboursSliderDesktop"; import MarasiDriveInteriorsSlider from "./MarasiDriveInteriorsSlider"; +import MarasiDriveInteriorsSliderMobile from "./MarasiDriveInteriorsSliderMobile"; +import MarasiDriveNeighboursSliderMobile from "./MarasiDriveNeighboursSliderMobile"; +import MarasiDriveMapMobile from "./MarasiDriveMapMobile"; import TextBox from "./ui/TextBox"; import { useRef } from "react"; import { useScroll } from "motion/react"; import MarasiDriveMapCard from "./MarasiDriveMapCard"; -import BrochureButton from "./ui/BrochureButton"; + import MarasiDriveNeighboursSliderTablet from "./MarasiDriveNeighboursSliderTablet"; +import CustomScrollBar from "./ui/ScrollBar"; +import BrochureButton from "./ui/BrochureButton"; function AboutMarasiDrive() { const target = useRef(null); + const homeSliderRef = useRef(null); const { scrollYProgress } = useScroll({ target, @@ -22,7 +28,7 @@ function AboutMarasiDrive() { return (
-
+
@@ -67,7 +73,7 @@ function AboutMarasiDrive() {
-

+

{`A home for the young and young in heart`}

@@ -86,23 +92,25 @@ function AboutMarasiDrive() { {`What makes a Rove Home?`} -

+

{`Experience the difference with Rove Home where modern amenities, trendy interiors, and smart features cater to your unique style. Rove Home is your destination for artful inspiration and cleverly activated spaces.`}

-
+
{marasiDriveFeatures.map(({ image, name }) => ( -
+
{name} + {name}
))}
+
@@ -110,7 +118,7 @@ function AboutMarasiDrive() { {`Expandable living solutions`} -

+

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

@@ -144,12 +152,12 @@ function AboutMarasiDrive() {
-
-
+
+

Inspired interiors

-

+

{`Smart, flexible designs maximize every inch. The ORI Cloud Bed expands space by 33%, while the Flexibed transforms living areas into bedrooms. Multipurpose layouts adapt effortlessly—blending @@ -157,6 +165,7 @@ function AboutMarasiDrive() {

+
@@ -166,7 +175,7 @@ function AboutMarasiDrive() { {`A home for the young and young in heart`} -

+

{`The dynamic essence of Rove comes to life at our new location in Marasi Drive, Business Bay. Enjoy an urban living experience beyond the ordinary.`} @@ -184,10 +193,10 @@ function AboutMarasiDrive() { >

-

+

{`Explore the neighbourhood`}

-

+

{`With Dubai's trendiest spots right at your doorstep, explore nearby entertainment and dining experiences in just 15 minutes. Live your best life at Rove Home Marasi Drive!`} @@ -197,20 +206,21 @@ function AboutMarasiDrive() { scrollYProgress={scrollYProgress} /> +

-
-
+
+

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

-
+
{marasiDriveMapCards.map((card) => ( ))} @@ -222,29 +232,30 @@ function AboutMarasiDrive() { />
+
-
-
+
+
-
+
-

+

{`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
-
+
Download our brochures
+
(null) + + + return( + <> +
+ {marasiDriveInspiredInteriors.map(({ image, name }) => ( +
+ {name} +
{name}
+
+ ))} +
+ + + + ) +} + +export default MarasiDriveInteriorsSliderMobile; \ No newline at end of file diff --git a/src/components/MarasiDriveMapMobile.tsx b/src/components/MarasiDriveMapMobile.tsx new file mode 100644 index 0000000..e786c7a --- /dev/null +++ b/src/components/MarasiDriveMapMobile.tsx @@ -0,0 +1,44 @@ +import { useRef } from "react"; +import { marasiDriveMapCards } from "../data/aboutMarasiDrive"; +import CustomScrollBar from "./ui/ScrollBar"; + +function MarasiDriveMapMobile() { + const containerRef = useRef(null); + + return ( +
+
+ +
+
+ {marasiDriveMapCards.map((card, index) => ( +
+
+
+

{card.title}

+

{`${card.mins} mins`}

+
+ {card.title} +
+
+ ))} +
+ +
+ ); +} + +export default MarasiDriveMapMobile; diff --git a/src/components/MarasiDriveNeighboursSliderMobile.tsx b/src/components/MarasiDriveNeighboursSliderMobile.tsx new file mode 100644 index 0000000..06933b3 --- /dev/null +++ b/src/components/MarasiDriveNeighboursSliderMobile.tsx @@ -0,0 +1,28 @@ +import { marasiDriveNeighbours } from "../data/aboutMarasiDrive"; +import { useRef } from "react"; +import CustomScrollBar from "./ui/ScrollBar"; + +function MarasiDriveNeighboursSliderMobile(){ + const neighboursRef = useRef(null); + + + return( + <> +
+ {marasiDriveNeighbours.map(({ image, name }) => ( +
+ {name} +
{name}
+
+ ))} +
+ + + ) +} + +export default MarasiDriveNeighboursSliderMobile \ No newline at end of file diff --git a/src/components/MarasiDriveNeighboursSliderTablet.tsx b/src/components/MarasiDriveNeighboursSliderTablet.tsx index 51d8671..7e9342f 100644 --- a/src/components/MarasiDriveNeighboursSliderTablet.tsx +++ b/src/components/MarasiDriveNeighboursSliderTablet.tsx @@ -73,7 +73,7 @@ function MarasiDriveNeighboursSliderTablet() { onlyIcon disabled={currentIndex === 0} onClick={() => setCurrentIndex(Math.max(currentIndex - 1, 0))} - className="absolute left-[8.203vw] bottom-1/2" + className="absolute left-[calc((100%-69.141vw)/2-56px)] bottom-1/2" > @@ -82,7 +82,7 @@ function MarasiDriveNeighboursSliderTablet() {