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