upd

2025-05-20 18:36:09 +05:00
parent ca23bc30c5
commit 057f77dce6
6 changed files with 237 additions and 65 deletions
@@ -140,7 +140,7 @@ function Footer() {
                animate={{ opacity: 1, x: "0%" }}
                exit={{ opacity: 0, x: "100%" }}
                transition={{ bounce: 0, duration: 0.3 }}
-                className="max-2xl:hidden p-[1.667vw] flex gap-[1.111vw] justify-stretch items-stretch fixed top-[calc(3.889vw+20px)] left-[57.083vw] w-[32.222vw] rounded-[1.111vw] bg-white shadow-[0_2px_8px_rgba(0,0,0,0.15)]"
+                className="max-2xl:hidden p-[1.667vw] flex gap-[1.111vw] justify-stretch items-stretch fixed top-[calc(3.889vw+20px)] left-[44.028vw] w-[32.222vw] rounded-[1.111vw] bg-white shadow-[0_2px_8px_rgba(0,0,0,0.15)]"
              >
                <div className="flex-1 space-y-4">
                  <p className="text-s font-medium">Rove Home Marasi Drive</p>
@@ -1,8 +1,12 @@
+import { Link } from "react-router";
 import UnitType from "../types/UnitType";

 function UnitTypeCard({ project, type }: { project: string; type: UnitType }) {
  return (
-    <div className="bg-white p-4 2xl:p-[1.111vw] rounded-2xl 2xl:rounded-[1.111vw] space-y-4 2xl:space-y-[1.111vw]">
+    <Link
+      to={`/unit-types/smth`}
+      className="bg-white p-4 2xl:p-[1.111vw] rounded-2xl 2xl:rounded-[1.111vw] space-y-4 2xl:space-y-[1.111vw]"
+    >
      <div className="space-y-1 2xl:space-y-[0.278vw]">
        <p className="text-s">{project}</p>
        <div className="flex items-center gap-2 2xl:gap-[0.556vw]">
@@ -20,7 +24,7 @@ function UnitTypeCard({ project, type }: { project: string; type: UnitType }) {
        <p className="text-s text-[#0D1922]/70">{type.area}</p>
        <p className="text-h4 font-medium">{type.name}</p>
      </div>
-    </div>
+    </Link>
  );
 }

@@ -0,0 +1,78 @@
+import PlayIcon from "./icons/PlayIcon";
+import ShareIcon from "./icons/ShareIcon";
+import Button from "./ui/Button";
+
+interface UnitTypeItemProps {
+  title: string;
+  project: string;
+  wing?: string;
+  floor: [number, number];
+  video: { title: string; desc: string };
+  texts: [string, string];
+}
+
+function UnitTypeItem({
+  title,
+  project,
+  wing,
+  floor,
+  video,
+  texts,
+}: UnitTypeItemProps) {
+  return (
+    <div className="2xl:p-[2.222vw] md:max-2xl:p-[3.125vw] p-4 bg-white flex 2xl:gap-[2.222vw] md:max-2xl:gap-8 gap-6 max-2xl:flex-col">
+      <div className="bg-[#F3F3F2] 2xl:aspect-[1028/664] md:max-2xl:aspect-[720/616] aspect-square 2xl:w-[71.389vw] w-full 2xl:rounded-[1.111vw] md:max-2xl:rounded-2xl rounded-xl" />
+      <div className="flex flex-col justify-between flex-1">
+        <div className="2xl:space-y-[1.667vw] space-y-6">
+          <div className="flex items-start justify-between">
+            <div className="flex flex-col 2xl:gap-y-[0.556vw] gap-y-2">
+              <p className="font-medium md:text-h3 text-h4">{title}</p>
+              <p className="2xl:rounded-[1.667vw] rounded-3xl 2xl:px-[0.833vw] 2xl:py-[0.278vw] px-3 py-1 outline outline-[#E2E2DC] text-[#0D1922]/70 text-caption-m w-fit">
+                Up to 366 Sqft
+              </p>
+            </div>
+            <Button onlyIcon variant="secondary">
+              <span className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 text-[#0D1922]">
+                <ShareIcon />
+              </span>
+            </Button>
+          </div>
+          <div className="2xl:space-y-[0.556vw] md:max-2xl:space-y-2 space-y-1">
+            <p className="text-m text-[#00BED7]">{project}</p>
+            <div className="flex items-center 2xl:gap-[0.556vw]">
+              <p className="text-s text-[#0D1922]/70 peer">{wing ?? ""}</p>
+              <div className="2xl:w-[0.278vw] 2xl:h-[0.278vw] w-1 h-1 rounded-full bg-[#E2E2DC] peer-empty:hidden" />
+              <p className="text-s text-[#0D1922]/70">Floor 5-21</p>
+              <div className="2xl:w-[0.278vw] 2xl:h-[0.278vw] w-1 h-1 rounded-full bg-[#E2E2DC] peer-empty:hidden" />
+              <p>{floor.join("-")}</p>
+            </div>
+          </div>
+          <hr className="w-full border-[#E2E2DC] 2xl:h-[0.069vw] h-px" />
+          <div className="2xl:p-[1.111vw] p-4 2xl:rounded-[0.833vw] rounded-xl outline outline-[#E2E2DC] flex 2xl:gap-[0.556vw] justify-between">
+            <div className="2xl:space-y-[0.278vw] space-y-1">
+              <p className="text-h5 font-medium">{video.title}</p>
+              <p className="text-s text-[#00BED7]">{video.desc}</p>
+            </div>
+            <Button variant="secondary" onlyIcon>
+              <span className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 text-[#0D1922]">
+                <PlayIcon />
+              </span>
+            </Button>
+          </div>
+          <div className="2xl:space-y-[0.556vw] md:max-2xl:flex md:max-2xl:gap-2 max-md:space-y-2">
+            <p className="text-caption-m">{texts[0]}</p>
+            <p className="text-caption-m">{texts[1]}</p>
+          </div>
+        </div>
+        <div className="2xl:gap-[0.556vw] flex 2xl:flex-col sticky 2xl:bottom-[2.222vw] bottom-0 md:max-2xl:-mx-6 md:max-2xl:p-6 max-md:-mx-4 max-md:p-4 bg-white md:max-2xl:gap-4 gap-2 max-2xl:rounded-t-2xl max-2xl:shadow-[0_-4px_20px_#0000000D]">
+          <Button variant="secondary" className="!bg-[#F3F3F2] w-full">
+            Virtual tour
+          </Button>
+          <Button className="w-full">Show options</Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default UnitTypeItem;
@@ -0,0 +1,114 @@
+import HeartIcon from "../components/icons/HeartIcon";
+import PlayIcon from "../components/icons/PlayIcon";
+import ShareIcon from "../components/icons/ShareIcon";
+import Button from "../components/ui/Button";
+
+interface ApartmentItemProps {
+  title: string;
+  project: string;
+  wing?: string;
+  floor: number;
+  number: string;
+  video: { title: string; desc: string };
+  sqft: number;
+  suite: number;
+  balcony: number;
+  status: string;
+  parkingSpace: number;
+  price: number;
+}
+
+function ApartmentItem({
+  title,
+  project,
+  wing,
+  floor,
+  number,
+  video,
+  sqft,
+  suite,
+  balcony,
+  status,
+  parkingSpace,
+  price,
+}: ApartmentItemProps) {
+  return (
+    <div className="2xl:p-[2.222vw] md:max-2xl:p-[3.125vw] p-4 bg-white flex 2xl:gap-[2.222vw] md:max-2xl:gap-8 gap-6 max-2xl:flex-col">
+      <div className="bg-[#F3F3F2] 2xl:aspect-[1028/664] md:max-2xl:aspect-[720/616] aspect-square 2xl:w-[71.389vw] w-full 2xl:rounded-[1.111vw] md:max-2xl:rounded-2xl rounded-xl" />
+      <div className="flex flex-col justify-between 2xl:gap-[2.222vw] md:max-2xl:gap-6 gap-4 flex-1">
+        <div className="2xl:space-y-[1.667vw] space-y-6">
+          <div className="flex justify-between items-start">
+            <div className="2xl:space-y-[1.111vw] space-y-4">
+              <p className="text-h3 font-medium">{title}</p>
+              <div className="2xl:space-y-[0.556vw] md:max-2xl:space-y-2 space-y-1">
+                <p className="text-m text-[#00BED7]">{project}</p>
+                <div className="flex">
+                  <p className="text-s text-[#0D1922]/70 peer">{wing ?? ""}</p>
+                  <div className="2xl:w-[0.278vw] 2xl:h-[0.278vw] w-1 h-1 rounded-full bg-[#E2E2DC] peer-empty:hidden" />
+                  <p className="text-s text-[#0D1922]/70">Floor {floor}</p>
+                  <div className="2xl:w-[0.278vw] 2xl:h-[0.278vw] w-1 h-1 rounded-full bg-[#E2E2DC]" />
+                  <p className="text-s text-[#0D1922]/70">{number}</p>
+                </div>
+              </div>
+            </div>
+            <div>
+              <Button onlyIcon variant="secondary">
+                <span className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 text-[#0D1922]">
+                  <HeartIcon />
+                </span>
+              </Button>
+              <Button onlyIcon variant="secondary">
+                <span className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 text-[#0D1922]">
+                  <ShareIcon />
+                </span>
+              </Button>
+            </div>
+          </div>
+          <hr className="w-full border-[#E2E2DC] 2xl:h-[0.069vw] h-px" />
+          <div className="2xl:p-[1.111vw] p-4 2xl:rounded-[0.833vw] rounded-xl outline outline-[#E2E2DC] flex 2xl:gap-[0.556vw] justify-between">
+            <div className="2xl:space-y-[0.278vw] space-y-1">
+              <p className="text-h5 font-medium">{video.title}</p>
+              <p className="text-s text-[#00BED7]">{video.desc}</p>
+            </div>
+            <Button variant="secondary" onlyIcon>
+              <span className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 text-[#0D1922]">
+                <PlayIcon />
+              </span>
+            </Button>
+          </div>
+          <div className="2xl:space-y-[0.556vw] space-y-2">
+            <div className="flex justify-between items-center">
+              <p className="text-s text-[#0D1922]/40">Total Area</p>
+              <p className="text-s">{sqft} Sqft</p>
+            </div>
+            <div className="flex justify-between items-center">
+              <p className="text-s text-[#0D1922]/40">Suite Area</p>
+              <p className="text-s">{suite} Sqft</p>
+            </div>
+            <div className="flex justify-between items-center">
+              <p className="text-s text-[#0D1922]/40">Balcony Area</p>
+              <p className="text-s">{balcony} Sqft</p>
+            </div>
+            <div className="flex justify-between items-center">
+              <p className="text-s text-[#0D1922]/40">Status</p>
+              <p className="text-s">{status}</p>
+            </div>
+            <div className="flex justify-between items-center">
+              <p className="text-s text-[#0D1922]/40">Parking Space</p>
+              <p className="text-s">{parkingSpace}</p>
+            </div>
+          </div>
+          <p className="text-h4 font-medium text-[#00BED7]">AED {price}</p>
+        </div>
+        <div className="2xl:gap-[0.556vw] flex 2xl:flex-col sticky 2xl:bottom-[2.222vw] bottom-0 md:max-2xl:-mx-6 md:max-2xl:p-6 max-md:-mx-4 max-md:p-4 bg-white md:max-2xl:gap-4 gap-2 max-2xl:rounded-t-2xl max-2xl:shadow-[0_-4px_20px_#0000000D]">
+          <Button variant="secondary" className="!bg-[#F3F3F2] w-full">
+            Virtual tour
+          </Button>
+          <Button className="w-full">Book</Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default ApartmentItem;
@@ -253,6 +253,11 @@ function FavoritesPage() {
                          </span>
                        </Button>
                      </div>
+                      <img
+                        src="/images/unit-types/marasi-drive/1_bedroom_a.jpg"
+                        className="pointer-events-none flex-1 object-cover"
+                        alt=""
+                      />
                    </div>
                    <div className="2xl:space-y-[1.25vw] md:max-2xl:space-y-[3.385vw] space-y-[4.444vw] 2xl:mb-[3.889vw] md:max-2xl:mb-[7.292vw] mb-[11.111vw]">
                      {(!removeSimilar ||
@@ -1,69 +1,40 @@
-import PlayIcon from "../components/icons/PlayIcon";
-import ShareIcon from "../components/icons/ShareIcon";
-import Button from "../components/ui/Button";
+import UnitTypeItem from "../components/UnitTypeItem";
+import ApartmentItem from "./ApartmentItem";

 function UnitTypeItemPage() {
  return (
    <div>
-      <div className="2xl:p-[2.222vw] bg-white 2xl:flex 2xl:gap-[2.222vw]">
-        <div className="flex bg-[#F3F3F2] 2xl:aspect-[1028/664] 2xl:w-[71.389vw] 2xl:rounded-[1.111vw]" />
-        <div className="flex flex-col justify-between flex-1">
-          <div className="2xl:space-y-[1.667vw]">
-            <div className="flex items-start justify-between">
-              <div className="2xl:space-y-[0.556vw]">
-                <p className="font-medium text-h3">Studio Flex</p>
-                <p className="2xl:rounded-[1.667vw] 2xl:px-[0.833vw] 2xl:py-[0.278vw] outline outline-[#E2E2DC] text-[#0D1922]/70 text-caption-m w-fit">
-                  Up to 366 Sqft
-                </p>
-              </div>
-              <Button onlyIcon variant="secondary">
-                <span className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 text-[#0D1922]">
-                  <ShareIcon />
-                </span>
-              </Button>
-            </div>
-            <div className="2xl:space-y-[0.556vw]">
-              <p className="text-m text-[#00BED7]">Rove Home Marasi Drive</p>
-              <div className="flex items-center 2xl:gap-[0.556vw]">
-                <p className="text-s text-[#0D1922]/70">East Wing</p>
-                <div className="2xl:w-[0.278vw] 2xl:h-[0.278vw] w-1 h-1 rounded-full bg-[#E2E2DC]" />
-                <p className="text-s text-[#0D1922]/70">Floor 5-21</p>
-              </div>
-            </div>
-            <hr className="w-full border-[#E2E2DC] 2xl:h-[0.069vw] h-px" />
-            <div className="2xl:p-[1.111vw] 2xl:rounded-[0.833vw] outline outline-[#E2E2DC] flex 2xl:gap-[0.556vw] justify-between">
-              <div className="2xl:space-y-[0.278vw]">
-                <p className="text-h5 font-medium">ORI Cloud Bed</p>
-                <p className="text-s text-[#00BED7]">
-                  Live in the future, today
-                </p>
-              </div>
-              <Button variant="secondary" onlyIcon>
-                <span className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 text-[#0D1922]">
-                  <PlayIcon />
-                </span>
-              </Button>
-            </div>
-            <div className="2xl:space-y-[0.556vw]">
-              <p className="text-caption-m">
-                In Studio Flex explore the ORI Cloud Bed, optimizing your living
-                space with functionality and smart living.
-              </p>
-              <p className="text-caption-m">
-                Every inch is designed to provide more space for comfort and
-                convenience. This feature increase your unit size by 33%
-              </p>
-            </div>
-          </div>
-          <div className="2xl:space-y-[0.556vw]">
-            <Button variant="secondary" className="!bg-[#F3F3F2] w-full">
-              Virtual tour
-            </Button>
-            <Button className="w-full">Show options</Button>
-          </div>
-        </div>
-      </div>
-      <div></div>
+      <UnitTypeItem
+        project="Rove Home Marasi Drive"
+        title="Studio Flex"
+        floor={[5, 21]}
+        wing="East Wing"
+        texts={[
+          "In Studio Flex explore the ORI Cloud Bed, optimizing your living space with functionality and smart living.",
+          "Every inch is designed to provide more space for comfort and convenience. This feature increase your unit size by 33%",
+        ]}
+        video={{
+          title: "ORI Cloud Bed",
+          desc: "Live in the future, today",
+        }}
+      />
+      <ApartmentItem
+        project="Rove Home Marasi Drive"
+        title="Studio² — Type A"
+        floor={11}
+        wing="East Wing"
+        number="E-503"
+        sqft={607.08}
+        suite={485.67}
+        balcony={121.42}
+        price={1668888}
+        status="Available"
+        parkingSpace={1}
+        video={{
+          title: "ORI Cloud Bed",
+          desc: "Live in the future, today",
+        }}
+      />
    </div>
  );
 }