+ ('Wellness');
const { scrollYProgress } = useScroll({
target: containerRef,
@@ -43,26 +55,27 @@ function AboutComplexPage() {
return (
768 ? firstSectionOpacity : 1,
}}
>
-
{text}
);
diff --git a/src/data/aboutDubaiMarina.ts b/src/data/aboutDubaiMarina.ts
index eddae0d..48add73 100644
--- a/src/data/aboutDubaiMarina.ts
+++ b/src/data/aboutDubaiMarina.ts
@@ -4,19 +4,6 @@ export const roveHomeDescription = [
'Inspiring design',
] as const;
-export const wellnessDescription = [
- 'Vitality Pool',
- 'Reflexology Pool',
- 'Cold Plunge Pool',
- 'Convertible Indoor Infinity Pool',
- 'Zen Library Area',
- 'Finnish Sauna Pod',
- 'Aroma Steam Pod',
- 'Salt Steam Pod',
- 'Ultra Shield Oxygen Pod',
- 'Experience Shower Pods',
-] as const;
-
export const dubaiMarinaFeatures = [
{
name: 'Life-enhancing Amenties',
@@ -59,17 +46,113 @@ export const dubaiMarinaDescription = [
},
] as const;
-export const dubaiMarinaWellnessSlides = [
- {
- title: 'Indoor Infinity Pool',
- description:
- 'Breezy and open in winter and closed in summer – this one-of-a-kind convertible pool takes relaxation to new heights, 165 meters to be precise!',
- image: '/images/about-complex/dubai-marina/pool1.jpg',
- },
- {
- title: 'Multi-sensory wellness pods',
- description:
- 'Set against a backdrop of dream-worthy views, immerse yourself in diverse wellness experiences including ultrashield oxygen, cold bucket showers and more.',
- image: '/images/about-complex/dubai-marina/pool2.jpg',
- },
-] as const;
+export const dubaiMarinaSlider = {
+ Wellness: [
+ {
+ title: 'Indoor Infinity Pool',
+ description:
+ 'Breezy and open in winter and closed in summer – this one-of-a-kind convertible pool takes relaxation to new heights, 165 meters to be precise!',
+ image: '/images/about-complex/dubai-marina/pool1.jpg',
+ },
+ {
+ title: 'Multi-sensory wellness pods',
+ description:
+ 'Set against a backdrop of dream-worthy views, immerse yourself in diverse wellness experiences including ultrashield oxygen, cold bucket showers and more.',
+ image: '/images/about-complex/dubai-marina/pool2.jpg',
+ },
+ ],
+ Fitness: [
+ {
+ title: 'Semi-Olympic Leisure Pool',
+ description:
+ 'Overlooking the city, enjoy a leisurely swim, do your daily 25-meter laps or just unwind at one of the cozy cabanas,',
+ image: '/images/about-complex/dubai-marina/fitness1.jpg',
+ },
+ {
+ title: 'Boutique Fitness Studio',
+ description:
+ 'Elevate your fitness regime at flagship Crank Ride & Shape studios – blending fitness, fun, and thrill vibes.',
+ image: '/images/about-complex/dubai-marina/fitness2.jpg',
+ },
+ ],
+ Community: [
+ {
+ title: 'Multi-Purpose Hall',
+ description:
+ 'Designed for gatherings, gamings, and entertainment, step into a vibrant multi-functional indoor and outdoor space that can be rented for special events.',
+ image: '/images/about-complex/dubai-marina/community1.jpg',
+ },
+ {
+ title: 'Lobby Lounge',
+ description:
+ 'Enjoy multi-level seating, reading nooks, co-working spaces, Rove Café and more, for an unforgettable welcome, every time you come home.',
+ image: '/images/about-complex/dubai-marina/community2.jpg',
+ },
+ ],
+ Convenience: [
+ {
+ title: 'Rentable Guest Room',
+ description:
+ 'A private space for guests to relax and unwind, complete with a comfortable seating area, a flat-screen TV, and a private bathroom.',
+ image: '/images/about-complex/dubai-marina/convenience1.jpg',
+ },
+ {
+ title: 'Entrance & Concierge',
+ description: 'An unforgettable welcome, every time you come home.',
+ image: '/images/about-complex/dubai-marina/convenience2.jpg',
+ },
+ ],
+} as const;
+
+export const sliderBadgesCategory = {
+ Wellness: [
+ 'Vitality Pool',
+ 'Reflexology Pool',
+ 'Cold Plunge Pool',
+ 'Convertible Indoor Infinity Pool',
+ 'Zen Library Area',
+ 'Finnish Sauna Pod',
+ 'Aroma Steam Pod',
+ 'Salt Steam Pod',
+ 'Ultra Shield Oxygen Pod',
+ 'Experience Shower Pods',
+ ],
+ Fitness: [
+ 'State-of-the-Art Gym',
+ 'Crank Fitness Studios – Bike & Shape',
+ 'Counter-current Pool',
+ 'Rowing Workout',
+ 'Aqua Cycling',
+ 'Outdoor Semi-olympic Leisure Pool',
+ 'Outdoor Gym Park',
+ 'Pedal-powered Workstations',
+ ],
+ Community: [
+ 'Multipurpose Area',
+ 'Rentable Kitchen',
+ 'Gaming Lounge',
+ 'Arcade Zone and PlayStation',
+ 'Indoor Cinema',
+ 'Suspended Net Lounge',
+ 'Karaoke Studios',
+ 'Outdoor Cinema & Ampitheatre',
+ 'Rove Café and Energise Bar',
+ 'Co-working Spaces',
+ 'Meeting Rooms & Pods',
+ 'Lobby Lounge',
+ 'Marina Views Chill Zone',
+ 'Allotment Gardens',
+ ],
+ Convenience: [
+ 'Smart Home Digital Features',
+ 'Organic Smart Gardens',
+ 'Electric Vehicle Charging Stations',
+ 'Bike/Scooter Rental and Storage',
+ 'Free Wi-fi',
+ '24x7 Convenience Store',
+ 'Rentable Guest Rooms',
+ 'Changing Rooms',
+ 'Rentable Storage',
+ 'Concierge',
+ ],
+};
diff --git a/src/index.css b/src/index.css
index 50a4d74..2fec6ae 100644
--- a/src/index.css
+++ b/src/index.css
@@ -16,104 +16,60 @@ button {
outline: none;
}
-@layer utilities {
- .text-headline-l {
- @apply 2xl:text-[clamp(56px,3.889vw,68px)] md:max-2xl:text-[clamp(44px,6.366vw,56px)] text-[44px] leading-none;
- }
+@utility text-h1 {
+ @apply 2xl:text-[3.889vw] text-[56px] leading-none;
+}
- .text-h4 {
- @apply 2xl:text-[clamp(20px,1.389vw,28px)] text-[20px] leading-[120%];
- }
+@utility text-h15 {
+ @apply 2xl:text-[2.778vw] text-[40px] leading-[135%];
+}
- .text-h5 {
- @apply 2xl:text-[clamp(14px,0.972vw,20px)] text-[14px] leading-[125%];
- }
+@utility text-h2 {
+ @apply 2xl:text-[2.222vw] text-[32px] leading-[125%];
+}
- .text-subheadline-l {
- @apply 2xl:text-[clamp(40px,2.778vw,48px)] md:max-2xl:text-[clamp(32px,4.63vw,40px)] text-[32px] leading-[135%];
- }
+@utility text-h3 {
+ @apply 2xl:text-[1.667vw] text-[24px] leading-[135%];
+}
- .text-subheadline-m {
- @apply 2xl:text-[clamp(24px,1.667vw,28px)] md:max-2xl:text-[clamp(20px,2.894vw,24px)] text-xl leading-[135%];
- }
+@utility text-h4 {
+ @apply 2xl:text-[1.389vw] text-[20px] leading-[120%];
+}
- .text-subheadline-s {
- @apply 2xl:text-[clamp(20px,1.389vw,24px)] md:max-2xl:text-[clamp(16px,2.315vw,20px)] text-xl leading-[140%];
- }
+@utility text-h5 {
+ @apply 2xl:text-[0.972vw] text-sm leading-[125%];
+}
- .text-m {
- @apply 2xl:text-[clamp(16px,1.111vw,19px)] md:max-2xl:text-[clamp(13px,1.881vw,16px)] text-[13px] leading-[125%];
- }
+@utility text-l {
+ @apply 2xl:text-[1.389vw] text-[20px] leading-[135%];
+}
- .text-s {
- @apply 2xl:text-[clamp(14px,0.972vw,16px)] md:max-2xl:text-[clamp(12px,1.737vw,14px)] text-sm leading-[140%];
- }
+@utility text-m {
+ @apply 2xl:text-[1.111vw] leading-[125%];
+}
- .text-caption-m {
- @apply 2xl:text-[clamp(12px,0.833vw,14px)] md:max-2xl:text-[clamp(12px,1.563vw,12px)] text-[clamp(12px,3.333vw,12px)] leading-[135%];
- }
+@utility text-s {
+ @apply 2xl:text-[0.972vw] text-sm leading-[140%];
+}
- .text-caption-s {
- @apply 2xl:text-[clamp(10px,0.694vw,12px)] text-[10px] leading-[135%];
- }
+@utility text-btn-l {
+ @apply 2xl:text-[1.111vw] leading-none;
+}
- /* */
+@utility text-btn-m {
+ @apply 2xl:text-[0.972vw] text-sm leading-none;
+}
- .text-h1 {
- @apply 2xl:text-[3.889vw] text-[56px] leading-none;
- }
+@utility text-btn-s {
+ @apply 2xl:text-[0.833vw] text-xs leading-none;
+}
- .text-h15 {
- @apply 2xl:text-[2.778vw] text-[40px] leading-[135%];
- }
+@utility text-caption-m {
+ @apply 2xl:text-[0.833vw] text-xs leading-[135%];
+}
- .text-h2 {
- @apply 2xl:text-[2.222vw] text-[32px] leading-[125%];
- }
-
- .text-h3 {
- @apply 2xl:text-[1.667vw] text-[24px] leading-[135%];
- }
-
- .text-h4 {
- @apply 2xl:text-[1.389vw] text-[20px] leading-[120%];
- }
-
- .text-h5 {
- @apply 2xl:text-[0.972vw] text-sm leading-[125%];
- }
-
- .text-l {
- @apply 2xl:text-[1.389vw] text-[20px] leading-[135%];
- }
-
- .text-m {
- @apply 2xl:text-[1.111vw] leading-[125%];
- }
-
- .text-s {
- @apply 2xl:text-[0.972vw] text-sm leading-[140%];
- }
-
- .text-btn-l {
- @apply 2xl:text-[1.111vw] leading-none;
- }
-
- .text-bnt-m {
- @apply 2xl:text-[0.972vw] text-sm leading-none;
- }
-
- .text-btn-s {
- @apply 2xl:text-[0.833vw] text-xs leading-none;
- }
-
- .text-caption-m {
- @apply 2xl:text-[0.833vw] text-xs leading-[135%];
- }
-
- .text-caption-s {
- @apply 2xl:text-[0.694vw] text-[10px] leading-[135%];
- }
+@utility text-caption-s {
+ @apply 2xl:text-[0.694vw] text-[10px] leading-[135%];
}
@utility font-mixcase-unmixed {
diff --git a/src/pages/AboutComplexPage.tsx b/src/pages/AboutComplexPage.tsx
index 3b1b766..2a6fd97 100644
--- a/src/pages/AboutComplexPage.tsx
+++ b/src/pages/AboutComplexPage.tsx
@@ -1,22 +1,34 @@
-import { useScroll, useTransform, motion, useInView } from 'motion/react';
-import { useRef } from 'react';
+import {
+ useScroll,
+ useTransform,
+ motion,
+ useInView,
+ AnimatePresence,
+} from 'motion/react';
+import { useRef, useState } from 'react';
import {
dubaiMarinaFeatures,
dubaiMarinaDescription,
roveHomeDescription,
- wellnessDescription,
+ dubaiMarinaSlider,
+ sliderBadgesCategory,
} from '../data/aboutDubaiMarina';
import EqualIcon from '../components/icons/EqualIcon';
-import TextBox from '../components/TextBox';
+import TextBox from '../components/ui/TextBox';
import clsx from 'clsx';
import Slider from '../components/Slider';
import PlusIcon from '../components/icons/map/PlusIcon';
+import useWindowSize from '../hooks/useWindowSize';
function AboutComplexPage() {
const containerRef = useRef(null);
const sliderRef = useRef(null);
const mapRef = useRef(null);
+ const { width } = useWindowSize();
+
+ const [selectedCategorySlider, setSelectedCategorySlider] =
+ useState
+
-
-
-
+
+
+
+
{`Rove Home
Dubai Marina`}
@@ -72,12 +85,12 @@ function AboutComplexPage() {
))}
-
-
+
+
{`Own the last slice of
Dubai Marina, ROVE Style`}
-
+
{`With an extended playlist of life-enhancing
amenities, Rove Home is a complete ecosystem
that has everything you'll ever need.`}
@@ -86,16 +99,27 @@ function AboutComplexPage() {
768 ? secondSectionY : 0,
zIndex: 1,
}}
>
-
-
-
+
+
+
+ {`Own the last slice of Dubai
+ Marina, ROVE Style`}
+
+
+ {`With an extended playlist of life-enhancing
+ amenities, Rove Home is a complete ecosystem
+ that has everything you'll ever need.`}
+
+
+
+
Rove Home has it all
@@ -104,11 +128,12 @@ function AboutComplexPage() {
and social lifestyle.`}
-
+
+
{dubaiMarinaFeatures.map((feature) => (
-
-
+
+
Dubai, within reach
{dubaiMarinaDescription.map((descriptionItem) => (
-
+
+ setSelectedCategorySlider(descriptionItem.title)
+ }
+ >
{descriptionItem.title}
@@ -139,7 +170,8 @@ function AboutComplexPage() {
{descriptionItem.description}
@@ -147,22 +179,44 @@ function AboutComplexPage() {
))}
-
-
+
+
+
+
+ {sliderBadgesCategory[selectedCategorySlider].map(
+ (badgeItem, index) => (
+
+
+ )
+ )}
+
-
+
@@ -232,7 +286,7 @@ function AboutComplexPage() {
Live central. Live centred
-
+
{`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.`}
diff --git a/src/pages/FloorsPage.tsx b/src/pages/FloorsPage.tsx
index 4a706e0..366a97f 100644
--- a/src/pages/FloorsPage.tsx
+++ b/src/pages/FloorsPage.tsx
@@ -1,6 +1,5 @@
-import React from "react";
-import FloorSelect from "../components/FloorSelect";
-import { useParams } from "react-router";
+import FloorSelect from '../components/FloorSelect';
+import { useParams } from 'react-router';
function FloorsPage() {
const { complexName } = useParams();
+
{`Rove Home Dubai Marina`}
@@ -72,12 +85,12 @@ function AboutComplexPage() { ))}
+
+
{`Own the last slice of
Dubai Marina, ROVE Style`}
-
+
{`With an extended playlist of life-enhancing
amenities, Rove Home is a complete ecosystem
that has everything you'll ever need.`}
@@ -86,16 +99,27 @@ function AboutComplexPage() {
768 ? secondSectionY : 0,
zIndex: 1,
}}
>
-
-
-
+
+
+
+ {`Own the last slice of Dubai
+ Marina, ROVE Style`}
+
+
+ {`With an extended playlist of life-enhancing
+ amenities, Rove Home is a complete ecosystem
+ that has everything you'll ever need.`}
+
+
+
+
Rove Home has it all
@@ -104,11 +128,12 @@ function AboutComplexPage() {
and social lifestyle.`}
-
+
+
{dubaiMarinaFeatures.map((feature) => (
-
-
+
+
Dubai, within reach
{dubaiMarinaDescription.map((descriptionItem) => (
-
+
+ setSelectedCategorySlider(descriptionItem.title)
+ }
+ >
{descriptionItem.title}
@@ -139,7 +170,8 @@ function AboutComplexPage() {
{descriptionItem.description}
@@ -147,22 +179,44 @@ function AboutComplexPage() {
))}
-
-
+
+
+
+
+ {sliderBadgesCategory[selectedCategorySlider].map(
+ (badgeItem, index) => (
+
+
+ )
+ )}
+
-
+
@@ -232,7 +286,7 @@ function AboutComplexPage() {
Live central. Live centred
-
+
{`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.`}
diff --git a/src/pages/FloorsPage.tsx b/src/pages/FloorsPage.tsx
index 4a706e0..366a97f 100644
--- a/src/pages/FloorsPage.tsx
+++ b/src/pages/FloorsPage.tsx
@@ -1,6 +1,5 @@
-import React from "react";
-import FloorSelect from "../components/FloorSelect";
-import { useParams } from "react-router";
+import FloorSelect from '../components/FloorSelect';
+import { useParams } from 'react-router';
function FloorsPage() {
const { complexName } = useParams();
{`Own the last slice of Dubai Marina, ROVE Style`}
-+
{`With an extended playlist of life-enhancing amenities, Rove Home is a complete ecosystem that has everything you'll ever need.`} @@ -86,16 +99,27 @@ function AboutComplexPage() {
-
-
-
+
+
+
+
+ {`Own the last slice of Dubai
+ Marina, ROVE Style`}
+
+
+ {`With an extended playlist of life-enhancing
+ amenities, Rove Home is a complete ecosystem
+ that has everything you'll ever need.`}
+
+
+
+
Rove Home has it all
@@ -104,11 +128,12 @@ function AboutComplexPage() {
and social lifestyle.`}
-
+
+
{dubaiMarinaFeatures.map((feature) => (
-
-
+
+
Dubai, within reach
{dubaiMarinaDescription.map((descriptionItem) => (
-
+
+ setSelectedCategorySlider(descriptionItem.title)
+ }
+ >
{descriptionItem.title}
@@ -139,7 +170,8 @@ function AboutComplexPage() {
{descriptionItem.description}
@@ -147,22 +179,44 @@ function AboutComplexPage() {
))}
-
-
+
+
+
+
+ {sliderBadgesCategory[selectedCategorySlider].map(
+ (badgeItem, index) => (
+
+
+ )
+ )}
+
-
+
@@ -232,7 +286,7 @@ function AboutComplexPage() {
Live central. Live centred
-
+
{`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.`}
diff --git a/src/pages/FloorsPage.tsx b/src/pages/FloorsPage.tsx
index 4a706e0..366a97f 100644
--- a/src/pages/FloorsPage.tsx
+++ b/src/pages/FloorsPage.tsx
@@ -1,6 +1,5 @@
-import React from "react";
-import FloorSelect from "../components/FloorSelect";
-import { useParams } from "react-router";
+import FloorSelect from '../components/FloorSelect';
+import { useParams } from 'react-router';
function FloorsPage() {
const { complexName } = useParams();
+
+ + {`Own the last slice of Dubai + Marina, ROVE Style`} +
++ {`With an extended playlist of life-enhancing + amenities, Rove Home is a complete ecosystem + that has everything you'll ever need.`} +
+
+
- Rove Home has it all
@@ -104,11 +128,12 @@ function AboutComplexPage() { and social lifestyle.`}
+
+
{dubaiMarinaFeatures.map((feature) => (
-
-
+
+
+
Dubai, within reach
{dubaiMarinaDescription.map((descriptionItem) => (
-
+
+ setSelectedCategorySlider(descriptionItem.title)
+ }
+ >
{descriptionItem.title}
@@ -139,7 +170,8 @@ function AboutComplexPage() {
{descriptionItem.description}
@@ -147,22 +179,44 @@ function AboutComplexPage() {
))}
-
-
+
+
+
+
+ {sliderBadgesCategory[selectedCategorySlider].map(
+ (badgeItem, index) => (
+
+
+ )
+ )}
+
-
+
@@ -232,7 +286,7 @@ function AboutComplexPage() {
Live central. Live centred
-
+
{`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.`}
diff --git a/src/pages/FloorsPage.tsx b/src/pages/FloorsPage.tsx
index 4a706e0..366a97f 100644
--- a/src/pages/FloorsPage.tsx
+++ b/src/pages/FloorsPage.tsx
@@ -1,6 +1,5 @@
-import React from "react";
-import FloorSelect from "../components/FloorSelect";
-import { useParams } from "react-router";
+import FloorSelect from '../components/FloorSelect';
+import { useParams } from 'react-router';
function FloorsPage() {
const { complexName } = useParams();
Dubai, within reach
{dubaiMarinaDescription.map((descriptionItem) => (
-
-
@@ -232,7 +286,7 @@ function AboutComplexPage() {
+
-
+ setSelectedCategorySlider(descriptionItem.title)
+ }
+ >
))}
{descriptionItem.title} @@ -139,7 +170,8 @@ function AboutComplexPage() {
{descriptionItem.description} @@ -147,22 +179,44 @@ function AboutComplexPage() {
- {wellnessDescription.map((wellnessItem) => (
-
+
+
+
+
+ {sliderBadgesCategory[selectedCategorySlider].map(
+ (badgeItem, index) => (
+
+
+ )
+ )}
+
-
+
@@ -232,7 +286,7 @@ function AboutComplexPage() {
Live central. Live centred
-
+
{`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.`} diff --git a/src/pages/FloorsPage.tsx b/src/pages/FloorsPage.tsx index 4a706e0..366a97f 100644 --- a/src/pages/FloorsPage.tsx +++ b/src/pages/FloorsPage.tsx @@ -1,6 +1,5 @@ -import React from "react"; -import FloorSelect from "../components/FloorSelect"; -import { useParams } from "react-router"; +import FloorSelect from '../components/FloorSelect'; +import { useParams } from 'react-router'; function FloorsPage() { const { complexName } = useParams();