upd

2024-08-28 18:59:35 +05:00
parent 895db9e07a
commit 4bdc0c3475
14 changed files with 404 additions and 139 deletions
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="a" data-name="Слой 1" xmlns="http://www.w3.org/2000/svg" width="3840" height="3840" viewBox="0 0 3840 3840">
+  <polygon points="1440.1 1460.16 1440.1 1488.24 1580.48 1472.39 1580.48 1440.5 1440.1 1460.16" style="fill: #fff; stroke: #000; stroke-miterlimit: 10;"/>
+</svg>
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="a" data-name="Слой 1" xmlns="http://www.w3.org/2000/svg" width="141.38" height="48.87" viewBox="0 0 141.38 48.87">
+  <polygon points=".5 20.24 .5 48.31 140.88 32.47 140.88 .57 .5 20.24" style="fill: #fff; stroke: #000; stroke-miterlimit: 10;"/>
+</svg>
@@ -32,7 +32,7 @@ function Button2({
 }: Props) {
  return (
    <button
-      className={`flex items-center transition-colors w-fit ${
+      className={`flex items-center justify-center transition-colors w-fit ${
        variantClasses[variant]
      } ${sizeClasses[size]} ${
        roundedFull ? "rounded-full" : "rounded-lg"
@@ -7,10 +7,12 @@ import useModal from "../store/useModal";
 import NavbarModal from "./modals/NavbarModal";
 import { useState } from "react";
 import CloseIcon from "./icons/CloseIcon";
+import useFavoritesStore from "../store/useFavoritesStore";

 function Header() {
  const [showNavbar, setShowNavbar] = useState<boolean>(false);
  const { setModal } = useModal();
+  const { favoriteUnits } = useFavoritesStore();

  function handleClick() {
    setShowNavbar((prev) => !prev);
@@ -46,8 +48,13 @@ function Header() {
          About IRTH
        </NavLink>
        <div className="w-px h-3 bg-[#E2E2DC]"></div>
-        <NavLink to="/favorites" className="p-4">
-          Favorites
+        <NavLink to="/favorites" className="p-4 relative">
+          Favorites{" "}
+          {favoriteUnits.length > 0 && (
+            <div className="absolute right-0 top-2 w-4 h-4 bg-[#00BED7] rounded-full flex items-center justify-center">
+              <p className="text-white text-[10px] font-mono font-semibold -ml-[0.5px]">{favoriteUnits.length}</p>
+            </div>
+          )}
        </NavLink>
        <div className="w-px h-3 bg-[#E2E2DC]"></div>
        <NavLink to="#" className="p-4">
@@ -30,7 +30,7 @@ function UnitTypeCard({ wing, floor, name, desc, imageSrc, onClick }: Props) {
        <img src={imageSrc} alt="" className="aspect-square pointer-events-none" />
      </div>
      <div className="space-y-1">
-        <p>{desc}</p>
+        <p className="text-sm">{desc}</p>
        <p className="text-xl text-[#0D1922] font-semibold">{name}</p>
        {/* <p className="text-xl text-[#00BED7] font-semibold">Unavailable</p> */}
      </div>
@@ -1,4 +1,8 @@
-const SearchIcon = () => {
+interface Props {
+  className?: string;
+}
+
+const SearchIcon = ({ className }: Props) => {
  return (
    <svg
      width="20"
@@ -6,6 +10,7 @@ const SearchIcon = () => {
      viewBox="0 0 20 20"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
+      className={className}
    >
      <path
        d="M15.8332 15.8334L12.973 12.9785M12.973 12.9785C13.9084 12.0445 14.487 10.7533 14.487 9.327C14.487 6.47707 12.1767 4.16675 9.32676 4.16675C6.47683 4.16675 4.1665 6.47707 4.1665 9.327C4.1665 12.1769 6.47683 14.4873 9.32676 14.4873C10.7504 14.4873 12.0394 13.9108 12.973 12.9785Z"
@@ -352,3 +352,25 @@ body {
  scrollbar-color: #c7bdba;
  scrollbar-width: thin;
 }
+
+/* Transition */
+
+.entering {
+  transform: translateX(0);
+  opacity: 1;
+}
+
+.entered {
+  transform: translateX(0);
+  opacity: 1;
+}
+
+.exiting {
+  transform: translateX(100%);
+  opacity: 0;
+}
+
+.exited {
+  transform: translateX(100%);
+  opacity: 0;
+}
@@ -14,6 +14,7 @@ import AboutProjectsPage from "./pages/AboutProjectsPage";
 import SearchPage from "./pages/SearchPage";
 import FavoritesPage from "./pages/FavoritesPage";
 import TestPage from "./pages/TestPage";
+import Test2Page from "./pages/Test2Page";

 const router = createBrowserRouter([
  {
@@ -81,6 +82,10 @@ const router = createBrowserRouter([
      },
    ],
  },
+  {
+    path: "/test2",
+    element: <Test2Page />,
+  },
 ]);

 ReactDOM.createRoot(document.getElementById("root")!).render(
@@ -1,6 +1,6 @@
 const AboutPage = () => {
  return (
-    <div className="mt-[58px] lg:px-6 px-4 sm:py-16 py-8 lg:space-y-[140px] sm:space-y-[120px] space-y-[80px] select-none">
+    <div className="mt-14 lg:px-6 px-4 sm:py-16 py-8 lg:space-y-[140px] sm:space-y-[120px] space-y-[80px] select-none">
      <div className="space-y-10">
        <p className="lg:text-[56px] sm:text-[40px] text-[28px] lg:leading-[56px] sm:leading-[40px] leading-[28px] text-[#0D1922] font-mixcase -tracking-[1.68px]">
          Welcome to IRTH – a name etched in legacy
@@ -14,7 +14,7 @@ const AboutPage = () => {
              loop
            ></video>
          </div>
-          <div className="grid sm:grid-cols-2 gap-4 text-[#73787C] leading-[27px] lg:text-xl">
+          <div className="grid sm:grid-cols-2 gap-4 text-[#73787C] lg:leading-[27px] leading-[21.6px] lg:text-xl">
            <p>
              IRTH is a privately held real estate investment platform. Based on
              the philosophy of value creation, innovation and building
@@ -36,7 +36,7 @@ const AboutPage = () => {
            <p className="lg:text-[56px] sm:text-[40px] text-[28px] lg:leading-[56px] sm:leading-[40px] leading-[28px] text-[#0D1922] font-mixcase -tracking-[1.68px]">
              Our Portfolio
            </p>
-            <div className="grid sm:grid-cols-2 gap-4 lg:text-xl">
+            <div className="grid sm:grid-cols-2 gap-4 lg:text-xl lg:leading-[27px] leading-[21.6px]">
              <p>
                IRTH group’s real estate portfolio is spread across various
                sectors and countries. With thorough market research, IRTH
@@ -53,7 +53,7 @@ const AboutPage = () => {
              </p>
            </div>
          </div>
-          <p className="lg:text-2xl text-xl font-semibold leading-[32.4px]">
+          <p className="lg:text-2xl text-xl font-semibold lg:leading-[32.4px] leading-[28px]">
            We take pride in offering the best-in-class locations and properties
            for value-based investment opportunities - setting new standards in
            the real estate market in the region.
@@ -9,11 +9,15 @@ import HeartFilledIcon from "../components/icons/HeartFilledIcon";
 import Button from "../components/Button";
 import BookingIcon from "../components/icons/BookingIcon";
 import IUnit from "../types/IUnit";
+import Button2 from "../components/Button2";
+import SearchIcon from "../components/icons/SearchIcon";
+import { useNavigate } from "react-router-dom";

 function FavoritesPage() {
  const { favoriteUnits, setFavoriteUnits } = useFavoritesStore();
  // const [isSortPriceAsc, setIsSortPriceAsc] = useState(false);
  const { setModal } = useModal();
+  const navigate = useNavigate();

  function getTypeByUnitNo(unitNo: string) {
    const side = unitNo[0] === "E" ? "East" : "West";
@@ -207,116 +211,132 @@ function FavoritesPage() {
  }

  return (
-    <div className="flex-1 pt-[58px]">
-      <div className="p-6">
+    <div className="flex-1 mt-14">
+      <div className="sm:p-6 p-4">
        <div className="pb-4 border-b border-[#E2E2DC] flex justify-between">
-          <p className="text-2xl font-semibold">
+          <p className="sm:text-2xl text-xl font-semibold">
            <span className="text-[#0D1922]">Favorites</span>{" "}
            {favoriteUnits.length}
          </p>
-          {/* <button
-            className="bg-white rounded-lg flex items-center gap-2 justify-center text-[#00BED7] px-4 py-2.5"
-            onClick={() => setIsSortPriceAsc((prev) => !prev)}
-          >
-            <p className="text-sm">Sort by ascending price</p>
-            <ChevronDownIcon
-              className={`w-5 h-5 transition-transform ${
-                isSortPriceAsc ? "" : "rotate-180"
-              }`}
-            />
-          </button> */}
        </div>
-        <div className="pt-4 grid grid-cols-4 gap-4">
-          {favoriteUnits.map((unit) => (
-            <div
-              key={unit.id}
-              className="bg-white rounded-2xl p-4 space-y-4 flex flex-col justify-between"
-            >
-              <div className="flex justify-between">
-                <div className="space-y-1">
-                  <p className="text-sm text-[#00BED7]">{unit.projectName}</p>
-                  <div className="flex items-center gap-2 text-xs font-semibold">
-                    <p className="">
-                      {unit.unitNo[0] === "E" ? "East" : "West"} Wing
-                    </p>
-                    <div className="w-1 h-1 bg-[#E2E2DC] rounded-full"></div>
-                    <p>{unit.floor}</p>
-                    <div className="w-1 h-1 bg-[#E2E2DC] rounded-full"></div>
-                    <p>{unit.unitNo}</p>
+        {favoriteUnits.length > 0 ? (
+          <div className="pt-4 grid xl:grid-cols-4 lg:grid-cols-3 sm:grid-cols-2 gap-4">
+            {favoriteUnits.map((unit) => (
+              <div
+                key={unit.id}
+                className="bg-white rounded-2xl p-4 space-y-4 flex flex-col justify-between"
+              >
+                <div className="flex justify-between">
+                  <div className="space-y-1">
+                    <p className="text-sm text-[#00BED7]">{unit.projectName}</p>
+                    <div className="flex items-center gap-2 text-xs font-semibold text-[#73787C]">
+                      <p className="">
+                        {unit.unitNo[0] === "E" ? "East" : "West"} Wing
+                      </p>
+                      <div className="w-1 h-1 bg-[#E2E2DC] rounded-full"></div>
+                      <p>{unit.floor}</p>
+                      <div className="w-1 h-1 bg-[#E2E2DC] rounded-full"></div>
+                      <p>{unit.unitNo}</p>
+                    </div>
                  </div>
+                  <button
+                    className="w-10 h-10 flex items-center justify-center border border-[#E2E2DC] rounded-full bg-[#FFFFFF] bg-opacity-80 hover:text-[#0D1922] hover:bg-opacity-100 hover:border-[#00BED7] transition-all"
+                    onClick={() => addOrRemoveFromFavorites(unit)}
+                  >
+                    {favoriteUnits.some(
+                      (favoriteUnit) => favoriteUnit.id === unit.id
+                    ) ? (
+                      <HeartFilledIcon className="w-5 h-5" />
+                    ) : (
+                      <HeartIcon className="w-5 h-5" />
+                    )}
+                  </button>
                </div>
-                <button
-                  className="w-10 h-10 flex items-center justify-center border border-[#E2E2DC] rounded-full bg-[#FFFFFF] bg-opacity-80 hover:text-[#0D1922] hover:bg-opacity-100 hover:border-[#00BED7] transition-all"
-                  onClick={() => addOrRemoveFromFavorites(unit)}
+                <div
+                  className="flex justify-center cursor-pointer"
+                  onClick={() =>
+                    setModal(
+                      <UnitModalForSearchPage
+                        unit={unit}
+                        type={
+                          unitTypes.find(
+                            (unitType) =>
+                              unitType.type === getTypeByUnitNo(unit.unitNo)
+                          )?.type || ""
+                        }
+                      />
+                    )
+                  }
                >
-                  {favoriteUnits.some(
-                    (favoriteUnit) => favoriteUnit.id === unit.id
-                  ) ? (
-                    <HeartFilledIcon className="w-5 h-5" />
-                  ) : (
-                    <HeartIcon className="w-5 h-5" />
-                  )}
-                </button>
+                  <img
+                    src={getImageSrc(unit.unitNo)}
+                    alt=""
+                    className="max-h-[240px] pointer-events-none"
+                  />
+                </div>
+                <div
+                  className="space-y-1 cursor-pointer"
+                  onClick={() =>
+                    setModal(
+                      <UnitModalForSearchPage
+                        unit={unit}
+                        type={
+                          unitTypes.find(
+                            (unitType) =>
+                              unitType.type === getTypeByUnitNo(unit.unitNo)
+                          )?.type || ""
+                        }
+                      />
+                    )
+                  }
+                >
+                  <p className="text-sm text-[#0D1922]">
+                    {unit.unitType}, {unit.totalArea} Sqft
+                  </p>
+                  <p className="text-xl text-[#00BED7] font-semibold">
+                    {(unit.unitPrice &&
+                      `AED ${unit.unitPrice.toLocaleString()}`) ||
+                      "Unavailable"}
+                  </p>
+                </div>
+                <div className="">
+                  <Button
+                    buttonType="cta"
+                    icon={<BookingIcon />}
+                    text="Send Enquiry"
+                    className="justify-center text-sm disabled:hover:bg-[#ECEDEE] w-full"
+                    disabled
+                  />
+                </div>
              </div>
-              <div
-                className="flex justify-center cursor-pointer"
-                onClick={() =>
-                  setModal(
-                    <UnitModalForSearchPage
-                      unit={unit}
-                      type={
-                        unitTypes.find(
-                          (unitType) =>
-                            unitType.type === getTypeByUnitNo(unit.unitNo)
-                        )?.type || ""
-                      }
-                    />
-                  )
-                }
-              >
-                <img
-                  src={getImageSrc(unit.unitNo)}
-                  alt=""
-                  className="max-h-[240px] pointer-events-none"
-                />
-              </div>
-              <div
-                className="space-y-1 cursor-pointer"
-                onClick={() =>
-                  setModal(
-                    <UnitModalForSearchPage
-                      unit={unit}
-                      type={
-                        unitTypes.find(
-                          (unitType) =>
-                            unitType.type === getTypeByUnitNo(unit.unitNo)
-                        )?.type || ""
-                      }
-                    />
-                  )
-                }
-              >
-                <p className="text-sm">
-                  {unit.unitType}, {unit.totalArea} Sqft
+            ))}
+          </div>
+        ) : (
+          <div className="lg:py-[140px] sm:py-[120px] py-8 mx-auto w-fit flex flex-col items-center sm:gap-8 gap-10">
+            <div className="text-center space-y-6">
+              <p className="text-[#0D1922] sm:text-[40px] text-xl font-bold sm:leading-[54px] leading-[27px]">
+                We couldn't find any apartments
+                <br />
+                <span className="text-[#00BED7]">in your favorites</span>
+              </p>
+              <div className="space-y-2 sm:text-base text-sm sm:px-16 px-8">
+                <p>
+                  Use the search function and add the ones you like to your
+                  favorites.
                </p>
-                <p className="text-xl text-[#00BED7] font-semibold">
-                  {(unit.unitPrice &&
-                    `AED ${unit.unitPrice.toLocaleString()}`) ||
-                    "Unavailable"}
-                </p>
-              </div>
-              <div className="">
-                <Button
-                  buttonType="cta"
-                  icon={<BookingIcon />}
-                  text="Send Enquiry"
-                  className="justify-center text-sm disabled:hover:bg-[#ECEDEE] w-full"
-                  disabled
-                />
+                <p>Apartments added from the 3D model will also appear here.</p>
              </div>
            </div>
-          ))}
-        </div>
+            <Button2
+              icon={<SearchIcon className="w-6 h-6" />}
+              size="large"
+              className="max-sm:w-full"
+              onClick={() => navigate("/search")}
+            >
+              Search
+            </Button2>
+          </div>
+        )}
      </div>
    </div>
  );
@@ -0,0 +1,166 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { useEffect, useRef, useState } from "react";
+import Button2 from "../components/Button2";
+import { Transition } from "react-transition-group";
+
+function Test2Page() {
+  const ref = useRef<HTMLImageElement>(null);
+  const [imageWidth, setImageWidth] = useState(0);
+  const [imageHeight, setImageHeight] = useState(0);
+  //   const [offsetTop, setOffsetTop] = useState<number>(0);
+  const [scaled, setScaled] = useState(false);
+  const [selectedSide, setSelectedSide] = useState<string>();
+
+  function handleResize() {
+    if (window.innerHeight > window.innerWidth) {
+      setScaled(true);
+    } else {
+      setScaled(false);
+    }
+  }
+
+  useEffect(() => {
+    handleResize();
+
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!ref.current) return;
+
+    setImageWidth(ref.current.naturalWidth);
+    setImageHeight(ref.current.naturalHeight);
+  }, [ref.current]);
+
+  return (
+    <div className="relative overflow-hidden">
+      <div className="absolute h-14 w-full bg-white z-10 p-4 flex gap-4">
+        <Button2 size="small" onClick={() => setSelectedSide("left")}>
+          Left
+        </Button2>
+        <Button2 size="small" onClick={() => setSelectedSide("right")}>
+          Right
+        </Button2>
+        <Button2 size="small" onClick={() => setSelectedSide(undefined)}>
+          None
+        </Button2>
+      </div>
+
+      <Transition
+        in={selectedSide === "right"}
+        timeout={300}
+        mountOnEnter
+        unmountOnExit
+      >
+        {(state) => (
+          <div
+            className={`absolute top-0 h-screen bg-white right-0 sm:w-1/2 z-10 transition-all duration-300 ${state}`}
+          >
+            <div className="mt-14 overflow-auto">
+              <p>
+                Nulla, explicabo debitis! Quod, natus. Quaerat fuga, distinctio
+                porro laboriosam dolores aliquam similique magni deleniti
+                quibusdam omnis nam. Odit ut tempore porro, sequi iste fugit.
+                Sunt consequatur magnam ducimus quibusdam!
+              </p>
+              <p>
+                Ducimus commodi laborum ea hic eligendi reiciendis deleniti
+                eveniet optio laudantium nam dolores voluptatum sint tempora
+                quia facilis perferendis culpa, ipsam saepe nostrum? Minima, id
+                fugit odio laboriosam est accusantium.
+              </p>
+              <p>
+                Veniam placeat voluptatum fuga aut, commodi ab impedit odit,
+                error dolorum excepturi facere sit voluptates. Officiis,
+                voluptatibus expedita, optio ea error minus fugiat soluta
+                voluptate non maxime architecto velit reiciendis.
+              </p>
+              <p>
+                Quam commodi quae ut est consectetur nostrum delectus aliquam
+                perspiciatis, maiores vero dicta, voluptas eaque provident
+                consequatur quibusdam laboriosam. Labore vitae laborum ab,
+                eveniet obcaecati molestiae sed nesciunt debitis corporis!
+              </p>
+              <p>
+                Vitae rerum totam a quod porro sed debitis, autem eveniet
+                commodi, repellendus dignissimos architecto asperiores repellat
+                labore accusantium ab excepturi? Doloremque fuga, perspiciatis
+                amet et laborum dolorum exercitationem illum dolores?
+              </p>
+              <p>
+                Nisi maxime, recusandae eaque officiis earum est similique
+                itaque. Eos facere harum rerum nesciunt nulla quidem vitae
+                consectetur voluptatum, sunt beatae tenetur modi molestias
+                architecto, et porro magni magnam quod.
+              </p>
+              <p>
+                Quibusdam repellat veritatis ullam asperiores exercitationem
+                consectetur incidunt consequuntur vitae, dolores nobis in quo
+                recusandae officiis, porro nemo accusantium dicta? Incidunt
+                obcaecati assumenda ullam, amet repellendus in excepturi ad
+                nulla.
+              </p>
+              <p>
+                Quam reiciendis reprehenderit numquam doloremque provident iure,
+                assumenda asperiores commodi qui maxime eveniet quaerat
+                blanditiis facilis consequatur, molestias libero saepe delectus
+                ut omnis? Aliquam voluptates molestiae voluptas quasi beatae.
+                Laboriosam?
+              </p>
+              <p>
+                Eveniet nobis perferendis tempora nesciunt aperiam ad id quod
+                laboriosam, maxime aliquid repudiandae, voluptate explicabo
+                ullam et. Neque perferendis ipsum ab provident ipsam! Tempora
+                tenetur neque vel voluptatem voluptatibus aperiam?
+              </p>
+              <p>
+                At vel laborum adipisci enim recusandae unde consequatur hic
+                repudiandae earum quaerat laboriosam sed animi ratione,
+                molestiae dignissimos vero cumque minima dicta perspiciatis?
+                Veniam aspernatur nam dolorem vitae, facilis velit.
+              </p>
+            </div>
+          </div>
+        )}
+      </Transition>
+
+      <div
+        className="transition-all duration-300"
+        style={{
+          transform: `translateX(${
+            selectedSide === "left" ? 25 : selectedSide === "right" ? -25 : 0
+          }%)`,
+        }}
+      >
+        <div
+          className={`h-screen ${scaled ? "scale-150 -translate-x-[1%]" : ""}`}
+        >
+          <img
+            ref={ref}
+            src="/images/sequenceWing.jpg"
+            alt=""
+            className="w-full h-full object-cover"
+          />
+
+          <svg className="absolute top-0 left-0 w-full h-full">
+            <svg
+              viewBox={`0 0 ${imageWidth} ${imageHeight}`}
+              preserveAspectRatio="xMidYMid slice"
+            >
+              <polygon
+                points="1440.1 1460.16 1440.1 1488.24 1580.48 1472.39 1580.48 1440.5 1440.1 1460.16"
+                className="fill-white hover:fill-black transition-[fill]"
+              />
+            </svg>
+          </svg>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Test2Page;
@@ -10,27 +10,28 @@ function UnitTypesItemPage() {
  const params = useParams();
  const navigate = useNavigate();
  const unitType = unitTypes.find((unitType) => unitType.type === params.type);
-  const [selectedUniTypePos, setSelectedUniTypePos] = useState<string>("left");
+  const [selectedUnitTypePos, setSelectedUnitTypePos] =
+    useState<string>("left");

  return (
-    <div className="pt-[calc(58px+24px)] p-6 flex gap-4 select-none">
-      <div className="w-full flex flex-col gap-4">
-        <div className="text-2xl font-semibold flex items-center gap-4">
+    <div className="mt-[58px] lg:p-6 p-4 flex max-lg:flex-col gap-4 select-none">
+      <div className="flex-1 flex flex-col gap-4">
+        <div className="flex items-center gap-4">
          <Button
            buttonType="cta"
            icon={<LeftArrowSliderIcon />}
            onClick={() => navigate("..")}
          />
-          <p className="">{unitType?.title}</p>
+          <p className="lg:text-2xl text-xl font-semibold">{unitType?.title}</p>
        </div>
-        <div className="flex-1 flex justify-between gap-10 bg-white rounded-2xl p-10">
-          <div className="w-[188px] space-y-4">
-            <div className="border-b border-[#E2E2DC] pb-2">
+        <div className="flex-1 flex max-sm:flex-col justify-between lg:gap-10 gap-4 bg-white rounded-2xl lg:p-10 sm:p-8 p-4">
+          <div className="sm:w-1/3 max-sm:order-last space-y-4">
+            <div className="max-lg:hidden border-b border-[#E2E2DC] pb-2">
              <p className="text-xl font-semibold">Legend</p>
            </div>
-            <div className="">
+            <div className="grid max-lg:grid-cols-2 gap-2">
              {unitType?.legends.map((legend, index) => (
-                <div className="flex gap-2 items-center">
+                <div className="flex  gap-2 items-center max-lg:bg-[#F3F3F2] max-lg:p-2 rounded-lg font-semibold text-[10px]">
                  <div className="min-w-4 min-h-4 bg-[#00BED7] text-white rounded-full text-[10px] font-semibold flex items-center justify-center">
                    {index + 1}
                  </div>
@@ -39,14 +40,14 @@ function UnitTypesItemPage() {
              ))}
            </div>
          </div>
-          <div className="flex flex-col items-center justify-between gap-10">
+          <div className="sm:w-2/3 flex flex-col sm:items-center justify-between lg:gap-10 gap-6">
            {unitType?.images.length && unitType?.images.length > 1 ? (
              <>
-                <div className="max-w-[628px] max-h-[628px]">
+                <div className="max-w-[628px] max-h-[628px] max-sm:order-last">
                  <img
                    src={
                      unitType?.images.find(
-                        (image) => image.position === selectedUniTypePos
+                        (image) => image.position === selectedUnitTypePos
                      )?.src
                    }
                    alt=""
@@ -54,22 +55,42 @@ function UnitTypesItemPage() {
                  />
                </div>
                <div className="flex bg-[#F3F3F2] rounded-lg">
-                  <Button
+                  {/* <Button
                    buttonType={
-                      selectedUniTypePos === "left" ? "cta" : "tertiary"
+                      selectedUnitTypePos === "left" ? "cta" : "tertiary"
                    }
                    text="Left"
                    className="px-6 py-2.5"
-                    onClick={() => setSelectedUniTypePos("left")}
+                    onClick={() => setSelectedUnitTypePos("left")}
                  />
                  <Button
                    buttonType={
-                      selectedUniTypePos === "right" ? "cta" : "tertiary"
+                      selectedUnitTypePos === "right" ? "cta" : "tertiary"
                    }
                    text="Right"
                    className="px-6 py-2.5"
-                    onClick={() => setSelectedUniTypePos("right")}
-                  />
+                    onClick={() => setSelectedUnitTypePos("right")}
+                  /> */}
+                  <button
+                    className={`transition-colors w-full px-6 py-2.5 text-sm rounded-lg outline-none ${
+                      selectedUnitTypePos === "left"
+                        ? "bg-[#00BED7] text-white"
+                        : "text-[#0D1922]/40 hover:text-[#0D1922]"
+                    }`}
+                    onClick={() => setSelectedUnitTypePos("left")}
+                  >
+                    Left
+                  </button>
+                  <button
+                    className={`transition-colors w-full px-6 py-2.5 text-sm rounded-lg outline-none ${
+                      selectedUnitTypePos === "right"
+                        ? "bg-[#00BED7] text-white"
+                        : "text-[#0D1922]/40 hover:text-[#0D1922]"
+                    }`}
+                    onClick={() => setSelectedUnitTypePos("right")}
+                  >
+                    Right
+                  </button>
                </div>
              </>
            ) : (
@@ -82,32 +103,44 @@ function UnitTypesItemPage() {
              </div>
            )}
          </div>
-          <div className=""></div>
        </div>
      </div>
-      <div className="min-w-[376px] space-y-2 flex-1 flex flex-col">
-        <div className="flex-1 flex flex-col justify-between bg-white rounded-2xl p-8">
+
+      <div className="lg:w-[376px] lg:flex flex-col grid lg:grid-cols-1 sm:grid-cols-2 grid-cols-1 sm:gap-2 gap-3">
+        <div className="overflow-hidden bg-white rounded-2xl lg:col-start-auto sm:col-start-2 sm:row-start-auto row-start-2">
+          <img
+            src="/images/pages/UnitTypesItem/studio-flex.jpg"
+            alt=""
+            className="aspect-square object-cover"
+          />
+        </div>
+        <div
+          className={`sm:p-8 p-4 bg-white rounded-2xl lg:row-start-auto sm:row-start-1 ${
+            unitType?.tourAvailable ? "sm:row-span-2" : ""
+          } flex-1 flex flex-col justify-between gap-6`}
+        >
          <div className="space-y-6">
            <div className="space-y-2">
-              <p className="text-[40px] font-bold">{unitType?.title}</p>
-              <p className="text-xl text-[#00BED7] font-semibold">
+              <p className="sm:text-[40px] text-2xl font-bold sm:leading-[54px] leading-[32.4px]">
+                {unitType?.title}
+              </p>
+              <p className="sm:text-xl text-[#00BED7] font-semibold sm:leading-[28px] leading-[18.4px]">
                {unitType?.desc}
              </p>
            </div>
-
-            <div className="text-[#73787C] space-y-2">
+            <div className="text-[#73787C] sm:text-base text-sm space-y-2 sm:leading-[20px] leading-[19.6px]">
              {unitType?.texts.map((desc) => (
                <p>{desc}</p>
              ))}
            </div>
          </div>
-          <div>
-            <p className="text-sm">Up to {unitType?.sqft.toFixed(0)} Sqft</p>
-            {/* <p className="text-xl text-[#00BED7]">from AED 1,668,888</p> */}
-          </div>
+          <p className="sm:text-sm text-xs">
+            Up to {unitType?.sqft.toFixed(0)} Sqft
+          </p>
+          {/* <p className="text-xl text-[#00BED7]">from AED 1,668,888</p> */}
        </div>
        {unitType?.tourAvailable && (
-          <div className="bg-white rounded-2xl p-6">
+          <div className="sm:p-8 p-4 bg-white rounded-2xl lg:col-start-auto sm:col-start-2 h-fit">
            <Button
              buttonType="secondary"
              icon={<VirtualTourIcon />}
@@ -115,7 +148,6 @@ function UnitTypesItemPage() {
              className="flex items-center justify-center w-full"
              onClick={() => navigate(`/virtual-tour/${unitType.type}`)}
            />
-            {/* Studio Flex, Studio-2, 1 BR Type C, 2 BR Type B */}
          </div>
        )}
      </div>