Merge branch 'main' of http://192.168.1.163:3000/inmake/irth-new-client
This commit is contained in:
Binary file not shown.
|
After Width: | Height: | Size: 466 KiB |
+14
-14
@@ -1,15 +1,15 @@
|
|||||||
import { useEffect, useState } from 'react';
|
import { useEffect, useState } from "react";
|
||||||
import ArrowLeftIcon from './icons/ArrowLeftIcon';
|
import ArrowLeftIcon from "./icons/ArrowLeftIcon";
|
||||||
import ArrowRightIcon from './icons/ArrowRightIcon';
|
import ArrowRightIcon from "./icons/ArrowRightIcon";
|
||||||
import { dubaiMarinaSlider } from '../data/aboutDubaiMarina';
|
import { dubaiMarinaSlider } from "../data/aboutDubaiMarina";
|
||||||
import { AnimatePresence, motion } from 'motion/react';
|
import { AnimatePresence, motion } from "motion/react";
|
||||||
import { useSwipeable } from 'react-swipeable';
|
import { useSwipeable } from "react-swipeable";
|
||||||
import Button from './ui/Button';
|
import Button from "./ui/Button";
|
||||||
|
|
||||||
function Slider({
|
function Slider({
|
||||||
categoryName,
|
categoryName,
|
||||||
}: {
|
}: {
|
||||||
categoryName: 'Wellness' | 'Fitness' | 'Community' | 'Convenience';
|
categoryName: "Wellness" | "Fitness" | "Community" | "Convenience";
|
||||||
}) {
|
}) {
|
||||||
const [currentSlide, setCurrentSlide] = useState(0);
|
const [currentSlide, setCurrentSlide] = useState(0);
|
||||||
const [direction, setDirection] = useState(-1);
|
const [direction, setDirection] = useState(-1);
|
||||||
@@ -45,7 +45,7 @@ function Slider({
|
|||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
{...handlers}
|
{...handlers}
|
||||||
className='relative w-[63.333vw] h-[27.639vw] rounded-3xl overflow-hidden max-md:w-[91.111vw] max-md:h-[110.556vw]'
|
className='relative w-[63.333vw] h-[27.639vw] rounded-3xl overflow-hidden max-md:w-[91.111vw] max-md:h-[110.556vw] max-2xl:w-[93.75vw] max-2xl:h-[51.823vw]'
|
||||||
>
|
>
|
||||||
<AnimatePresence custom={direction} initial={false}>
|
<AnimatePresence custom={direction} initial={false}>
|
||||||
<motion.div
|
<motion.div
|
||||||
@@ -55,11 +55,11 @@ function Slider({
|
|||||||
backgroundImage: `url(${dubaiMarinaSlider[categoryName][currentSlide].image})`,
|
backgroundImage: `url(${dubaiMarinaSlider[categoryName][currentSlide].image})`,
|
||||||
}}
|
}}
|
||||||
custom={direction}
|
custom={direction}
|
||||||
initial={{ x: direction > 0 ? '100%' : '-100%' }}
|
initial={{ x: direction > 0 ? "100%" : "-100%" }}
|
||||||
animate={{ x: 0, transition: { duration: 0.5, ease: 'easeInOut' } }}
|
animate={{ x: 0, transition: { duration: 0.5, ease: "easeInOut" } }}
|
||||||
exit={{
|
exit={{
|
||||||
x: direction > 0 ? '100%' : '-100%',
|
x: direction > 0 ? "100%" : "-100%",
|
||||||
transition: { duration: 0.8, ease: 'easeInOut' },
|
transition: { duration: 0.8, ease: "easeInOut" },
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</AnimatePresence>
|
</AnimatePresence>
|
||||||
@@ -80,7 +80,7 @@ function Slider({
|
|||||||
<AnimatePresence mode='wait'>
|
<AnimatePresence mode='wait'>
|
||||||
<motion.p
|
<motion.p
|
||||||
key={`desc-${currentSlide}`}
|
key={`desc-${currentSlide}`}
|
||||||
className='text-s w-[19.861vw] tracking-[-0.02em] leading-[140%] text-white max-md:w-full max-md:text-caption-m'
|
className='text-s w-[19.861vw] tracking-[-0.02em] leading-[140%] text-white max-md:w-full max-md:text-caption-m max-2xl:w-[37.24vw]'
|
||||||
initial={{ opacity: 0 }}
|
initial={{ opacity: 0 }}
|
||||||
animate={{ opacity: 1 }}
|
animate={{ opacity: 1 }}
|
||||||
exit={{ opacity: 0 }}
|
exit={{ opacity: 0 }}
|
||||||
|
|||||||
+107
-91
@@ -54,44 +54,46 @@ function AboutComplexPage() {
|
|||||||
});
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="relative bg-white" ref={containerRef}>
|
<div className='relative bg-white' ref={containerRef}>
|
||||||
<motion.section
|
<motion.section
|
||||||
className="md:h-[calc(100dvh-4.444vw)] w-full bg-white text-black md:fixed top-[4.444vw] left-0 right-0 z-0 max-md:top-[15.556vw]]
|
className='2xl:h-[calc(100dvh-4.444vw)] w-full bg-white text-black 2xl:fixed top-[4.444vw] left-0 right-0 z-0 max-md:top-[15.556vw]]
|
||||||
max-md:bg-[url(/images/about-complex/dubai-marina/tower-mobile.png)] max-md:bg-cover max-md:bg-top max-md:bg-no-repeat max-md:aspect-[360/584]"
|
max-md:bg-[url(/images/about-complex/dubai-marina/tower-mobile.png)] max-md:bg-cover max-md:bg-top max-md:bg-no-repeat max-md:aspect-[360/584]
|
||||||
|
max-2xl:bg-[url(/images/about-complex/dubai-marina/tower-tablet.png)] max-2xl:bg-cover max-2xl:bg-top max-2xl:bg-no-repeat max-2xl:aspect-[768/960]
|
||||||
|
'
|
||||||
style={{
|
style={{
|
||||||
opacity: width > 768 ? firstSectionOpacity : 1,
|
opacity: width > 1439 ? firstSectionOpacity : 1,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div className="absolute inset-0 max-md:relative">
|
<div className='absolute inset-0 2xl:'>
|
||||||
<img
|
<img
|
||||||
src="/images/about-complex/dubai-marina/tower.jpg"
|
src='/images/about-complex/dubai-marina/tower.jpg'
|
||||||
alt="dubai marina about"
|
alt='dubai marina about'
|
||||||
className="h-full w-full object-contain object-bottom max-md:hidden"
|
className='h-full w-full object-contain object-bottom max-2xl:hidden'
|
||||||
/>
|
/>
|
||||||
<img
|
<img
|
||||||
src="/images/about-complex/dubai-marina/logo.png"
|
src='/images/about-complex/dubai-marina/logo.png'
|
||||||
alt="dubai marina about"
|
alt='dubai marina about'
|
||||||
className="absolute top-[5vw] right-[2.778vw] w-[9.931vw] h-[4.444vw] max-md:top-[6.667vw] max-md:right-[4.444vw] max-md:w-[21.389vw] max-md:h-[9.444vw]"
|
className='absolute top-[5vw] right-[2.778vw] w-[9.931vw] h-[4.444vw] max-md:top-[6.667vw] max-md:right-[4.444vw] max-md:w-[21.389vw] max-md:h-[9.444vw] max-2xl:w-[18.62vw] max-2xl:h-[8.333vw]'
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="relative h-full flex flex-col justify-between 2xl:gap-[4.444vw] flex-1 w-full pt-[5vw] pb-[2.5vw] pl-[2.222vw] max-md:px-[4.444vw] max-md:block ">
|
<div className='relative h-full flex flex-col justify-between 2xl:gap-[4.444vw] flex-1 w-full pt-[5vw] pb-[2.5vw] pl-[2.222vw] max-md:px-[4.444vw] max-md:block '>
|
||||||
<div className="font-bold whitespace-pre-line space-y-8 max-md:space-y-4">
|
<div className='font-bold whitespace-pre-line space-y-8 max-md:space-y-4'>
|
||||||
<h1 className="text-[5vw] leading-none tracking-[-0.07em] font-mixcase-unmixed font-[500] max-md:text-[8.889vw]">
|
<h1 className='text-[5vw] leading-none tracking-[-0.07em] font-mixcase-unmixed font-[500] max-md:text-[8.889vw] max-2xl:text-[9.375vw]'>
|
||||||
{`Rove Home
|
{`Rove Home
|
||||||
Dubai Marina`}
|
Dubai Marina`}
|
||||||
</h1>
|
</h1>
|
||||||
<div className="space-y-2 font-[400]">
|
<div className='space-y-2 font-[400]'>
|
||||||
{roveHomeDescription.map((description) => (
|
{roveHomeDescription.map((description) => (
|
||||||
<TextBox text={description} key={description} />
|
<TextBox text={description} key={description} />
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="space-y-8 max-md:hidden">
|
<div className='space-y-8 max-md:hidden'>
|
||||||
<h4 className="text-h4 text-[#00BED7] font-[500] whitespace-pre-line">
|
<h4 className='text-h4 text-[#00BED7] font-[500] whitespace-pre-line'>
|
||||||
{`Own the last slice of
|
{`Own the last slice of
|
||||||
Dubai Marina, ROVE Style`}
|
Dubai Marina, ROVE Style`}
|
||||||
</h4>
|
</h4>
|
||||||
<p className="text-s text-[#0D1922B2] whitespace-pre-line ">
|
<p className='text-s text-[#0D1922B2] max-md:whitespace-pre-line min-2xl:whitespace-pre-line max-2xl:w-[34vw]'>
|
||||||
{`With an extended playlist of life-enhancing
|
{`With an extended playlist of life-enhancing
|
||||||
amenities, Rove Home is a complete ecosystem
|
amenities, Rove Home is a complete ecosystem
|
||||||
that has everything you'll ever need.`}
|
that has everything you'll ever need.`}
|
||||||
@@ -100,67 +102,77 @@ function AboutComplexPage() {
|
|||||||
</div>
|
</div>
|
||||||
</motion.section>
|
</motion.section>
|
||||||
<motion.section
|
<motion.section
|
||||||
className="w-full text-white bg-white flex justify-center max-md:top-0 max-md:overflow-x-clip"
|
className='w-full text-white bg-white flex justify-center max-md:top-0 max-md:overflow-x-clip'
|
||||||
style={{
|
style={{
|
||||||
y: width > 768 ? secondSectionY : 0,
|
y: width > 1439 ? secondSectionY : 0,
|
||||||
zIndex: 1,
|
zIndex: 1,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div className="w-full">
|
<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]">
|
<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 min-md:hidden self-start'>
|
||||||
<h4 className="text-h4 text-[#00BED7] font-[500] whitespace-pre-line">
|
<h4 className='text-h4 text-[#00BED7] font-[500] whitespace-pre-line'>
|
||||||
{`Own the last slice of Dubai
|
{`Own the last slice of Dubai
|
||||||
Marina, ROVE Style`}
|
Marina, ROVE Style`}
|
||||||
</h4>
|
</h4>
|
||||||
<p className="text-s text-[#0D1922B2] whitespace-pre-line ">
|
<p className='text-s text-[#0D1922B2] whitespace-pre-line '>
|
||||||
{`With an extended playlist of life-enhancing
|
{`With an extended playlist of life-enhancing
|
||||||
amenities, Rove Home is a complete ecosystem
|
amenities, Rove Home is a complete ecosystem
|
||||||
that has everything you'll ever need.`}
|
that has everything you'll ever need.`}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="2xl:px-[2.222vw] flex pt-[7.222vw] flex-col items-center gap-[2.222vw] max-md:pt-[17.778vw]">
|
<div className='2xl:px-[2.222vw] flex pt-[7.222vw] flex-col items-center gap-[2.222vw] max-md:pt-[17.778vw]'>
|
||||||
<h1 className="text-[3.889vw] text-[#0D1922] font-mixcase-unmixed max-md:text-[6.667vw]">
|
<h1 className='text-[3.889vw] text-[#0D1922] font-mixcase-unmixed max-md:text-[6.667vw] max-2xl:text-[7.682vw]'>
|
||||||
Rove Home has it all
|
Rove Home has it all
|
||||||
</h1>
|
</h1>
|
||||||
<p className="text-s text-[#0D1922B2] text-center tracking-[-0.02em] whitespace-pre-line">
|
<p className='text-s text-[#0D1922B2] text-center tracking-[-0.02em] whitespace-pre-line'>
|
||||||
{`Rove Home Dubai Marina features modern-day
|
{`Rove Home Dubai Marina features modern-day
|
||||||
conveniences, carefully curated for an active
|
conveniences, carefully curated for an active
|
||||||
and social lifestyle.`}
|
and social lifestyle.`}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex gap-[0.556vw] mt-[0.833vw] 2xl:h-[26.667vw] max-md:pl-[4.444vw] max-md:pr-[2vw] max-md:gap-[2.222vw] max-md:snap-x max-md:snap-mandatory max-md:py-[6.667vw] max-md:overflow-x-auto max-md:self-start max-md:w-screen max-md:-ml-[4.444vw] ">
|
<div
|
||||||
|
className='flex gap-[0.556vw] mt-[0.833vw] 2xl:h-[26.667vw] max-md:pl-[4.444vw] max-md:pr-[2vw] max-md:gap-[2.222vw] max-md:snap-x max-md:snap-mandatory max-md:py-[6.667vw] max-md:overflow-x-auto max-md:self-start max-md:w-screen max-md:-ml-[4.444vw] max-md:flex-nowrap max-md:justify-start
|
||||||
|
max-2xl:flex-wrap max-2xl:justify-center'
|
||||||
|
>
|
||||||
{dubaiMarinaFeatures.map((feature) => (
|
{dubaiMarinaFeatures.map((feature) => (
|
||||||
<div
|
<div
|
||||||
key={feature.name}
|
key={feature.name}
|
||||||
className={`rounded-3xl flex-1 md:h-[26.667vw] w-full flex flex-col items-center py-[1.667vw] justify-end bg-cover bg-center bg-no-repeat relative before:absolute before:inset-0 before:bg-[#0D1922]/10 before:z-1 before:rounded-3xl
|
className={`rounded-3xl 2xl:flex-1 2xl:h-[26.667vw] w-full flex flex-col items-center py-[1.667vw] justify-end bg-cover bg-center bg-no-repeat relative before:absolute before:inset-0 before:bg-[#0D1922]/10 before:z-1 before:rounded-3xl
|
||||||
max-md:w-[91.111vw] max-md:flex-none aspect-[268/384] max-md:aspect-[328/287] max-md:snap-alwaysa max-md:snap-center max-md:py-[4.444vw]`}
|
max-2xl:w-[30.208vw] max-2xl:h-[41.146vw] max-2xl:flex-wrap
|
||||||
|
max-md:w-[91.111vw] max-md:h-[79.722vw] max-md:flex-none aspect-[268/384] max-md:aspect-[328/287] max-md:snap-alwaysa max-md:snap-center max-md:py-[4.444vw]
|
||||||
|
`}
|
||||||
style={{
|
style={{
|
||||||
backgroundImage: `url(${feature.image})`,
|
backgroundImage: `url(${feature.image})`,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<h5 className="text-h5 text-white tracking-[-0.02em] z-2">
|
<h5 className='text-h5 text-white tracking-[-0.02em] z-2'>
|
||||||
{feature.name}
|
{feature.name}
|
||||||
</h5>
|
</h5>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col items-center pt-[4.444vw] px-8 gap-[4.444vw] max-md:px-[4.444vw]">
|
<div className='flex 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">
|
<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>
|
Dubai, <span className='text-[#0D192266]'>within reach</span>
|
||||||
</h1>
|
</h1>
|
||||||
<SliderMobile />
|
<SliderMobile />
|
||||||
<div className="flex w-full text-[#0D1922]/40 gap-[1.111vw] max-md:hidden">
|
<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]'
|
||||||
|
>
|
||||||
{dubaiMarinaDescription.map((descriptionItem) => (
|
{dubaiMarinaDescription.map((descriptionItem) => (
|
||||||
<div
|
<div
|
||||||
key={descriptionItem.title}
|
key={descriptionItem.title}
|
||||||
className="flex-1 text-center flex flex-col gap-[1.111vw] cursor-pointer hover:text-[#0D1922B2] transition-all duration-200"
|
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={() =>
|
onClick={() =>
|
||||||
setSelectedCategorySlider(descriptionItem.title)
|
setSelectedCategorySlider(descriptionItem.title)
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<div className="h-[2px] bg-gray-300 w-full"></div>
|
<div className='h-[2px] bg-gray-300 w-full'></div>
|
||||||
<h5
|
<h5
|
||||||
className={clsx(
|
className={clsx(
|
||||||
"text-h5 tracking-[-0.02em] mt-[0.556vw] font-[500]",
|
"text-h5 tracking-[-0.02em] mt-[0.556vw] font-[500]",
|
||||||
@@ -172,7 +184,7 @@ function AboutComplexPage() {
|
|||||||
</h5>
|
</h5>
|
||||||
<p
|
<p
|
||||||
className={clsx(
|
className={clsx(
|
||||||
"text-s leading-[125%] tracking-[-0.02em]",
|
"text-s leading-[125%] tracking-[-0.02em] w-[16.389vw] self-center max-2xl:w-[30.729vw] ",
|
||||||
descriptionItem.title === selectedCategorySlider &&
|
descriptionItem.title === selectedCategorySlider &&
|
||||||
"text-[#0D1922]"
|
"text-[#0D1922]"
|
||||||
)}
|
)}
|
||||||
@@ -182,10 +194,10 @@ function AboutComplexPage() {
|
|||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
<AnimatePresence mode="wait">
|
<AnimatePresence mode='wait'>
|
||||||
<div
|
<div
|
||||||
ref={sliderRef}
|
ref={sliderRef}
|
||||||
className="flex flex-col gap-8 max-md:hidden"
|
className='flex flex-col gap-8 max-md:hidden'
|
||||||
>
|
>
|
||||||
<motion.div
|
<motion.div
|
||||||
key={`slider-${selectedCategorySlider}`}
|
key={`slider-${selectedCategorySlider}`}
|
||||||
@@ -202,7 +214,7 @@ function AboutComplexPage() {
|
|||||||
</motion.div>
|
</motion.div>
|
||||||
<motion.div
|
<motion.div
|
||||||
key={`badges-${selectedCategorySlider}`}
|
key={`badges-${selectedCategorySlider}`}
|
||||||
className="flex gap-[0.556vw] w-[63.333vw] flex-wrap justify-center"
|
className='flex gap-[0.556vw] w-[63.333vw] flex-wrap justify-center max-2xl:w-[93.75vw]'
|
||||||
>
|
>
|
||||||
{sliderBadgesCategory[selectedCategorySlider].map(
|
{sliderBadgesCategory[selectedCategorySlider].map(
|
||||||
(badgeItem, index) => (
|
(badgeItem, index) => (
|
||||||
@@ -224,131 +236,135 @@ function AboutComplexPage() {
|
|||||||
</div>
|
</div>
|
||||||
</AnimatePresence>
|
</AnimatePresence>
|
||||||
</div>
|
</div>
|
||||||
<div className="text-center w-full flex flex-col items-center gap-[2.222vw] bg-white max-md:gap-[6.667vw]">
|
<div className='text-center 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">
|
<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]'>
|
||||||
Dubai's first-ever combinable Apartments
|
Dubai's first-ever combinable Apartments
|
||||||
</h1>
|
</h1>
|
||||||
<TextBox text="On-demand" />
|
<span className='max-2xl:mt-[1.042vw]'>
|
||||||
<p className="text-s text-[#0D1922B2] leading-[140%] tracking-[-0.02em] whitespace-pre-line">
|
<TextBox text='On-demand' />
|
||||||
|
</span>
|
||||||
|
<p className='text-s text-[#0D1922B2] leading-[140%] tracking-[-0.02em] whitespace-pre-line'>
|
||||||
{`Enjoy the option to combine 2 apartments and create
|
{`Enjoy the option to combine 2 apartments and create
|
||||||
a larger space and configuration.`}
|
a larger space and configuration.`}
|
||||||
</p>
|
</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]">
|
<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
|
<div
|
||||||
className="w-[19.028vw] text-[#0D1922] h-[27.778vw] p-[1.667vw] rounded-2xl bg-[#F3F3F2] text-left bg-[url(/images/about-complex/dubai-marina/studio.png)] bg-[length:7.778vw_17.847vw] bg-no-repeat bg-center
|
className='w-[19.028vw] text-[#0D1922] h-[27.778vw] p-[1.667vw] rounded-2xl bg-[#F3F3F2] text-left bg-[url(/images/about-complex/dubai-marina/studio.png)] bg-[length:7.778vw_17.847vw] bg-no-repeat bg-center
|
||||||
max-md:w-full max-md:h-[75.556vw] max-md:bg-[length:25.556vw_58.333vw] max-md:p-[4.444vw]"
|
max-md:w-full max-md:h-[75.556vw] max-md:bg-[length:25.556vw_58.333vw] 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">
|
<h4 className='text-h4 tracking-[-0.02em] font-[500] max-md:text-h5'>
|
||||||
Studio²
|
Studio²
|
||||||
</h4>
|
</h4>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
className="w-10 h-10 rounded-full bg-[#0D1922] flex items-center justify-center absolute left-[18.500vw] self-center
|
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-md:top-[71.111vw] max-md:left-[45vw] max-2xl:top-[14.583vw] max-2xl:left-[24vw]'
|
||||||
>
|
>
|
||||||
<span className="w-5 h-5">
|
<span className='w-5 h-5'>
|
||||||
<PlusIcon />
|
<PlusIcon />
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
className="w-[19.028vw] text-[#0D1922] h-[27.778vw] p-6 rounded-2xl bg-[#F3F3F2] text-left bg-[url(/images/about-complex/dubai-marina/studio.png)] bg-[length:7.778vw_17.847vw] bg-no-repeat bg-center
|
className='w-[19.028vw] text-[#0D1922] h-[27.778vw] p-6 rounded-2xl bg-[#F3F3F2] text-left bg-[url(/images/about-complex/dubai-marina/studio.png)] bg-[length:7.778vw_17.847vw] bg-no-repeat bg-center
|
||||||
max-md:w-full max-md:h-[75.556vw] max-md:bg-[length:25.556vw_58.333vw] max-md:p-[4.444vw]"
|
max-md:w-full max-md:h-[75.556vw] max-md:bg-[length:25.556vw_58.333vw] 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">
|
<h4 className='text-h4 tracking-[-0.02em] font-[500] max-md:text-h5'>
|
||||||
Studio²
|
Studio²
|
||||||
</h4>
|
</h4>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
className="w-10 h-10 rounded-full bg-[#0D1922] flex items-center justify-center absolute left-[38.333vw] self-center
|
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-md:top-[148.611vw] max-md:left-[45vw] max-2xl:top-[14.583vw] max-2xl:left-[52vw]'
|
||||||
>
|
>
|
||||||
<span className="w-5 h-5">
|
<span className='w-5 h-5'>
|
||||||
<EqualIcon />
|
<EqualIcon />
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
className="w-[30.972vw] text-[#0D1922] h-[27.778vw] p-6 rounded-2xl bg-[#F3F3F2] text-left bg-[url(/images/about-complex/dubai-marina/1_bedroom.png)] bg-[length:15.972vw_17.847vw] bg-no-repeat bg-center
|
className='w-[30.972vw] text-[#0D1922] h-[27.778vw] p-6 rounded-2xl bg-[#F3F3F2] text-left bg-[url(/images/about-complex/dubai-marina/1_bedroom.png)] bg-[length:15.972vw_17.847vw] bg-no-repeat bg-center
|
||||||
max-md:w-full max-md:h-[111.111vw] max-md:bg-[length:63.889vw_71.389vw] max-md:p-[4.444vw]"
|
max-md:w-full max-md:h-[111.111vw] max-md:bg-[length:63.889vw_71.389vw] 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">
|
<h4 className='text-h4 tracking-[-0.02em] font-[500] max-md:text-h5'>
|
||||||
1 Bedroom²
|
1 Bedroom²
|
||||||
</h4>
|
</h4>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<h5 className="2xl:hidden text-h5 text-[#0D1922B2]">or</h5>
|
<h5 className='2xl:hidden text-h5 text-[#0D1922B2] max-2xl:hidden'>
|
||||||
<div className="flex gap-4 relative max-md:flex-col max-md:gap-[2.222vw] max-md:w-full max-md:px-[4.444vw]">
|
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
|
<div
|
||||||
className="w-[19.028vw] text-[#0D1922] h-[27.778vw] p-6 rounded-2xl bg-[#F3F3F2] text-left bg-[url(/images/about-complex/dubai-marina/2_studio.png)] bg-[length:13.125vw_17.847vw] bg-no-repeat bg-center
|
className='w-[19.028vw] text-[#0D1922] h-[27.778vw] p-6 rounded-2xl bg-[#F3F3F2] text-left bg-[url(/images/about-complex/dubai-marina/2_studio.png)] bg-[length:13.125vw_17.847vw] 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-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">
|
<h4 className='text-h4 tracking-[-0.02em] font-[500] max-md:text-h5'>
|
||||||
Studio²
|
Studio²
|
||||||
</h4>
|
</h4>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
className="w-10 h-10 rounded-full bg-[#0D1922] flex items-center justify-center absolute left-[18.500vw] self-center
|
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-md:top-[71.111vw] max-md:left-[45vw] max-2xl:top-[14.583vw] max-2xl:left-[24vw]'
|
||||||
>
|
>
|
||||||
<span className="w-5 h-5">
|
<span className='w-5 h-5'>
|
||||||
<PlusIcon />
|
<PlusIcon />
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
className="w-[30.972vw] text-[#0D1922] h-[27.778vw] p-6 rounded-2xl bg-[#F3F3F2] text-left bg-[url(/images/about-complex/dubai-marina/1_bedroom_rotated.png)] bg-[length:17.847vw_13.681vw] bg-no-repeat bg-center
|
className='w-[30.972vw] text-[#0D1922] h-[27.778vw] p-6 rounded-2xl bg-[#F3F3F2] text-left bg-[url(/images/about-complex/dubai-marina/1_bedroom_rotated.png)] bg-[length:17.847vw_13.681vw] bg-no-repeat bg-center
|
||||||
max-md:w-full max-md:h-[75.556vw] max-md:bg-[length:56.111vw_43.056vw] max-md:p-[4.444vw]"
|
max-md:w-full max-md:h-[75.556vw] max-md:bg-[length:56.111vw_43.056vw] 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">
|
<h4 className='text-h4 tracking-[-0.02em] font-[500] max-md:text-h5'>
|
||||||
1 Bedroom²
|
1 Bedroom²
|
||||||
</h4>
|
</h4>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
className="w-10 h-10 rounded-full bg-[#0D1922] flex items-center justify-center absolute left-[50.300vw] self-center
|
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-md:top-[148.611vw] max-md:left-[45vw] max-2xl:top-[14.583vw] max-2xl:left-[59vw]'
|
||||||
>
|
>
|
||||||
<span className="w-5 h-5">
|
<span className='w-5 h-5'>
|
||||||
<EqualIcon />
|
<EqualIcon />
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
className="w-[30.972vw] text-[#0D1922] h-[27.778vw] p-6 rounded-2xl bg-[#F3F3F2] text-left bg-[url(/images/about-complex/dubai-marina/2_bedroom.png)] bg-[length:19.028vw_17.847vw] bg-no-repeat bg-center
|
className='w-[30.972vw] text-[#0D1922] h-[27.778vw] p-6 rounded-2xl bg-[#F3F3F2] text-left bg-[url(/images/about-complex/dubai-marina/2_bedroom.png)] bg-[length:19.028vw_17.847vw] bg-no-repeat bg-center
|
||||||
max-md:w-full max-md:h-[111.111vw] max-md:bg-[length:76.267vw_71.389vw] max-md:p-[4.444vw]"
|
max-md:w-full max-md:h-[111.111vw] max-md:bg-[length:76.267vw_71.389vw] 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">
|
<h4 className='text-h4 tracking-[-0.02em] font-[500] max-md:text-h5'>
|
||||||
2 Bedroom²
|
2 Bedroom²
|
||||||
</h4>
|
</h4>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col items-center gap-[2.222vw] bg-white px-[2.222vw] pb-[8.333vw] max-md:gap-[6.667vw] max-md:px-[4.444vw]">
|
<div className='flex flex-col items-center gap-[2.222vw] bg-white px-[2.222vw] pb-[8.333vw] max-md:gap-[6.667vw] max-md:px-[4.444vw] max-2xl:gap-[4.167vw]'>
|
||||||
<h1
|
<h1
|
||||||
className="font-mixcase-unmixed text-[3.889vw] text-[#0D1922] w-[44.861vw] leading-[100%] tracking-[-0.05em] pt-[7.222vw] text-center
|
className='font-mixcase-unmixed text-[3.889vw] text-[#0D1922] w-[44.861vw] leading-[100%] tracking-[-0.05em] pt-[7.222vw] text-center
|
||||||
max-md:text-[6.667vw] max-md:w-full"
|
max-md:text-[6.667vw] max-md:w-full max-2xl:text-[7.292vw] max-2xl:w-[84.115vw]'
|
||||||
>
|
>
|
||||||
Live central. Live centred
|
Live central. Live centred
|
||||||
</h1>
|
</h1>
|
||||||
<p className="text-s text-[#0D1922B2] leading-[140%] tracking-[-0.02em] text-center 2xl:whitespace-pre-line">
|
<p className='text-s text-[#0D1922B2] leading-[140%] tracking-[-0.02em] text-center 2xl:whitespace-pre-line max-2xl:w-[66.146vw]'>
|
||||||
{`Located in the heart of Dubai Marina, Rove Home Dubai Marina is where active
|
{`Located in the heart of Dubai Marina, Rove Home Dubai Marina is where active
|
||||||
living meets modern convenience. Enjoy an energetic lifestyle surrounded by
|
living meets modern convenience. Enjoy an energetic lifestyle surrounded by
|
||||||
trendy cafés, shops, and entertainment options – all within reach.`}
|
trendy cafés, shops, and entertainment options – all within reach.`}
|
||||||
</p>
|
</p>
|
||||||
<motion.img
|
<motion.img
|
||||||
ref={mapRef}
|
ref={mapRef}
|
||||||
src="/images/about-complex/dubai-marina/central_map.png"
|
src='/images/about-complex/dubai-marina/central_map.png'
|
||||||
alt="central map"
|
alt='central map'
|
||||||
className="rounded-3xl object-cover object-center aspect-[1376/609] max-md:hidden"
|
className='rounded-3xl object-cover object-center aspect-[1376/609] max-md:hidden max-2xl:w-[93.75vw] max-2xl:h-[89.583vw] max-2xl:aspect-[720/688] max-2xl:mt-[1.563vw]'
|
||||||
initial={{ width: "47.083vw" }}
|
initial={{ width: "47.083vw" }}
|
||||||
animate={
|
animate={
|
||||||
isMapInView ? { width: "95.556vw" } : { width: "47.083vw" }
|
isMapInView ? { width: "95.556vw" } : { width: "47.083vw" }
|
||||||
}
|
}
|
||||||
transition={{ duration: 0.6, ease: "easeInOut" }}
|
transition={{ duration: 0.6, ease: "easeInOut" }}
|
||||||
/>
|
/>
|
||||||
<div className="min-md:hidden relative w-[89.167vw] aspect-square overflow-hidden rounded-2xl">
|
<div className='min-md:hidden relative w-[89.167vw] aspect-square overflow-hidden rounded-2xl'>
|
||||||
<img
|
<img
|
||||||
src="/images/about-complex/dubai-marina/central_map.png"
|
src='/images/about-complex/dubai-marina/central_map.png'
|
||||||
alt="central map"
|
alt='central map'
|
||||||
className="w-full h-full object-cover object-center scale-120"
|
className='w-full h-full object-cover object-center scale-120'
|
||||||
/>
|
/>
|
||||||
<div className="absolute bottom-[1.111vw] right-[1.111vw] w-[11.111vw] h-[11.111vw]">
|
<div className='absolute bottom-[1.111vw] right-[1.111vw] w-[11.111vw] h-[11.111vw]'>
|
||||||
<FullScreenButton
|
<FullScreenButton
|
||||||
isFullScreen={false}
|
isFullScreen={false}
|
||||||
onClick={() => {}}
|
onClick={() => {}}
|
||||||
|
|||||||
Reference in New Issue
Block a user