Merge branch 'main' of http://192.168.1.163:3000/inmake/irth-new-client
This commit is contained in:
+44
-44
@@ -1,109 +1,109 @@
|
||||
import { Link } from "react-router";
|
||||
import YoutubeIcon from "./icons/YoutubeIcon";
|
||||
import InstagramIcon from "./icons/InstagramIcon";
|
||||
import FacebookIcon from "./icons/FacebookIcon";
|
||||
import LinkedInIcon from "./icons/LinkedInIcon";
|
||||
import TwitterIcon from "./icons/TwitterIcon";
|
||||
import ChevronDownIcon from "./icons/ChevronDownIcon";
|
||||
import { Link } from 'react-router';
|
||||
import YoutubeIcon from './icons/YoutubeIcon';
|
||||
import InstagramIcon from './icons/InstagramIcon';
|
||||
import FacebookIcon from './icons/FacebookIcon';
|
||||
import LinkedInIcon from './icons/LinkedInIcon';
|
||||
import TwitterIcon from './icons/TwitterIcon';
|
||||
import ChevronDownIcon from './icons/ChevronDownIcon';
|
||||
|
||||
function Footer() {
|
||||
return (
|
||||
<footer className="2xl:px-[2.222vw] 2xl:pb-[2.222vw] 2xl:pt-[2.778vw] md:max-2xl:p-6 px-4 py-6 grid 2xl:grid-cols-6 md:max-2xl:grid-cols-4 grid-cols-2 2xl:grid-rows-2 2xl:gap-x-[1.667vw] 2xl:gap-y-[1.111vw] max-2xl:gap-y-6 2xl:rounded-t-[1.667vw] rounded-t-3xl outline outline-[#E2E2DC] bg-white">
|
||||
<footer className='z-1 2xl:px-[2.222vw] 2xl:pb-[2.222vw] 2xl:pt-[2.778vw] md:max-2xl:p-6 px-4 py-6 grid 2xl:grid-cols-6 md:max-2xl:grid-cols-4 grid-cols-2 2xl:grid-rows-2 2xl:gap-x-[1.667vw] 2xl:gap-y-[1.111vw] max-2xl:gap-y-6 2xl:rounded-t-[1.667vw] rounded-t-3xl outline outline-[#E2E2DC] bg-white'>
|
||||
<img
|
||||
src="/images/logo.svg"
|
||||
className="2xl:w-[5.972vw] w-[86px] cursor-pointer"
|
||||
src='/images/logo.svg'
|
||||
className='2xl:w-[5.972vw] w-[86px] cursor-pointer'
|
||||
onClick={() => {
|
||||
window.location.href = "/";
|
||||
window.location.href = '/';
|
||||
}}
|
||||
alt="IRTH"
|
||||
alt='IRTH'
|
||||
/>
|
||||
|
||||
<p className="2xl:max-w-[17.083vw] text-s text-[#0D1922]/40 2xl:col-start-1 md:max-2xl:col-start-3 max-2xl:col-span-3 md:max-2xl:row-start-2 max-md:row-start-3 md:max-2xl:mt-[52px] max-md:mt-12">
|
||||
<p className='2xl:max-w-[17.083vw] text-s text-[#0D1922]/40 2xl:col-start-1 md:max-2xl:col-start-3 max-2xl:col-span-3 md:max-2xl:row-start-2 max-md:row-start-3 md:max-2xl:mt-[52px] max-md:mt-12'>
|
||||
For more information, visit
|
||||
<br />
|
||||
our website:
|
||||
<Link className="text-[#00BED7] underline" to={"https://www.irth.ae"}>
|
||||
<Link className='text-[#00BED7] underline' to={'https://www.irth.ae'}>
|
||||
www.irth.ae
|
||||
</Link>
|
||||
</p>
|
||||
|
||||
<div className="2xl:space-y-[0.833vw] space-y-3 md:max-2xl:col-start-3 max-2xl:col-span-3 md:max-2xl:row-start-3 max-md:row-start-4 max-md:mt-6">
|
||||
<p className="text-s text-[#0D1922]/40">Follow us for more:</p>
|
||||
<div className="flex 2xl:gap-[0.278vw] gap-1">
|
||||
<div className="2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded">
|
||||
<div className="2xl:w-[2.222vw] 2xl:h-[2.222vw] md:max-2xl:w-8 md:max-2xl:h-8 w-9 h-9 text-[#0D1922]/70">
|
||||
<div className='2xl:space-y-[0.833vw] space-y-3 md:max-2xl:col-start-3 max-2xl:col-span-3 md:max-2xl:row-start-3 max-md:row-start-4 max-md:mt-6'>
|
||||
<p className='text-s text-[#0D1922]/40'>Follow us for more:</p>
|
||||
<div className='flex 2xl:gap-[0.278vw] gap-1'>
|
||||
<div className='2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded'>
|
||||
<div className='2xl:w-[2.222vw] 2xl:h-[2.222vw] md:max-2xl:w-8 md:max-2xl:h-8 w-9 h-9 text-[#0D1922]/70'>
|
||||
<YoutubeIcon />
|
||||
</div>
|
||||
</div>
|
||||
<div className="2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded">
|
||||
<div className="2xl:w-[2.222vw] 2xl:h-[2.222vw] md:max-2xl:w-8 md:max-2xl:h-8 w-9 h-9 text-[#0D1922]/70">
|
||||
<div className='2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded'>
|
||||
<div className='2xl:w-[2.222vw] 2xl:h-[2.222vw] md:max-2xl:w-8 md:max-2xl:h-8 w-9 h-9 text-[#0D1922]/70'>
|
||||
<InstagramIcon />
|
||||
</div>
|
||||
</div>
|
||||
<div className="2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded">
|
||||
<div className="2xl:w-[2.222vw] 2xl:h-[2.222vw] md:max-2xl:w-8 md:max-2xl:h-8 w-9 h-9 text-[#0D1922]/70">
|
||||
<div className='2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded'>
|
||||
<div className='2xl:w-[2.222vw] 2xl:h-[2.222vw] md:max-2xl:w-8 md:max-2xl:h-8 w-9 h-9 text-[#0D1922]/70'>
|
||||
<FacebookIcon />
|
||||
</div>
|
||||
</div>
|
||||
<div className="2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded">
|
||||
<div className="2xl:w-[2.222vw] 2xl:h-[2.222vw] md:max-2xl:w-8 md:max-2xl:h-8 w-9 h-9 text-[#0D1922]/70">
|
||||
<div className='2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded'>
|
||||
<div className='2xl:w-[2.222vw] 2xl:h-[2.222vw] md:max-2xl:w-8 md:max-2xl:h-8 w-9 h-9 text-[#0D1922]/70'>
|
||||
<LinkedInIcon />
|
||||
</div>
|
||||
</div>
|
||||
<div className="2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded">
|
||||
<div className="2xl:w-[2.222vw] 2xl:h-[2.222vw] md:max-2xl:w-8 md:max-2xl:h-8 w-9 h-9 text-[#0D1922]/70">
|
||||
<div className='2xl:p-[0.417vw] p-1.5 bg-[#E2E2DC] 2xl:rounded-[0.278vw] rounded'>
|
||||
<div className='2xl:w-[2.222vw] 2xl:h-[2.222vw] md:max-2xl:w-8 md:max-2xl:h-8 w-9 h-9 text-[#0D1922]/70'>
|
||||
<TwitterIcon />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="2xl:border-l-[0.069vw] border-l border-[#E2E2DC] 2xl:pl-[1.111vw] pl-4 flex flex-col items-start 2xl:col-start-4 2xl:row-start-1 2xl:row-span-2 md:max-2xl:col-start-3 col-start-1">
|
||||
<div className='2xl:border-l-[0.069vw] border-l border-[#E2E2DC] 2xl:pl-[1.111vw] pl-4 flex flex-col items-start 2xl:col-start-4 2xl:row-start-1 2xl:row-span-2 md:max-2xl:col-start-3 col-start-1'>
|
||||
<Link
|
||||
to={"/"}
|
||||
className="text-btn-l flex-1 content-center md:my-4 my-[13px] text-[#0D1922]/70"
|
||||
to={'/'}
|
||||
className='text-btn-l flex-1 content-center md:my-4 my-[13px] text-[#0D1922]/70'
|
||||
>
|
||||
Map
|
||||
</Link>
|
||||
<Link
|
||||
to={"/unit-types"}
|
||||
className="text-btn-l flex-1 content-center md:my-4 my-[13px] text-[#0D1922]/70"
|
||||
to={'/unit-types'}
|
||||
className='text-btn-l flex-1 content-center md:my-4 my-[13px] text-[#0D1922]/70'
|
||||
>
|
||||
Unit Types
|
||||
</Link>
|
||||
<Link
|
||||
to={"/about-irth"}
|
||||
className="text-btn-l flex-1 content-center md:my-4 my-[13px] text-[#0D1922]/70"
|
||||
to={'/about-irth'}
|
||||
className='text-btn-l flex-1 content-center md:my-4 my-[13px] text-[#0D1922]/70'
|
||||
>
|
||||
About IRTH
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="2xl:border-l-[0.069vw] border-l border-[#E2E2DC] 2xl:pl-[1.111vw] md:max-2xl:pl-6 pl-3.5 flex flex-col items-start 2xl:col-start-5 2xl:row-start-1 2xl:row-span-2">
|
||||
<div className='2xl:border-l-[0.069vw] border-l border-[#E2E2DC] 2xl:pl-[1.111vw] md:max-2xl:pl-6 pl-3.5 flex flex-col items-start 2xl:col-start-5 2xl:row-start-1 2xl:row-span-2'>
|
||||
<Link
|
||||
to={"/favorites"}
|
||||
className="text-btn-l flex-1 content-center md:my-4 my-[13px] text-[#0D1922]/70"
|
||||
to={'/favorites'}
|
||||
className='text-btn-l flex-1 content-center md:my-4 my-[13px] text-[#0D1922]/70'
|
||||
>
|
||||
Favorites
|
||||
</Link>
|
||||
<Link
|
||||
to={"/search"}
|
||||
className="text-btn-l flex-1 content-center md:my-4 my-2.5 text-[#0D1922]/70"
|
||||
to={'/search'}
|
||||
className='text-btn-l flex-1 content-center md:my-4 my-2.5 text-[#0D1922]/70'
|
||||
>
|
||||
Search
|
||||
</Link>
|
||||
<button className="text-btn-l flex-1 content-center md:my-3 text-[#0D1922]/70 flex items-center gap-2">
|
||||
<button className='text-btn-l flex-1 content-center md:my-3 text-[#0D1922]/70 flex items-center gap-2'>
|
||||
<span>Brochures</span>
|
||||
<div className="2xl:w-[1.667vw] 2xl:h-[1.667vw] md:max-2xl:w-6 md:max-2xl:h-6 w-5 h-5">
|
||||
<div className='2xl:w-[1.667vw] 2xl:h-[1.667vw] md:max-2xl:w-6 md:max-2xl:h-6 w-5 h-5'>
|
||||
<ChevronDownIcon />
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="content-end 2xl:text-right 2xl:col-start-6 2xl:row-start-1 2xl:row-span-2 md:max-2xl:col-start-1 md:max-2xl:row-start-3 max-md:col-span-3 max-md:pt-3 max-md:border-t border-[#E2E2DC]">
|
||||
<div className='content-end 2xl:text-right 2xl:col-start-6 2xl:row-start-1 2xl:row-span-2 md:max-2xl:col-start-1 md:max-2xl:row-start-3 max-md:col-span-3 max-md:pt-3 max-md:border-t border-[#E2E2DC]'>
|
||||
<Link
|
||||
to={"/"}
|
||||
className="md:text-caption-m text-caption-s max-2xl:text-[#73787C] text-[#0D1922]/70"
|
||||
to={'/'}
|
||||
className='md:text-caption-m text-caption-s max-2xl:text-[#73787C] text-[#0D1922]/70'
|
||||
>
|
||||
Privacy Policy
|
||||
</Link>
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
// import { sequenceVideos } from "../data/sequenceVideos";
|
||||
|
||||
import { useState, useRef } from "react";
|
||||
import gsap from "gsap";
|
||||
import { useSwipeable } from "react-swipeable";
|
||||
|
||||
@@ -0,0 +1,97 @@
|
||||
import { useState } from 'react';
|
||||
import ArrowLeftIcon from './icons/ArrowLeftIcon';
|
||||
import ArrowRightIcon from './icons/map/ArrowRightIcon';
|
||||
import { dubaiMarinaWellnessSlides } from '../data/aboutDubaiMarina';
|
||||
import { AnimatePresence, motion } from 'motion/react';
|
||||
|
||||
function Slider() {
|
||||
const [currentSlide, setCurrentSlide] = useState(0);
|
||||
const [direction, setDirection] = useState(-1);
|
||||
|
||||
const handleNextSlide = () => {
|
||||
if (currentSlide < dubaiMarinaWellnessSlides.length - 1) {
|
||||
setDirection(1);
|
||||
setCurrentSlide(currentSlide + 1);
|
||||
}
|
||||
};
|
||||
|
||||
const handlePreviousSlide = () => {
|
||||
if (currentSlide > 0) {
|
||||
setDirection(-1);
|
||||
setCurrentSlide(currentSlide - 1);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className='relative w-[63.333vw] h-[27.639vw] rounded-3xl overflow-hidden'>
|
||||
<AnimatePresence custom={direction}>
|
||||
<motion.div
|
||||
key={currentSlide}
|
||||
className='absolute inset-0 bg-cover bg-no-repeat bg-center'
|
||||
style={{
|
||||
backgroundImage: `url(${dubaiMarinaWellnessSlides[currentSlide].image})`,
|
||||
}}
|
||||
custom={direction}
|
||||
initial={{ x: direction > 0 ? '100%' : '-100%' }}
|
||||
animate={{ x: 0, transition: { duration: 0.5, ease: 'easeInOut' } }}
|
||||
exit={{
|
||||
x: direction > 0 ? '100%' : '-100%',
|
||||
transition: { duration: 0.8, ease: 'easeInOut' },
|
||||
}}
|
||||
/>
|
||||
</AnimatePresence>
|
||||
<div className='relative z-10 w-full h-full flex flex-col justify-between p-6'>
|
||||
<div className='flex flex-col gap-4'>
|
||||
<AnimatePresence mode='wait'>
|
||||
<motion.h3
|
||||
key={`title-${currentSlide}`}
|
||||
className='text-subheadline-m'
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
>
|
||||
{dubaiMarinaWellnessSlides[currentSlide].title}
|
||||
</motion.h3>
|
||||
</AnimatePresence>
|
||||
<AnimatePresence mode='wait'>
|
||||
<motion.p
|
||||
key={`desc-${currentSlide}`}
|
||||
className='text-s w-[19.861vw] tracking-[-0.07em] leading-[140%]'
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
>
|
||||
{dubaiMarinaWellnessSlides[currentSlide].description}
|
||||
</motion.p>
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
|
||||
<div className='flex items-center gap-[0.556vw] relative'>
|
||||
<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}
|
||||
>
|
||||
<span className='w-5 h-5'>
|
||||
<ArrowLeftIcon />
|
||||
</span>
|
||||
</div>
|
||||
<div className='text-s'>
|
||||
{currentSlide + 1}/{dubaiMarinaWellnessSlides.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'
|
||||
onClick={handleNextSlide}
|
||||
>
|
||||
<span className='w-5 h-5'>
|
||||
<ArrowRightIcon />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Slider;
|
||||
@@ -0,0 +1,9 @@
|
||||
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]'>
|
||||
{text}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default TextBox;
|
||||
@@ -0,0 +1,20 @@
|
||||
function EqualIcon() {
|
||||
return (
|
||||
<svg
|
||||
viewBox='0 0 20 20'
|
||||
fill='currentColor'
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
>
|
||||
<path
|
||||
d='M16.6654 7.64815C16.6654 7.29019 16.3752 7 16.0172 7H10.647H3.98018C3.62222 7 3.33203 7.29019 3.33203 7.64815C3.33203 8.00611 3.62222 8.2963 3.98018 8.2963H10.647H16.0172C16.3752 8.2963 16.6654 8.00611 16.6654 7.64815Z'
|
||||
fill='currentColor'
|
||||
/>
|
||||
<path
|
||||
d='M16.6654 12.2966C16.6654 11.9386 16.3752 11.6484 16.0172 11.6484H10.647H3.98018C3.62222 11.6484 3.33203 11.9386 3.33203 12.2966C3.33203 12.6545 3.62222 12.9447 3.98018 12.9447H10.647H16.0172C16.3752 12.9447 16.6654 12.6545 16.6654 12.2966Z'
|
||||
fill='currentColor'
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export default EqualIcon;
|
||||
Reference in New Issue
Block a user