feat: add mobile slider and minor changes according figma
This commit is contained in:
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 MiB After Width: | Height: | Size: 524 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 MiB After Width: | Height: | Size: 630 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 MiB After Width: | Height: | Size: 380 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 MiB After Width: | Height: | Size: 381 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 MiB After Width: | Height: | Size: 382 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 MiB After Width: | Height: | Size: 285 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 MiB After Width: | Height: | Size: 411 KiB |
@@ -1,8 +1,8 @@
|
||||
import { Dispatch, SetStateAction, useEffect } from "react";
|
||||
import FullScreenIcon from "./icons/FullScreenIcon";
|
||||
import Button from "./ui/Button";
|
||||
import CloseFullscreenIcon from "./icons/CloseFullscreenIcon";
|
||||
import { isMobileSafari } from "react-device-detect";
|
||||
import { Dispatch, SetStateAction, useEffect } from 'react';
|
||||
import FullScreenIcon from './icons/FullScreenIcon';
|
||||
import Button from './ui/Button';
|
||||
import CloseFullscreenIcon from './icons/CloseFullscreenIcon';
|
||||
import { isMobileSafari } from 'react-device-detect';
|
||||
|
||||
interface IFullScreenProps {
|
||||
onFullScreenChange: Dispatch<SetStateAction<boolean>>;
|
||||
@@ -17,12 +17,12 @@ function FullScreenButton({
|
||||
}: IFullScreenProps) {
|
||||
useEffect(() => {
|
||||
onFullScreenChange(!!document.fullscreenElement);
|
||||
document.addEventListener("fullscreenchange", () =>
|
||||
document.addEventListener('fullscreenchange', () =>
|
||||
onFullScreenChange(!!document.fullscreenElement)
|
||||
);
|
||||
|
||||
return () =>
|
||||
document.removeEventListener("fullscreenchange", () =>
|
||||
document.removeEventListener('fullscreenchange', () =>
|
||||
onFullScreenChange(!!document.fullscreenElement)
|
||||
);
|
||||
}, [onFullScreenChange]);
|
||||
@@ -30,8 +30,8 @@ function FullScreenButton({
|
||||
if (isMobileSafari) return null;
|
||||
|
||||
return (
|
||||
<Button onlyIcon size="small" variant="secondary" onClick={handleClick}>
|
||||
<span className="2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4">
|
||||
<Button onlyIcon size='small' variant='secondary' onClick={handleClick}>
|
||||
<span className='2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5'>
|
||||
{isFullScreen ? <CloseFullscreenIcon /> : <FullScreenIcon />}
|
||||
</span>
|
||||
</Button>
|
||||
|
||||
@@ -31,11 +31,11 @@ function Slider({
|
||||
}, [categoryName]);
|
||||
|
||||
return (
|
||||
<div className='relative w-[63.333vw] h-[27.639vw] rounded-3xl overflow-hidden'>
|
||||
<div className='relative w-[63.333vw] h-[27.639vw] rounded-3xl overflow-hidden max-md:w-[91.111vw] max-md:h-[110.556vw]'>
|
||||
<AnimatePresence custom={direction}>
|
||||
<motion.div
|
||||
key={currentSlide}
|
||||
className='absolute inset-0 bg-cover bg-no-repeat bg-center'
|
||||
className='absolute inset-0 bg-cover bg-no-repeat bg-center before:absolute before:inset-0 before:bg-[#0D1922]/20 before:z-10'
|
||||
style={{
|
||||
backgroundImage: `url(${dubaiMarinaSlider[categoryName][currentSlide].image})`,
|
||||
}}
|
||||
@@ -53,7 +53,7 @@ function Slider({
|
||||
<AnimatePresence mode='wait'>
|
||||
<motion.h3
|
||||
key={`title-${currentSlide}`}
|
||||
className='text-subheadline-m'
|
||||
className='text-subheadline-m text-white max-md:text-h5'
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
@@ -65,7 +65,7 @@ function Slider({
|
||||
<AnimatePresence mode='wait'>
|
||||
<motion.p
|
||||
key={`desc-${currentSlide}`}
|
||||
className='text-s w-[19.861vw] tracking-[-0.02em] leading-[140%]'
|
||||
className='text-s w-[19.861vw] tracking-[-0.02em] leading-[140%] text-white max-md:w-full max-md:text-caption-m'
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
@@ -76,7 +76,7 @@ function Slider({
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
|
||||
<div className='flex items-center gap-[0.556vw] relative'>
|
||||
<div className='flex items-center gap-[0.556vw] relative max-md:gap-[2.222vw]'>
|
||||
<div
|
||||
className='w-10 h-10 rounded-xl text-[#0D1922] bg-white flex items-center justify-center cursor-pointer hover:bg-[#F3F3F2] transition-all duration-200'
|
||||
onClick={handlePreviousSlide}
|
||||
@@ -85,7 +85,7 @@ function Slider({
|
||||
<ArrowLeftIcon />
|
||||
</span>
|
||||
</div>
|
||||
<div className='text-s'>
|
||||
<div className='text-s text-white'>
|
||||
{currentSlide + 1}/{dubaiMarinaSlider[categoryName].length}
|
||||
</div>
|
||||
<div
|
||||
|
||||
@@ -0,0 +1,106 @@
|
||||
import { motion, useScroll, useTransform } from 'framer-motion';
|
||||
import Slider from './Slider';
|
||||
import { useRef } from 'react';
|
||||
function SliderMobile() {
|
||||
const sliderMobileRef = useRef(null);
|
||||
const { scrollYProgress } = useScroll({
|
||||
target: sliderMobileRef,
|
||||
offset: ['start start', 'end end'],
|
||||
});
|
||||
|
||||
const opacityFirstSlide = useTransform(
|
||||
scrollYProgress,
|
||||
[0, 1 / 4, 1 / 2],
|
||||
[1, 0, 0]
|
||||
);
|
||||
const opacitySecondSlide = useTransform(
|
||||
scrollYProgress,
|
||||
[1 / 4, 1 / 2, 3 / 4],
|
||||
[1, 1, 0]
|
||||
);
|
||||
const opacityThirdSlide = useTransform(
|
||||
scrollYProgress,
|
||||
[1 / 2, 3 / 4, 1],
|
||||
[1, 1, 0]
|
||||
);
|
||||
const opacityFourthSlide = useTransform(scrollYProgress, [3 / 4, 1], [1, 1]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className='min-md:hidden flex flex-col gap-[6.667vw]'
|
||||
ref={sliderMobileRef}
|
||||
>
|
||||
<motion.div
|
||||
className='sticky top-[18vw] h-full flex flex-col gap-[6.667vw]'
|
||||
style={{ opacity: opacityFirstSlide }}
|
||||
>
|
||||
<div className='h-[2px] bg-gray-300 w-full'></div>
|
||||
<h5
|
||||
className={
|
||||
'text-h5 tracking-[-0.02em] mt-[0.556vw] font-[500] text-[#00BED7] text-center р-10'
|
||||
}
|
||||
>
|
||||
Wellness
|
||||
</h5>
|
||||
<p className='text-m text-center text-[#0D1922]/70 mt-[-2.222vw]'>
|
||||
Unlock your inner zen in our wellness playground
|
||||
</p>
|
||||
<Slider categoryName='Wellness' />
|
||||
</motion.div>
|
||||
<motion.div
|
||||
className='sticky h-full top-[18vw] flex flex-col gap-[6.667vw] bg-white'
|
||||
style={{ opacity: opacitySecondSlide }}
|
||||
>
|
||||
<div className='h-[2px] bg-gray-300 w-full'></div>
|
||||
<h5
|
||||
className={
|
||||
'text-h5 tracking-[-0.02em] mt-[0.556vw] font-[500] text-[#00BED7] text-center'
|
||||
}
|
||||
>
|
||||
Fitness
|
||||
</h5>
|
||||
<p className='text-m text-center text-[#0D1922]/70 mt-[-2.222vw]'>
|
||||
Cancel all your membership. Your new home has it all
|
||||
</p>
|
||||
<Slider categoryName='Fitness' />
|
||||
</motion.div>
|
||||
<motion.div
|
||||
className='sticky h-full top-[18vw] flex flex-col gap-[6.667vw] bg-white'
|
||||
style={{ opacity: opacityThirdSlide }}
|
||||
>
|
||||
<div className='h-[2px] bg-gray-300 w-full'></div>
|
||||
<h5
|
||||
className={
|
||||
'text-h5 tracking-[-0.02em] mt-[0.556vw] font-[500] text-[#00BED7] text-center'
|
||||
}
|
||||
>
|
||||
Community
|
||||
</h5>
|
||||
<p className='text-m text-center text-[#0D1922]/70 mt-[-2.222vw] h-10'>
|
||||
Connect. Engage. Thrive.
|
||||
</p>
|
||||
<Slider categoryName='Community' />
|
||||
</motion.div>
|
||||
<motion.div
|
||||
className='sticky h-full top-[18vw] flex flex-col gap-[6.667vw] z-3 bg-white'
|
||||
style={{ opacity: opacityFourthSlide }}
|
||||
>
|
||||
<div className='h-[2px] bg-gray-300 w-full'></div>
|
||||
<h5
|
||||
className={
|
||||
'text-h5 tracking-[-0.02em] mt-[0.556vw] font-[500] text-[#00BED7] text-center'
|
||||
}
|
||||
>
|
||||
Convenience
|
||||
</h5>
|
||||
<p className='text-m text-center text-[#0D1922]/70 mt-[-2.222vw] h-10'>
|
||||
Your smart living hub
|
||||
</p>
|
||||
<Slider categoryName='Convenience' />
|
||||
</motion.div>
|
||||
<div className='h-[40vw]'></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default SliderMobile;
|
||||
@@ -80,7 +80,7 @@ export const dubaiMarinaSlider = {
|
||||
title: 'Multi-Purpose Hall',
|
||||
description:
|
||||
'Designed for gatherings, gamings, and entertainment, step into a vibrant multi-functional indoor and outdoor space that can be rented for special events.',
|
||||
image: '/images/about-complex/dubai-marina/community1.jpg',
|
||||
image: '/images/about-complex/dubai-marina/community.jpg',
|
||||
},
|
||||
{
|
||||
title: 'Lobby Lounge',
|
||||
@@ -99,7 +99,7 @@ export const dubaiMarinaSlider = {
|
||||
{
|
||||
title: 'Entrance & Concierge',
|
||||
description: 'An unforgettable welcome, every time you come home.',
|
||||
image: '/images/about-complex/dubai-marina/convenience2.jpg',
|
||||
image: '/images/about-complex/dubai-marina/design.jpg',
|
||||
},
|
||||
],
|
||||
} as const;
|
||||
|
||||
@@ -13,13 +13,14 @@ import {
|
||||
dubaiMarinaSlider,
|
||||
sliderBadgesCategory,
|
||||
} from '../data/aboutDubaiMarina';
|
||||
|
||||
import EqualIcon from '../components/icons/EqualIcon';
|
||||
import TextBox from '../components/ui/TextBox';
|
||||
import clsx from 'clsx';
|
||||
import Slider from '../components/Slider';
|
||||
import PlusIcon from '../components/icons/map/PlusIcon';
|
||||
import useWindowSize from '../hooks/useWindowSize';
|
||||
import FullScreenButton from '../components/FullScreenButton';
|
||||
import SliderMobile from '../components/SliderMobile';
|
||||
|
||||
function AboutComplexPage() {
|
||||
const containerRef = useRef(null);
|
||||
@@ -55,7 +56,7 @@ function AboutComplexPage() {
|
||||
return (
|
||||
<div className='relative bg-white' ref={containerRef}>
|
||||
<motion.section
|
||||
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]]
|
||||
className='md: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]'
|
||||
style={{
|
||||
opacity: width > 768 ? firstSectionOpacity : 1,
|
||||
@@ -99,7 +100,7 @@ function AboutComplexPage() {
|
||||
</div>
|
||||
</motion.section>
|
||||
<motion.section
|
||||
className='w-full text-white bg-white flex justify-center top-[4.444vw] left-0 right-0 max-md:top-0 overflow-x-hidden'
|
||||
className='w-full text-white bg-white flex justify-center max-md:top-0 max-md:overflow-x-clip'
|
||||
style={{
|
||||
y: width > 768 ? secondSectionY : 0,
|
||||
zIndex: 1,
|
||||
@@ -107,7 +108,7 @@ function AboutComplexPage() {
|
||||
>
|
||||
<div className='w-full'>
|
||||
<div className='flex flex-col items-center gap-[2.222vw] w-full max-md:py-[8.889vw] max-md:px-[4.444vw]'>
|
||||
<div className='space-y-8 2xl:hidden self-start'>
|
||||
<div className='space-y-8 min-md:hidden self-start'>
|
||||
<h4 className='text-h4 text-[#00BED7] font-[500] whitespace-pre-line'>
|
||||
{`Own the last slice of Dubai
|
||||
Marina, ROVE Style`}
|
||||
@@ -128,12 +129,12 @@ function AboutComplexPage() {
|
||||
and social lifestyle.`}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className='max-md:overflow-x-auto max-md:self-start max-md:w-screen max-md:-ml-[4.444vw] flex gap-[0.556vw] mt-[0.833vw] 2xl:h-[26.667vw] px-[2.222vw] max-md:pl-[4.444vw] max-md:pr-[2vw] max-md:gap-[2.222vw] max-md:snap-x'>
|
||||
<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:py-[6.667vw] max-md:overflow-x-auto max-md:self-start max-md:w-screen max-md:-ml-[4.444vw] '>
|
||||
{dubaiMarinaFeatures.map((feature) => (
|
||||
<div
|
||||
key={feature.name}
|
||||
className={`rounded-3xl 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 max-md:w-[91.111vw] max-md:flex-none aspect-[328/287] max-md:snap-always max-md:snap-center`}
|
||||
className={`rounded-3xl 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-3 before:rounded-3xl
|
||||
max-md:w-[91.111vw] max-md:flex-none aspect-[268/384] max-md:aspect-[328/287] max-md:snap-always max-md:snap-center max-md:py-[4.444vw]`}
|
||||
style={{
|
||||
backgroundImage: `url(${feature.image})`,
|
||||
}}
|
||||
@@ -145,11 +146,12 @@ function AboutComplexPage() {
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex flex-col items-center pt-[4.444vw] h-auto px-8 gap-[4.444vw] max-md:hidden'>
|
||||
<h1 className='font-mixcase-unmixed text-[3.889vw] text-[#0D1922] tracking-[-0.05em]'>
|
||||
<div className='flex flex-col items-center pt-[4.444vw] px-8 gap-[4.444vw] max-md:px-[4.444vw]'>
|
||||
<h1 className='font-mixcase-unmixed 2xl:text-[3.889vw] text-[#0D1922] tracking-[-0.05em] max-md:text-2xl'>
|
||||
Dubai, <span className='text-[#0D192266]'>within reach</span>
|
||||
</h1>
|
||||
<div className='flex w-full text-[#0D192266] gap-[1.111vw]'>
|
||||
<SliderMobile />
|
||||
<div className='flex w-full text-[#0D1922]/40 gap-[1.111vw] max-md:hidden'>
|
||||
{dubaiMarinaDescription.map((descriptionItem) => (
|
||||
<div
|
||||
className='flex-1 text-center flex flex-col gap-[1.111vw] cursor-pointer hover:text-[#0D1922B2] transition-all duration-200'
|
||||
@@ -180,7 +182,10 @@ function AboutComplexPage() {
|
||||
))}
|
||||
</div>
|
||||
<AnimatePresence mode='wait'>
|
||||
<div ref={sliderRef} className='flex flex-col gap-8'>
|
||||
<div
|
||||
ref={sliderRef}
|
||||
className='flex flex-col gap-8 max-md:hidden'
|
||||
>
|
||||
<motion.div
|
||||
key={`slider-${selectedCategorySlider}`}
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
@@ -218,8 +223,8 @@ function AboutComplexPage() {
|
||||
</div>
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
<div className='text-center w-full flex flex-col items-center gap-[2.222vw] bg-white'>
|
||||
<h1 className='font-mixcase-unmixed text-[3.889vw] text-[#0D1922] w-[44.861vw] leading-[100%] tracking-[-0.05em] pt-[8.056vw]'>
|
||||
<div className='text-center w-full flex flex-col items-center gap-[2.222vw] bg-white max-md:gap-[6.667vw]'>
|
||||
<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'>
|
||||
Dubai's first-ever combinable Apartments
|
||||
</h1>
|
||||
<TextBox text='On-demand' />
|
||||
@@ -227,81 +232,129 @@ function AboutComplexPage() {
|
||||
{`Enjoy the option to combine 2 apartments and create
|
||||
a larger space and configuration.`}
|
||||
</p>
|
||||
<div className='flex gap-4 relative'>
|
||||
<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'>
|
||||
<h4 className='text-h4 tracking-[-0.02em] font-[500]'>
|
||||
<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-[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]'
|
||||
>
|
||||
<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'>
|
||||
<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]'
|
||||
>
|
||||
<span className='w-5 h-5'>
|
||||
<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/dubai-marina/studio.png)] bg-[length:7.778vw_17.847vw] bg-no-repeat bg-center'>
|
||||
<h4 className='text-h4 tracking-[-0.02em] font-[500]'>
|
||||
<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
|
||||
max-md:w-full max-md:h-[75.556vw] max-md:bg-[length:25.556vw_58.333vw] max-md:p-[4.444vw]'
|
||||
>
|
||||
<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'>
|
||||
<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] '
|
||||
>
|
||||
<span className='w-5 h-5'>
|
||||
<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/dubai-marina/1_bedroom.png)] bg-[length:15.972vw_17.847vw] bg-no-repeat bg-center'>
|
||||
<h4 className='text-h4 tracking-[-0.02em] font-[500]'>
|
||||
<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
|
||||
max-md:w-full max-md:h-[111.111vw] max-md:bg-[length:63.889vw_71.389vw] max-md:p-[4.444vw]'
|
||||
>
|
||||
<h4 className='text-h4 tracking-[-0.02em] font-[500] max-md:text-h5'>
|
||||
1 Bedroom²
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex gap-4 relative'>
|
||||
<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'>
|
||||
<h4 className='text-h4 tracking-[-0.02em] font-[500]'>
|
||||
<h5 className='2xl:hidden text-h5 text-[#0D1922B2]'>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/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]'
|
||||
>
|
||||
<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'>
|
||||
<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]'
|
||||
>
|
||||
<span className='w-5 h-5'>
|
||||
<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/dubai-marina/1_bedroom_rotated.png)] bg-[length:17.847vw_13.681vw] bg-no-repeat bg-center'>
|
||||
<h4 className='text-h4 tracking-[-0.02em] font-[500]'>
|
||||
<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
|
||||
max-md:w-full max-md:h-[75.556vw] max-md:bg-[length:56.111vw_43.056vw] max-md:p-[4.444vw]'
|
||||
>
|
||||
<h4 className='text-h4 tracking-[-0.02em] font-[500] max-md:text-h5'>
|
||||
1 Bedroom²
|
||||
</h4>
|
||||
</div>
|
||||
<div className='w-10 h-10 rounded-full bg-[#0D1922] flex items-center justify-center absolute left-[50.300vw] self-center'>
|
||||
<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]'
|
||||
>
|
||||
<span className='w-5 h-5'>
|
||||
<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/dubai-marina/2_bedroom.png)] bg-[length:19.028vw_17.847vw] bg-no-repeat bg-center'>
|
||||
<h4 className='text-h4 tracking-[-0.02em] font-[500]'>
|
||||
<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
|
||||
max-md:w-full max-md:h-[111.111vw] max-md:bg-[length:76.267vw_71.389vw] max-md:p-[4.444vw]'
|
||||
>
|
||||
<h4 className='text-h4 tracking-[-0.02em] font-[500] max-md:text-h5'>
|
||||
2 Bedroom²
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex flex-col items-center gap-[2.222vw] bg-white px-[2.222vw] pb-[8.333vw]'>
|
||||
<h1 className='font-mixcase-unmixed text-[3.889vw] text-[#0D1922] w-[44.861vw] leading-[100%] tracking-[-0.05em] pt-[7.222vw]'>
|
||||
<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]'>
|
||||
<h1
|
||||
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'
|
||||
>
|
||||
Live central. Live centred
|
||||
</h1>
|
||||
<p className='text-s text-[#0D1922B2] leading-[140%] tracking-[-0.02em] text-center whitespace-pre-line'>
|
||||
<p className='text-s text-[#0D1922B2] leading-[140%] tracking-[-0.02em] text-center 2xl:whitespace-pre-line'>
|
||||
{`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>
|
||||
<motion.img
|
||||
ref={mapRef}
|
||||
src='/images/about-complex/dubai-marina/central_map.jpg'
|
||||
alt=''
|
||||
className='rounded-3xl object-cover object-center aspect-[1376/609]'
|
||||
src='/images/about-complex/dubai-marina/central_map.png'
|
||||
alt='central map'
|
||||
className='rounded-3xl object-cover object-center aspect-[1376/609] max-md:hidden'
|
||||
initial={{ width: '47.083vw' }}
|
||||
animate={
|
||||
isMapInView ? { width: '95.556vw' } : { width: '47.083vw' }
|
||||
}
|
||||
transition={{ duration: 0.6, ease: 'easeInOut' }}
|
||||
/>
|
||||
<div className='min-md:hidden relative w-[89.167vw] aspect-square overflow-hidden rounded-2xl'>
|
||||
<img
|
||||
src='/images/about-complex/dubai-marina/central_map.png'
|
||||
alt='central map'
|
||||
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]'>
|
||||
<FullScreenButton
|
||||
isFullScreen={false}
|
||||
onClick={() => {}}
|
||||
onFullScreenChange={() => {}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.section>
|
||||
|
||||
Reference in New Issue
Block a user