feat: add about page for dubai-marina
This commit is contained in:
@@ -1,5 +1,258 @@
|
||||
import { useScroll, useTransform, motion, useInView } from 'motion/react';
|
||||
import { useRef } from 'react';
|
||||
import {
|
||||
dubaiMarinaFeatures,
|
||||
dubaiMarinaDescription,
|
||||
roveHomeDescription,
|
||||
wellnessDescription,
|
||||
} from '../data/aboutDubaiMarina';
|
||||
|
||||
import EqualIcon from '../components/icons/EqualIcon';
|
||||
import TextBox from '../components/TextBox';
|
||||
import clsx from 'clsx';
|
||||
import Slider from '../components/Slider';
|
||||
import PlusIcon from '../components/icons/map/PlusIcon';
|
||||
|
||||
function AboutComplexPage() {
|
||||
return <div></div>;
|
||||
const containerRef = useRef(null);
|
||||
const sliderRef = useRef(null);
|
||||
const mapRef = useRef(null);
|
||||
|
||||
const { scrollYProgress } = useScroll({
|
||||
target: containerRef,
|
||||
offset: ['start start', 'end start'],
|
||||
});
|
||||
|
||||
const firstSectionOpacity = useTransform(scrollYProgress, [0, 0.2], [1, 0]);
|
||||
|
||||
const secondSectionY = useTransform(
|
||||
scrollYProgress,
|
||||
[0, 0.4],
|
||||
['100dvh', '0dvh']
|
||||
);
|
||||
|
||||
const isSliderInView = useInView(sliderRef, {
|
||||
once: true,
|
||||
amount: 0.1,
|
||||
});
|
||||
const isMapInView = useInView(mapRef, {
|
||||
once: true,
|
||||
margin: `0px 0px ${-window.innerHeight / 2}px 0px`,
|
||||
});
|
||||
|
||||
return (
|
||||
<div className='relative bg-white' ref={containerRef}>
|
||||
<motion.section
|
||||
className='h-[calc(100dvh-4.444vw)] w-full bg-white text-black fixed top-[4.444vw] left-0 right-0 z-0'
|
||||
style={{
|
||||
opacity: firstSectionOpacity,
|
||||
}}
|
||||
>
|
||||
<div className='absolute inset-0'>
|
||||
<img
|
||||
src='/images/about-complex/dubai-marina/tower.jpg'
|
||||
alt='dubai marina about'
|
||||
className='h-full w-full object-contain object-top'
|
||||
/>
|
||||
<img
|
||||
src='/images/about-complex/dubai-marina/logo.png'
|
||||
alt='dubai marina about'
|
||||
className='absolute top-[5vw] right-[2.778vw] w-[9.931vw] h-[4.444vw]'
|
||||
/>
|
||||
</div>
|
||||
<div className='relative flex flex-col justify-between gap-[4.444vw] flex-1 w-full h-full pt-[5vw] pb-[2.5vw] pl-[2.222vw]'>
|
||||
<div className='text-2xl font-bold whitespace-pre-line space-y-8'>
|
||||
<h1 className='text-[5vw] leading-none tracking-[-0.07em] font-mixcase-unmixed font-[500]'>
|
||||
{`Rove Home
|
||||
Dubai Marina`}
|
||||
</h1>
|
||||
<div className='space-y-2 font-[400]'>
|
||||
{roveHomeDescription.map((description) => (
|
||||
<TextBox text={description} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className='space-y-8'>
|
||||
<h4 className='text-h4 text-[#00BED7] w-[20.486vw] font-[500] '>
|
||||
{`Own the last slice of
|
||||
Dubai Marina, ROVE Style`}
|
||||
</h4>
|
||||
<p className='text-s text-[#0D1922B2] whitespace-pre-line'>
|
||||
{`With an extended playlist of life-enhancing
|
||||
amenities, Rove Home is a complete ecosystem
|
||||
that has everything you'll ever need.`}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.section>
|
||||
<motion.section
|
||||
className='w-full text-white bg-white flex justify-center top-[4.444vw] left-0 right-0'
|
||||
style={{
|
||||
y: secondSectionY,
|
||||
zIndex: 1,
|
||||
}}
|
||||
>
|
||||
<div className='w-full'>
|
||||
<div className='flex flex-col items-center gap-[2.222vw] w-full pb-[3.75vw]'>
|
||||
<div className='px-8 flex pt-[7.222vw] flex-col items-center gap-[2.222vw]'>
|
||||
<h1 className='text-[3.889vw] text-[#0D1922] font-mixcase-unmixed'>
|
||||
Rove Home has it all
|
||||
</h1>
|
||||
<p className='text-s text-[#0D1922B2] text-center tracking-[-0.02em] whitespace-pre-line'>
|
||||
{`Rove Home Dubai Marina features modern-day
|
||||
conveniences, carefully curated for an active
|
||||
and social lifestyle.`}
|
||||
</p>
|
||||
</div>
|
||||
<div className='flex gap-[0.556vw] mt-[0.833vw] h-[26.667vw] w-full px-[2.222vw]'>
|
||||
{dubaiMarinaFeatures.map((feature) => (
|
||||
<div
|
||||
key={feature.name}
|
||||
className={`rounded-3xl flex-1 h-[26.667vw] w-full flex flex-col items-center py-[1.667vw] justify-end bg-cover bg-center bg-no-repeat`}
|
||||
style={{
|
||||
backgroundImage: `url(${feature.image})`,
|
||||
}}
|
||||
>
|
||||
<h5 className='text-h5 text-white tracking-[-0.02em]'>
|
||||
{feature.name}
|
||||
</h5>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex flex-col items-center pt-[4.444vw] h-auto px-8 gap-[4.444vw]'>
|
||||
<h1 className='font-mixcase-unmixed text-[3.889vw] text-[#0D1922]'>
|
||||
Dubai, <span className='text-[#0D192266]'>within reach</span>
|
||||
</h1>
|
||||
<div className='flex w-full text-[#0D192266] gap-[1.111vw]'>
|
||||
{dubaiMarinaDescription.map((descriptionItem) => (
|
||||
<div className='flex-1 text-center flex flex-col gap-[1.111vw]'>
|
||||
<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 === 'Wellness' && 'text-[#00BED7]'
|
||||
)}
|
||||
>
|
||||
{descriptionItem.title}
|
||||
</h5>
|
||||
<p
|
||||
className={clsx(
|
||||
'text-s leading-[125%] tracking-[-0.02em]',
|
||||
descriptionItem.title === 'Wellness' && 'text-[#0D1922] '
|
||||
)}
|
||||
>
|
||||
{descriptionItem.description}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<motion.div
|
||||
ref={sliderRef}
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
animate={
|
||||
isSliderInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 140 }
|
||||
}
|
||||
transition={{ duration: 0.6, ease: 'easeOut' }}
|
||||
className='flex flex-col gap-8'
|
||||
>
|
||||
<Slider />
|
||||
<div className='flex gap-[0.556vw] w-[63.333vw] flex-wrap justify-center'>
|
||||
{wellnessDescription.map((wellnessItem) => (
|
||||
<TextBox text={wellnessItem} />
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
</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]'>
|
||||
Dubai's first-ever combinable Apartments
|
||||
</h1>
|
||||
<TextBox text='On-demand' />
|
||||
<p className='text-s text-[#0D1922B2] leading-[140%] tracking-[-0.02em] whitespace-pre-line'>
|
||||
{`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]'>
|
||||
Studio²
|
||||
</h4>
|
||||
</div>
|
||||
<div className='w-10 h-10 rounded-full bg-[#0D1922] flex items-center justify-center absolute left-[18.500vw] self-center'>
|
||||
<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]'>
|
||||
Studio²
|
||||
</h4>
|
||||
</div>
|
||||
<div className='w-10 h-10 rounded-full bg-[#0D1922] flex items-center justify-center absolute left-[38.333vw] self-center'>
|
||||
<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]'>
|
||||
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]'>
|
||||
Studio²
|
||||
</h4>
|
||||
</div>
|
||||
<div className='w-10 h-10 rounded-full bg-[#0D1922] flex items-center justify-center absolute left-[18.500vw] self-center'>
|
||||
<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]'>
|
||||
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'>
|
||||
<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]'>
|
||||
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]'>
|
||||
Live central. Live centred
|
||||
</h1>
|
||||
<p className='text-s w-[35.278vw] text-[#0D1922B2] leading-[140%] tracking-[-0.02em] text-center 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]'
|
||||
initial={{ width: '47.083vw' }}
|
||||
animate={
|
||||
isMapInView ? { width: '95.556vw' } : { width: '47.083vw' }
|
||||
}
|
||||
transition={{ duration: 0.6, ease: 'easeInOut' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</motion.section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default AboutComplexPage;
|
||||
|
||||
Reference in New Issue
Block a user