inmake/irth-new-client-120
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

upd

Browse Source
This commit is contained in:
C4rnivore
2026-01-20 17:48:53 +05:00
parent bd9b29b8de
commit 26f73a1011
12 changed files with 206 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/AboutDubaiMarina.tsx
+1 -1
View File
@@ -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
+106
View File
@@ -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
+2
View File
@@ -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
+1 -1
View File
@@ -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
+58
View File
@@ -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>
);
}