diff --git a/public/images/about-complex/hq/logo.svg b/public/images/about-complex/hq/logo.svg new file mode 100644 index 0000000..eea1c13 --- /dev/null +++ b/public/images/about-complex/hq/logo.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/about-complex/hq/main_bg.png b/public/images/about-complex/hq/main_bg.png new file mode 100644 index 0000000..89ec1d0 Binary files /dev/null and b/public/images/about-complex/hq/main_bg.png differ diff --git a/src/components/AboutDubaiMarina.tsx b/src/components/AboutDubaiMarina.tsx index bca9164..f09e936 100644 --- a/src/components/AboutDubaiMarina.tsx +++ b/src/components/AboutDubaiMarina.tsx @@ -110,7 +110,7 @@ function AboutDubaiMarina() { >
-
+

{`Own the last slice of Dubai Marina, ROVE Style`} diff --git a/src/components/AboutHQ.tsx b/src/components/AboutHQ.tsx new file mode 100644 index 0000000..d7fb2c6 --- /dev/null +++ b/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 ( +
+ + +
+ ) +} + +function AboutHQHero() { + return ( +
+ +
+
+ + + +
+

+ {`Rove Home HQ — + Work looks different + here`} +

+
+ +
+ +

+ {`Welcome to the office you + actually want to show up for`} +

+

+ 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 +

+
+ + +
+ +
+
+

+ {`Welcome to the office you + actually want to show up for`} +

+

+ 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 +

+
+
+ +
+ ) +} + +function AboutHQSlider() { + const target = useRef(null); + const { scrollYProgress } = useScroll({ + target, + }); + return ( +
+
+
+
+

+ More than an office, a lifestyle. +

+

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

+
+ + + {/* TODO: update */} + + +
+
+
+ + ) +} \ No newline at end of file diff --git a/src/components/AboutMarasiDrive.tsx b/src/components/AboutMarasiDrive.tsx index d8102ac..1de4679 100644 --- a/src/components/AboutMarasiDrive.tsx +++ b/src/components/AboutMarasiDrive.tsx @@ -73,6 +73,7 @@ function AboutMarasiDrive() {

+
@@ -156,6 +157,7 @@ function AboutMarasiDrive() {
+
diff --git a/src/components/MarasiDriveInteriorsSlider.tsx b/src/components/MarasiDriveInteriorsSlider.tsx index 773e877..ea76203 100644 --- a/src/components/MarasiDriveInteriorsSlider.tsx +++ b/src/components/MarasiDriveInteriorsSlider.tsx @@ -24,7 +24,7 @@ function MarasiDriveInteriorsSlider() { }); return ( -
+
; + 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 ( + + + {images.map(({ name, image }, index) => ( + + {name} +

{name}

+ + ))} + + + ); +} diff --git a/src/data/aboutHQ.ts b/src/data/aboutHQ.ts new file mode 100644 index 0000000..e69de29 diff --git a/src/data/aboutMarasiDrive.ts b/src/data/aboutMarasiDrive.ts index bd395c6..730ad88 100644 --- a/src/data/aboutMarasiDrive.ts +++ b/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 = [ { diff --git a/src/index.css b/src/index.css index 9432b45..9a0c0cd 100644 --- a/src/index.css +++ b/src/index.css @@ -4,10 +4,6 @@ @tailwind components; @tailwind utilities; -@theme { - --breakpoint-2xl: 1440px; -} - body { font-family: "Usual", sans-serif; overflow-x: hidden; @@ -79,4 +75,4 @@ button { .font-mixcase-unmixed { font-family: "Mixcase Unmixed", sans-serif; } -} +} \ No newline at end of file diff --git a/src/pages/AboutComplexPage.tsx b/src/pages/AboutComplexPage.tsx index 0f5709b..f34e2cb 100644 --- a/src/pages/AboutComplexPage.tsx +++ b/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 ; } else if (complexName === "marasi-drive") { return ; + } else if (complexName === "hq") { + return ; } else return null; } diff --git a/tailwind.config.js b/tailwind.config.js index 614c86b..0432588 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -2,7 +2,11 @@ export default { content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], theme: { - extend: {}, + extend: { + screens: { + "2xl": "1440px", + }, + }, }, plugins: [], };