inmake/irth-new-client
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: moible dubai-marina in process

Browse Source
This commit is contained in:
c00b3r
2025-05-16 19:23:09 +05:00
parent 224c6499cf
commit dab238d4e4
14 changed files with 274 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/images/about-complex/dubai-marina/community1.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 MiB

public/images/about-complex/dubai-marina/community2.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 MiB

public/images/about-complex/dubai-marina/convenience1.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 817 KiB

public/images/about-complex/dubai-marina/convenience2.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 MiB

public/images/about-complex/dubai-marina/fitness1.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 MiB

public/images/about-complex/dubai-marina/fitness2.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

public/images/about-complex/dubai-marina/tower-mobile.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 900 KiB

src/components/Slider.tsx
+17 -9
View File
@@ -1,15 +1,19 @@
import { useState } from 'react';
import { useEffect, useState } from 'react';
import ArrowLeftIcon from './icons/ArrowLeftIcon';
import ArrowRightIcon from './icons/map/ArrowRightIcon';
import { dubaiMarinaWellnessSlides } from '../data/aboutDubaiMarina';
import { dubaiMarinaSlider } from '../data/aboutDubaiMarina';
import { AnimatePresence, motion } from 'motion/react';
function Slider() {
function Slider({
categoryName,
}: {
categoryName: 'Wellness' | 'Fitness' | 'Community' | 'Convenience';
}) {
const [currentSlide, setCurrentSlide] = useState(0);
const [direction, setDirection] = useState(-1);
const handleNextSlide = () => {
if (currentSlide < dubaiMarinaWellnessSlides.length - 1) {
if (currentSlide < dubaiMarinaSlider[categoryName].length - 1) {
setDirection(1);
setCurrentSlide(currentSlide + 1);
}
@@ -22,6 +26,10 @@ function Slider() {
}
};
useEffect(() => {
setCurrentSlide(0);
}, [categoryName]);
return (
<div className='relative w-[63.333vw] h-[27.639vw] rounded-3xl overflow-hidden'>
<AnimatePresence custom={direction}>
@@ -29,7 +37,7 @@ function Slider() {
key={currentSlide}
className='absolute inset-0 bg-cover bg-no-repeat bg-center'
style={{
backgroundImage: `url(${dubaiMarinaWellnessSlides[currentSlide].image})`,
backgroundImage: `url(${dubaiMarinaSlider[categoryName][currentSlide].image})`,
}}
custom={direction}
initial={{ x: direction > 0 ? '100%' : '-100%' }}
@@ -51,19 +59,19 @@ function Slider() {
exit={{ opacity: 0 }}
transition={{ duration: 0.5 }}
>
{dubaiMarinaWellnessSlides[currentSlide].title}
{dubaiMarinaSlider[categoryName][currentSlide].title}
</motion.h3>
</AnimatePresence>
<AnimatePresence mode='wait'>
<motion.p
key={`desc-${currentSlide}`}
className='text-s w-[19.861vw] tracking-[-0.07em] leading-[140%]'
className='text-s w-[19.861vw] tracking-[-0.02em] leading-[140%]'
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.5 }}
>
{dubaiMarinaWellnessSlides[currentSlide].description}
{dubaiMarinaSlider[categoryName][currentSlide].description}
</motion.p>
</AnimatePresence>
</div>
@@ -78,7 +86,7 @@ function Slider() {
</span>
</div>
<div className='text-s'>
{currentSlide + 1}/{dubaiMarinaWellnessSlides.length}
{currentSlide + 1}/{dubaiMarinaSlider[categoryName].length}
</div>
<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'
src/components/icons/map/ArrowRightIcon.tsx
+5 -5
View File
@@ -1,11 +1,11 @@
export default function ArrowRightIcon() {
return (
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M5.25 12c0 .414.336.75.75.75h10.111l-4.99 4.704a.75.75 0 1 0 1.03 1.092l6.364-6a.75.75 0 0 0 0-1.092l-6.364-6a.75.75 0 1 0-1.03 1.092l4.99 4.704H6a.75.75 0 0 0-.75.75"
fill="#fff"
fillRule='evenodd'
clipRule='evenodd'
d='M5.25 12c0 .414.336.75.75.75h10.111l-4.99 4.704a.75.75 0 1 0 1.03 1.092l6.364-6a.75.75 0 0 0 0-1.092l-6.364-6a.75.75 0 1 0-1.03 1.092l4.99 4.704H6a.75.75 0 0 0-.75.75'
fill='currentColor'
/>
</svg>
);
src/components/TextBox.tsx → src/components/ui/TextBox.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
function TextBox({ text }: { text: string }) {
return (
<div className='text-caption-m px-4 py-1.5 border border-[#E2E2DC] rounded-[40px] w-fit text-[#0D1922]'>
<div className='text-caption-m px-4 py-1.5 border border-[#E2E2DC] rounded-[40px] w-fit text-[#0D1922] max-md:text-caption-s'>
{text}
</div>
);
src/data/aboutDubaiMarina.ts
+110 -27
View File
@@ -4,19 +4,6 @@ export const roveHomeDescription = [
'Inspiring design',
] as const;
export const wellnessDescription = [
'Vitality Pool',
'Reflexology Pool',
'Cold Plunge Pool',
'Convertible Indoor Infinity Pool',
'Zen Library Area',
'Finnish Sauna Pod',
'Aroma Steam Pod',
'Salt Steam Pod',
'Ultra Shield Oxygen Pod',
'Experience Shower Pods',
] as const;
export const dubaiMarinaFeatures = [
{
name: 'Life-enhancing Amenties',
@@ -59,17 +46,113 @@ export const dubaiMarinaDescription = [
},
] as const;
export const dubaiMarinaWellnessSlides = [
{
title: 'Indoor Infinity Pool',
description:
'Breezy and open in winter and closed in summer – this one-of-a-kind convertible pool takes relaxation to new heights, 165 meters to be precise!',
image: '/images/about-complex/dubai-marina/pool1.jpg',
},
{
title: 'Multi-sensory wellness pods',
description:
'Set against a backdrop of dream-worthy views, immerse yourself in diverse wellness experiences including ultrashield oxygen, cold bucket showers and more.',
image: '/images/about-complex/dubai-marina/pool2.jpg',
},
] as const;
export const dubaiMarinaSlider = {
Wellness: [
{
title: 'Indoor Infinity Pool',
description:
'Breezy and open in winter and closed in summer – this one-of-a-kind convertible pool takes relaxation to new heights, 165 meters to be precise!',
image: '/images/about-complex/dubai-marina/pool1.jpg',
},
{
title: 'Multi-sensory wellness pods',
description:
'Set against a backdrop of dream-worthy views, immerse yourself in diverse wellness experiences including ultrashield oxygen, cold bucket showers and more.',
image: '/images/about-complex/dubai-marina/pool2.jpg',
},
],
Fitness: [
{
title: 'Semi-Olympic Leisure Pool',
description:
'Overlooking the city, enjoy a leisurely swim, do your daily 25-meter laps or just unwind at one of the cozy cabanas,',
image: '/images/about-complex/dubai-marina/fitness1.jpg',
},
{
title: 'Boutique Fitness Studio',
description:
'Elevate your fitness regime at flagship Crank Ride & Shape studios – blending fitness, fun, and thrill vibes.',
image: '/images/about-complex/dubai-marina/fitness2.jpg',
},
],
Community: [
{
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',
},
{
title: 'Lobby Lounge',
description:
'Enjoy multi-level seating, reading nooks, co-working spaces, Rove Café and more, for an unforgettable welcome, every time you come home.',
image: '/images/about-complex/dubai-marina/community2.jpg',
},
],
Convenience: [
{
title: 'Rentable Guest Room',
description:
'A private space for guests to relax and unwind, complete with a comfortable seating area, a flat-screen TV, and a private bathroom.',
image: '/images/about-complex/dubai-marina/convenience1.jpg',
},
{
title: 'Entrance & Concierge',
description: 'An unforgettable welcome, every time you come home.',
image: '/images/about-complex/dubai-marina/convenience2.jpg',
},
],
} as const;
export const sliderBadgesCategory = {
Wellness: [
'Vitality Pool',
'Reflexology Pool',
'Cold Plunge Pool',
'Convertible Indoor Infinity Pool',
'Zen Library Area',
'Finnish Sauna Pod',
'Aroma Steam Pod',
'Salt Steam Pod',
'Ultra Shield Oxygen Pod',
'Experience Shower Pods',
],
Fitness: [
'State-of-the-Art Gym',
'Crank Fitness Studios – Bike & Shape',
'Counter-current Pool',
'Rowing Workout',
'Aqua Cycling',
'Outdoor Semi-olympic Leisure Pool',
'Outdoor Gym Park',
'Pedal-powered Workstations',
],
Community: [
'Multipurpose Area',
'Rentable Kitchen',
'Gaming Lounge',
'Arcade Zone and PlayStation',
'Indoor Cinema',
'Suspended Net Lounge',
'Karaoke Studios',
'Outdoor Cinema & Ampitheatre',
'Rove Café and Energise Bar',
'Co-working Spaces',
'Meeting Rooms & Pods',
'Lobby Lounge',
'Marina Views Chill Zone',
'Allotment Gardens',
],
Convenience: [
'Smart Home Digital Features',
'Organic Smart Gardens',
'Electric Vehicle Charging Stations',
'Bike/Scooter Rental and Storage',
'Free Wi-fi',
'24x7 Convenience Store',
'Rentable Guest Rooms',
'Changing Rooms',
'Rentable Storage',
'Concierge',
],
};
src/index.css
+41 -85
View File
@@ -16,104 +16,60 @@ button {
outline: none;
}
@layer utilities {
.text-headline-l {
@apply 2xl:text-[clamp(56px,3.889vw,68px)] md:max-2xl:text-[clamp(44px,6.366vw,56px)] text-[44px] leading-none;
}
@utility text-h1 {
@apply 2xl:text-[3.889vw] text-[56px] leading-none;
}
.text-h4 {
@apply 2xl:text-[clamp(20px,1.389vw,28px)] text-[20px] leading-[120%];
}
@utility text-h15 {
@apply 2xl:text-[2.778vw] text-[40px] leading-[135%];
}
.text-h5 {
@apply 2xl:text-[clamp(14px,0.972vw,20px)] text-[14px] leading-[125%];
}
@utility text-h2 {
@apply 2xl:text-[2.222vw] text-[32px] leading-[125%];
}
.text-subheadline-l {
@apply 2xl:text-[clamp(40px,2.778vw,48px)] md:max-2xl:text-[clamp(32px,4.63vw,40px)] text-[32px] leading-[135%];
}
@utility text-h3 {
@apply 2xl:text-[1.667vw] text-[24px] leading-[135%];
}
.text-subheadline-m {
@apply 2xl:text-[clamp(24px,1.667vw,28px)] md:max-2xl:text-[clamp(20px,2.894vw,24px)] text-xl leading-[135%];
}
@utility text-h4 {
@apply 2xl:text-[1.389vw] text-[20px] leading-[120%];
}
.text-subheadline-s {
@apply 2xl:text-[clamp(20px,1.389vw,24px)] md:max-2xl:text-[clamp(16px,2.315vw,20px)] text-xl leading-[140%];
}
@utility text-h5 {
@apply 2xl:text-[0.972vw] text-sm leading-[125%];
}
.text-m {
@apply 2xl:text-[clamp(16px,1.111vw,19px)] md:max-2xl:text-[clamp(13px,1.881vw,16px)] text-[13px] leading-[125%];
}
@utility text-l {
@apply 2xl:text-[1.389vw] text-[20px] leading-[135%];
}
.text-s {
@apply 2xl:text-[clamp(14px,0.972vw,16px)] md:max-2xl:text-[clamp(12px,1.737vw,14px)] text-sm leading-[140%];
}
@utility text-m {
@apply 2xl:text-[1.111vw] leading-[125%];
}
.text-caption-m {
@apply 2xl:text-[clamp(12px,0.833vw,14px)] md:max-2xl:text-[clamp(12px,1.563vw,12px)] text-[clamp(12px,3.333vw,12px)] leading-[135%];
}
@utility text-s {
@apply 2xl:text-[0.972vw] text-sm leading-[140%];
}
.text-caption-s {
@apply 2xl:text-[clamp(10px,0.694vw,12px)] text-[10px] leading-[135%];
}
@utility text-btn-l {
@apply 2xl:text-[1.111vw] leading-none;
}
/* */
@utility text-btn-m {
@apply 2xl:text-[0.972vw] text-sm leading-none;
}
.text-h1 {
@apply 2xl:text-[3.889vw] text-[56px] leading-none;
}
@utility text-btn-s {
@apply 2xl:text-[0.833vw] text-xs leading-none;
}
.text-h15 {
@apply 2xl:text-[2.778vw] text-[40px] leading-[135%];
}
@utility text-caption-m {
@apply 2xl:text-[0.833vw] text-xs leading-[135%];
}
.text-h2 {
@apply 2xl:text-[2.222vw] text-[32px] leading-[125%];
}
.text-h3 {
@apply 2xl:text-[1.667vw] text-[24px] leading-[135%];
}
.text-h4 {
@apply 2xl:text-[1.389vw] text-[20px] leading-[120%];
}
.text-h5 {
@apply 2xl:text-[0.972vw] text-sm leading-[125%];
}
.text-l {
@apply 2xl:text-[1.389vw] text-[20px] leading-[135%];
}
.text-m {
@apply 2xl:text-[1.111vw] leading-[125%];
}
.text-s {
@apply 2xl:text-[0.972vw] text-sm leading-[140%];
}
.text-btn-l {
@apply 2xl:text-[1.111vw] leading-none;
}
.text-bnt-m {
@apply 2xl:text-[0.972vw] text-sm leading-none;
}
.text-btn-s {
@apply 2xl:text-[0.833vw] text-xs leading-none;
}
.text-caption-m {
@apply 2xl:text-[0.833vw] text-xs leading-[135%];
}
.text-caption-s {
@apply 2xl:text-[0.694vw] text-[10px] leading-[135%];
}
@utility text-caption-s {
@apply 2xl:text-[0.694vw] text-[10px] leading-[135%];
}
@utility font-mixcase-unmixed {
src/pages/AboutComplexPage.tsx
+98 -44
View File
@@ -1,22 +1,34 @@
import { useScroll, useTransform, motion, useInView } from 'motion/react';
import { useRef } from 'react';
import {
useScroll,
useTransform,
motion,
useInView,
AnimatePresence,
} from 'motion/react';
import { useRef, useState } from 'react';
import {
dubaiMarinaFeatures,
dubaiMarinaDescription,
roveHomeDescription,
wellnessDescription,
dubaiMarinaSlider,
sliderBadgesCategory,
} from '../data/aboutDubaiMarina';
import EqualIcon from '../components/icons/EqualIcon';
import TextBox from '../components/TextBox';
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';
function AboutComplexPage() {
const containerRef = useRef(null);
const sliderRef = useRef(null);
const mapRef = useRef(null);
const { width } = useWindowSize();
const [selectedCategorySlider, setSelectedCategorySlider] =
useState<keyof typeof dubaiMarinaSlider>('Wellness');
const { scrollYProgress } = useScroll({
target: containerRef,
@@ -43,26 +55,27 @@ function AboutComplexPage() {
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'
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]'
style={{
opacity: firstSectionOpacity,
opacity: width > 768 ? firstSectionOpacity : 1,
}}
>
<div className='absolute inset-0'>
<div className='absolute inset-0 max-md:relative'>
<img
src='/images/about-complex/dubai-marina/tower.jpg'
alt='dubai marina about'
className='h-full w-full object-contain object-top'
className='h-full w-full object-cover object-top max-md:hidden'
/>
<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]'
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]'
/>
</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]'>
<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'>
<h1 className='text-[5vw] leading-none tracking-[-0.07em] font-mixcase-unmixed font-[500] max-md:text-[8.889vw]'>
{`Rove Home
Dubai Marina`}
</h1>
@@ -72,12 +85,12 @@ function AboutComplexPage() {
))}
</div>
</div>
<div className='space-y-8'>
<h4 className='text-h4 text-[#00BED7] w-[20.486vw] font-[500] '>
<div className='space-y-8 max-md:hidden'>
<h4 className='text-h4 text-[#00BED7] font-[500] whitespace-pre-line'>
{`Own the last slice of
Dubai Marina, ROVE Style`}
</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
amenities, Rove Home is a complete ecosystem
that has everything you'll ever need.`}
@@ -86,16 +99,27 @@ function AboutComplexPage() {
</div>
</motion.section>
<motion.section
className='w-full text-white bg-white flex justify-center top-[4.444vw] left-0 right-0'
className='w-full text-white bg-white flex justify-center top-[4.444vw] left-0 right-0 max-md:top-0 overflow-x-hidden'
style={{
y: secondSectionY,
y: width > 768 ? secondSectionY : 0,
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'>
<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'>
<h4 className='text-h4 text-[#00BED7] font-[500] whitespace-pre-line'>
{`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 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]'>
Rove Home has it all
</h1>
<p className='text-s text-[#0D1922B2] text-center tracking-[-0.02em] whitespace-pre-line'>
@@ -104,11 +128,12 @@ function AboutComplexPage() {
and social lifestyle.`}
</p>
</div>
<div className='flex gap-[0.556vw] mt-[0.833vw] h-[26.667vw] w-full px-[2.222vw]'>
<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'>
{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`}
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`}
style={{
backgroundImage: `url(${feature.image})`,
}}
@@ -120,18 +145,24 @@ function AboutComplexPage() {
))}
</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]'>
<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]'>
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='flex-1 text-center flex flex-col gap-[1.111vw] cursor-pointer hover:text-[#0D1922B2] transition-all duration-200'
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 === 'Wellness' && 'text-[#00BED7]'
'text-h5 tracking-[-0.02em] mt-[0.556vw] font-[500]',
descriptionItem.title === selectedCategorySlider &&
'text-[#00BED7]'
)}
>
{descriptionItem.title}
@@ -139,7 +170,8 @@ function AboutComplexPage() {
<p
className={clsx(
'text-s leading-[125%] tracking-[-0.02em]',
descriptionItem.title === 'Wellness' && 'text-[#0D1922] '
descriptionItem.title === selectedCategorySlider &&
'text-[#0D1922]'
)}
>
{descriptionItem.description}
@@ -147,22 +179,44 @@ function AboutComplexPage() {
</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} />
))}
<AnimatePresence mode='wait'>
<div ref={sliderRef} className='flex flex-col gap-8'>
<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' }}
>
<Slider categoryName={selectedCategorySlider} />
</motion.div>
<motion.div
key={`badges-${selectedCategorySlider}`}
className='flex gap-[0.556vw] w-[63.333vw] flex-wrap justify-center'
>
{sliderBadgesCategory[selectedCategorySlider].map(
(badgeItem, index) => (
<motion.div
key={badgeItem}
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
transition={{
duration: 0.3,
delay: index * 0.1,
ease: 'easeOut',
}}
>
<TextBox text={badgeItem} />
</motion.div>
)
)}
</motion.div>
</div>
</motion.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]'>
@@ -232,7 +286,7 @@ function AboutComplexPage() {
<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'>
<p className='text-s 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.`}
src/pages/FloorsPage.tsx
+2 -3
View File
@@ -1,6 +1,5 @@
import React from "react";
import FloorSelect from "../components/FloorSelect";
import { useParams } from "react-router";
import FloorSelect from '../components/FloorSelect';
import { useParams } from 'react-router';
function FloorsPage() {
const { complexName } = useParams();