338 lines
18 KiB
TypeScript
338 lines
18 KiB
TypeScript
import { useRef, useState } from "react"
|
||
import { AnimatePresence, motion, useInView, useScroll } from "motion/react"
|
||
import AboutHQScrollSlider from "./AboutHQ/AboutHQSlider"
|
||
import { marasiDriveMapCards } from "../data/aboutMarasiDrive"
|
||
|
||
import clsx from "clsx"
|
||
import EqualIcon from "./icons/EqualIcon"
|
||
import PlusIcon from "./icons/map/PlusIcon"
|
||
import MarasiDriveMapMobile from "./MarasiDriveMapMobile"
|
||
import MarasiDriveMapCard from "./MarasiDriveMapCard"
|
||
import BrochureButton from "./ui/BrochureButton"
|
||
import AboutHQSliderTablet from "./AboutHQ/AboutHQSliderTablet"
|
||
import AboutHQSliderMobile from "./AboutHQ/AboutHQSliderMobile"
|
||
import { hqDescription, hqSlider } from "../data/aboutHQ"
|
||
import UnitTypesSlider from "./AboutHQ/UnitTypesSlider"
|
||
import UnitTypesSliderMobile from "./AboutHQ/UnitTypesSliderMobile"
|
||
|
||
export default function AboutHQ() {
|
||
const target = useRef<HTMLDivElement>(null);
|
||
const { scrollYProgress } = useScroll({
|
||
target,
|
||
});
|
||
const [selectedCategorySlider, setSelectedCategorySlider] =
|
||
useState<keyof typeof hqSlider>("Modular Office Collection");
|
||
|
||
const sliderRef = useRef(null);
|
||
const isSliderInView = useInView(sliderRef, {
|
||
once: true,
|
||
amount: 0.1,
|
||
});
|
||
|
||
return (
|
||
<div className="relative bg-white">
|
||
|
||
{/* Hero */}
|
||
<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)] md:max-h-[125vw] 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:left-[46.528vw] 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>
|
||
|
||
{/* Slider */}
|
||
<div className="2xl:sticky relative 2xl:top-[-134vw]">
|
||
<section
|
||
className="bg-white w-full overflow-clip 2xl:h-[calc(27.639vw*7)] 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-[2.222vw] 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> <br className="2xl:hidden" /> 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>
|
||
<AboutHQScrollSlider
|
||
scrollYProgress={scrollYProgress}
|
||
/>
|
||
<AboutHQSliderTablet />
|
||
<AboutHQSliderMobile />
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
{/* Features */}
|
||
<div className="flex relative bg-white flex-col items-center pt-[4.444vw] px-8 gap-[4.444vw] max-md:px-[4.444vw] max-2xl:pr-[3.125vw] max-2xl:-mr-[3.125vw] max-2xl:p-6 max-2xl:items-start max-2xl:gap-[4.167vw]">
|
||
<h1 className="font-mixcase-unmixed 2xl:text-[3.889vw] text-[#0D1922] tracking-[-0.05em] max-md:text-2xl max-2xl:text-[7.292vw] max-2xl:self-center">
|
||
Dubai, <span className="text-[#0D192266]">within reach</span>
|
||
</h1>
|
||
<UnitTypesSliderMobile />
|
||
<div
|
||
className="z-1 flex w-full text-[#0D1922]/40 gap-[1.111vw] max-md:hidden
|
||
max-2xl:overflow-x-auto max-2xl:self-start max-2xl:snap-x max-2xl:snap-mandatory
|
||
max-2xl:[scrollbar-width:none] max-2xl:mt-[4.167vw]"
|
||
>
|
||
{hqDescription.map((descriptionItem) => (
|
||
<div
|
||
key={descriptionItem.title}
|
||
className="2xl:flex-1 text-center flex flex-col gap-[1.111vw] cursor-pointer hover:text-[#0D1922B2] transition-all duration-200
|
||
max-2xl:w-[45.833vw] max-2xl:h-[12.76vw] max-2xl:shrink-0"
|
||
onClick={() =>
|
||
setSelectedCategorySlider(descriptionItem.title )
|
||
}
|
||
>
|
||
<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 === selectedCategorySlider &&
|
||
"text-[#00BED7]"
|
||
)}
|
||
>
|
||
{descriptionItem.title}
|
||
</h5>
|
||
<p
|
||
className={clsx(
|
||
"text-s leading-[125%] tracking-[-0.02em] w-[16.389vw] self-center max-2xl:w-[30.729vw] ",
|
||
descriptionItem.title === selectedCategorySlider &&
|
||
"text-[#0D1922]"
|
||
)}
|
||
>
|
||
{descriptionItem.description}
|
||
</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
<AnimatePresence mode="wait">
|
||
<div
|
||
ref={sliderRef}
|
||
className="flex flex-col gap-8 max-md:hidden"
|
||
>
|
||
<motion.div
|
||
key={`slider-${selectedCategorySlider}`}
|
||
initial={{ opacity: 0, y: 40 }}
|
||
animate={
|
||
isSliderInView
|
||
? { opacity: 1, y: 0 }
|
||
: { opacity: 0, y: 140 }
|
||
}
|
||
exit={{ opacity: 0, y: -40 }}
|
||
transition={{ duration: 0.6, ease: "easeIn" }}
|
||
>
|
||
<UnitTypesSlider categoryName={selectedCategorySlider} />
|
||
</motion.div>
|
||
</div>
|
||
</AnimatePresence>
|
||
</div>
|
||
|
||
{/* Apartments */}
|
||
<div className="text-center relative w-full flex flex-col items-center gap-[2.222vw] bg-white max-md:gap-[6.667vw] max-2xl:gap-[3.125vw]">
|
||
<h1 className="font-mixcase-unmixed text-[3.889vw] text-[#0D1922] w -[44.861vw] leading-[100%] tracking-[-0.05em] pt-[8.056vw] max-md:text-[6.667vw] max-md:w-full max-2xl:text-[7.292vw] max-2xl:w-[84.115vw]">
|
||
{`Modular Office Collection:`}
|
||
<p className="opacity-40">
|
||
Combinable units
|
||
</p>
|
||
</h1>
|
||
<p className="text-s text-[#0D1922B2] leading-[140%] tracking-[-0.02em] whitespace-pre-line">
|
||
{`Enjoy the option to combine 2 offices and create a
|
||
larger space and configuration.`}
|
||
</p>
|
||
<div className="flex gap-4 relative max-md:flex-col max-md:gap-[2.222vw] max-md:w-full max-md:px-[4.444vw] max-2xl:mt-[7.292vw]">
|
||
<div
|
||
className="w-[19.028vw] text-[#0D1922] h-[27.778vw] p-[1.667vw] rounded-2xl bg-[#F3F3F2] text-left bg-[url(/images/about-complex/hq/combinable/Studio.png)] bg-[length:16.806vw_16.806vw] bg-no-repeat bg-center
|
||
max-md:w-full max-md:h-[75.556vw] max-md:bg-[length:47.778vw_47.778vw] max-md:p-[4.444vw] max-2xl:w-[25.521vw] max-2xl:h-[34.375vw]"
|
||
>
|
||
<h4 className="text-h4 tracking-[-0.02em] font-[500] max-md:text-h5">
|
||
Studio
|
||
</h4>
|
||
</div>
|
||
<div
|
||
className="w-10 h-10 rounded-full bg-[#0D1922] flex items-center justify-center absolute left-[18.500vw] self-center
|
||
max-md:top-[71.111vw] max-md:left-[45vw] max-2xl:top-[14.583vw] max-2xl:left-[24vw]"
|
||
>
|
||
<span className="w-5 h-5 text-white">
|
||
<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/hq/combinable/Studio.png)] bg-[length:16.806vw_16.806vw] bg-no-repeat bg-center
|
||
max-md:w-full max-md:h-[75.556vw] max-md:bg-[length:47.778vw_47.778vw] max-md:p-[4.444vw] max-2xl:w-[25.521vw] max-2xl:h-[34.375vw]"
|
||
>
|
||
<h4 className="text-h4 tracking-[-0.02em] font-[500] max-md:text-h5">
|
||
Studio
|
||
</h4>
|
||
</div>
|
||
<div
|
||
className="w-10 h-10 rounded-full bg-[#0D1922] flex items-center justify-center absolute left-[38.333vw] self-center
|
||
max-md:top-[148.611vw] max-md:left-[45vw] max-2xl:top-[14.583vw] max-2xl:left-[52vw]"
|
||
>
|
||
<span className="w-5 h-5 text-white">
|
||
<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/hq/combinable/Deluxe.png)] bg-[length:25vw_25vw] bg-no-repeat bg-center
|
||
max-md:w-full max-md:h-[111.111vw] max-md:bg-[length:71.111vw_71.111vw] max-md:p-[4.444vw] max-2xl:w-[40.625vw] max-2xl:h-[34.375vw]"
|
||
>
|
||
<h4 className="text-h4 tracking-[-0.02em] font-[500] max-md:text-h5">
|
||
Deluxe
|
||
</h4>
|
||
</div>
|
||
</div>
|
||
<h5 className="2xl:hidden text-h5 text-[#0D1922B2] max-md:block">
|
||
or
|
||
</h5>
|
||
<div className="flex gap-4 relative max-md:flex-col max-md:gap-[2.222vw] max-md:w-full max-md:px-[4.444vw]">
|
||
<div
|
||
className="w-[19.028vw] text-[#0D1922] h-[27.778vw] p-6 rounded-2xl bg-[#F3F3F2] text-left bg-[url(/images/about-complex/hq/combinable/Studio.png)] bg-[length:16.806vw_16.806vw] bg-no-repeat bg-center
|
||
max-md:w-full max-md:h-[75.556vw] max-md:bg-[length:38.889vw_52.5vw] max-md:p-[4.444vw] max-2xl:w-[25.521vw] max-2xl:h-[34.375vw]"
|
||
>
|
||
<h4 className="text-h4 tracking-[-0.02em] font-[500] max-md:text-h5">
|
||
Studio
|
||
</h4>
|
||
</div>
|
||
<div
|
||
className="w-10 h-10 rounded-full bg-[#0D1922] flex items-center justify-center absolute left-[18.500vw] self-center
|
||
max-md:top-[71.111vw] max-md:left-[45vw] max-2xl:top-[14.583vw] max-2xl:left-[24vw]"
|
||
>
|
||
<span className="w-5 h-5 text-white">
|
||
<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/hq/combinable/Deluxe.png)] bg-[length:25vw_25vw] bg-no-repeat bg-center
|
||
max-md:w-full max-md:h-[75.556vw] max-md:bg-[length:71.111vw_71.111vw] max-md:p-[4.444vw] max-2xl:w-[33.073vw] max-2xl:h-[34.375vw]"
|
||
>
|
||
<h4 className="text-h4 tracking-[-0.02em] font-[500] max-md:text-h5">
|
||
Deluxe
|
||
</h4>
|
||
</div>
|
||
<div
|
||
className="w-10 h-10 rounded-full bg-[#0D1922] flex items-center justify-center absolute left-[50.300vw] self-center
|
||
max-md:top-[148.611vw] max-md:left-[45vw] max-2xl:top-[14.583vw] max-2xl:left-[59vw]"
|
||
>
|
||
<span className="w-5 h-5 text-white">
|
||
<EqualIcon />
|
||
</span>
|
||
</div>
|
||
<div
|
||
className="w-[43.125vw] text-[#0D1922] h-[27.778vw] p-6 rounded-2xl bg-[#F3F3F2] text-left bg-[url(/images/about-complex/hq/combinable/Executive.png)] bg-no-repeat bg-center
|
||
max-md:w-full max-md:h-[111.111vw] 2xl:bg-[length:36.111vw-36.111vw] md:bg-[length:30.208vw_30.208vw] bg-[length:91.111vw_91.111vw] max-md:p-[4.444vw] max-2xl:w-[33.073vw] max-2xl:h-[34.375vw]"
|
||
>
|
||
<h4 className="text-h4 tracking-[-0.02em] font-[500] max-md:text-h5">
|
||
Executive
|
||
</h4>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Map */}
|
||
<section className="bg-white relative w-full overflow-clip flex flex-col gap-[3.333vw] 2xl:pt-[9.444vw] 2xl:px-[2.222vw] 2xl:pb-[2.222vw] md:max-2xl:pt-[104px] md:max-2xl:px-6 pt-16 px-4 pb-8 md:max-2xl:pb-6 md:max-2xl:gap-[6.25vw]">
|
||
<div className="flex flex-col gap-[2.222vw] items-center max-md:gap-[8.889vw] md:max-2xl:gap-[4.167vw]">
|
||
<h2 className="text-h1 font-mixcase-unmixed">
|
||
Seamlessly connected
|
||
</h2>
|
||
<p className="text-s opacity-70 whitespace-pre-line text-center max-md:mb-[48px] max-md:whitespace-normal">
|
||
{`From the Dubai Canal at your doorstep to Sheikh Zayed Road in minutes, with
|
||
Downtown, DIFC and d3 all close by, you’re never far from the city’s pulse.`}
|
||
</p>
|
||
</div>
|
||
<div className="grid grid-cols-6 grid-rows-5 gap-x-[1.111vw] gap-y-[0.556vw] max-2xl:hidden">
|
||
{marasiDriveMapCards.map((card) => (
|
||
<MarasiDriveMapCard {...card} key={card.title} />
|
||
))}
|
||
<div className="col-start-3 col-span-full row-start-1 row-span-full">
|
||
<img
|
||
src="/images/about-complex/marasi-drive/map/map.png"
|
||
alt=""
|
||
className="object-cover size-full 2xl:rounded-[1.667vw]"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<MarasiDriveMapMobile />
|
||
</section>
|
||
|
||
{/* Brochures */}
|
||
<section className="bg-white relative w-full overflow-clip flex items-stretch justify-center gap-[1.111vw] 2xl:px-[10.278vw] 2xl:pt-[9.444vw] 2xl:pb-[15vw] md:max-2xl:py-[104px] md:mx-2xl:px-6 max-md:pt-20 max-md:pb-12 px-4 max-2xl:flex-col-reverse md:max-2xl:gap-[6.25vw] md:max-2xl:px-6 max-mdmb-[13.333vw]">
|
||
<div className="flex-shrink-0 2xl:w-[39.167vw] 2xl:h-[19.861vw] md:w-full md:h-[52.083vw] w-[91.111vw] h-[111.111vw]">
|
||
<img
|
||
src="/images/about-complex/hq/brochures.jpg"
|
||
className="object-cover size-full rounded-[1.667vw] max-md:mt-[48px] max-md:aspect-[328/400] max-md:rounded-[6.667vw] md:max-2xl:rounded-[3.125vw] md:max-2xl:aspect-[720/400]"
|
||
alt=""
|
||
/>
|
||
</div>
|
||
<div className="px-[2.778vw] flex flex-col gap-[3.333vw] max-2xl:px-0 md:max-2xl:gap-[6.25vw]">
|
||
<div className="space-y-[1.111vw]">
|
||
<h2 className="whitespace-pre-line text-h2 font-medium max-2xl:mb-4">
|
||
{`Work looks different here`}
|
||
</h2>
|
||
<p className="opacity-40 text-s max-md:mb-[32px] md:max-2xl:max-w-[57.943vw]">
|
||
{`HQ by Rove sets its own standard. A place designed with people at
|
||
its heart, where hospitality meets productivity, and work finds its flow.`}
|
||
</p>
|
||
</div>
|
||
<div className="space-y-[1.111vw]">
|
||
<h5 className="text-h5 font-medium max-md:mb-[16px] md:max-2xl:mb-[2.083vw]">
|
||
Download our brochures
|
||
</h5>
|
||
<div className="space-y-[0.833vw] max-md:space-y-[3.333vw] md:max-2xl:space-y-[1.563vw]">
|
||
<BrochureButton
|
||
title={"Main Brochure"}
|
||
link="/files/marasi-drive/Main Brochure.pdf"
|
||
/>
|
||
<BrochureButton
|
||
title={"Technical Brochure"}
|
||
link="/files/marasi-drive/Amenties Brochure.pdf"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
)
|
||
} |