upd

public/images/about-complex/hq/logo.svg

@@ -0,0 +1,28 @@
+<svg width="88" height="131" viewBox="0 0 88 131" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_5903_168734)">
+<path d="M30.4308 101.99C26.7936 101.99 24.3828 104.599 24.3828 108.381C24.3828 112.162 26.7927 114.773 30.4308 114.773C34.069 114.773 36.4779 112.164 36.4779 108.381C36.4779 104.597 34.0671 101.99 30.4308 101.99ZM30.4308 113.762C27.5896 113.762 25.7085 111.705 25.7085 108.381C25.7085 105.056 27.5896 103.001 30.4308 103.001C33.272 103.001 35.1522 105.057 35.1522 108.381C35.1522 111.704 33.272 113.762 30.4308 113.762Z" fill="#524C4A"/>
+<path d="M59.6688 102.668C59.6688 102.732 59.7118 102.779 59.7757 102.783L61.088 102.897C61.2751 102.913 61.3801 103.078 61.3133 103.254L57.5253 113.047L53.2925 101.989H51.2129V102.685C51.2129 102.747 51.2568 102.795 51.3198 102.801L52.0442 102.862C52.1272 102.87 52.1921 102.92 52.2226 102.996L56.8686 114.776L57.95 114.765L62.6026 102.875L63.5838 102.791V101.988H59.6669V102.666L59.6688 102.668Z" fill="#524C4A"/>
+<path d="M86.7964 113.521C86.7859 113.649 86.6905 113.737 86.5626 113.737H81.6398V108.774H85.8363V107.791H81.6398V103.039H86.219C86.3469 103.039 86.4433 103.128 86.4519 103.255L86.5607 104.673H87.3443V102.122C87.3443 102.053 87.2937 102.004 87.224 102.004H78.873V102.694C78.873 102.756 78.917 102.804 78.979 102.809L80.1195 102.904C80.2455 102.913 80.3323 103.009 80.3323 103.134V113.643C80.3323 113.768 80.2455 113.864 80.1195 113.873L78.979 113.968C78.916 113.972 78.873 114.021 78.873 114.083V114.773H87.5695C87.6373 114.773 87.6878 114.725 87.6878 114.654V112.103H86.9052L86.7964 113.521Z" fill="#524C4A"/>
+<path d="M9.30726 113.774L6.1883 108.674L6.23793 108.658C8.20016 108.473 9.44088 107.217 9.44088 105.405C9.44088 103.368 7.89667 101.99 5.54217 101.99H0V102.681C0 102.744 0.0439022 102.792 0.106892 102.798L1.24549 102.892C1.37147 102.902 1.46022 102.998 1.46022 103.124V113.64C1.46022 113.765 1.37147 113.861 1.24549 113.871L0.106892 113.967C0.0429478 113.971 0 114.019 0 114.083V114.773H4.40835V113.976L2.98058 113.853C2.8546 113.843 2.76775 113.747 2.76775 113.622V108.815H4.97049L8.36814 114.718C8.38627 114.752 8.42063 114.773 8.45976 114.773H10.7245V113.976L9.46474 113.87C9.39697 113.864 9.34257 113.83 9.30822 113.774M2.76775 107.775V103.119L3.95788 103.027H5.57748C7.17705 103.027 8.16294 103.931 8.16294 105.402C8.16294 106.873 7.17705 107.774 5.57748 107.774H2.76679L2.76775 107.775Z" fill="#524C4A"/>
+<path d="M9.83504 47.3456H25.9557V82.6531H35.7908V0H25.9557V37.6338H9.83504V0H0V82.6531H9.83504V47.3456Z" fill="#524C4A"/>
+<path d="M67.3245 0C56.6792 0 46.9453 7.18263 46.9453 16.6925V66.5681C46.9453 76.078 56.6782 83.2606 67.3245 83.2606C70.4187 83.2606 73.405 82.6741 76.0944 81.618L77.737 83.3521H87.6894L82.4078 77.7787C85.667 74.8573 87.7047 70.9627 87.7047 66.5681V16.6925C87.7037 7.18263 78.1731 0 67.3245 0ZM71.3797 66.1396H61.4321L68.5929 73.6984C68.1749 73.7317 67.7521 73.7508 67.3255 73.7508C61.7489 73.7508 56.6792 70.716 56.6792 66.5681V16.6925C56.6792 12.5456 61.7489 9.50987 67.3255 9.50987C72.902 9.50987 77.9717 12.5456 77.9717 16.6925V66.5681C77.9717 68.2222 77.1796 69.6991 75.8692 70.877L71.3807 66.1406L71.3797 66.1396Z" fill="#524C4A"/>
+<path d="M40.6517 89.5701C39.767 89.5701 39.035 89.9243 38.532 90.5319V86.9258H36.7148V87.3781C36.7148 87.4209 36.7444 87.4514 36.7855 87.4552L37.5347 87.5171C37.6167 87.5247 37.6731 87.5866 37.6731 87.6714V91.8345H37.674V96.0243H38.532V95.1854C39.0359 95.7939 39.767 96.149 40.6517 96.149C42.3782 96.149 43.5235 94.8054 43.5235 92.86C43.5235 90.9147 42.3782 89.572 40.6517 89.572M40.6326 95.3768C39.2841 95.3768 38.5311 94.5721 38.5311 92.86C38.5311 91.1479 39.3041 90.2424 40.6508 90.2424C41.9974 90.2424 42.6206 91.1489 42.6206 92.86C42.6206 94.5712 41.9793 95.3768 40.6317 95.3768" fill="#524C4A"/>
+<path d="M48.9177 89.9596C48.9177 89.9939 48.9406 90.0186 48.974 90.0215L49.3672 90.0253C49.4655 90.0358 49.5208 90.1224 49.4855 90.2157L47.7294 95.1826L45.6632 89.6025H44.4473V89.9691C44.4473 90.0034 44.4702 90.0282 44.5026 90.031L44.8872 90.0634C44.9311 90.0682 44.9655 90.0939 44.9817 90.1339L47.3286 96.0834H47.3019L47.3181 96.1234C46.9592 97.327 46.002 98.3335 44.7088 97.5098L44.5465 98.1963C46.4629 99.1819 47.3429 97.8983 48.01 96.3566L48.0196 96.3338C48.031 96.3033 48.0453 96.2738 48.0577 96.2424C48.0806 96.191 48.1007 96.1367 48.1236 96.0834H48.1169L50.4685 90.071L50.9877 90.0253V89.6016H48.9177V89.9596Z" fill="#524C4A"/>
+<path d="M31.6945 92.3398H0V93.1273H31.6945V92.3398Z" fill="#524C4A"/>
+<path d="M87.9992 92.3398H56.3047V93.1273H87.9992V92.3398Z" fill="#524C4A"/>
+<path d="M16.3796 128.017L18.5012 123.6H19.3764V130.688H18.4907V125.49L16.7604 129.208H15.9683L14.2685 125.52V130.688H13.3828V123.6H14.2484L16.3796 128.017Z" fill="#00568D"/>
+<path d="M21.1806 130.689L23.6525 123.6H24.4762L26.9471 130.689H26.0099L25.464 129.065H22.6628L22.1169 130.689H21.1797H21.1806ZM22.9415 128.265H25.1862L24.0639 124.936L22.9415 128.265Z" fill="#00568D"/>
+<path d="M32.7976 130.689L31.3145 127.699H29.6366V130.689H28.75V123.6H31.0157C32.6525 123.6 33.6002 124.279 33.6002 125.655C33.6002 126.651 33.1059 127.278 32.2001 127.545L33.7854 130.688H32.7966L32.7976 130.689ZM31.0157 126.898C32.2202 126.898 32.7146 126.529 32.7146 125.655C32.7146 124.782 32.2202 124.402 31.0157 124.402H29.6366V126.899H31.0157V126.898Z" fill="#00568D"/>
+<path d="M35.0224 130.689L37.4943 123.6H38.318L40.7889 130.689H39.8517L39.3058 129.065H36.5046L35.9587 130.689H35.0215H35.0224ZM36.7833 128.265H39.028L37.9057 124.936L36.7833 128.265Z" fill="#00568D"/>
+<path d="M46.2894 125.171C45.9086 124.677 45.4972 124.317 44.601 124.317C43.7774 124.317 43.221 124.687 43.221 125.427C43.221 126.269 43.8595 126.556 44.8998 126.742C46.2693 126.978 47.1035 127.471 47.1035 128.786C47.1035 129.711 46.486 130.769 44.7146 130.769C43.5607 130.769 42.7171 130.378 42.1816 129.608L42.9127 129.105C43.3756 129.65 43.7879 129.968 44.7146 129.968C45.878 129.968 46.2178 129.434 46.2178 128.827C46.2178 128.159 45.878 127.707 44.539 127.502C43.2009 127.297 42.3353 126.66 42.3353 125.427C42.3353 124.409 43.0043 123.516 44.6316 123.516C45.7635 123.516 46.4745 123.897 46.9794 124.676L46.2894 125.17V125.171Z" fill="#00568D"/>
+<path d="M50.2861 123.6H49.4004V130.689H50.2861V123.6Z" fill="#00568D"/>
+<path d="M58.5355 123.6C60.1933 123.6 60.9864 124.226 60.9864 125.409C60.9864 126.148 60.5025 126.827 59.8125 126.99C60.7086 127.154 61.2135 127.75 61.2135 128.655C61.2135 129.682 60.5855 130.689 58.7626 130.689H56.3633V123.6H58.5355ZM57.249 126.61H58.6901C59.6893 126.61 60.1007 126.106 60.1007 125.408C60.1007 124.78 59.7819 124.39 58.5355 124.39H57.249V126.609V126.61ZM57.249 129.887H58.7626C59.8335 129.887 60.3278 129.425 60.3278 128.654C60.3278 127.801 59.7714 127.411 58.5975 127.411H57.249V129.887Z" fill="#00568D"/>
+<path d="M62.5517 130.689L65.0236 123.6H65.8473L68.3182 130.689H67.381L66.8351 129.065H64.0339L63.488 130.689H62.5508H62.5517ZM64.3126 128.265H66.5573L65.435 124.936L64.3126 128.265Z" fill="#00568D"/>
+<path d="M69.9768 123.6L71.5936 126.682L73.2103 123.6H74.2506L72.0364 127.648V130.689H71.1507V127.648L68.9375 123.6H69.9768Z" fill="#00568D"/>
+</g>
+<defs>
+<clipPath id="clip0_5903_168734">
+<rect width="88" height="130.771" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/components/AboutDubaiMarina.tsx

@@ -110,7 +110,7 @@ function AboutDubaiMarina() {
       >
         <div className="w-full min-md:overflow-x-hidden">
           <div className="flex flex-col items-center gap-[2.222vw] w-full max-md:py-[8.889vw] max-md:px-[4.444vw] max-2xl:p-6">
-            <div className="space-y-8 min-md:hidden self-start">
+            <div className="space-y-8 md:hidden self-start">
               <h4 className="text-h4 text-[#00BED7] font-[500] whitespace-pre-line">
                 {`Own the last slice of Dubai
                    Marina, ROVE Style`}

src/components/AboutHQ.tsx

@@ -0,0 +1,106 @@
+import { useRef } from "react"
+import MarasiDriveNeighboursSliderMobile from "./MarasiDriveNeighboursSliderMobile"
+import MarasiDriveNeighboursSliderTablet from "./MarasiDriveNeighboursSliderTablet"
+import { useScroll } from "motion/react"
+import ScrollSlider from "./ScrollSlider"
+import { marasiDriveFeatures } from "../data/aboutMarasiDrive"
+
+
+export default function AboutHQ() {
+  return (
+    <div className="relative ">
+        <AboutHQHero/>
+        <AboutHQSlider/>
+    </div>
+  )
+}
+
+function AboutHQHero() {
+  return (
+    <div className="2xl:sticky relative 2xl:top-[4.444vw]">
+
+    <section className="w-full 2xl:h-[calc(100dvh-4.444vw)] relative md:h-[calc(100dvh-4rem)] h-[calc(100dvh-3.15rem)] max-md:max-h-[162.222vw] flex flex-col justify-between bg-white 2xl:p-[2.222vw] 2xl:pt-[5vw] md:max-2xl:p-6 md:max-2xl:pt-10 p-4 pt-8 overflow-hidden">
+      <div className="2xl:size-[100vw] md:size-[118.75vw] size-[137.5vw] rounded-full absolute 2xl:top-1/2 2xl:-translate-y-1/2 2xl:left-[36.667vw] md:top-[46.484vw] md:left-1/2 max-2xl:-translate-x-1/2 left-1/2 top-[48.611vw] -translate-y-0 bg-[#F3F3F2]"/>
+      
+      <img src="/images/about-complex/hq/main_bg.png" alt="" className="absolute 2xl:h-[103%] 2xl:right-[-10vw] md:bottom-0 md:right-[-35vw] md:h-[85%] max-md:h-auto max-md:bottom-0 max-md:left-0" />
+      
+      <div className="2xl:space-y-[1.667vw] md:max-2xl:space-y-6 space-y-4 relative">
+        <h1 className="2xl:text-[5vw] md:max-2xl:text-7xl text-[32px] leading-none tracking-[-0.07em] font-mixcase-unmixed font-medium whitespace-pre-line">
+          {`Rove Home HQ — 
+            Work looks different
+            here`}
+        </h1>
+      </div>
+
+      <div className="2xl:space-y-[1.111vw] md:max-2xl:space-y-6 relative max-md:hidden">
+        <img src="/images/about-complex/hq/logo.svg" alt="" className=" md:max-2xl:flex hidden mb-[6.25vw]" />
+        <h4 className="text-h4 text-[#00BED7] font-medium whitespace-pre-line">
+          {`Welcome to the office you
+           actually want to show up for`}
+        </h4>
+        <p className="text-s opacity-70 2xl:w-1/4 md:max-2xl:w-1/3">
+        HQ by Rove was born out of a question: what if the
+        office could feel alive again? Now, the first
+        ever hospitality-branded office building in Dubai is here to
+         answer it. Starting in Marasi Bay
+        </p>
+      </div>
+
+      <img src="/images/about-complex/hq/logo.svg" alt="" className="absolute 2xl:top-[1.806vw] 2xl:right-[2.222vw] 2xl:w-[6.111vw] md:max-2xl:hidden w-[17.778vw]  max-md:left-1/2  max-md:top-[39.444vw]  max-md:-translate-x-1/2" />
+    </section>
+
+    <section>
+      <div className="space-y-6 bg-white px-4 py-8 md:hidden">
+        <h4 className="text-h4 text-[#00BED7] font-medium whitespace-pre-line ">
+        {`Welcome to the office you
+           actually want to show up for`}
+        </h4>
+        <p className="text-s opacity-70 2xl:w-1/4 md:max-2xl:w-1/3">
+        HQ by Rove was born out of a question: what if the
+        office could feel alive again? Now, the first
+        ever hospitality-branded office building in Dubai is here to
+         answer it. Starting in Marasi Bay
+        </p>
+      </div>
+    </section>
+    
+  </div>
+  )
+} 
+
+function AboutHQSlider() {
+    const target = useRef<HTMLDivElement>(null);
+    const { scrollYProgress } = useScroll({
+      target,
+    });
+  return (
+    <div className="2xl:sticky relative 2xl:top-[-134vw]">
+    <section
+          className="bg-white w-full overflow-clip 2xl:h-[calc(27.639vw*5)] 2xl:pt-[9.444vw] 2xl:px-[2.222vw] 2xl:pb-[2.222vw] md:max-2xl:pt-[104px] md:max-2xl:px-6 md:max-2xl:pb-8 pt-16 px-4 pb-8"
+          ref={target}
+        >
+          <div className="flex flex-col 2xl:gap-[4.444vw] 2xl:sticky top-[5vw]">
+            <div className="flex flex-col items-center 2xl:gap-[2.222vw]">
+              <h2 className="font-mixcase-unmixed text-h1 text-center whitespace-pre-line max-md:mb-[24px] md:max-2xl:mb-8 opacity-100">
+              <span className="opacity-40">More than an office,</span> a lifestyle.
+              </h2>
+              <p className="text-s opacity-70 whitespace-pre-line text-center max-md:whitespace-normal max-md:mb-12 md:max-2xl:mb-16">
+                {`Living rooms became boardrooms, kitchens became creative hubs.
+                 But as the world returned, the office didn’t keep up. HQ by Rove is the
+                  answer - an office with a living touch.`}
+              </p>
+            </div>
+            <ScrollSlider
+              scrollYProgress={scrollYProgress}
+              images={marasiDriveFeatures}
+            />
+
+            {/* TODO: update */}
+            <MarasiDriveNeighboursSliderTablet />
+            <MarasiDriveNeighboursSliderMobile />
+          </div>
+        </section>
+  </div>
+  
+  )
+}

src/components/AboutMarasiDrive.tsx

@@ -73,6 +73,7 @@ function AboutMarasiDrive() {
         </section>
         
       </div>
+      
       <div className="2xl:sticky relative 2xl:top-[-134vw]">
         <section className="bg-white w-full overflow-clip 2xl:pt-[9.444vw] 2xl:px-[2.222vw] 2xl:pb-[2.222vw] md:max-2xl:pt-[104px] md:max-2xl:px-6 md:max-2xl:pb-8 pt-16 px-4 pb-8 flex flex-col 2xl:gap-[4.444vw] md:max-2xl:gap-12 gap-10">
           <div className="flex flex-col 2xl:gap-[2.222vw] md:max-2xl:gap-8 gap-6 items-center">
@@ -156,6 +157,7 @@ function AboutMarasiDrive() {
           <MarasiDriveInteriorsSliderMobile/>
         </section>
       </div>
+      
       <div className="2xl:sticky relative">
         <section className="bg-white w-full overflow-clip flex flex-col 2xl:gap-[4.444vw] gap-12 2xl:pt-[9.444vw] 2xl:px-[2.222vw] 2xl:pb-[2.222vw] md:max-2xl:pt-[104px] md:max-2xl:px-6 md:max-2xl:pb-8 pt-16 px-4 pb-8">
           <div className="flex flex-col items-center 2xl:gap-[2.222vw] md:max-2xl:gap-8 gap-6">

src/components/MarasiDriveInteriorsSlider.tsx

@@ -24,7 +24,7 @@ function MarasiDriveInteriorsSlider() {
   });
 
   return (
-    <div className="relative max-md:hidden 2xl:mb-[15vw]" {...handlers}>
+    <div className="relative max-md:hidden" {...handlers}>
       <motion.div
         className="flex items-center 2xl:gap-[6.667vw] gap-[12.5vw] 2xl:min-h-[38.333vw] min-h-[calc(58.333vw*9/10)]"
         animate={{

src/components/ScrollSlider.tsx

@@ -0,0 +1,58 @@
+import { motion, AnimatePresence, useTransform, MotionValue } from 'motion/react';
+
+interface ScrollSliderProps {
+    scrollYProgress: MotionValue<number>;
+    images: { name:  string; image: string }[];
+}
+
+export default function ScrollSlider({ scrollYProgress, images }: ScrollSliderProps) {
+    const x = useTransform(scrollYProgress, [0, 1 / 3], ["4.236vw", "-20.868vw"]);
+
+    const width1 = useTransform(
+      scrollYProgress,
+      [0, 1 / 3],
+      ["20.139vw", "20.139vw"]
+    );
+  
+    const width2 = useTransform(
+      scrollYProgress,
+      [0, 1 / 3],
+      ["36.944vw", "20.139vw"]
+    );
+  
+    const width3 = useTransform(
+      scrollYProgress,
+      [0, 1 / 3],
+      ["20.139vw", "36.944vw"]
+    );
+  
+    const width4 = useTransform(
+      scrollYProgress,
+      [0, 1 / 3],
+      ["20.139vw", "20.139vw"]
+    );
+  
+    return (
+      <motion.div
+        className="flex items-center 2xl:gap-[4.965vw] gap-[9.375vw] 2xl:min-h-[27.639vw] max-2xl:hidden"
+        style={{ x }}
+      >
+        <AnimatePresence>
+            {images.map(({ name, image }, index) => (
+            <motion.div
+              key={name}
+              className="flex flex-col shrink-0 items-center 2xl:gap-[1.667vw] gap-6"
+              style={{ width: [width1, width2, width3, width4][index] }}
+            >
+              <img
+                src={image}
+                alt={name}
+                className="2xl:rounded-[1.667vw] rounded-[3.125vw] aspect-[290/205] object-cover w-full pointer-events-none"
+              />
+              <p className={"text-h4 text-center font-medium"}>{name}</p>
+            </motion.div>
+          ))}
+        </AnimatePresence>
+      </motion.div>
+    );
+}

src/data/aboutMarasiDrive.ts

@@ -25,7 +25,7 @@ export const marasiDriveFeatures = [
     name: "Add-on Services",
     image: "/images/about-complex/marasi-drive/services.jpg",
   },
-] as const;
+];
 
 export const marasiDriveInspiredInteriors = [
   {

src/index.css

@@ -4,10 +4,6 @@
 @tailwind components;
 @tailwind utilities;
 
-@theme {
-  --breakpoint-2xl: 1440px;
-}
-
 body {
   font-family: "Usual", sans-serif;
   overflow-x: hidden;

src/pages/AboutComplexPage.tsx

@@ -1,6 +1,7 @@
 import { useParams } from "react-router";
 import AboutDubaiMarina from "../components/AboutDubaiMarina";
 import AboutMarasiDrive from "../components/AboutMarasiDrive";
+import AboutHQ from "../components/AboutHQ";
 
 function AboutComplexPage() {
   const { complexName } = useParams();
@@ -9,6 +10,8 @@ function AboutComplexPage() {
     return <AboutDubaiMarina />;
   } else if (complexName === "marasi-drive") {
     return <AboutMarasiDrive />;
+  } else if (complexName === "hq") {
+    return <AboutHQ />;
   } else return null;
 }
 

tailwind.config.js

@@ -2,7 +2,11 @@
 export default {
   content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
   theme: {
-    extend: {},
+    extend: {
+      screens: {
+        "2xl": "1440px",
+      },
+    },
   },
   plugins: [],
 };