+
+ }
+ text="Sky Garden"
+ className="absolute top-6 right-6 px-3.5 py-2.5"
+ onClick={() => setModal()}
+ />
-
-
- Indoor Amenties
+
+
Indoor Amenties
+
+
}
+ />
+
}
+ />
+
}
+ />
-
}
- />
-
}
- />
-
} />
-
-
- Outdoor Amenties
+
+
Outdoor Amenties
+
+
} />
+
}
+ />
+
}
+ />
+
}
+ />
+
}
+ />
+
} />
+
}
+ />
+
}
+ />
+
}
+ />
+
} />
+
} />
+
} />
+
}
+ />
+
}
+ />
-
} />
-
}
- />
-
} />
-
}
- />
-
}
- />
-
} />
-
}
- />
-
}
- />
-
} />
-
} />
-
} />
-
} />
-
}
- />
-
}
- />
diff --git a/client/src/components/header/Header/DesktopHeader.tsx b/client/src/components/header/Header/DesktopHeader.tsx
index 022b37e..0f4c8a0 100644
--- a/client/src/components/header/Header/DesktopHeader.tsx
+++ b/client/src/components/header/Header/DesktopHeader.tsx
@@ -12,10 +12,14 @@ const DesktopHeader = () => (
diff --git a/client/src/components/icons/CloseIcon.tsx b/client/src/components/icons/CloseIcon.tsx
new file mode 100644
index 0000000..8a39240
--- /dev/null
+++ b/client/src/components/icons/CloseIcon.tsx
@@ -0,0 +1,25 @@
+interface Props {
+ className?: string;
+}
+
+function CloseIcon({ className }: Props) {
+ return (
+
+ );
+}
+
+export default CloseIcon;
diff --git a/client/src/components/icons/activities/AmphitheatreIcon.tsx b/client/src/components/icons/activities/AmphitheatreIcon.tsx
index 02b704a..a041cfa 100644
--- a/client/src/components/icons/activities/AmphitheatreIcon.tsx
+++ b/client/src/components/icons/activities/AmphitheatreIcon.tsx
@@ -2,8 +2,8 @@ const AmphitheatreIcon = () => {
return (
diff --git a/client/src/components/searchPage/LayoutOptions.tsx b/client/src/components/searchPage/LayoutOptions.tsx
index e4b0ebf..caa9516 100644
--- a/client/src/components/searchPage/LayoutOptions.tsx
+++ b/client/src/components/searchPage/LayoutOptions.tsx
@@ -15,6 +15,7 @@ import { useDebounce } from "@uidotdev/usehooks";
import { perPageInitial } from "../../consts/initialMasterplanFilters";
import { getFilteredApartments } from "../../calc/getFilteredApartments";
import SearchLoader from "./SearchLoader";
+import _ from "lodash";
const LayoutOptions = () => {
const { apartments, setApartments } = useApartments();
@@ -173,6 +174,17 @@ const LayoutOptions = () => {
page,
]);
+ function getRandomNumber() {
+ const numbers = [
+ 1699888, 2430888, 1732888, 1594888, 2364888, 1175888, 1054888, 2454888,
+ 1784888, 1014888, 2388888, 1294888, 1544888, 1339888, 1340888, 1052888,
+ 1366888, 1202888, 1605888, 1674888, 1216888, 1264888, 1624888, 1635888,
+ 1224888, 1181888, 1397888, 1756888, 1248888, 2730888,
+ ];
+
+ return _.sample(numbers);
+ }
+
return (
@@ -199,8 +211,12 @@ const LayoutOptions = () => {
) : (
{apartments &&
- apartments.map((apartment) => (
-
+ apartments.map((apartment, index) => (
+
))}
)}
diff --git a/client/src/consts/apartmentLayoutsImages.ts b/client/src/consts/apartmentLayoutsImages.ts
index 03f8ac0..9d5288a 100644
--- a/client/src/consts/apartmentLayoutsImages.ts
+++ b/client/src/consts/apartmentLayoutsImages.ts
@@ -3,19 +3,21 @@ type ApartmentLayoutsImage = Record
;
const apartmentLayoutImages: ApartmentLayoutsImage = {
"Studio Squared-Right": "/images/layouts/studio_right.png",
"Studio Squared-Left": "/images/layouts/studio_left.png",
- "1 BR Squared-C Right": "/images/layouts/1br_c_right.png",
- "1 BR Squared-C Left": "/images/layouts/1br_c_left.png",
+ "Studio Flex-Right": "/images/layouts/studio_flex_right.png",
+ "Studio Flex-Left": "/images/layouts/studio_flex_left.png",
"1 BR Squared-A Left": "/images/layouts/1br_a_left.png",
"1 BR Squared-A Right": "/images/layouts/1br_a_right.png",
+ "1 BR Squared-B Left": "/images/layouts/1br_b_left.png",
+ "1 BR Squared-C Right": "/images/layouts/1br_c_right.png",
+ "1 BR Squared-C Left": "/images/layouts/1br_c_left.png",
+ "1 BR Squared-D Left": "/images/layouts/1br_d_left.png",
"2 BR Squared-A Right": "/images/layouts/2br_a_right.png",
"2 BR Squared-A Left": "/images/layouts/2br_a_left.png",
+ "2 BR Squared-B Left": "/images/layouts/2br_b_left.png",
"1 BR U1 Left": "/images/layouts/layout-5.jpg",
"1 BR U1 Right": "/images/layouts/layout-6.jpg",
"1 BR U2 Left": "/images/layouts/layout-7.jpg",
"1 BR U2 Right": "/images/layouts/layout-8.jpg",
- "Studio Flex-Right": "/images/layouts/studio_flex_right.png",
- "Studio Flex-Left": "/images/layouts/studio_flex_left.png",
- "2 BR Squared-B": "/images/layouts/2br_b_left.png",
};
export { apartmentLayoutImages };
diff --git a/client/src/consts/markers.ts b/client/src/consts/markers.ts
index c35cc42..852a0e9 100644
--- a/client/src/consts/markers.ts
+++ b/client/src/consts/markers.ts
@@ -2,8 +2,8 @@ import { Marker } from "../types/marker";
const markers: Marker[] = [
{
- top: 33.5,
- left: 51.5,
+ top: 37,
+ left: 54.5,
itemNumber: 0,
popup: "/images/markers/popups/1.svg",
isPopupLeft: true,
@@ -11,8 +11,8 @@ const markers: Marker[] = [
imgSrc: "/images/markers/2.png",
},
{
- top: 35.5,
- left: 53,
+ top: 39.2,
+ left: 56.3,
itemNumber: 1,
popup: "/images/markers/popups/1.svg",
isPopupLeft: false,
@@ -20,8 +20,8 @@ const markers: Marker[] = [
imgSrc: "/images/markers/1.png",
},
{
- top: 69,
- left: 20.0,
+ top: 74.2,
+ left: 20.2,
itemNumber: 2,
popup: "/images/markers/popups/1.svg",
isPopupLeft: true,
diff --git a/client/src/consts/tabs.tsx b/client/src/consts/tabs.tsx
index f1200d6..68c471f 100644
--- a/client/src/consts/tabs.tsx
+++ b/client/src/consts/tabs.tsx
@@ -7,12 +7,12 @@ const tabs: Tab[] = [
count: 0,
path: "/masterplan",
},
- // {
- // id: 2,
- // value: "Unit Types",
- // count: 0,
- // path: "/unit-types",
- // },
+ {
+ id: 2,
+ value: "Unit Types",
+ count: 0,
+ path: "/unit-types",
+ },
{
id: 3,
value: "About IRTH",
diff --git a/client/src/data/unitTypes.json b/client/src/data/unitTypes.json
new file mode 100644
index 0000000..9e1edf5
--- /dev/null
+++ b/client/src/data/unitTypes.json
@@ -0,0 +1,272 @@
+[
+ {
+ "id": 1,
+ "type": "studio-flex",
+ "title": "Studio flex",
+ "desc": "Live in the future, today.",
+ "sqft": 366,
+ "texts": [
+ "In Studio Flex explore the ORI Cloud Bed, optimizing your living space with functionality and smart living.",
+ "When folded, it unveils a spacious living room creating a cohesive space that blends both style and functionality."
+ ],
+ "images": [
+ {
+ "position": "left",
+ "src": "/images/unitTypes/withLegend/studio-flex-left.png"
+ },
+ {
+ "position": "right",
+ "src": "/images/unitTypes/withLegend/studio-flex-right.png"
+ }
+ ],
+ "legends": [
+ "Entrance",
+ "Kitchen",
+ "Living Room & Bedroom",
+ "Bathroom",
+ "Balcony",
+ "Ori Cloud Bed",
+ "Bi-fold Glass Doors",
+ "Laundry"
+ ],
+ "tourAvailable": true,
+ "tourUrl": "/virtual-tour/6338173000000496895"
+ },
+ {
+ "id": 2,
+ "type": "studio-2",
+ "title": "Studio²",
+ "desc": "Live in the future, today.",
+ "sqft": 416,
+ "texts": [
+ "In Studio² explore the ORI Cloud Bed, optimizing your living space with functionality and smart living.",
+ "When folded, it unveils a spacious living room creating a cohesive space that blends both style and functionality."
+ ],
+ "images": [
+ {
+ "position": "left",
+ "src": "/images/unitTypes/withLegend/studio-2-left.png"
+ },
+ {
+ "position": "right",
+ "src": "/images/unitTypes/withLegend/studio-2-right.png"
+ }
+ ],
+ "legends": [
+ "Entrance",
+ "Kitchen",
+ "Living Room & Bedroom",
+ "Bathroom",
+ "Balcony",
+ "Flexibed",
+ "Bi-fold Glass Doors",
+ "Drop Down Study",
+ "Laundry"
+ ],
+ "tourAvailable": true,
+ "tourUrl": "/virtual-tour/6338173000000498209"
+ },
+ {
+ "id": 3,
+ "type": "1br-type-a",
+ "title": "1 Bedroom²",
+ "desc": "Type A",
+ "sqft": 622,
+ "texts": [
+ "In 1 Bedroom² double up your space with next generation features that enhance smart living.",
+ "With pocket walls that disappear and a Flexibed that seamlessly converts, you can trans form your living room into an extra bedroom, anytime you want!"
+ ],
+ "images": [
+ {
+ "position": "left",
+ "src": "/images/unitTypes/withLegend/1br-type-a-left.png"
+ },
+ {
+ "position": "right",
+ "src": "/images/unitTypes/withLegend/1br-type-a-right.png"
+ }
+ ],
+ "legends": [
+ "Entrance",
+ "Kitchen & Dining Area",
+ "Bedroom",
+ "Bathroom",
+ "Living Room",
+ "Balcony",
+ "Flexibed",
+ "Laundry",
+ "Bi-fold Glass Doors",
+ "Study"
+ ]
+ },
+ {
+ "id": 4,
+ "type": "1br-type-b",
+ "title": "1 Bedroom²",
+ "desc": "Type B",
+ "sqft": 770,
+ "texts": [
+ "In 1 Bedroom² double up your space with next generation features that enhance smart living.",
+ "With pocket walls that disappear and a Flexibed that seamlessly converts, you can trans form your living room into an extra bedroom, anytime you want!"
+ ],
+ "images": [
+ {
+ "position": "left",
+ "src": "/images/unitTypes/withLegend/1br-type-b-left.png"
+ },
+ {
+ "position": "right",
+ "src": "/images/unitTypes/withLegend/1br-type-b-right.png"
+ }
+ ],
+ "legends": [
+ "Entrance",
+ "Kitchen & Dining Area",
+ "Bedroom",
+ "Bathroom",
+ "Living Room",
+ "Balcony",
+ "Flexibed",
+ "Laundry",
+ "Bi-fold Glass Doors"
+ ]
+ },
+ {
+ "id": 5,
+ "type": "1br-type-c",
+ "title": "1 Bedroom²",
+ "desc": "Type C",
+ "sqft": 642,
+ "texts": [
+ "In 1 Bedroom² double up your space with next generation features that enhance smart living.",
+ "With pocket walls that disappear and a Flexibed that seamlessly converts, you can trans form your living room into an extra bedroom, anytime you want!"
+ ],
+ "images": [
+ {
+ "position": "left",
+ "src": "/images/unitTypes/withLegend/1br-type-c-left.png"
+ },
+ {
+ "position": "right",
+ "src": "/images/unitTypes/withLegend/1br-type-c-right.png"
+ }
+ ],
+ "legends": [
+ "Entrance",
+ "Kitchen & Dining Area",
+ "Living Room",
+ "Bedroom",
+ "Walk-in Closet",
+ "Bathroom",
+ "Balcony",
+ "Pocket Walls",
+ "Flexibed",
+ "Laundry",
+ "Bi-fold Glass Doors"
+ ],
+ "tourAvailable": true,
+ "tourUrl": "/virtual-tour/6338173000000496864"
+ },
+ {
+ "id": 6,
+ "type": "1br-type-d",
+ "title": "1 Bedroom²",
+ "desc": "Type D",
+ "sqft": 619,
+ "texts": [
+ "In 1 Bedroom² double up your space with next generation features that enhance smart living.",
+ "With pocket walls that disappear and a Flexibed that seamlessly converts, you can trans form your living room into an extra bedroom, anytime you want!"
+ ],
+ "images": [
+ {
+ "position": "left",
+ "src": "/images/unitTypes/withLegend/1br-type-d-left.png"
+ },
+ {
+ "position": "right",
+ "src": "/images/unitTypes/withLegend/1br-type-d-right.png"
+ }
+ ],
+ "legends": [
+ "Entrance",
+ "Kitchen & Dining Area",
+ "Living Room",
+ "Bedroom",
+ "Walk-in Closet",
+ "Bathroom",
+ "Balcony",
+ "Pocket Walls",
+ "Flexibed",
+ "Laundry",
+ "Bi-fold Glass Doors"
+ ]
+ },
+ {
+ "id": 7,
+ "type": "2br-type-a",
+ "title": "2 Bedroom²",
+ "desc": "Type A",
+ "sqft": 914,
+ "texts": [
+ "In 2 Bedroom² double up your space with next generation features that enhance smart living.",
+ "With pocket walls that disappear and a Flexibed that seamlessly converts, you can trans form your living room into an extra bedroom, anytime you want!"
+ ],
+ "images": [
+ {
+ "position": "left",
+ "src": "/images/unitTypes/withLegend/2br-type-a-left.png"
+ },
+ {
+ "position": "right",
+ "src": "/images/unitTypes/withLegend/2br-type-a-right.png"
+ }
+ ],
+ "legends": [
+ "Entrance",
+ "Kitchen & Dining Area",
+ "Living Room",
+ "Bathroom",
+ "Master Bedroom",
+ "Master Bathroom",
+ "Bedroom",
+ "Balcony",
+ "Flexibed",
+ "Study Den",
+ "Bi-fold Glass Doors",
+ "Laundry"
+ ]
+ },
+ {
+ "id": 8,
+ "type": "2br-type-b",
+ "title": "2 Bedroom²",
+ "desc": "Type B",
+ "sqft": 1058,
+ "texts": [
+ "In 2 Bedroom² double up your space with next generation features that enhance smart living.",
+ "With pocket walls that disappear and a Flexibed that seamlessly converts, you can trans form your living room into an extra bedroom, anytime you want!"
+ ],
+ "images": [
+ {
+ "position": "main",
+ "src": "/images/unitTypes/withLegend/2br-type-b.png"
+ }
+ ],
+ "legends": [
+ "Entrance",
+ "Kitchen & Dining Area",
+ "Living Room",
+ "Bedroom",
+ "Master Bedroom",
+ "Master Bathroom",
+ "Bedroom",
+ "Balcony",
+ "Flexibed",
+ "Study Den",
+ "Bi-fold Glass Doors",
+ "Laundry"
+ ],
+ "tourAvailable": true,
+ "tourUrl": "/virtual-tour/6338173000000496898"
+ }
+]
diff --git a/client/src/index.css b/client/src/index.css
index c525aa7..7f2fcbd 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -36,9 +36,7 @@
body {
background-color: #f3f3f2;
-}
-
-html {
+ color: #091118;
}
.font-usual {
diff --git a/client/src/main.tsx b/client/src/main.tsx
index 5fd80a0..cf0660f 100644
--- a/client/src/main.tsx
+++ b/client/src/main.tsx
@@ -12,6 +12,7 @@ import FavoritesPage from "./pages/FavoritesPage";
import SearchPage from "./pages/SearchPage";
import ApartmentPage from "./pages/ApartmentPage";
import VirtualTour from "./pages/VirtualTour";
+import UnitTypesItemPage from "./pages/UnitTypesItemPage";
const router = createBrowserRouter([
{
@@ -40,7 +41,16 @@ const router = createBrowserRouter([
},
{
path: "unit-types",
- element: ,
+ children: [
+ {
+ index: true,
+ element: ,
+ },
+ {
+ path: ":type",
+ element: ,
+ },
+ ],
},
{
path: "about",
diff --git a/client/src/pages/UnitTypesItemPage.tsx b/client/src/pages/UnitTypesItemPage.tsx
new file mode 100644
index 0000000..bc18987
--- /dev/null
+++ b/client/src/pages/UnitTypesItemPage.tsx
@@ -0,0 +1,126 @@
+import unitTypes from "../data/unitTypes.json";
+// import { useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import Button from "../components/Button";
+import LeftArrowSliderIcon from "../components/icons/LeftArrowSliderIcon";
+import VirtualTourIcon from "../components/icons/VirtualTourIcon";
+import { useState } from "react";
+
+function UnitTypesItemPage() {
+ const params = useParams();
+ const navigate = useNavigate();
+ const unitType = unitTypes.find((unitType) => unitType.type === params.type);
+ const [selectedUniTypePos, setSelectedUniTypePos] = useState("left");
+
+ return (
+
+
+
+
}
+ onClick={() => navigate("..")}
+ />
+
{unitType?.title}
+
+
+
+
+
+ {unitType?.legends.map((legend, index) => (
+
+
+ {index + 1}
+
+
{legend}
+
+ ))}
+
+
+
+ {unitType?.images.length && unitType?.images.length > 1 ? (
+ <>
+
+
image.position === selectedUniTypePos
+ )?.src
+ }
+ alt=""
+ className="pointer-events-none"
+ />
+
+
+
+
+ ) : (
+
+
+
+ )}
+
+
+
+
+
+
+
+
+
{unitType?.title}
+
+ {unitType?.desc}
+
+
+
+
+ {unitType?.texts.map((desc) => (
+
{desc}
+ ))}
+
+
+
+
Up to {unitType?.sqft} Sqft
+ {/*
from AED 1,668,888
*/}
+
+
+ {unitType?.tourAvailable && (
+
+ }
+ text="3D tour"
+ className="flex items-center justify-center w-full"
+ onClick={() => navigate(unitType.tourUrl)}
+ />
+ {/* Studio Flex, Studio-2, 1 BR Type C, 2 BR Type B */}
+
+ )}
+
+
UnitTypesPage
;
+ const navigate = useNavigate();
+
+ return (
+
+
+
+ navigate("studio-flex")}
+ />
+ navigate("studio-2")}
+ />
+ navigate("1br-type-a")}
+ />
+ navigate("1br-type-b")}
+ />
+ navigate("1br-type-c")}
+ />
+ navigate("1br-type-d")}
+ />
+ navigate("2br-type-a")}
+ />
+ navigate("2br-type-b")}
+ />
+
+
+