zojgame/IRTH-Touch
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

search page + favorite page

Browse Source
This commit is contained in:
zojgame
2024-07-05 17:46:34 +05:00
parent 51c2fb6d8e
commit e93cc7ceea
19 changed files with 151 additions and 330 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/Footer.tsx
+6 -11
View File
@@ -2,15 +2,15 @@ import Logo from "./Logo";
const Footer = () => {
return (
<footer className="grid xl:grid-cols-12 sm:grid-cols-8 bg-white pr-7 py-8 gap-4 rounded-ss-2xl rounded-se-2xl">
<footer className="grid sm:grid-cols-8 bg-white pr-7 py-8 gap-4 rounded-ss-2xl rounded-se-2xl">
<div className="flex flex-col justify-between sm:row-span-2 sm:col-span-2 col-span-8">
<Logo />
<p className="text-caption-s text-[#73787C] font-semibold hidden sm:block pl-7">
<p className="text-caption-s text-[#73787C] font-semibold block pl-7">
Privacy Policy
</p>
</div>
<div className="border-t flex justify-between 2xl:col-start-7 2xl:col-span-3 xl:col-span-4 xl:col-start-5 sm:col-start-5 sm:col-span-full col-span-8">
<p className="text-[#73787C] py-3">COMPANY</p>
<div className="border-t flex justify-between sm:col-start-5 sm:col-span-full col-span-8 mr-4">
<p className="text-[#73787C] py-3 text-[33.75px]">COMPANY</p>
<div className="flex flex-col text-m text-[#73787C] text-left w-[5em]">
<p className="py-3">Masterplan</p>
<p className="py-3">Search</p>
@@ -18,8 +18,8 @@ const Footer = () => {
<p className="py-3 text-s">Company</p>
</div>
</div>
<div className="border-t flex justify-between 2xl:col-span-3 xl:col-span-4 sm:col-start-5 sm:col-span-full col-span-8">
<p className="text-[#73787C] py-3">FOLLOW US</p>
<div className="border-t flex justify-between sm:col-start-5 sm:col-span-full col-span-8 mr-4">
<p className="text-[#73787C] py-3 text-[33.75px]">FOLLOW US</p>
<div className="flex flex-col text-m text-[#73787C] text-left w-[5em]">
<a
className="py-3"
@@ -58,11 +58,6 @@ const Footer = () => {
</a>
</div>
</div>
<div className="block sm:hidden col-span-8 border-t">
<p className="text-caption-s text-[#73787C] font-semibold pt-3">
Privacy Policy
</p>
</div>
</footer>
);
};
client/src/components/aboutComplex/LivingSolutionSlider.tsx
+13 -35
View File
@@ -2,9 +2,6 @@
import { useSwipeable } from "react-swipeable";
import { useEffect, useLayoutEffect, useRef, useState } from "react";
import { Image } from "../../types/image";
import Button from "../Button";
import LeftArrowSliderIcon from "../icons/LeftArrowSliderIcon";
import RightArrowSliderIcon from "../icons/RightArrowSliderIcon";
const isMobile = true;
@@ -16,10 +13,10 @@ const images: Image[] = [
];
const getGapOffset = (screenWidth: number) => {
if (screenWidth > 1600) return 16;
if (screenWidth > 1280) return 24;
if (screenWidth > 640) return 16;
return 16;
// if (screenWidth > 1600) return 16;
// if (screenWidth > 1280) return 24;
if (screenWidth > 640) return 45;
return 45;
};
const LivingSolutionSlider = () => {
@@ -56,25 +53,18 @@ const LivingSolutionSlider = () => {
const screenWidth = window.innerWidth;
const gapOffset = getGapOffset(screenWidth);
const _rightImageOffset =
screenWidth > 1280
? `${"calc(clamp(315px, 7.0317rem + 19.0319vw, 485px)"} + ${
// ? `${"calc(clamp(315px, 6.9317rem + 17.0319vw, 420px)"} + ${
selectedImageIndex * (imageWidth + gapOffset)
}px)`
: `${(selectedImageIndex + 1) * (imageWidth + gapOffset)}px`;
const _rightImageOffset = `${
(selectedImageIndex + 1) * (imageWidth + gapOffset)
}px`;
setRightImageOffset(_rightImageOffset);
}, [imageWidth, selectedImageIndex, window.innerWidth]);
return (
<div className="flex flex-col gap-6" {...handlers}>
<div
className="relative col-span-full overflow-x-hidden flex flex-col"
style={{ height: "clamp(30rem, 12.6318rem + 21.6933vw, 75rem)" }}
>
<div className="relative col-span-full overflow-x-hidden flex flex-col h-[1122px]">
<div
className={`flex gap-4 w-full absolute h-full transition-all duration-300 ease-in-out select-none xl:px-0 px-4`}
className={`flex gap-4 w-full absolute h-full transition-all duration-300 ease-in-out select-none`}
style={{
right: `${rightImageOffset}`,
}}
@@ -85,32 +75,20 @@ const LivingSolutionSlider = () => {
src={image.src}
alt=""
key={image.id}
className="rounded-2xl sm:aspect-[6/5] object-cover 2xl:w-[calc(100vw*1/2)] xl:w-[calc(100vw*5/12)] pointer-events-none select-none w-[calc(100%-16px)]"
className="rounded-2xl sm:aspect-[6/5] object-cover pointer-events-none select-none w-[calc(100%-16px)]"
/>
))}
</div>
<Button
{/* <Button
onClick={prev}
icon={<LeftArrowSliderIcon />}
className="absolute text-[#73787C] top-[calc(50%-22px)] xl:left-solution-slider-btn-offset left-6 hidden sm:block"
className="absolute text-[#73787C] top-[calc(50%-22px)] left-6 hidden sm:block"
/>
<Button
onClick={next}
icon={<RightArrowSliderIcon />}
className="absolute text-[#73787C] top-[calc(50%-22px)] right-6 hidden sm:block"
/>
</div>
<div className="self-center gap-1 sm:hidden flex">
{images.map((image, index) => (
<div
key={image.id}
className={`transition-all duration-300 ease-in-out rounded-full h-2 ${
index - 1 === selectedImageIndex
? "w-6 bg-[#0D1922]"
: "w-2 bg-[#0D192266]"
}`}
></div>
))}
/> */}
</div>
</div>
);
client/src/components/aboutComplex/RoveHomeSlider.tsx
+8 -27
View File
@@ -74,18 +74,6 @@ const RoveHomeSlider = () => {
}
}
// const handleOnRightClick = () => {
// if (offset > -1 * (rovehomeSlides.length - 1)) {
// setOffset((prev) => prev - 1);
// }
// };
// const handleOnLeftClick = () => {
// if (offset < 0) {
// setOffset((prev) => prev + 1);
// }
// };
useEffect(() => {
if (!imageRef.current) return;
const width = imageRef.current.width;
@@ -94,13 +82,12 @@ const RoveHomeSlider = () => {
return (
<div
className="col-span-full relative xl:aspect-video sm:aspect-[7.6/10] grid grid-cols-12 items-end pb-6 sm:pl-4 sm:px-0 px-4"
className="col-span-full relative sm:aspect-[7.6/10] grid grid-cols-12 items-end pb-6 px-4"
{...handlers}
>
{/* <div className="absolute w-full h-full z-50" ></div> */}
<div className="bg-[#F3F3F2] select-none p-8 z-50 xl:col-span-3 col-span-6 xl:col-start-3 rounded-2xl xl:min-h-[520px] sm:flex hidden flex-col justify-between">
<div className="bg-[#F3F3F2] select-none p-[67.5px] z-50 col-span-6 rounded-2xl sm:flex hidden flex-col justify-between">
<div>
<h2 className="text-subheadline-m font-semibold text-[#00BED7] pb-4 ">
<h2 className="text-subheadline-m font-semibold text-[#00BED7] pb-4">
{rovehomeSlides[offset * -1].title}
</h2>
<p className="text-[#73787C] text-m ">
@@ -115,13 +102,14 @@ const RoveHomeSlider = () => {
<Button icon={<LeftArrowIcon />} onClick={prev} />
<Button icon={<RightArrowIcon />} onClick={next} />
</div>
<p className="text-l text-[#00BED7]">
<p className="text-s text-[#00BED7]">
{rovehomeSlides.length - rovehomeSlides.length + 1 - offset}/
{rovehomeSlides.length}
</p>
</div>
</div>
<div className="sm:absolute lg:w-[calc(100vw-5px)] sm:w-screen w-[calc(100vw-32px)] overflow-hidden xl:aspect-video sm:aspect-[7.6/10] rounded-2xl sm:rounded-ee-2xl sm:rounded-es-2xl rounded-ee-none rounded-es-none">
{/* <div className="sm:absolute lg:w-[calc(100vw-5px)] sm:w-screen w-[calc(100vw-32px)] overflow-hidden xl:aspect-video sm:aspect-[7.6/10] rounded-2xl sm:rounded-ee-2xl sm:rounded-es-2xl rounded-ee-none rounded-es-none"> */}
<div className="sm:absolute sm:w-screen overflow-hidden sm:aspect-[7.6/10] rounded-2xl sm:rounded-ee-2xl sm:rounded-es-2xl">
<div
className="w-fit flex transition-transform duration-300 ease-in-out"
style={{ transform: `translateX(${offset * imageWidth}px)` }}
@@ -133,19 +121,12 @@ const RoveHomeSlider = () => {
key={slide.id}
src={slide.src}
alt=""
className="select-none pointer-events-none xl:aspect-video sm:aspect-[7.6/10] aspect-video object-cover xl:h-auto"
className="select-none pointer-events-none sm:aspect-[7.6/10] aspect-video object-cover"
/>
<div className="flex p-4 flex-col gap-3 bg-white rounded-ee-2xl rounded-es-2xl sm:hidden sm:w-full w-[calc(100vw-32px)] h-full">
<h2 className="text-[#00BED7] font-semibold text-subheadline-m">
{slide.title}
</h2>
<p className="mobile-text-s text-[#73787C]">{slide.desc1}</p>
<p className="mobile-text-s text-[#73787C]">{slide.desc2}</p>
</div>
</div>
))}
</div>
<div className="flex gap-1 justify-center pt-4 ">
<div className="flex justify-center pt-4">
{rovehomeSlides.map((_, index) => (
<div
className={`rounded-full transition-all duration-300 ease-in-out sm:hidden ${
client/src/components/complexWingPage/SequenceWing/SequenceWing.tsx
+10 -9
View File
@@ -18,6 +18,7 @@ import MobileFloorDescription from "./MobileFloorDescription";
import WingFloorModal from "../../modals/mobile/WingFloorModal";
import MobileSkygardenDescription from "./MobileSkygardenDescription";
import SkygardenModal from "../../modals/mobile/SkygardenModal";
import LoaderModal from "../../modals/LoaderModal";
// const skyGardenFloor = 22;
@@ -34,8 +35,8 @@ const SequenceWing = () => {
null
);
const [, setIsWrapperHovered] = useState(false);
const [isSkygardenSidebar, setIsSkygardenSidebar] = useState(false);
const [isFloorSidebar, setIsFloorSidebar] = useState(false);
const [isSkygardenSidebar] = useState(false);
const [isFloorSidebar] = useState(false);
const { setModal } = useModal();
const [apartments, setApartments] = useState<IAparmentRes[]>([]);
const [currentHoveredApartments, setCurrentHoveredApartments] = useState<
@@ -268,13 +269,13 @@ const SequenceWing = () => {
sortList,
]);
// useEffect(() => {
// if (isLoading) {
// setModal(<LoaderModal />);
// } else {
// setModal(null);
// }
// }, [isLoading, setModal]);
useEffect(() => {
if (isLoading) {
setModal(<LoaderModal />);
} else {
setModal(null);
}
}, [isLoading, setModal]);
return (
<div className="absolute left-0 overflow-hidden h-screen w-screen select-none ">
client/src/components/favoritesPage/FavoriteApartmentCard.tsx
+3 -7
View File
@@ -75,15 +75,11 @@ const FavoriteAppartmentCard = ({ card }: FavoriteAppartmentCardProps) => {
className="bg-white flex flex-col p-4 rounded-2xl gap-4 cursor-pointer select-none"
onClick={handleOnFavoriteCardClick}
>
<div className="flex gap-4 justify-between">
<div className="flex gap-4 justify-between">
<div className="flex gap-1 flex-col">
<p className="text-[#00BED7] text-s leading-5">
Rove Home {Unit_Type}
</p>
<p className="text-[#00BED7] text-s">Rove Home {Unit_Type}</p>
<div className="text-[#73787C] flex gap-2 items-center w-fit">
<p className="text-caption-m font-semibold leading-4">
{wing} Wing
</p>
<p className="text-caption-m font-semibold">{wing} Wing</p>
<div className="w-1 h-1 bg-[#E2E2DC] rounded-full"></div>
<p className="text-caption-m font-semibold leading-4">
Floor {Floor}
client/src/components/favoritesPage/FavoriteCardList.tsx
+1 -1
View File
@@ -4,7 +4,7 @@ import FavoriteAppartmentCard from "./FavoriteApartmentCard";
const FavoriteCardList = () => {
const { favorites } = useFavorites();
return (
<div className="grid lg:grid-cols-4 gap-4 grid-cols-2">
<div className="grid gap-4 grid-cols-2">
{favorites.map((card) => (
<FavoriteAppartmentCard card={card} key={card.id} />
))}
client/src/components/favoritesPage/FavoriteSlider.tsx
+9 -10
View File
@@ -33,18 +33,18 @@ const FavoritesSlider = () => {
};
useEffect(() => {
const screenWidth = window.innerWidth;
if (screenWidth >= 1024) {
setCols(4);
} else {
setCols(2);
}
// const screenWidth = window.innerWidth;
// if (screenWidth >= 1024) {
// setCols(4);
// } else {
setCols(2);
// }
}, [window.innerWidth]);
useEffect(() => {
const cardElement = cardRef.current;
if (cardElement) {
const gap = 16;
const gap = 45;
const width = cardElement.clientWidth + gap;
const buttonHeight = cardElement.clientHeight;
const _buttonTopPos = buttonHeight / 2 + 20;
@@ -54,7 +54,7 @@ const FavoritesSlider = () => {
}, [cardRef.current]);
return (
<div className="w-[calc(100vw - 48px)] relative">
<div className="w-[calc(100vw - 135px)] relative">
<div
className="absolute -left-2 z-30"
style={{ top: `${buttonTopPos}px` }}
@@ -85,10 +85,9 @@ const FavoritesSlider = () => {
<div className="flex w-fit gap-4">
{Array.from({ length: Math.ceil(favorites.length / cols) }).map(
(_, index) => {
console.log("index", index);
return (
<div
className="grid lg:grid-cols-4 grid-cols-2 gap-4 w-[calc(100vw-48px)] h-fit"
className="grid grid-cols-2 gap-4 w-[calc(100vw-135px)] h-fit "
key={index}
>
{favorites
client/src/components/header/Navbar/NavbarTabDesktop.tsx
+1 -1
View File
@@ -26,7 +26,7 @@ const NavbarTabDesktop = ({
{tab.value}
</div>
{tab.count !== 0 && (
<div className="absolute top-2 right-0 w-4 h-4 bg-[#00BED7] rounded-full text-white text-[24px] flex items-center justify-center pt-0.5 pr-[1px]">
<div className="absolute top-[24px] right-0 w-[38.4px] h-[38.4px] bg-[#00BED7] rounded-full text-white text-[24px] flex items-center justify-center pt-[0.5] pr-[1px]">
<span className="leading-none">{tab.count}</span>
</div>
)}
client/src/components/modals/mobile/SearchFiltersModal.tsx
+1 -1
View File
@@ -126,7 +126,7 @@ const SearchFiltersModal = () => {
return (
<div
className="bg-[#F3F3F2] rounded-ss-lg rounded-se-lg h-full p-6 flex flex-col gap-6"
className="bg-[#F3F3F2] rounded-ss-2xl rounded-se-2xl h-full p-6 flex flex-col gap-6"
{...handlers}
>
<div className="flex justify-between pb-6 border-b">
client/src/components/searchPage/LayoutCard.tsx
+4 -10
View File
@@ -84,19 +84,13 @@ const LayoutCard = ({ apartmentCard }: LayoutCardProps) => {
>
<div className="flex gap-4 justify-between">
<div className="flex gap-1 flex-col">
<p className="text-[#00BED7] text-s leading-5">{projectName}</p>
<p className="text-[#00BED7] text-s">{projectName}</p>
<div className="text-[#73787C] flex gap-2 items-center w-fit">
<p className="text-caption-m font-semibold leading-4">
{wing} Wing
</p>
<p className="text-caption-m font-semibold">{wing} Wing</p>
<div className="w-1 h-1 bg-[#E2E2DC] rounded-full"></div>
<p className="text-caption-m font-semibold leading-4">
Floor {floor}
</p>
<p className="text-caption-m font-semibold">Floor {floor}</p>
<div className="w-1 h-1 bg-[#E2E2DC] rounded-full"></div>
<p className="text-caption-m font-semibold leading-4">
№ {unitNumber}
</p>
<p className="text-caption-m font-semibold">№ {unitNumber}</p>
</div>
</div>
<Button
client/src/components/searchPage/LayoutOptions.tsx
+11 -7
View File
@@ -120,10 +120,10 @@ const LayoutOptions = () => {
]);
return (
<section className="w-full p-6 flex flex-col">
<section className="w-full p-6 flex flex-col pt-[156px]">
<div className="flex justify-between items-center border-b">
<div className="flex w-full justify-between pb-4 lg:flex-row lg:items-center flex-col">
<div className="flex gap-4 font-semibold text-subheadline-s leading-7 py-[6px]">
<div className="flex w-full justify-between pb-4 flex-col gap-4">
<div className="flex gap-4 font-semibold text-subheadline-s">
<h2 className="text-[#0D1922]">Units</h2>
<p className="text-[#73787C]">
{apartments ? apartments.length : 0}
@@ -131,10 +131,11 @@ const LayoutOptions = () => {
</div>
<SortButton sortList={sortList} onClick={handleOnSortClick} />
</div>
<div className="lg:hidden block">
<div className="self-start">
<Button
icon={<FilterIcon />}
text="Filters"
buttonType="primary"
className="text-[#0D1922B2]"
onClick={handleOnFilterClick}
/>
@@ -143,7 +144,7 @@ const LayoutOptions = () => {
{isLoading ? (
<SearchLoader />
) : (
<div className="grid 2xl:grid-cols-4 xl:grid-cols-3 grid-cols-2 gap-4 pt-6">
<div className="grid grid-cols-2 gap-4 pt-6">
{apartments &&
apartments.map((apartment) => (
<LayoutCard apartmentCard={apartment} key={apartment.id} />
@@ -151,10 +152,13 @@ const LayoutOptions = () => {
</div>
)}
<div
className="bg-white rounded-lg mt-4 py-[10px] flex justify-center select-none cursor-pointer items-center gap-2"
className="bg-white rounded-lg mt-4 py-[28.75px] flex justify-center select-none cursor-pointer items-center gap-2"
onClick={handleOnShowMoreBtnClick}
>
<SearchIcon /> Show 12 more apartments
<div className="zoom-280">
<SearchIcon />{" "}
</div>{" "}
<p className="text-[39.38px]">Show 12 more apartments</p>
</div>
</section>
);
client/src/components/searchPage/SidebarFilters.tsx
+1 -1
View File
@@ -99,7 +99,7 @@ const SidebarFilters = () => {
return (
<div>
<div className=" h-full w-[360px] bg-[#F3F3F2] flex-col items-center justify-between border-r lg:flex hidden">
<div className=" h-full w-[360px] bg-[#F3F3F2] flex-col items-center justify-between border-r hidden">
<div className="w-full py-6 px-6 flex flex-col items-center ">
<div className="flex justify-between border-b border-[#E2E2DC] w-full pb-4 ">
<h2 className="text-subheadline-m font-semibold">Filters</h2>
client/src/components/searchPage/SortButton.tsx
+1 -1
View File
@@ -26,7 +26,7 @@ const SortButton = ({ sortList, onClick }: SortButtonProps) => {
{sortList.find((sort) => sort.isSelected)?.title.toLocaleLowerCase()}{" "}
</div>
<div
className={`transition-all duration-300 ease-in-out ${
className={`zoom-280 transition-all duration-300 ease-in-out ${
isSelected ? "rotate-180" : "rotate-0"
}`}
>
client/src/consts/buttonStyles.ts
+6 -6
View File
@@ -1,13 +1,13 @@
import { ButtonStyle } from "../types/button";
const backgroundColors: ButtonStyle = {
cta: "bg-[#00BED7] hover:bg-[#00A8BE]",
primary: "bg-[#ffffff] hover:bg-[#F3F3F2] active:bg-[#fff]",
secondary: "bg-[#ffffff] hover:bg-[#F3F3F2] active:bg-[#fff]",
cta: "bg-[#00BED7] hover:bg-none",
primary: "bg-[#ffffff] hover:bg-none active:bg-[#fff]",
secondary: "bg-[#ffffff] hover:bg-none active:bg-[#fff]",
tertiary: "",
fab: "bg-[#ffffff] hover:bg-[#F3F3F2]",
favorite: "bg-[#FFFFFF] hover:bg-[#F3F3F2]",
special: "bg-[#0D192266] hover:bg-[#0D1922B2]",
fab: "bg-[#ffffff] hover:bg-none",
favorite: "bg-[#FFFFFF] hover:bg-none",
special: "bg-[#0D192266] hover:bg-none",
};
const textColors: ButtonStyle = {
client/src/index.css
+4 -3
View File
@@ -176,7 +176,8 @@ html {
@media (min-width: 1280px) {
.text-caption-s {
font-family: "Usual", sans-serif;
font-size: clamp(10px, 0.3744rem + 0.313vw, 12px);
font-size: 28.13px;
/* font-size: clamp(10px, 0.3744rem + 0.313vw, 12px); */
line-height: 135%;
}
@@ -184,7 +185,7 @@ html {
font-family: "Usual", sans-serif;
line-height: 135%;
/* font-size: clamp(12px, 0.4994rem + 0.313vw, 14px); */
font-size: 28.8px;
font-size: 33.75px;
}
.text-s {
@@ -204,7 +205,7 @@ html {
.text-subheadline-s {
/* text-[48px] */
font-family: "Usual", sans-serif;
line-height: 140%;
/* line-height: 140%; */
font-size: 48px;
}
client/src/pages/AboutComplex.tsx
+59 -59
View File
@@ -110,13 +110,13 @@ const advantages: IAdvantages[] = [
},
];
const advStyles = [
"xl:col-start-3 xl:col-end-7",
"xl:col-span-4",
"xl:col-start-5 xl:col-end-9",
"xl:col-span-4",
"xl:col-start-3 xl:col-span-4",
];
// const advStyles = [
// "xl:col-start-3 xl:col-end-7",
// "xl:col-span-4",
// "xl:col-start-5 xl:col-end-9",
// "xl:col-span-4",
// "xl:col-start-3 xl:col-span-4",
// ];
const AboutComplex = () => {
const navigate = useNavigate();
@@ -127,7 +127,7 @@ const AboutComplex = () => {
return (
<>
<section className={`xl:pt-16 font-usual grid grid-cols-12 select-none`}>
<section className={`pt-16 font-usual grid grid-cols-12 select-none`}>
<div className="flex px-6 py-4 col-span-full h-[180px] relative">
<div className="fixed z-[100]">
<Button
@@ -139,21 +139,21 @@ const AboutComplex = () => {
</div>
</div>
{/* About Rove Home */}
<h1 className="uppercase text-headline-s px-4 col-span-full pb-6">
<h1 className="uppercase text-headline-s px-6 col-span-full pb-6">
Rove Home this residence a complete ecosystem that has everything
you’ll ever need. This isn’t just where you’ll live. It’s where you’ll
thrive.
</h1>
<div className="col-span-full px-6 grid grid-cols-12">
<div className="col-span-full px-6 grid grid-cols-12 ">
<div className="text-caption-m font-semibold text-[#73787C] uppercase col-span-full pb-3">
About rove home
</div>
<div className="col-span-full grid grid-cols-10 gap-6 pb-20">
<div className="col-span-full grid grid-cols-10 gap-6 pb-[180px]">
<img
src="/images/aboutCompany/rovehome.png"
alt=""
className="col-span-full"
className="col-span-full w-full"
/>
<div className="col-span-5 text-s text-[#73787C]">
Embrace Rove’s forever-young spirit at Rove Home, where inspiring
@@ -165,15 +165,15 @@ const AboutComplex = () => {
{/* RoveHome roof */}
<RoveHomeSlider />
{/* Rove around the city */}
<div className="col-span-full px-6 grid grid-cols-12 pt-14">
<div className="text-caption-m font-semibold text-[#73787C] xl:col-span-1 col-span-full uppercase pb-3">
<div className="col-span-full px-6 grid grid-cols-12 pt-14">
<div className="text-caption-m font-semibold text-[#73787C] col-span-full uppercase pb-3">
ROVE AROUND THE CITY
</div>
<div className="xl:col-start-3 col-span-full grid grid-cols-10 gap-6">
<div className="xl:col-span-4 xl:grid grid-cols-4 gap-4 order-2 xl:order-1 col-span-full flex flex-nowrap overflow-x-scroll">
<div className=" col-span-full grid grid-cols-10 gap-3">
<div className="gap-4 order-2 col-span-full flex flex-nowrap overflow-x-scroll">
{roveAroundTheCity.map((item) => (
<div
className="xl:col-span-2 sm:col-span-1 col-span-2 bg-white rounded-lg flex flex-col p-3 xl:min-w-full sm:min-w-[calc(25vw-24px)] min-w-[calc(50vw-30px)]"
className="col-span-1 bg-white rounded-lg flex flex-col p-3 sm:min-w-[calc(25vw-24px)] gap-1"
key={item.id}
>
<div className="flex gap-1 items-center">
@@ -181,11 +181,15 @@ const AboutComplex = () => {
<div className="text-[#0D1922] text-m">{item.title}</div>
</div>
<p className="text-s text-[#73787C]">{item.time} mins</p>
<img className="w-16 h-16 self-end" src={item.image} alt="" />
<img
className="w-16 h-16 self-end mt-auto"
src={item.image}
alt=""
/>
</div>
))}
</div>
<div className="col-span-full xl:col-start-5 order-1 xl:order-2">
<div className="col-span-full order-1">
<img
src="/images/aboutCompany/Map.png"
alt=""
@@ -195,21 +199,19 @@ const AboutComplex = () => {
</div>
</div>
{/* Advantages */}
<div className="col-span-full grid grid-cols-12 px-6 gap-x-4 xl:pt-[140px] sm:pt-16 pt-14">
<div className="uppercase text-[#73787C] font-semibold xl:col-span-1 pb-3 text-caption-m col-span-full">
<div className="col-span-full grid grid-cols-12 px-6 gap-x-4 pt-16">
<div className="uppercase text-[#73787C] font-semibold pb-3 text-caption-m col-span-full">
ADVANTAGES
</div>
<p className="text-subheadline-m font-semibold xl:col-start-3 col-span-full xl:pb-6 text-[#00BED7] pb-3">
<p className="text-subheadline-m font-semibold col-span-full text-[#00BED7] pb-3">
What makes a rove home?
</p>
{advantages.map((adv, index) => {
const styles = `${advStyles[index]} ${
index === advantages.length - 1 ? "" : "xl:pb-14 pb-6"
}`;
const styles = `${index === advantages.length - 1 ? "" : "pb-6"}`;
return (
<div
className={`flex flex-col ${styles} xl:col-span-4 sm:col-span-6 col-span-full`}
className={`flex flex-col ${styles} sm:col-span-6 col-span-full`}
key={adv.id}
>
<img
@@ -226,16 +228,16 @@ const AboutComplex = () => {
})}
</div>
{/* EXPANDABLE LIVING SOLUTIONS */}
<h1 className="uppercase xl:rubber-headline-indent text-headline-s xl:px-6 px-4 col-span-full pb-6 xl:pt-[140px] sm:pt-[100px] pt-20">
<h1 className="uppercase text-headline-s px-6 col-span-full pb-6 sm:pt-[280px]">
Live in the future, today. Designed to embody Rove’s unique look and
feel, the interiors will feature intelligent and modular living
solutions by ORI, never seen before in UAE and the region.
</h1>
<div className="col-span-full grid grid-cols-12 px-6">
<div className="text-caption-m font-semibold text-[#73787C] xl:col-span-2 uppercase col-start-1 col-span-full pb-3">
<div className="text-caption-m font-semibold text-[#73787C] uppercase col-start-1 col-span-full pb-3">
EXPANDABLE LIVING SOLUTIONS
</div>
<div className="flex flex-col gap-6 xl:col-start-3 xl:col-span-4 col-span-full">
<div className="flex flex-col gap-6 col-span-8">
<div className="text-[#00BED7] text-subheadline-m">
ORI introduces a revolutionary solution to apartment living, where
space is not just a constraint but an opportunity.{" "}
@@ -260,12 +262,12 @@ const AboutComplex = () => {
</div>
</div>
{/* Units description */}
<div className="col-span-full px-6 grid grid-cols-12 xl:pt-[140px] xm:pt-[100px] pt-[80px]">
<div className="text-caption-m font-semibold text-[#73787C] xl:col-span-1 col-span-full uppercase pb-3">
<div className="col-span-full px-6 grid grid-cols-12 pt-[80px]">
<div className="text-caption-m font-semibold text-[#73787C] col-span-full uppercase pb-3">
UNITS DESCRIPTION
</div>
<div className="xl:col-start-3 col-span-full grid grid-cols-10 gap-6">
<div className="lg:col-span-5 col-span-full grid relative grid-cols-5">
<div className="col-span-full grid grid-cols-10 gap-6">
<div className="col-span-full grid relative grid-cols-5">
<div className="sm:col-span-3 col-span-full h-full bg-white rounded-2xl flex flex-col justify-between p-8 sm:mr-[-32px] gap-6">
<div>
<h2 className="text-[#0D1922] font-bold text-subheadline-l">
@@ -289,10 +291,10 @@ const AboutComplex = () => {
<img
src="/images/aboutCompany/unitsDescription/1.png"
alt=""
className="sm:col-span-2 col-span-full -z-10 sm:h-full w-full object-cover rounded-2xl xl:aspect-auto sm:aspect-square aspect-[3.3/2] mt-[-32px] sm:mt-0"
className="sm:col-span-2 col-span-full -z-10 sm:h-full w-full object-cover rounded-2xl sm:aspect-square aspect-[3.3/2] mt-[-32px] sm:mt-0"
/>
</div>
<div className="lg:col-span-5 col-span-full grid relative grid-cols-5">
<div className=" col-span-full grid relative grid-cols-5">
<div className="sm:col-span-3 col-span-full h-full bg-white rounded-2xl flex flex-col justify-between p-8 sm:mr-[-32px] gap-6">
<div>
<h2 className="text-[#0D1922] font-bold text-subheadline-l">
@@ -307,18 +309,17 @@ const AboutComplex = () => {
</div>
<div>
<p className="text-s text-[#0D1922]">390 Sqft</p>
<p className="font-bold text-m text-[#00BED7]">
AED 1,138,888
</p>
<p className="font-bold text-m text-[#00BED7]">Unvailiable</p>
{/* AED 1,138,888 */}
</div>
</div>
<img
src="/images/aboutCompany/unitsDescription/2.png"
alt=""
className="sm:col-span-2 col-span-full -z-10 sm:h-full w-full object-cover rounded-2xl xl:aspect-auto sm:aspect-square aspect-[3.3/2] mt-[-32px] sm:mt-0"
className="sm:col-span-2 col-span-full -z-10 sm:h-full w-full object-cover rounded-2xl sm:aspect-square aspect-[3.3/2] mt-[-32px] sm:mt-0"
/>
</div>
<div className="lg:col-span-5 col-span-full grid relative grid-cols-5">
<div className="col-span-full grid relative grid-cols-5">
<div className="sm:col-span-3 col-span-full h-full bg-white rounded-2xl flex flex-col justify-between p-8 sm:mr-[-32px] gap-6">
<div>
<h2 className="text-[#0D1922] font-bold text-subheadline-l">
@@ -342,10 +343,10 @@ const AboutComplex = () => {
<img
src="/images/aboutCompany/unitsDescription/3.png"
alt=""
className="sm:col-span-2 col-span-full -z-10 sm:h-full w-full object-cover rounded-2xl xl:aspect-auto sm:aspect-square aspect-[3.3/2] mt-[-32px] sm:mt-0"
className="sm:col-span-2 col-span-full -z-10 sm:h-full w-full object-cover rounded-2xl sm:aspect-square aspect-[3.3/2] mt-[-32px] sm:mt-0"
/>
</div>
<div className="lg:col-span-5 col-span-full grid relative grid-cols-5">
<div className="col-span-full grid relative grid-cols-5">
<div className="sm:col-span-3 col-span-full h-full bg-white rounded-2xl flex flex-col justify-between p-8 sm:mr-[-32px] gap-6">
<div>
<h2 className="text-[#0D1922] font-bold text-subheadline-l">
@@ -363,30 +364,29 @@ const AboutComplex = () => {
</div>
<div>
<p className="text-s text-[#0D1922]">891 Sqft</p>
<p className="font-bold text-m text-[#00BED7]">
AED 2,408,888
</p>
<p className="font-bold text-m text-[#00BED7]">Unvailiable</p>
{/* AED 2,408,888 */}
</div>
</div>
<img
src="/images/aboutCompany/unitsDescription/4.png"
alt=""
className="sm:col-span-2 col-span-full -z-10 w-full object-cover rounded-2xl xl:aspect-auto sm:aspect-square aspect-[3.3/2] h-full mt-[-32px] sm:mt-0"
className="sm:col-span-2 col-span-full -z-10 w-full object-cover rounded-2xl sm:aspect-square aspect-[3.3/2] h-full sm:mt-0"
/>
</div>
</div>
</div>
{/* About the developer */}
<h1 className="uppercase xl:rubber-headline-indent text-headline-s xl:px-6 px-4 col-span-full xl:pb-16 sm:pb-10 pb-7 xl:pt-[140px] sm:pt-[100px] pt-20">
<h1 className="uppercase text-headline-s px-6 col-span-full sm:pb-10 pb-7 sm:pt-[100px] pt-20">
Founded under Alshamsi family, IRTH is a real estate investment
platform - based on the philosophy of value creation, innovation and
building world-class living experiences.
</h1>
<div className="col-span-full grid xl:grid-cols-12 grid-cols-8 px-6 gap-6">
<div className="text-caption-m font-semibold text-[#73787C] xl:col-span-1 col-span-full uppercase">
<div className="col-span-full grid grid-cols-8 px-6 gap-6">
<div className="text-caption-m font-semibold text-[#73787C] col-span-full uppercase">
ABOUT THE DEVELOPER
</div>
<div className="xl:col-start-3 xl:col-span-3 text-[#73787C] flex-col flex justify-between col-span-5 gap-6">
<div className="text-[#73787C] flex-col flex justify-between col-span-5 gap-6">
<div>
<p className="text-m">
IRTH’s vision is long-term, supported with a proactive approach,
@@ -409,7 +409,7 @@ const AboutComplex = () => {
className="justify-center w-fit px-[51px]"
/>
</div>
<div className="xl:col-start-7 xl:col-span-7 col-span-full">
<div className="col-span-full">
<img
src="/images/aboutCompany/about_the_developer.png"
alt=""
@@ -418,12 +418,12 @@ const AboutComplex = () => {
</div>
</div>
{/* MAIN CONSULTANTS */}
<div className="col-span-full grid xl:grid-cols-12 grid-cols-8 px-6 xl:pt-[140px] xl:pb-[140px] sm:pt-[100px] pt-20 pb-10">
<div className="text-caption-m font-semibold text-[#73787C] xl:col-span-2 uppercase pb-3 col-span-full">
<div className="col-span-full grid xl:grid-cols-12 grid-cols-8 px-6 sm:pt-[280px] pb-[112px]">
<div className="text-caption-m font-semibold text-[#73787C] uppercase pb-3 col-span-full">
MAIN CONSULTANTS
</div>
<div className="col-span-full grid xl:grid-cols-12 grid-cols-8 gap-4">
<div className="xl:col-start-3 col-start-1 sm:col-span-2 col-span-4 bg-white rounded-2xl p-6 h-[280px] justify-between flex flex-col">
<div className="col-span-full grid grid-cols-8 gap-4">
<div className="col-start-1 sm:col-span-2 col-span-4 bg-white rounded-2xl p-6 h-[630px] justify-between flex flex-col">
<div className="flex gap-1 items-center">
<div className="bg-[#00BED7] w-3 h-3 rounded-full"></div>
<p className="text-m text-[#0D1922]">Architect</p>
@@ -434,7 +434,7 @@ const AboutComplex = () => {
className="self-end"
/>
</div>
<div className="sm:col-span-2 bg-white rounded-2xl col-span-4 p-6 h-[280px] justify-between flex flex-col">
<div className="sm:col-span-2 bg-white rounded-2xl col-span-4 p-6 h-[630px] justify-between flex flex-col">
<div className="flex gap-1 items-center">
<div className="bg-[#00BED7] w-3 h-3 rounded-full"></div>
<p className="text-m text-[#0D1922]">Landscape architect</p>
@@ -445,7 +445,7 @@ const AboutComplex = () => {
className="self-end"
/>
</div>
<div className="sm:col-span-2 bg-white rounded-2xl col-span-full p-6 h-[280px] justify-between flex flex-col xl:col-start-9 sm:col-start-7">
<div className="sm:col-span-2 bg-white rounded-2xl col-span-full p-6 h-[630px] justify-between flex flex-col sm:col-start-7">
<div className="flex gap-1 items-center">
<div className="bg-[#00BED7] w-3 h-3 rounded-full"></div>
<p className="text-m text-[#0D1922]">Art team</p>
@@ -456,7 +456,7 @@ const AboutComplex = () => {
className="self-end"
/>
</div>
<div className="sm:col-span-2 bg-white rounded-2xl col-span-4 p-6 h-[280px] justify-between flex flex-col xl:col-start-5 sm:col-start-3">
<div className="sm:col-span-2 bg-white rounded-2xl col-span-4 p-6 h-[630px] justify-between flex flex-col sm:col-start-3">
<div className="flex gap-1 items-center">
<div className="bg-[#00BED7] w-3 h-3 rounded-full"></div>
<p className="text-m text-[#0D1922]">Id team</p>
@@ -467,7 +467,7 @@ const AboutComplex = () => {
className="self-end"
/>
</div>
<div className="sm:col-span-2 bg-white rounded-2xl col-span-4 p-6 h-[280px] justify-between flex flex-col">
<div className="sm:col-span-2 bg-white rounded-2xl col-span-4 p-6 h-[630px] justify-between flex flex-col">
<div className="flex gap-1 items-center">
<div className="bg-[#00BED7] w-3 h-3 rounded-full"></div>
<p className="text-m text-[#0D1922]">Sales and marketing</p>
client/src/pages/Favorites.tsx
+4 -139
View File
@@ -11,141 +11,6 @@ import FavoritesSlider from "../components/favoritesPage/FavoriteSlider";
import FavoriteCardList from "../components/favoritesPage/FavoriteCardList";
import useFavorites from "../store/useFavorites";
// const favoriteCards: ILayoutCard[] = [
// {
// id: "1",
// roveHome: "Marasi Drive",
// apartmentType: "Studio Flex",
// wing: "East Wing",
// floorStart: 11,
// floorEnd: 35,
// units: 234,
// cost: 10488888,
// square: 619,
// },
// {
// id: "2",
// roveHome: "Marasi Drive",
// apartmentType: "1 Bedroom",
// wing: "East Wing",
// floorStart: 11,
// floorEnd: 35,
// units: 234,
// cost: 1668888,
// square: 619,
// },
// {
// id: "3",
// roveHome: "Marasi Drive",
// apartmentType: "1 Bedroom",
// wing: "East Wing",
// floorStart: 11,
// floorEnd: 35,
// units: 234,
// cost: 1668888,
// square: 609,
// },
// {
// id: "4",
// roveHome: "Marasi Drive",
// apartmentType: "1 Bedroom",
// wing: "East Wing",
// floorStart: 11,
// floorEnd: 35,
// units: 234,
// cost: 1138888,
// square: 609,
// },
// {
// id: "5",
// roveHome: "Marasi Drive",
// apartmentType: "Studio Flex",
// wing: "East Wing",
// floorStart: 11,
// floorEnd: 35,
// units: 234,
// cost: 10488888,
// square: 609,
// },
// {
// id: "6",
// roveHome: "Marasi Drive",
// apartmentType: "1 Bedroom",
// wing: "East Wing",
// floorStart: 11,
// floorEnd: 35,
// units: 234,
// cost: 1668888,
// square: 609,
// },
// {
// id: "7",
// roveHome: "Marasi Drive",
// apartmentType: "1 Bedroom",
// wing: "East Wing",
// floorStart: 11,
// floorEnd: 35,
// units: 234,
// cost: 1668888,
// square: 609,
// },
// {
// id: "8",
// roveHome: "Marasi Drive",
// apartmentType: "1 Bedroom",
// wing: "East Wing",
// floorStart: 11,
// floorEnd: 35,
// units: 234,
// cost: 1138888,
// square: 609,
// },
// {
// id: "9",
// roveHome: "Marasi Drive",
// apartmentType: "Studio Flex",
// wing: "East Wing",
// floorStart: 11,
// floorEnd: 35,
// units: 234,
// cost: 10488888,
// square: 609,
// },
// {
// id: "10",
// roveHome: "Marasi Drive",
// apartmentType: "1 Bedroom",
// wing: "East Wing",
// floorStart: 11,
// floorEnd: 35,
// units: 234,
// cost: 1668888,
// square: 609,
// },
// {
// id: "11",
// roveHome: "Marasi Drive",
// apartmentType: "1 Bedroom",
// wing: "East Wing",
// floorStart: 11,
// floorEnd: 35,
// units: 234,
// cost: 1668888,
// square: 609,
// },
// {
// id: "12",
// roveHome: "Marasi Drive",
// apartmentType: "1 Bedroom",
// wing: "East Wing",
// floorStart: 11,
// floorEnd: 35,
// units: 234,
// cost: 1138888,
// square: 609,
// },
// ];
const initialCollectionCompareSwitcher: ISwitcher = {
id: "1",
title: "collection/compare",
@@ -186,12 +51,12 @@ const Favorites = () => {
}, [setFavorites, sortList]);
return (
<div className="overflow-scroll h-screen w-screen pt-14 select-none">
<div className="overflow-scroll h-screen w-screen pt-[134px] select-none">
<div className="p-6 pb-16">
<div className="pb-6">
<div className="flex justify-between w-full items-center border-b pb-[11px]">
<div className="flex items-center gap-8">
<div className="flex gap-4 font-semibold text-subheadline-s leading-7 py-[6px]">
<div className="flex justify-between w-full items-center border-b pb-4">
<div className="flex gap-4 flex-col">
<div className="flex gap-4 font-semibold text-subheadline-s leading-7 ">
<h2 className="text-[#0D1922]">Units</h2>
<p className="text-[#73787C]">{favorites.length}</p>
</div>
client/src/pages/Search.tsx
+2 -2
View File
@@ -1,12 +1,12 @@
import Footer from "../components/Footer";
import LayoutOptions from "../components/searchPage/LayoutOptions";
import SidebarFilters from "../components/searchPage/SidebarFilters";
// import SidebarFilters from "../components/searchPage/SidebarFilters";
const Search = () => {
return (
<div className="overflow-scroll h-screen w-screen pt-14 select-none">
<div className="flex">
<SidebarFilters />
{/* <SidebarFilters /> */}
<LayoutOptions />
</div>
<Footer />
client/tailwind.config.js
+7
View File
@@ -9,8 +9,10 @@ export default {
},
borderWidth: {
DEFAULT: "2.4px",
2: "4.8px",
},
padding: {
8: "90px",
6: "67.5px",
1: "11.25px",
4: "45px",
@@ -19,6 +21,7 @@ export default {
16: "180px",
},
margin: {
8: "90px",
6: "67.5px",
1: "11.25px",
4: "45px",
@@ -27,6 +30,7 @@ export default {
16: "180px",
},
gap: {
1: "11.25px",
2: "22.5px",
3: "33.75px",
4: "45px",
@@ -36,10 +40,12 @@ export default {
},
width: {
3: "33.75px",
16: "180px",
},
height: {
6: "57.6px",
3: "33.75px",
16: "180px",
},
minHeight: {
6: "57.6px",
@@ -53,6 +59,7 @@ export default {
inset: {
6: "67.5px",
4: "45px",
2: "22.5px",
},
},
},