upd

src/components/ProjectSelect.tsx

@@ -0,0 +1,47 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import clsx from "clsx";
+import { useEffect, useState } from "react";
+
+interface Project {
+  title: string;
+  img: string;
+}
+
+function ProjectSelect({
+  projects,
+  onSelect,
+}: {
+  projects: Project[];
+  onSelect: (project: Project) => void;
+}) {
+  const [selectedProject, setSelectedProject] = useState(projects[0]);
+
+  useEffect(() => {
+    onSelect(selectedProject);
+  }, [selectedProject]);
+
+  return (
+    <div className="flex 2xl:gap-[0.556vw] gap-2">
+      {projects.map((project) => (
+        <div
+          className={clsx(
+            "2xl:rounded-[2.778vw] rounded-[40px] 2xl:p-[0.278vw] p-1 flex items-center 2xl:gap-[0.556vw] gap-2 text-s 2xl:outline-[0.069vw] outline transition-colors duration-300 cursor-pointer",
+            project.title === selectedProject.title
+              ? "outline-[#00BED7]"
+              : "outline-[#E2E2DC]"
+          )}
+          onClick={() => setSelectedProject(project)}
+        >
+          <img
+            src={project.img}
+            alt={project.title}
+            className="object-cover 2xl:w-[2.778vw] w-10 aspect-square rounded-full"
+          />
+          <p className="2xl:mr-[1.111vw] mr-6">{project.title}</p>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export default ProjectSelect;

src/components/UnitTypeCard.tsx

@@ -0,0 +1,21 @@
+interface UnitType {
+  name: string;
+  img: string;
+  wings: string;
+  floors: string;
+  area: string;
+}
+
+function UnitTypeCard({ project, type }: { project: string; type: UnitType }) {
+  return (
+    <div className="bg-white p-4 rounded-2xl">
+      <p className="text-2xl font-semibold leading-[135%]">{project}</p>
+      <p className="text-2xl font-semibold leading-[135%]">{type.name}</p>
+      <p className="text-2xl font-semibold leading-[135%]">{type.wings}</p>
+      <p className="text-2xl font-semibold leading-[135%]">{type.floors}</p>
+      <p className="text-2xl font-semibold leading-[135%]">{type.area}</p>
+    </div>
+  );
+}
+
+export default UnitTypeCard;

src/data/projects.ts

@@ -2,9 +2,32 @@ export const projects = [
   {
     title: "Rove Home Marasi Drive",
     img: "/images/search/rove_home_marasi_drive.png",
+    types: [
+      {
+        name: "Studio Flex",
+        img: "",
+        wings: "West Wing",
+        floors: "Floor 5-21",
+        area: "341-366 Sqft",
+      },
+      {
+        name: "Studio²",
+        img: "",
+        wings: "East Wing / West Wing",
+        floors: "Floor 5-21 / 24-31",
+        area: "386-416 Sqft",
+      },
+    ],
   },
   {
     title: "Rove Home Dubai Marina",
     img: "/images/search/rove_home_dubai_marina.png",
+    types: [
+      {
+        name: "Studio Flex",
+        img: "",
+        wings: "West Wing",
+      },
+    ],
   },
 ];

src/layout/DefaultLayout.tsx

@@ -4,9 +4,9 @@ import Footer from "../components/Footer";
 
 function DefaultLayout() {
   return (
-    <div className="flex flex-col select-none bg-[#F3F3F2]">
+    <div className="min-h-dvh flex flex-col select-none bg-[#F3F3F2]">
       <Header />
-      <div className="min-h-[calc(100dvh-64px)] md:max-2xl:min-h-[calc(100dvh-72px)] 2xl:min-h-[calc(100dvh-4.444vw)] 2xl:px-[2.222vw] md:max-2xl:px-6 px-4">
+      <div className="flex-1 flex flex-col justify-between">
         <Outlet />
       </div>
       <Footer />

src/pages/AboutPages.tsx

@@ -1,5 +1,9 @@
 function AboutPage() {
-  return <div>AboutPage</div>;
+  return (
+    <div>
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
+    </div>
+  );
 }
 
 export default AboutPage;

src/pages/SearchPage.tsx

@@ -92,7 +92,7 @@ function SearchPage() {
   }, []);
 
   return (
-    <div className="2xl:pb-[2.222vw] md:max-2xl:pb-6 pb-4 relative">
+    <div className="">
       <SearchFilters ref={filtersRef} inModal={filtersInModal} />
       <div className="2xl:grid-cols-4 md:max-2xl:grid-cols-2 grid 2xl:gap-[1.111vw] gap-4 2xl:pt-[1.111vw] pt-4">
         {data?.pages.flat().map((unit) => (

src/pages/UnitTypesPage.tsx

@@ -1,5 +1,40 @@
+import { useState } from "react";
+import ProjectSelect from "../components/ProjectSelect";
+import { projects } from "../data/projects";
+import clsx from "clsx";
+import UnitTypeCard from "../components/UnitTypeCard";
+
 function UnitTypesPage() {
-  return <div>UnitTypesPage</div>;
+  const [selectedProject, setSelectedProject] = useState(projects[0]);
+
+  return (
+    <div className="">
+      <div
+        className={clsx(
+          "2xl:p-[2.222vw] md:max-2xl:p-6 p-4 bg-white 2xl:rounded-b-[1.667vw] rounded-b-3xl 2xl:space-y-[2.222vw] md:max-2xl:space-y-8 space-y-4"
+        )}
+      >
+        <div className="2xl:space-y-[1.111vw] space-y-4">
+          <p className="2xl:text-[2.222vw] md:max-2xl:text-[32px] text-2xl font-semibold leading-[135%]">
+            Search
+          </p>
+          <ProjectSelect
+            projects={projects}
+            onSelect={(project) => setSelectedProject(project)}
+          />
+        </div>
+      </div>
+      <div className="m-4 md:max-2xl:m-6 2xl:m-[2.222vw] grid grid-cols-1 md:max-2xl:grid-cols-2 2xl:grid-cols-4 gap-4 2xl:gap-[1.111vw]">
+        {selectedProject.types?.map((type, index) => (
+          <UnitTypeCard
+            key={index}
+            project={selectedProject.title}
+            type={type}
+          />
+        ))}
+      </div>
+    </div>
+  );
 }
 
 export default UnitTypesPage;