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/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 />