Merge branch 'main' of http://192.168.1.163:3000/inmake/irth-new-client

2025-05-14 18:49:44 +05:00
parent fe17aed20a de10a2b340
commit 224c6499cf
35 changed files with 804 additions and 81 deletions
@@ -0,0 +1,221 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="robots" content="noindex, noarchive">
+    <meta name="format-detection" content="telephone=no">
+    <title>Transfonter demo</title>
+    <link href="stylesheet.css" rel="stylesheet">
+    <style>
+        /*
+        http://meyerweb.com/eric/tools/css/reset/
+        v2.0 | 20110126
+        License: none (public domain)
+        */
+        html, body, div, span, applet, object, iframe,
+        h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+        a, abbr, acronym, address, big, cite, code,
+        del, dfn, em, img, ins, kbd, q, s, samp,
+        small, strike, strong, sub, sup, tt, var,
+        b, u, i, center,
+        dl, dt, dd, ol, ul, li,
+        fieldset, form, label, legend,
+        table, caption, tbody, tfoot, thead, tr, th, td,
+        article, aside, canvas, details, embed,
+        figure, figcaption, footer, header, hgroup,
+        menu, nav, output, ruby, section, summary,
+        time, mark, audio, video {
+            margin: 0;
+            padding: 0;
+            border: 0;
+            font-size: 100%;
+            font: inherit;
+            vertical-align: baseline;
+        }
+        /* HTML5 display-role reset for older browsers */
+        article, aside, details, figcaption, figure,
+        footer, header, hgroup, menu, nav, section {
+            display: block;
+        }
+        body {
+            line-height: 1;
+        }
+        ol, ul {
+            list-style: none;
+        }
+        blockquote, q {
+            quotes: none;
+        }
+        blockquote:before, blockquote:after,
+        q:before, q:after {
+            content: '';
+            content: none;
+        }
+        table {
+            border-collapse: collapse;
+            border-spacing: 0;
+        }
+        /* demo styles */
+        body {
+            background: #f0f0f0;
+            color: #000;
+        }
+        .page {
+            background: #fff;
+            width: 920px;
+            margin: 0 auto;
+            padding: 20px 20px 0 20px;
+            overflow: hidden;
+        }
+        .font-container {
+            overflow-x: auto;
+            overflow-y: hidden;
+            margin-bottom: 40px;
+            line-height: 1.3;
+            white-space: nowrap;
+            padding-bottom: 5px;
+        }
+        h1 {
+            position: relative;
+            background: #444;
+            font-size: 32px;
+            color: #fff;
+            padding: 10px 20px;
+            margin: 0 -20px 12px -20px;
+        }
+        .letters {
+            font-size: 25px;
+            margin-bottom: 20px;
+        }
+        .s10:before {
+            content: '10px';
+        }
+        .s11:before {
+            content: '11px';
+        }
+        .s12:before {
+            content: '12px';
+        }
+        .s14:before {
+            content: '14px';
+        }
+        .s18:before {
+            content: '18px';
+        }
+        .s24:before {
+            content: '24px';
+        }
+        .s30:before {
+            content: '30px';
+        }
+        .s36:before {
+            content: '36px';
+        }
+        .s48:before {
+            content: '48px';
+        }
+        .s60:before {
+            content: '60px';
+        }
+        .s72:before {
+            content: '72px';
+        }
+        .s10:before, .s11:before, .s12:before, .s14:before,
+        .s18:before, .s24:before, .s30:before, .s36:before,
+        .s48:before, .s60:before, .s72:before {
+            font-family: Arial, sans-serif;
+            font-size: 10px;
+            font-weight: normal;
+            font-style: normal;
+            color: #999;
+            padding-right: 6px;
+        }
+        pre {
+            display: block;
+            padding: 9px;
+            margin: 0 0 12px;
+            font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
+            font-size: 13px;
+            line-height: 1.428571429;
+            color: #333;
+            font-weight: normal;
+            font-style: normal;
+            background-color: #f5f5f5;
+            border: 1px solid #ccc;
+            overflow-x: auto;
+            border-radius: 4px;
+        }
+        /* responsive */
+        @media (max-width: 959px) {
+            .page {
+                width: auto;
+                margin: 0;
+            }
+        }
+    </style>
+</head>
+<body>
+<div class="page">
+    <div class="demo">
+        <h1 style="font-family: 'Mixcase Mixed'; font-weight: normal; font-style: normal;">Mixcase Mixed</h1>
+        <pre title="Usage">.your-style {
+    font-family: 'Mixcase Mixed';
+    font-weight: normal;
+    font-style: normal;
+}</pre>
+        <pre title="Preload (optional)">
+&lt;link rel=&quot;preload&quot; href=&quot;MixcaseMixed.woff2&quot; as=&quot;font&quot; type=&quot;font/woff2&quot; crossorigin&gt;</pre>
+        <div class="font-container" style="font-family: 'Mixcase Mixed'; font-weight: normal; font-style: normal;">
+            <p class="letters">
+                abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+                0123456789.:,;()*!?'@#&lt;&gt;$%&^+-=~
+            </p>
+            <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+        </div>
+    </div>
+
+    <div class="demo">
+        <h1 style="font-family: 'Mixcase Unmixed'; font-weight: normal; font-style: normal;">Mixcase Unmixed</h1>
+        <pre title="Usage">.your-style {
+    font-family: 'Mixcase Unmixed';
+    font-weight: normal;
+    font-style: normal;
+}</pre>
+        <pre title="Preload (optional)">
+&lt;link rel=&quot;preload&quot; href=&quot;MixcaseUnmixed.woff2&quot; as=&quot;font&quot; type=&quot;font/woff2&quot; crossorigin&gt;</pre>
+        <div class="font-container" style="font-family: 'Mixcase Unmixed'; font-weight: normal; font-style: normal;">
+            <p class="letters">
+                abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+                0123456789.:,;()*!?'@#&lt;&gt;$%&^+-=~
+            </p>
+            <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+        </div>
+    </div>
+
+</div>
+</body>
+</html>
@@ -0,0 +1,26 @@
+@font-face {
+    font-family: 'Mixcase Mixed';
+    src: url('MixcaseMixed.eot');
+    src: local('Mixcase Mixed'), local('MixcaseMixed'),
+        url('MixcaseMixed.eot?#iefix') format('embedded-opentype'),
+        url('MixcaseMixed.woff2') format('woff2'),
+        url('MixcaseMixed.woff') format('woff'),
+        url('MixcaseMixed.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Mixcase Unmixed';
+    src: url('MixcaseUnmixed.eot');
+    src: local('Mixcase Unmixed'), local('MixcaseUnmixed'),
+        url('MixcaseUnmixed.eot?#iefix') format('embedded-opentype'),
+        url('MixcaseUnmixed.woff2') format('woff2'),
+        url('MixcaseUnmixed.woff') format('woff'),
+        url('MixcaseUnmixed.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
@@ -1,109 +1,109 @@
-import { Link } from "react-router";
-import YoutubeIcon from "./icons/YoutubeIcon";
-import InstagramIcon from "./icons/InstagramIcon";
-import FacebookIcon from "./icons/FacebookIcon";
-import LinkedInIcon from "./icons/LinkedInIcon";
-import TwitterIcon from "./icons/TwitterIcon";
-import ChevronDownIcon from "./icons/ChevronDownIcon";
+import { Link } from 'react-router';
+import YoutubeIcon from './icons/YoutubeIcon';
+import InstagramIcon from './icons/InstagramIcon';
+import FacebookIcon from './icons/FacebookIcon';
+import LinkedInIcon from './icons/LinkedInIcon';
+import TwitterIcon from './icons/TwitterIcon';
+import ChevronDownIcon from './icons/ChevronDownIcon';

 function Footer() {
  return (
-    <footer className="2xl:px-[2.222vw] 2xl:pb-[2.222vw] 2xl:pt-[2.778vw] md:max-2xl:p-6 px-4 py-6 grid 2xl:grid-cols-6 md:max-2xl:grid-cols-4 grid-cols-2 2xl:grid-rows-2 2xl:gap-x-[1.667vw] 2xl:gap-y-[1.111vw] max-2xl:gap-y-6 2xl:rounded-t-[1.667vw] rounded-t-3xl outline outline-[#E2E2DC] bg-white">
+    <footer className='z-1 2xl:px-[2.222vw] 2xl:pb-[2.222vw] 2xl:pt-[2.778vw] md:max-2xl:p-6 px-4 py-6 grid 2xl:grid-cols-6 md:max-2xl:grid-cols-4 grid-cols-2 2xl:grid-rows-2 2xl:gap-x-[1.667vw] 2xl:gap-y-[1.111vw] max-2xl:gap-y-6 2xl:rounded-t-[1.667vw] rounded-t-3xl outline outline-[#E2E2DC] bg-white'>
      <img
-        src="/images/logo.svg"
-        className="2xl:w-[5.972vw] w-[86px] cursor-pointer"
+        src='/images/logo.svg'
+        className='2xl:w-[5.972vw] w-[86px] cursor-pointer'
        onClick={() => {
-          window.location.href = "/";
+          window.location.href = '/';
        }}
-        alt="IRTH"
+        alt='IRTH'
      />

-      <p className="2xl:max-w-[17.083vw] text-s text-[#0D1922]/40 2xl:col-start-1 md:max-2xl:col-start-3 max-2xl:col-span-3 md:max-2xl:row-start-2 max-md:row-start-3 md:max-2xl:mt-[52px] max-md:mt-12">
+      <p className='2xl:max-w-[17.083vw] text-s text-[#0D1922]/40 2xl:col-start-1 md:max-2xl:col-start-3 max-2xl:col-span-3 md:max-2xl:row-start-2 max-md:row-start-3 md:max-2xl:mt-[52px] max-md:mt-12'>
        For more information, visit
        <br />
        our website: 
-        <Link className="text-[#00BED7] underline" to={"https://www.irth.ae"}>
+        <Link className='text-[#00BED7] underline' to={'https://www.irth.ae'}>
          www.irth.ae
        </Link>
      </p>

-      <div className="2xl:space-y-[0.833vw] space-y-3 md:max-2xl:col-start-3 max-2xl:col-span-3 md:max-2xl:row-start-3 max-md:row-start-4 max-md:mt-6">
-        <p className="text-s text-[#0D1922]/40">Follow us for more:</p>
-        <div className="flex 2xl:gap-[0.278vw] gap-1">
-          <div className="2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded">
-            <div className="2xl:w-[2.222vw] 2xl:h-[2.222vw] md:max-2xl:w-8 md:max-2xl:h-8 w-9 h-9 text-[#0D1922]/70">
+      <div className='2xl:space-y-[0.833vw] space-y-3 md:max-2xl:col-start-3 max-2xl:col-span-3 md:max-2xl:row-start-3 max-md:row-start-4 max-md:mt-6'>
+        <p className='text-s text-[#0D1922]/40'>Follow us for more:</p>
+        <div className='flex 2xl:gap-[0.278vw] gap-1'>
+          <div className='2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded'>
+            <div className='2xl:w-[2.222vw] 2xl:h-[2.222vw] md:max-2xl:w-8 md:max-2xl:h-8 w-9 h-9 text-[#0D1922]/70'>
              <YoutubeIcon />
            </div>
          </div>
-          <div className="2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded">
-            <div className="2xl:w-[2.222vw] 2xl:h-[2.222vw] md:max-2xl:w-8 md:max-2xl:h-8 w-9 h-9 text-[#0D1922]/70">
+          <div className='2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded'>
+            <div className='2xl:w-[2.222vw] 2xl:h-[2.222vw] md:max-2xl:w-8 md:max-2xl:h-8 w-9 h-9 text-[#0D1922]/70'>
              <InstagramIcon />
            </div>
          </div>
-          <div className="2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded">
-            <div className="2xl:w-[2.222vw] 2xl:h-[2.222vw] md:max-2xl:w-8 md:max-2xl:h-8 w-9 h-9 text-[#0D1922]/70">
+          <div className='2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded'>
+            <div className='2xl:w-[2.222vw] 2xl:h-[2.222vw] md:max-2xl:w-8 md:max-2xl:h-8 w-9 h-9 text-[#0D1922]/70'>
              <FacebookIcon />
            </div>
          </div>
-          <div className="2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded">
-            <div className="2xl:w-[2.222vw] 2xl:h-[2.222vw] md:max-2xl:w-8 md:max-2xl:h-8 w-9 h-9 text-[#0D1922]/70">
+          <div className='2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded'>
+            <div className='2xl:w-[2.222vw] 2xl:h-[2.222vw] md:max-2xl:w-8 md:max-2xl:h-8 w-9 h-9 text-[#0D1922]/70'>
              <LinkedInIcon />
            </div>
          </div>
-          <div className="2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded">
-            <div className="2xl:w-[2.222vw] 2xl:h-[2.222vw] md:max-2xl:w-8 md:max-2xl:h-8 w-9 h-9 text-[#0D1922]/70">
+          <div className='2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded'>
+            <div className='2xl:w-[2.222vw] 2xl:h-[2.222vw] md:max-2xl:w-8 md:max-2xl:h-8 w-9 h-9 text-[#0D1922]/70'>
              <TwitterIcon />
            </div>
          </div>
        </div>
      </div>

-      <div className="2xl:border-l-[0.069vw] border-l border-[#E2E2DC] 2xl:pl-[1.111vw] pl-4 flex flex-col items-start 2xl:col-start-4 2xl:row-start-1 2xl:row-span-2 md:max-2xl:col-start-3 col-start-1">
+      <div className='2xl:border-l-[0.069vw] border-l border-[#E2E2DC] 2xl:pl-[1.111vw] pl-4 flex flex-col items-start 2xl:col-start-4 2xl:row-start-1 2xl:row-span-2 md:max-2xl:col-start-3 col-start-1'>
        <Link
-          to={"/"}
-          className="text-btn-l flex-1 content-center md:my-4 my-[13px] text-[#0D1922]/70"
+          to={'/'}
+          className='text-btn-l flex-1 content-center md:my-4 my-[13px] text-[#0D1922]/70'
        >
          Map
        </Link>
        <Link
-          to={"/unit-types"}
-          className="text-btn-l flex-1 content-center md:my-4 my-[13px] text-[#0D1922]/70"
+          to={'/unit-types'}
+          className='text-btn-l flex-1 content-center md:my-4 my-[13px] text-[#0D1922]/70'
        >
          Unit Types
        </Link>
        <Link
-          to={"/about-irth"}
-          className="text-btn-l flex-1 content-center md:my-4 my-[13px] text-[#0D1922]/70"
+          to={'/about-irth'}
+          className='text-btn-l flex-1 content-center md:my-4 my-[13px] text-[#0D1922]/70'
        >
          About IRTH
        </Link>
      </div>

-      <div className="2xl:border-l-[0.069vw] border-l border-[#E2E2DC] 2xl:pl-[1.111vw] md:max-2xl:pl-6 pl-3.5 flex flex-col items-start 2xl:col-start-5 2xl:row-start-1 2xl:row-span-2">
+      <div className='2xl:border-l-[0.069vw] border-l border-[#E2E2DC] 2xl:pl-[1.111vw] md:max-2xl:pl-6 pl-3.5 flex flex-col items-start 2xl:col-start-5 2xl:row-start-1 2xl:row-span-2'>
        <Link
-          to={"/favorites"}
-          className="text-btn-l flex-1 content-center md:my-4 my-[13px] text-[#0D1922]/70"
+          to={'/favorites'}
+          className='text-btn-l flex-1 content-center md:my-4 my-[13px] text-[#0D1922]/70'
        >
          Favorites
        </Link>
        <Link
-          to={"/search"}
-          className="text-btn-l flex-1 content-center md:my-4 my-2.5 text-[#0D1922]/70"
+          to={'/search'}
+          className='text-btn-l flex-1 content-center md:my-4 my-2.5 text-[#0D1922]/70'
        >
          Search
        </Link>
-        <button className="text-btn-l flex-1 content-center md:my-3 text-[#0D1922]/70 flex items-center gap-2">
+        <button className='text-btn-l flex-1 content-center md:my-3 text-[#0D1922]/70 flex items-center gap-2'>
          <span>Brochures</span>
-          <div className="2xl:w-[1.667vw] 2xl:h-[1.667vw] md:max-2xl:w-6 md:max-2xl:h-6 w-5 h-5">
+          <div className='2xl:w-[1.667vw] 2xl:h-[1.667vw] md:max-2xl:w-6 md:max-2xl:h-6 w-5 h-5'>
            <ChevronDownIcon />
          </div>
        </button>
      </div>

-      <div className="content-end 2xl:text-right 2xl:col-start-6 2xl:row-start-1 2xl:row-span-2 md:max-2xl:col-start-1 md:max-2xl:row-start-3 max-md:col-span-3 max-md:pt-3 max-md:border-t border-[#E2E2DC]">
+      <div className='content-end 2xl:text-right 2xl:col-start-6 2xl:row-start-1 2xl:row-span-2 md:max-2xl:col-start-1 md:max-2xl:row-start-3 max-md:col-span-3 max-md:pt-3 max-md:border-t border-[#E2E2DC]'>
        <Link
-          to={"/"}
-          className="md:text-caption-m text-caption-s max-2xl:text-[#73787C] text-[#0D1922]/70"
+          to={'/'}
+          className='md:text-caption-m text-caption-s max-2xl:text-[#73787C] text-[#0D1922]/70'
        >
          Privacy Policy
        </Link>
@@ -1,4 +1,5 @@
 // import { sequenceVideos } from "../data/sequenceVideos";
+
 import { useState, useRef } from "react";
 import gsap from "gsap";
 import { useSwipeable } from "react-swipeable";
@@ -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 (
+    <div className='relative w-[63.333vw] h-[27.639vw] rounded-3xl overflow-hidden'>
+      <AnimatePresence custom={direction}>
+        <motion.div
+          key={currentSlide}
+          className='absolute inset-0 bg-cover bg-no-repeat bg-center'
+          style={{
+            backgroundImage: `url(${dubaiMarinaWellnessSlides[currentSlide].image})`,
+          }}
+          custom={direction}
+          initial={{ x: direction > 0 ? '100%' : '-100%' }}
+          animate={{ x: 0, transition: { duration: 0.5, ease: 'easeInOut' } }}
+          exit={{
+            x: direction > 0 ? '100%' : '-100%',
+            transition: { duration: 0.8, ease: 'easeInOut' },
+          }}
+        />
+      </AnimatePresence>
+      <div className='relative z-10 w-full h-full flex flex-col justify-between p-6'>
+        <div className='flex flex-col gap-4'>
+          <AnimatePresence mode='wait'>
+            <motion.h3
+              key={`title-${currentSlide}`}
+              className='text-subheadline-m'
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: 0.5 }}
+            >
+              {dubaiMarinaWellnessSlides[currentSlide].title}
+            </motion.h3>
+          </AnimatePresence>
+          <AnimatePresence mode='wait'>
+            <motion.p
+              key={`desc-${currentSlide}`}
+              className='text-s w-[19.861vw] tracking-[-0.07em] leading-[140%]'
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: 0.5 }}
+            >
+              {dubaiMarinaWellnessSlides[currentSlide].description}
+            </motion.p>
+          </AnimatePresence>
+        </div>
+
+        <div className='flex items-center gap-[0.556vw] relative'>
+          <div
+            className='w-10 h-10 rounded-xl text-[#0D1922] bg-white flex items-center justify-center cursor-pointer hover:bg-[#F3F3F2] transition-all duration-200'
+            onClick={handlePreviousSlide}
+          >
+            <span className='w-5 h-5'>
+              <ArrowLeftIcon />
+            </span>
+          </div>
+          <div className='text-s'>
+            {currentSlide + 1}/{dubaiMarinaWellnessSlides.length}
+          </div>
+          <div
+            className='w-10 h-10 rounded-xl text-[#0D1922] bg-white flex items-center justify-center cursor-pointer hover:bg-[#F3F3F2] transition-all duration-200'
+            onClick={handleNextSlide}
+          >
+            <span className='w-5 h-5'>
+              <ArrowRightIcon />
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Slider;
@@ -0,0 +1,9 @@
+function TextBox({ text }: { text: string }) {
+  return (
+    <div className='text-caption-m px-4 py-1.5 border border-[#E2E2DC] rounded-[40px] w-fit text-[#0D1922]'>
+      {text}
+    </div>
+  );
+}
+
+export default TextBox;
@@ -0,0 +1,20 @@
+function EqualIcon() {
+  return (
+    <svg
+      viewBox='0 0 20 20'
+      fill='currentColor'
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      <path
+        d='M16.6654 7.64815C16.6654 7.29019 16.3752 7 16.0172 7H10.647H3.98018C3.62222 7 3.33203 7.29019 3.33203 7.64815C3.33203 8.00611 3.62222 8.2963 3.98018 8.2963H10.647H16.0172C16.3752 8.2963 16.6654 8.00611 16.6654 7.64815Z'
+        fill='currentColor'
+      />
+      <path
+        d='M16.6654 12.2966C16.6654 11.9386 16.3752 11.6484 16.0172 11.6484H10.647H3.98018C3.62222 11.6484 3.33203 11.9386 3.33203 12.2966C3.33203 12.6545 3.62222 12.9447 3.98018 12.9447H10.647H16.0172C16.3752 12.9447 16.6654 12.6545 16.6654 12.2966Z'
+        fill='currentColor'
+      />
+    </svg>
+  );
+}
+
+export default EqualIcon;
@@ -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;
@@ -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;
+}
@@ -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 (
-    <div className="min-h-dvh flex flex-col select-none bg-[#F3F3F2]">
+    <div
+      className={clsx(
+        'min-h-dvh flex flex-col select-none',
+        pathname.endsWith('/about') ? 'bg-white' : 'bg-[#F3F3F2]'
+      )}
+    >
      <Header />
-      <div className="flex-1 flex flex-col justify-between">
+      <div className='flex-1 flex flex-col justify-between'>
        <Outlet />
      </div>
      <Footer />
@@ -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: <DefaultLayout />,
    children: [
      {
-        path: "/unit-types",
+        path: '/unit-types',
        element: <UnitTypesPage />,
      },
      {
-        path: "/about",
+        path: '/about',
        element: <AboutPage />,
      },
      {
-        path: "/favorites",
+        path: '/favorites',
        element: <FavoritesPage />,
      },
      {
-        path: "/search",
+        path: '/search',
        element: <SearchPage />,
      },
+      {
+        path: '/complex/:complexName/about',
+        element: <AboutComplexPage />,
+      },
    ],
  },
  {
    element: <LayoutWithoutFooter />,
    children: [
      {
-        path: "/",
+        path: '/',
        element: <MainPage />,
      },
      {
-        path: "/complex/:complexName",
+        path: '/complex/:complexName',
        element: <ComplexPage />,
      },
      {
-        path: "/complex/:complexName/floors",
+        path: '/complex/:complexName/floors',
        element: <FloorsPage />,
      },
-      {
-        path: "/complex/:complexName/about",
-        element: <AboutComplexPage />,
-      },
    ],
  },
 ]);

-createRoot(document.getElementById("root")!).render(
+createRoot(document.getElementById('root')!).render(
  <>
    <QueryClientProvider client={queryClient}>
      <RouterProvider router={route} />
@@ -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 <div></div>;
+  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 (
+    <div className='relative bg-white' ref={containerRef}>
+      <motion.section
+        className='h-[calc(100dvh-4.444vw)] w-full bg-white text-black fixed top-[4.444vw] left-0 right-0 z-0'
+        style={{
+          opacity: firstSectionOpacity,
+        }}
+      >
+        <div className='absolute inset-0'>
+          <img
+            src='/images/about-complex/dubai-marina/tower.jpg'
+            alt='dubai marina about'
+            className='h-full w-full object-contain object-top'
+          />
+          <img
+            src='/images/about-complex/dubai-marina/logo.png'
+            alt='dubai marina about'
+            className='absolute top-[5vw] right-[2.778vw] w-[9.931vw] h-[4.444vw]'
+          />
+        </div>
+        <div className='relative flex flex-col justify-between gap-[4.444vw] flex-1 w-full h-full pt-[5vw] pb-[2.5vw] pl-[2.222vw]'>
+          <div className='text-2xl font-bold whitespace-pre-line space-y-8'>
+            <h1 className='text-[5vw] leading-none tracking-[-0.07em] font-mixcase-unmixed font-[500]'>
+              {`Rove Home
+                  Dubai Marina`}
+            </h1>
+            <div className='space-y-2 font-[400]'>
+              {roveHomeDescription.map((description) => (
+                <TextBox text={description} />
+              ))}
+            </div>
+          </div>
+          <div className='space-y-8'>
+            <h4 className='text-h4 text-[#00BED7] w-[20.486vw] font-[500] '>
+              {`Own the last slice of 
+                    Dubai Marina, ROVE Style`}
+            </h4>
+            <p className='text-s text-[#0D1922B2] whitespace-pre-line'>
+              {`With an extended playlist of life-enhancing
+                amenities, Rove Home is a complete ecosystem
+                that has everything you'll ever need.`}
+            </p>
+          </div>
+        </div>
+      </motion.section>
+      <motion.section
+        className='w-full text-white bg-white flex justify-center top-[4.444vw] left-0 right-0'
+        style={{
+          y: secondSectionY,
+          zIndex: 1,
+        }}
+      >
+        <div className='w-full'>
+          <div className='flex flex-col items-center gap-[2.222vw] w-full pb-[3.75vw]'>
+            <div className='px-8 flex pt-[7.222vw] flex-col items-center gap-[2.222vw]'>
+              <h1 className='text-[3.889vw] text-[#0D1922] font-mixcase-unmixed'>
+                Rove Home has it all
+              </h1>
+              <p className='text-s text-[#0D1922B2] text-center tracking-[-0.02em] whitespace-pre-line'>
+                {`Rove Home Dubai Marina features modern-day
+                  conveniences, carefully curated for an active
+                  and social lifestyle.`}
+              </p>
+            </div>
+            <div className='flex gap-[0.556vw] mt-[0.833vw] h-[26.667vw] w-full px-[2.222vw]'>
+              {dubaiMarinaFeatures.map((feature) => (
+                <div
+                  key={feature.name}
+                  className={`rounded-3xl flex-1 h-[26.667vw] w-full flex flex-col items-center py-[1.667vw] justify-end bg-cover bg-center bg-no-repeat`}
+                  style={{
+                    backgroundImage: `url(${feature.image})`,
+                  }}
+                >
+                  <h5 className='text-h5 text-white tracking-[-0.02em]'>
+                    {feature.name}
+                  </h5>
+                </div>
+              ))}
+            </div>
+          </div>
+          <div className='flex flex-col items-center pt-[4.444vw] h-auto px-8 gap-[4.444vw]'>
+            <h1 className='font-mixcase-unmixed text-[3.889vw] text-[#0D1922]'>
+              Dubai, <span className='text-[#0D192266]'>within reach</span>
+            </h1>
+            <div className='flex w-full text-[#0D192266] gap-[1.111vw]'>
+              {dubaiMarinaDescription.map((descriptionItem) => (
+                <div className='flex-1 text-center flex flex-col gap-[1.111vw]'>
+                  <div className='h-[2px] bg-gray-300 w-full'></div>
+                  <h5
+                    className={clsx(
+                      'text-h5 tracking-[-0.02em] mt-[0.556vw] font-[500] ',
+                      descriptionItem.title === 'Wellness' && 'text-[#00BED7]'
+                    )}
+                  >
+                    {descriptionItem.title}
+                  </h5>
+                  <p
+                    className={clsx(
+                      'text-s leading-[125%] tracking-[-0.02em]',
+                      descriptionItem.title === 'Wellness' && 'text-[#0D1922] '
+                    )}
+                  >
+                    {descriptionItem.description}
+                  </p>
+                </div>
+              ))}
+            </div>
+            <motion.div
+              ref={sliderRef}
+              initial={{ opacity: 0, y: 40 }}
+              animate={
+                isSliderInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 140 }
+              }
+              transition={{ duration: 0.6, ease: 'easeOut' }}
+              className='flex flex-col gap-8'
+            >
+              <Slider />
+              <div className='flex gap-[0.556vw] w-[63.333vw] flex-wrap justify-center'>
+                {wellnessDescription.map((wellnessItem) => (
+                  <TextBox text={wellnessItem} />
+                ))}
+              </div>
+            </motion.div>
+          </div>
+          <div className='text-center w-full flex flex-col items-center gap-[2.222vw] bg-white'>
+            <h1 className='font-mixcase-unmixed text-[3.889vw] text-[#0D1922] w-[44.861vw] leading-[100%] tracking-[-0.05em] pt-[8.056vw]'>
+              Dubai's first-ever combinable Apartments
+            </h1>
+            <TextBox text='On-demand' />
+            <p className='text-s text-[#0D1922B2] leading-[140%] tracking-[-0.02em] whitespace-pre-line'>
+              {`Enjoy the option to combine 2 apartments and create
+                a larger space and configuration.`}
+            </p>
+            <div className='flex gap-4 relative'>
+              <div className='w-[19.028vw] text-[#0D1922] h-[27.778vw] p-[1.667vw] rounded-2xl bg-[#F3F3F2] text-left bg-[url(/images/about-complex/dubai-marina/studio.png)] bg-[length:7.778vw_17.847vw] bg-no-repeat bg-center'>
+                <h4 className='text-h4 tracking-[-0.02em] font-[500]'>
+                  Studio²
+                </h4>
+              </div>
+              <div className='w-10 h-10 rounded-full bg-[#0D1922] flex items-center justify-center absolute left-[18.500vw] self-center'>
+                <span className='w-5 h-5'>
+                  <PlusIcon />
+                </span>
+              </div>
+              <div className='w-[19.028vw] text-[#0D1922] h-[27.778vw] p-6 rounded-2xl bg-[#F3F3F2] text-left bg-[url(/images/about-complex/dubai-marina/studio.png)] bg-[length:7.778vw_17.847vw] bg-no-repeat bg-center'>
+                <h4 className='text-h4 tracking-[-0.02em] font-[500]'>
+                  Studio²
+                </h4>
+              </div>
+              <div className='w-10 h-10 rounded-full bg-[#0D1922] flex items-center justify-center absolute left-[38.333vw] self-center'>
+                <span className='w-5 h-5'>
+                  <EqualIcon />
+                </span>
+              </div>
+              <div className='w-[30.972vw] text-[#0D1922] h-[27.778vw] p-6 rounded-2xl bg-[#F3F3F2] text-left bg-[url(/images/about-complex/dubai-marina/1_bedroom.png)] bg-[length:15.972vw_17.847vw] bg-no-repeat bg-center'>
+                <h4 className='text-h4 tracking-[-0.02em] font-[500]'>
+                  1 Bedroom²
+                </h4>
+              </div>
+            </div>
+            <div className='flex gap-4 relative'>
+              <div className='w-[19.028vw] text-[#0D1922] h-[27.778vw] p-6 rounded-2xl bg-[#F3F3F2] text-left bg-[url(/images/about-complex/dubai-marina/2_studio.png)] bg-[length:13.125vw_17.847vw] bg-no-repeat bg-center'>
+                <h4 className='text-h4 tracking-[-0.02em] font-[500]'>
+                  Studio²
+                </h4>
+              </div>
+              <div className='w-10 h-10 rounded-full bg-[#0D1922] flex items-center justify-center absolute left-[18.500vw] self-center'>
+                <span className='w-5 h-5'>
+                  <PlusIcon />
+                </span>
+              </div>
+              <div className='w-[30.972vw] text-[#0D1922] h-[27.778vw] p-6 rounded-2xl bg-[#F3F3F2] text-left bg-[url(/images/about-complex/dubai-marina/1_bedroom_rotated.png)] bg-[length:17.847vw_13.681vw] bg-no-repeat bg-center'>
+                <h4 className='text-h4 tracking-[-0.02em] font-[500]'>
+                  1 Bedroom²
+                </h4>
+              </div>
+              <div className='w-10 h-10 rounded-full bg-[#0D1922] flex items-center justify-center absolute left-[50.300vw] self-center'>
+                <span className='w-5 h-5'>
+                  <EqualIcon />
+                </span>
+              </div>
+              <div className='w-[30.972vw] text-[#0D1922] h-[27.778vw] p-6 rounded-2xl bg-[#F3F3F2] text-left bg-[url(/images/about-complex/dubai-marina/2_bedroom.png)] bg-[length:19.028vw_17.847vw] bg-no-repeat bg-center'>
+                <h4 className='text-h4 tracking-[-0.02em] font-[500]'>
+                  2 Bedroom²
+                </h4>
+              </div>
+            </div>
+          </div>
+          <div className='flex flex-col items-center gap-[2.222vw] bg-white px-[2.222vw] pb-[8.333vw]'>
+            <h1 className='font-mixcase-unmixed text-[3.889vw] text-[#0D1922] w-[44.861vw] leading-[100%] tracking-[-0.05em] pt-[7.222vw]'>
+              Live central. Live centred
+            </h1>
+            <p className='text-s w-[35.278vw] text-[#0D1922B2] leading-[140%] tracking-[-0.02em] text-center whitespace-pre-line'>
+              {`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.`}
+            </p>
+            <motion.img
+              ref={mapRef}
+              src='/images/about-complex/dubai-marina/central_map.jpg'
+              alt=''
+              className='rounded-3xl object-cover object-center aspect-[1376/609]'
+              initial={{ width: '47.083vw' }}
+              animate={
+                isMapInView ? { width: '95.556vw' } : { width: '47.083vw' }
+              }
+              transition={{ duration: 0.6, ease: 'easeInOut' }}
+            />
+          </div>
+        </div>
+      </motion.section>
+    </div>
+  );
 }

 export default AboutComplexPage;