283 lines
13 KiB
TypeScript
283 lines
13 KiB
TypeScript
import {
|
|
marasiDriveFeatures,
|
|
marasiDriveDescriptionBadges,
|
|
marasiDriveMapCards,
|
|
} from "../data/aboutMarasiDrive";
|
|
import MarariDriveNeighboursSliderDesktop from "./MarasiDriveNeighboursSliderDesktop";
|
|
import MarasiDriveInteriorsSlider from "./MarasiDriveInteriorsSlider";
|
|
import TextBox from "./ui/TextBox";
|
|
import { useRef } from "react";
|
|
import { useScroll } from "motion/react";
|
|
import MarasiDriveMapCard from "./MarasiDriveMapCard";
|
|
import BrochureButton from "./ui/BrochureButton";
|
|
import MarasiDriveNeighboursSliderTablet from "./MarasiDriveNeighboursSliderTablet";
|
|
|
|
function AboutMarasiDrive() {
|
|
const target = useRef<HTMLDivElement>(null);
|
|
|
|
const { scrollYProgress } = useScroll({
|
|
target,
|
|
});
|
|
|
|
return (
|
|
<div className="relative">
|
|
<div className="2xl:sticky relative 2xl:top-[4.444vw]">
|
|
<section className="w-full bg-white 2xl:h-[calc(100dvh-4.444vw)] md:max-2xl:h-[calc(100dvh-64px)] h-[calc(100dvh-56px)] 2xl:p-[2.222vw] 2xl:pt-[5vw] md:max-2xl:p-6 md:max-2xl:pt-10 p-4 pt-8 flex flex-col justify-between">
|
|
<div className="absolute inset-0">
|
|
<img
|
|
src="/images/about-complex/marasi-drive/main_c.jpg"
|
|
alt=""
|
|
className="object-cover max-2xl:hidden w-full h-full"
|
|
/>
|
|
<img
|
|
src="/images/about-complex/marasi-drive/main-tablet_c.jpg"
|
|
alt=""
|
|
className="object-cover md:max-2xl:block hidden w-full"
|
|
/>
|
|
<img
|
|
src="/images/about-complex/marasi-drive/main-mobile_c.jpg"
|
|
alt=""
|
|
className="object-cover md:hidden size-full"
|
|
/>
|
|
</div>
|
|
|
|
<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
|
|
Marasi Drive`}
|
|
</h1>
|
|
<div className="2xl:space-y-[0.556vw] space-y-2">
|
|
{marasiDriveDescriptionBadges.map((description) => (
|
|
<TextBox text={description} key={description} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="2xl:space-y-[2.222vw] md:max-2xl:space-y-6 relative max-md:hidden">
|
|
<h4 className="text-h4 text-[#00BED7] font-medium whitespace-pre-line">
|
|
{`A home for the young
|
|
and young in heart`}
|
|
</h4>
|
|
<p className="text-s opacity-70 2xl:w-1/4 md:max-2xl:w-1/3">
|
|
The dynamic essence of Rove comes to life at our new location in
|
|
Marasi Drive, Business Bay. Enjoy an urban living experience
|
|
beyond the ordinary.
|
|
</p>
|
|
</div>
|
|
</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">
|
|
{`A home for the young
|
|
and young in heart`}
|
|
</h4>
|
|
<p className="text-s opacity-70">
|
|
The dynamic essence of Rove comes to life at our new location in
|
|
Marasi Drive, Business Bay. Enjoy an urban living experience
|
|
beyond the ordinary.
|
|
</p>
|
|
</div>
|
|
</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">
|
|
<h2 className="font-mixcase-unmixed text-h1 text-center max-md:whitespace-pre-line">
|
|
{`What makes
|
|
a Rove Home?`}
|
|
</h2>
|
|
<p className="opacity-70 text-s whitespace-pre-line text-center">
|
|
{`Experience the difference with Rove Home where modern amenities, trendy
|
|
interiors, and smart features cater to your unique style. Rove Home is your
|
|
destination for artful inspiration and cleverly activated spaces.`}
|
|
</p>
|
|
</div>
|
|
<div className="flex max-2xl:flex-wrap max-2xl:justify-center 2xl:gap-[0.556vw] gap-2 md:max-2xl:w-[93.75vw]">
|
|
{marasiDriveFeatures.map(({ image, name }) => (
|
|
<div key={name} className="md:max-2xl:w-[30.208vw]">
|
|
<img
|
|
src={image}
|
|
alt={name}
|
|
className="object-cover rounded-[1.667vw]"
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
<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 2xl:gap-[2.222vw] md:max-2xl:gap-8 gap-6 items-center">
|
|
<h2 className="font-mixcase-unmixed text-h1 text-center max-md:whitespace-pre-line">
|
|
{`Expandable living
|
|
solutions`}
|
|
</h2>
|
|
<p className="text-s opacity-70 whitespace-pre-line text-center">
|
|
{`ORI introduces a revolutionary solution to apartment living,
|
|
where space is not just a constraint but an opportunity.`}
|
|
</p>
|
|
<div className="flex 2xl:gap-[0.556vw] gap-2">
|
|
{["Simple", "Safe", "Effortless"].map((text) => (
|
|
<TextBox key={text} text={text} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="2xl:flex max-2xl:grid 2xl:grid-cols-3 md:max-2xl:grid-cols-2 grid-cols-1 2xl:gap-[1.111vw] gap-4">
|
|
<div>
|
|
<img
|
|
src="/images/about-complex/marasi-drive/living_solution1.jpg"
|
|
alt=""
|
|
className="2xl:rounded-[1.111vw] rounded-2xl w-full object-cover md:max-2xl:aspect-square"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<img
|
|
src="/images/about-complex/marasi-drive/living_solution2.jpg"
|
|
alt=""
|
|
className="2xl:rounded-[1.111vw] rounded-2xl w-full object-cover md:max-2xl:aspect-square"
|
|
/>
|
|
</div>
|
|
<div className="md:max-2xl:col-span-2">
|
|
<img
|
|
src="/images/about-complex/marasi-drive/living_solution3.jpg"
|
|
alt=""
|
|
className="2xl:rounded-[1.111vw] rounded-2xl w-full object-cover max-2xl:aspect-[12/9]"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section className="bg-white w-full overflow-clip flex flex-col 2xl:gap-[4.444vw] gap-12 2xl:pt-[9.444vw] 2xl:pb-[15vw] 2xl:px-[2.222vw] md:max-2xl:pt-[104px] md:max-2xl:px-6 md:max-2xl:pb-8 pt-16 px-4 max-md:pb-8">
|
|
<div className="flex flex-col 2xl:gap-[2.222vw] md:max-2xl:gap-8 gap-6 items-center">
|
|
<h2 className="font-mixcase-unmixed text-h1 text-center">
|
|
Inspired interiors
|
|
</h2>
|
|
<p className="text-s opacity-70 whitespace-pre-line text-center">
|
|
{`Smart, flexible designs maximize every inch. The ORI Cloud Bed
|
|
expands space by 33%, while the Flexibed transforms living areas
|
|
into bedrooms. Multipurpose layouts adapt effortlessly—blending
|
|
innovation with modern urban living.`}
|
|
</p>
|
|
</div>
|
|
<MarasiDriveInteriorsSlider />
|
|
</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">
|
|
<h2 className="font-mixcase-unmixed text-h1 text-center whitespace-pre-line">
|
|
{`A home for the young
|
|
and young in heart`}
|
|
</h2>
|
|
<p className="text-s opacity-70 whitespace-pre-line text-center">
|
|
{`The dynamic essence of Rove comes to life at our new
|
|
location in Marasi Drive, Business Bay. Enjoy an urban
|
|
living experience beyond the ordinary.`}
|
|
</p>
|
|
</div>
|
|
<img
|
|
className="2xl:rounded-[1.667vw] rounded-2xl max-md:aspect-[4/3] object-cover"
|
|
src="/images/about-complex/marasi-drive/business_bay.jpg"
|
|
alt=""
|
|
/>
|
|
</section>
|
|
<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}
|
|
>
|
|
<<<<<<< HEAD
|
|
<div className="flex flex-col 2xl:gap-[4.444vw] md:max-2xl:gap-16 gap-12 2xl:sticky top-[5vw]">
|
|
<div className="flex flex-col items-center 2xl:gap-[2.222vw] md:max-2xl:gap-8 gap-6">
|
|
=======
|
|
<div className="flex flex-col 2xl:gap-[4.444vw] 2xl:sticky top-[5vw]">
|
|
<div className="flex flex-col items-center 2xl:gap-[2.222vw]">
|
|
>>>>>>> a525a4a9481a4a4b333e73abb9a0e85f94286184
|
|
<h2 className="font-mixcase-unmixed text-h1 text-center whitespace-pre-line">
|
|
{`Explore the neighbourhood`}
|
|
</h2>
|
|
<p className="text-s opacity-70 whitespace-pre-line text-center">
|
|
{`With Dubai's trendiest spots right at your doorstep, explore nearby
|
|
entertainment and dining experiences in just 15 minutes. Live your best life
|
|
at Rove Home Marasi Drive!`}
|
|
</p>
|
|
</div>
|
|
<MarariDriveNeighboursSliderDesktop
|
|
scrollYProgress={scrollYProgress}
|
|
/>
|
|
<MarasiDriveNeighboursSliderTablet />
|
|
</div>
|
|
</section>
|
|
<section className="bg-white 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 md:max-2xl:pb-8 pt-16 px-4 pb-8">
|
|
<div className="flex flex-col gap-[2.222vw] items-center">
|
|
<h2 className="text-h1 font-mixcase-unmixed">
|
|
Rove around the city
|
|
</h2>
|
|
<p className="text-s opacity-70 whitespace-pre-line text-center">
|
|
{`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>
|
|
</div>
|
|
<div className="grid grid-cols-6 grid-rows-5 gap-x-[1.111vw] gap-y-[0.556vw]">
|
|
{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>
|
|
</section>
|
|
<section className="bg-white 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">
|
|
<div>
|
|
<img
|
|
src="/images/about-complex/marasi-drive/podium.png"
|
|
className="object-cover size-full rounded-[1.667vw]"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div className="px-[2.778vw] flex flex-col gap-[3.333vw]">
|
|
<div className="space-y-[1.111vw]">
|
|
<h2 className="whitespace-pre-line text-h2 font-medium">
|
|
{`Live Different
|
|
with Rove Home`}
|
|
</h2>
|
|
<p className="opacity-40 text-s">
|
|
{`Experience the difference with Rove Home where modern amenities,
|
|
trendy interiors, and smart features cater to your unique style.`}
|
|
</p>
|
|
</div>
|
|
<div className="space-y-[1.111vw]">
|
|
<h5 className="text-h5 font-medium">Download our brochures</h5>
|
|
<div className="space-y-[0.833vw]">
|
|
<BrochureButton
|
|
title={"Main Brochure"}
|
|
link="/files/marasi-drive/Main Brochure.pdf"
|
|
/>
|
|
<BrochureButton
|
|
title={"Amenties Brochure"}
|
|
link="/files/marasi-drive/Amenties Brochure.pdf"
|
|
/>
|
|
<BrochureButton
|
|
title={"Technical Brochure"}
|
|
link="/files/marasi-drive/Technical Brochure.pdf"
|
|
/>
|
|
<BrochureButton
|
|
title={"Factsheet"}
|
|
link="/files/marasi-drive/Factsheet.pdf"
|
|
/>
|
|
<BrochureButton
|
|
title={"Reasons to buy"}
|
|
link="/files/marasi-drive/Reasons to Buy.pdf"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default AboutMarasiDrive;
|