Privacy Policy
diff --git a/src/components/SequenceSlider.tsx b/src/components/SequenceSlider.tsx
index 272add1..989c700 100644
--- a/src/components/SequenceSlider.tsx
+++ b/src/components/SequenceSlider.tsx
@@ -1,4 +1,5 @@
// import { sequenceVideos } from "../data/sequenceVideos";
+
import { useState, useRef } from "react";
import gsap from "gsap";
import { useSwipeable } from "react-swipeable";
diff --git a/src/components/Slider.tsx b/src/components/Slider.tsx
new file mode 100644
index 0000000..5fba4c4
--- /dev/null
+++ b/src/components/Slider.tsx
@@ -0,0 +1,97 @@
+import { useState } from 'react';
+import ArrowLeftIcon from './icons/ArrowLeftIcon';
+import ArrowRightIcon from './icons/map/ArrowRightIcon';
+import { dubaiMarinaWellnessSlides } from '../data/aboutDubaiMarina';
+import { AnimatePresence, motion } from 'motion/react';
+
+function Slider() {
+ const [currentSlide, setCurrentSlide] = useState(0);
+ const [direction, setDirection] = useState(-1);
+
+ const handleNextSlide = () => {
+ if (currentSlide < dubaiMarinaWellnessSlides.length - 1) {
+ setDirection(1);
+ setCurrentSlide(currentSlide + 1);
+ }
+ };
+
+ const handlePreviousSlide = () => {
+ if (currentSlide > 0) {
+ setDirection(-1);
+ setCurrentSlide(currentSlide - 1);
+ }
+ };
+
+ return (
+
+
+ 0 ? '100%' : '-100%' }}
+ animate={{ x: 0, transition: { duration: 0.5, ease: 'easeInOut' } }}
+ exit={{
+ x: direction > 0 ? '100%' : '-100%',
+ transition: { duration: 0.8, ease: 'easeInOut' },
+ }}
+ />
+
+
+
+
+
+ {dubaiMarinaWellnessSlides[currentSlide].title}
+
+
+
+
+ {dubaiMarinaWellnessSlides[currentSlide].description}
+
+
+
+
+
+
+
+ {currentSlide + 1}/{dubaiMarinaWellnessSlides.length}
+
+
+
+
+
+ );
+}
+
+export default Slider;
diff --git a/src/components/TextBox.tsx b/src/components/TextBox.tsx
new file mode 100644
index 0000000..8393113
--- /dev/null
+++ b/src/components/TextBox.tsx
@@ -0,0 +1,9 @@
+function TextBox({ text }: { text: string }) {
+ return (
+
+ {text}
+
+ );
+}
+
+export default TextBox;
diff --git a/src/components/icons/EqualIcon.tsx b/src/components/icons/EqualIcon.tsx
new file mode 100644
index 0000000..17fcbdd
--- /dev/null
+++ b/src/components/icons/EqualIcon.tsx
@@ -0,0 +1,20 @@
+function EqualIcon() {
+ return (
+
+ );
+}
+
+export default EqualIcon;
diff --git a/src/data/aboutDubaiMarina.ts b/src/data/aboutDubaiMarina.ts
new file mode 100644
index 0000000..eddae0d
--- /dev/null
+++ b/src/data/aboutDubaiMarina.ts
@@ -0,0 +1,75 @@
+export const roveHomeDescription = [
+ 'Fullyfurnished apartments',
+ 'Vibrant art installations',
+ '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',
+ image: '/images/about-complex/dubai-marina/amenties.jpg',
+ },
+ {
+ name: 'Community',
+ image: '/images/about-complex/dubai-marina/community.jpg',
+ },
+ {
+ name: 'Wellness Focus',
+ image: '/images/about-complex/dubai-marina/wellness.jpg',
+ },
+ {
+ name: 'Rove-Style Design',
+ image: '/images/about-complex/dubai-marina/design.jpg',
+ },
+ {
+ name: 'Fully-Furnished Apartments',
+ image: '/images/about-complex/dubai-marina/furnished.jpg',
+ },
+] as const;
+
+export const dubaiMarinaDescription = [
+ {
+ title: 'Wellness',
+ description: 'Unlock your inner zen in our wellness playground',
+ },
+ {
+ title: 'Fitness',
+ description: 'Cancel all your membership. Your new home has it all',
+ },
+ {
+ title: 'Community',
+ description: 'Connect. Engage. Thrive.',
+ },
+ {
+ title: 'Convenience',
+ description: 'Your smart living hub',
+ },
+] 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;
diff --git a/src/index.css b/src/index.css
index 3319de3..50a4d74 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,12 +1,13 @@
-@import url("/fonts/Usual/stylesheet.css");
-@import "tailwindcss";
+@import url('/fonts/Usual/stylesheet.css');
+@import url('/fonts/Mixcase/stylesheet.css');
+@import 'tailwindcss';
@theme {
--breakpoint-2xl: 1440px;
}
body {
- font-family: "Usual", sans-serif;
+ font-family: 'Usual', sans-serif;
color: #0d1922;
}
@@ -20,6 +21,14 @@ button {
@apply 2xl:text-[clamp(56px,3.889vw,68px)] md:max-2xl:text-[clamp(44px,6.366vw,56px)] text-[44px] leading-none;
}
+ .text-h4 {
+ @apply 2xl:text-[clamp(20px,1.389vw,28px)] text-[20px] leading-[120%];
+ }
+
+ .text-h5 {
+ @apply 2xl:text-[clamp(14px,0.972vw,20px)] text-[14px] 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%];
}
@@ -106,3 +115,7 @@ button {
@apply 2xl:text-[0.694vw] text-[10px] leading-[135%];
}
}
+
+@utility font-mixcase-unmixed {
+ font-family: 'Mixcase Unmixed', sans-serif;
+}
diff --git a/src/layout/DefaultLayout.tsx b/src/layout/DefaultLayout.tsx
index 06211fe..ea67195 100644
--- a/src/layout/DefaultLayout.tsx
+++ b/src/layout/DefaultLayout.tsx
@@ -1,12 +1,20 @@
-import Header from "../components/Header";
-import { Outlet } from "react-router";
-import Footer from "../components/Footer";
+import Header from '../components/Header';
+import { Outlet, useLocation } from 'react-router';
+import Footer from '../components/Footer';
+import clsx from 'clsx';
function DefaultLayout() {
+ const { pathname } = useLocation();
+ console.log(pathname);
return (
-
+
-
+
diff --git a/src/main.tsx b/src/main.tsx
index 068666c..d19c40e 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,66 +1,66 @@
-import "./index.css";
-import { QueryClientProvider } from "@tanstack/react-query";
-import { createRoot } from "react-dom/client";
-import { createBrowserRouter, RouterProvider } from "react-router";
-import DefaultLayout from "./layout/DefaultLayout.tsx";
-import MainPage from "./pages/MainPage.tsx";
-import ModalContainer from "./components/ModalContainer.tsx";
-import ComplexPage from "./pages/ComplexPage.tsx";
-import FloorsPage from "./pages/FloorsPage.tsx";
-import UnitTypesPage from "./pages/UnitTypesPage.tsx";
-import AboutPage from "./pages/AboutPages.tsx";
-import FavoritesPage from "./pages/FavouritesPage.tsx";
-import SearchPage from "./pages/SearchPage.tsx";
-import LayoutWithoutFooter from "./layout/LayoutWithoutFooter.tsx";
-import { queryClient } from "./lib/queryClient.ts";
-import AboutComplexPage from "./pages/AboutComplexPage.tsx";
+import './index.css';
+import { QueryClientProvider } from '@tanstack/react-query';
+import { createRoot } from 'react-dom/client';
+import { createBrowserRouter, RouterProvider } from 'react-router';
+import DefaultLayout from './layout/DefaultLayout.tsx';
+import MainPage from './pages/MainPage.tsx';
+import ModalContainer from './components/ModalContainer.tsx';
+import ComplexPage from './pages/ComplexPage.tsx';
+import FloorsPage from './pages/FloorsPage.tsx';
+import UnitTypesPage from './pages/UnitTypesPage.tsx';
+import AboutPage from './pages/AboutPages.tsx';
+import FavoritesPage from './pages/FavouritesPage.tsx';
+import SearchPage from './pages/SearchPage.tsx';
+import LayoutWithoutFooter from './layout/LayoutWithoutFooter.tsx';
+import { queryClient } from './lib/queryClient.ts';
+import AboutComplexPage from './pages/AboutComplexPage.tsx';
const route = createBrowserRouter([
{
element:
,
children: [
{
- path: "/unit-types",
+ path: '/unit-types',
element:
,
},
{
- path: "/about",
+ path: '/about',
element:
,
},
{
- path: "/favorites",
+ path: '/favorites',
element:
,
},
{
- path: "/search",
+ path: '/search',
element:
,
},
+ {
+ path: '/complex/:complexName/about',
+ element:
,
+ },
],
},
{
element:
,
children: [
{
- path: "/",
+ path: '/',
element:
,
},
{
- path: "/complex/:complexName",
+ path: '/complex/:complexName',
element:
,
},
{
- path: "/complex/:complexName/floors",
+ path: '/complex/:complexName/floors',
element:
,
},
- {
- path: "/complex/:complexName/about",
- element:
,
- },
],
},
]);
-createRoot(document.getElementById("root")!).render(
+createRoot(document.getElementById('root')!).render(
<>
diff --git a/src/pages/AboutComplexPage.tsx b/src/pages/AboutComplexPage.tsx
index 9caeea0..3b1b766 100644
--- a/src/pages/AboutComplexPage.tsx
+++ b/src/pages/AboutComplexPage.tsx
@@ -1,5 +1,258 @@
+import { useScroll, useTransform, motion, useInView } from 'motion/react';
+import { useRef } from 'react';
+import {
+ dubaiMarinaFeatures,
+ dubaiMarinaDescription,
+ roveHomeDescription,
+ wellnessDescription,
+} from '../data/aboutDubaiMarina';
+
+import EqualIcon from '../components/icons/EqualIcon';
+import TextBox from '../components/TextBox';
+import clsx from 'clsx';
+import Slider from '../components/Slider';
+import PlusIcon from '../components/icons/map/PlusIcon';
+
function AboutComplexPage() {
- return ;
+ const containerRef = useRef(null);
+ const sliderRef = useRef(null);
+ const mapRef = useRef(null);
+
+ const { scrollYProgress } = useScroll({
+ target: containerRef,
+ offset: ['start start', 'end start'],
+ });
+
+ const firstSectionOpacity = useTransform(scrollYProgress, [0, 0.2], [1, 0]);
+
+ const secondSectionY = useTransform(
+ scrollYProgress,
+ [0, 0.4],
+ ['100dvh', '0dvh']
+ );
+
+ const isSliderInView = useInView(sliderRef, {
+ once: true,
+ amount: 0.1,
+ });
+ const isMapInView = useInView(mapRef, {
+ once: true,
+ margin: `0px 0px ${-window.innerHeight / 2}px 0px`,
+ });
+
+ return (
+
+
+
+
+
+
+
+
+ {`Rove Home
+ Dubai Marina`}
+
+
+ {roveHomeDescription.map((description) => (
+
+ ))}
+
+
+
+
+ {`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
+
+
+ {`Rove Home Dubai Marina features modern-day
+ conveniences, carefully curated for an active
+ and social lifestyle.`}
+
+
+
+ {dubaiMarinaFeatures.map((feature) => (
+
+
+ {feature.name}
+
+
+ ))}
+
+
+
+
+ Dubai, within reach
+
+
+ {dubaiMarinaDescription.map((descriptionItem) => (
+
+
+
+ {descriptionItem.title}
+
+
+ {descriptionItem.description}
+
+
+ ))}
+
+
+
+
+ {wellnessDescription.map((wellnessItem) => (
+
+ ))}
+
+
+
+
+
+ Dubai's first-ever combinable Apartments
+
+
+
+ {`Enjoy the option to combine 2 apartments and create
+ a larger space and configuration.`}
+
+
+
+
+ Studio²
+
+
+
+
+
+ Studio²
+
+
+
+
+
+
+
+
+
+ 1 Bedroom²
+
+
+
+
+
+
+ Studio²
+
+
+
+
+
+ 1 Bedroom²
+
+
+
+
+
+
+
+
+
+ 2 Bedroom²
+
+
+
+
+
+
+ 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.`}
+
+
+
+
+