This commit is contained in:
2025-05-22 13:09:23 +05:00
parent 4023ee9506
commit 249b5b0b97
6 changed files with 53 additions and 46 deletions
+1 -1
View File
@@ -1 +1 @@
VITE_API_URL=http://192.168.1.170:3000
VITE_API_URL=http://194.26.138.94:4002
+3 -3
View File
@@ -56,11 +56,11 @@ function FloorSelect({ complexName }: { complexName: string }) {
>
{Object.entries(
floorsMasks[complexName as keyof typeof floorsMasks]
).map(([floor, d]) => (
).map(([floorTitle, d]) => (
<path
onMouseEnter={() => setHoveredFloor(floor)}
onMouseEnter={() => setHoveredFloor(floorTitle)}
onMouseLeave={() => setHoveredFloor(null)}
key={floor}
key={floorTitle}
d={d}
className="fill-[#00BED7] cursor-pointer transition-opacity duration-300 opacity-20 hover:opacity-60 peer"
/>
+9 -9
View File
@@ -4,23 +4,23 @@ 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 ChevronDownIcon from "./icons/ChevronDownIcon";
import { useFavoritesUnitsStore } from "../stores/useFavoritesUnitsStore";
import { AnimatePresence, motion } from "motion/react";
import { useState } from "react";
import { BrochureButton } from "./Header";
import clsx from "clsx";
import { useClickAway } from "@uidotdev/usehooks";
import Button from "./ui/Button";
// import { AnimatePresence, motion } from "motion/react";
// import { useState } from "react";
// import { BrochureButton } from "./Header";
// import clsx from "clsx";
// import { useClickAway } from "@uidotdev/usehooks";
// import Button from "./ui/Button";
import useModalStore from "../stores/useModalStore";
import PrivacyPolicyModal from "./modals/PrivacyPolicyModal";
function Footer() {
const { favoriteUnits } = useFavoritesUnitsStore();
const [opened, setOpened] = useState(false);
// const [opened, setOpened] = useState(false);
const ref = useClickAway<HTMLDivElement>(() => setOpened(false));
// const ref = useClickAway<HTMLDivElement>(() => setOpened(false));
const { setModal } = useModalStore();
+39 -25
View File
@@ -1,13 +1,14 @@
import { useEffect, useState } from 'react';
import ArrowLeftIcon from './icons/ArrowLeftIcon';
import ArrowRightIcon from './icons/ArrowRightIcon';
import { dubaiMarinaSlider } from '../data/aboutDubaiMarina';
import { AnimatePresence, motion } from 'motion/react';
import { useEffect, useState } from "react";
import ArrowLeftIcon from "./icons/ArrowLeftIcon";
import ArrowRightIcon from "./icons/ArrowRightIcon";
import { dubaiMarinaSlider } from "../data/aboutDubaiMarina";
import { AnimatePresence, motion } from "motion/react";
import { useSwipeable } from "react-swipeable";
function Slider({
categoryName,
}: {
categoryName: 'Wellness' | 'Fitness' | 'Community' | 'Convenience';
categoryName: "Wellness" | "Fitness" | "Community" | "Convenience";
}) {
const [currentSlide, setCurrentSlide] = useState(0);
const [direction, setDirection] = useState(-1);
@@ -26,34 +27,47 @@ function Slider({
}
};
const handlers = useSwipeable({
onSwipedLeft: handleNextSlide,
onSwipedRight: handlePreviousSlide,
preventScrollOnSwipe: true,
touchEventOptions: {
passive: false,
},
trackMouse: true,
});
useEffect(() => {
setCurrentSlide(0);
}, [categoryName]);
return (
<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}>
<div
{...handlers}
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} initial={false}>
<motion.div
key={currentSlide}
className='absolute inset-0 bg-cover bg-no-repeat bg-center before:absolute before:inset-0 before:bg-[#0D1922]/20 before:z-10'
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})`,
}}
custom={direction}
initial={{ x: direction > 0 ? '100%' : '-100%' }}
animate={{ x: 0, transition: { duration: 0.5, ease: 'easeInOut' } }}
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' },
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'>
<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 text-white max-md:text-h5'
className="text-h3 text-white max-md:text-h5"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
@@ -62,10 +76,10 @@ function Slider({
{dubaiMarinaSlider[categoryName][currentSlide].title}
</motion.h3>
</AnimatePresence>
<AnimatePresence mode='wait'>
<AnimatePresence mode="wait">
<motion.p
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"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
@@ -75,23 +89,23 @@ function Slider({
</motion.p>
</AnimatePresence>
</div>
<div className='flex items-center gap-[0.556vw] relative max-md:gap-[2.222vw]'>
<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'
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'>
<span className="w-5 h-5">
<ArrowLeftIcon />
</span>
</div>
<div className='text-s text-white'>
<div className="text-s text-white">
{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'
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'>
<span className="w-5 h-5">
<ArrowRightIcon />
</span>
</div>
@@ -1,7 +0,0 @@
import SearchFilters from "../SearchFilters";
function UnitFiltersModal() {
return <SearchFilters inModal />;
}
export default UnitFiltersModal;
+1 -1
View File
@@ -227,7 +227,7 @@ function SearchPage() {
{showButtons && (
<div
className={clsx(
"fixed left-1/2 -translate-x-1/2 flex justify-center 2xl:gap-[0.278vw] gap-2 transition-all",
"fixed left-1/2 -translate-x-1/2 flex justify-center 2xl:gap-[0.278vw] gap-2 transition-all z-2",
footerReached && !hasNextPage
? "top-[calc(100dvh-17.222vw)] translate-y-0"
: "top-[calc(100dvh-2.222vw)] -translate-y-full"