upd

2025-05-20 13:44:58 +05:00
parent 7f86711491
commit ca23bc30c5
7 changed files with 117 additions and 8 deletions
@@ -216,11 +216,7 @@ function NavItem({ href, title }: { href: string; title: string }) {
    >
      {title}
      {title === "Favorites" && !!favoriteUnits.length && (
-        <div
-          className={clsx(
-            "absolute 2xl:top-0 2xl:right-0 top-0.5 right-0.5 rounded-full w-5 flex items-center justify-center aspect-square bg-[#00BED7] text-white text-caption-s"
-          )}
-        >
+        <div className="absolute 2xl:top-0 2xl:right-0 top-0.5 right-0.5 rounded-full w-5 flex items-center justify-center aspect-square bg-[#00BED7] text-white text-caption-s text-center">
          {favoriteUnits.length}
        </div>
      )}
@@ -268,7 +264,7 @@ function BrochuresDropdown() {
            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>
@@ -209,7 +209,7 @@ function SequenceSlider({ complexName }: SequenceSliderProps) {
              <span className="max-md:hidden">About</span>
            </Button>
          </div>
-          <p className="absolute md:text-h4 text-h5 font-medium text-white -translate-x-1/2 select-none left-1/2 2xl:top-[2.5vw] md:max-2xl:top-[3.646vw] top-[7.5vw]">
+          <p className="absolute md:text-h4 text-h5 font-medium text-white -translate-x-1/2 select-none left-1/2 2xl:top-[2.5vw] md:max-2xl:top-[3.646vw] top-[7.5vw] drop-shadow">
            ROVE Home{" "}
            {markers.find((marker) => marker.name === complexName)?.title}
          </p>
@@ -237,7 +237,13 @@ function SequenceSlider({ complexName }: SequenceSliderProps) {
              <ArrowRightIcon />
            </span>
          </Button>
-          <Compass imgStyle={{ transform: `rotate(${currentIndex}deg)` }} />
+          <Compass
+            imgStyle={{
+              transform: `rotate(${
+                currentIndex + (complexName === "dubai-marina" ? 90 : 0)
+              }deg)`,
+            }}
+          />
          <div className="absolute 2xl:bottom-[2.222vw] 2xl:right-[2.222vw] 2xl:left-[2.222vw] max-w-full flex justify-end items-center 2xl:gap-[0.556vw] gap-2 md:max-2xl:bottom-6 md:max-2xl:left-6 md:max-2xl:right-6 bottom-4 left-4 right-4">
            <DisclaimerButton />
            <PrivacyPolicyButton />
@@ -51,6 +51,7 @@ function UnitCard({ unit }: { unit: IUnit }) {
          </span>
        </Button>
      </div>
+      <img src="/images/unit-types/marasi-drive/1_bedroom_a.jpg" alt="" />
      <div className="2xl:space-y-[0.278vw] space-y-1">
        <p className="text-s">
          {`${formattedUnitTypes.get(
@@ -0,0 +1,15 @@
+function PlayIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M15.685 9.785a.25.25 0 0 1 .053.387l-.053.043-9.556 5.733a.25.25 0 0 1-.379-.215V4.267a.25.25 0 0 1 .314-.243l.065.028z"
+        stroke="#0D1922"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default PlayIcon;
@@ -0,0 +1,15 @@
+function ShareIcon() {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M19 14.875V16a3 3 0 0 1-3 3H8a3 3 0 0 1-3-3V8a3 3 0 0 1 3-3h1.125m4.374 5.5 5.35-5.5m0 0v5.4m0-5.4h-5.4"
+        stroke="currentColor"
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default ShareIcon;
@@ -14,6 +14,7 @@ import SearchPage from "./pages/SearchPage.tsx";
 import LayoutWithoutFooter from "./layout/LayoutWithoutFooter.tsx";
 import { queryClient } from "./lib/queryClient.ts";
 import AboutComplexPage from "./pages/AboutComplexPage.tsx";
+import UnitTypeItemPage from "./pages/UnitTypeItemPage.tsx";

 const route = createBrowserRouter([
  {
@@ -23,6 +24,10 @@ const route = createBrowserRouter([
        path: "/unit-types",
        element: <UnitTypesPage />,
      },
+      {
+        path: "/unit-types/:unitType",
+        element: <UnitTypeItemPage />,
+      },
      {
        path: "/about",
        element: <AboutPage />,
@@ -0,0 +1,71 @@
+import PlayIcon from "../components/icons/PlayIcon";
+import ShareIcon from "../components/icons/ShareIcon";
+import Button from "../components/ui/Button";
+
+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>
+    </div>
+  );
+}
+
+export default UnitTypeItemPage;