upd

client/src/components/Logo.tsx

@@ -1,4 +1,3 @@
-import { useNavigate } from "react-router-dom";
 import LogoIcon from "./icons/LogoIcon";
 
 interface LogoProps {
@@ -6,19 +5,13 @@ interface LogoProps {
 }
 
 const Logo = ({ className = "" }: LogoProps) => {
-  const navigate = useNavigate();
-
-  const handleOnLogoClick = () => {
-    navigate("../");
-  };
-
   return (
-    <div
+    <a
+      href="/"
       className={`text-[#0D1922] py-4 px-6 border-r border-r-[#F3F3F2] cursor-pointer select-none ${className}`}
-      onClick={handleOnLogoClick}
     >
       <LogoIcon />
-    </div>
+    </a>
   );
 };
 

client/src/components/complexPage/ComplexTopPanel.tsx

@@ -56,7 +56,7 @@ const ComplexTopPanel = () => {
   };
 
   const handleOnAboutComplexClick = () => {
-    navigate(`../aboutComplex`);
+    navigate(`../about-projects`);
   };
 
   return (

client/src/components/complexWingPage/FloorSidebar/FloorSidebar.tsx

@@ -8,10 +8,11 @@ import WestWingLayout from "./WestWingLayout";
 import useModal from "../../../store/useModal";
 import AboutComplexModal from "../../modals/AboutComplexModal";
 import { IAparmentRes } from "../../../types/apartmentsRes";
-import WestWingTopLevelsLayout from "./WestWingTopLevelsLayout";
-import WestWingTopLevelsHighlighting from "./WestWingTopLevelsHighlighting";
+// import WestWingTopLevelsLayout from "./WestWingTopLevelsLayout";
+// import WestWingTopLevelsHighlighting from "./WestWingTopLevelsHighlighting";
 import { apartmentsWithoutVirtualTour } from "../../../consts/apartmentsWithoutVirtualTour";
 import { filterCurrentApartment } from "../../../calc/filterCurrentApartment";
+import WestWingFloorLayout from "./WestWingFloorLayout";
 
 interface IFloorSidebarProps {
   currentFloor: IDesctiptionFloor | null;
@@ -43,7 +44,7 @@ const FloorSidebar = ({
   }
 
   function handleOnApartmentClick(
-    event: React.MouseEvent<SVGSVGElement, MouseEvent>
+    event: React.MouseEvent<SVGSVGElement | SVGPathElement, MouseEvent>
   ) {
     const apartmentType = event.currentTarget.dataset.type;
     if (!apartmentType) return;
@@ -67,7 +68,7 @@ const FloorSidebar = ({
   }
 
   function handleOnMouseOver(
-    event: React.MouseEvent<SVGSVGElement, MouseEvent>
+    event: React.MouseEvent<SVGSVGElement | SVGPathElement, MouseEvent>
   ): void {
     const apartmentType = event.currentTarget.dataset.type;
     if (!apartmentType) return;
@@ -137,7 +138,7 @@ const FloorSidebar = ({
       </div>
       <div
         ref={descRef}
-        className="absolute h-full right-0 w-full z-30 bg-[#F3F3F2] p-6 flex flex-col top-[56px] "
+        className="absolute w-full h-[calc(100vh-56px)] right-0 z-30 bg-[#F3F3F2] p-6 top-[56px] flex flex-col"
         onMouseOver={onMouseEnter}
       >
         <div className="flex justify-between pb-4">
@@ -151,6 +152,7 @@ const FloorSidebar = ({
             <div className="leading-5">{floorApartments.length} units</div>
           </div>
         </div>
+
         <div className="px-4 py-[18px] bg-white flex gap-6 text-[#73787C] font-semibold text-caption-m rounded-2xl mb-2">
           <div className="gap-2 flex items-center">
             <div className="rounded-full bg-[#A19E9E] w-3 h-3"></div>
@@ -174,7 +176,7 @@ const FloorSidebar = ({
           </div>
         </div>
 
-        <div className="px-10 bg-white flex gap-6 font-semibold text-caption-m rounded-2xl justify-center items-center flex-1 py-4">
+        <svg className="flex-1 px-10 bg-white font-semibold text-caption-m rounded-2xl py-4">
           {currentFloor?.wing === "West Wing" ? (
             currentFloor && currentFloor.floor <= 21 ? (
               <svg
@@ -193,21 +195,28 @@ const FloorSidebar = ({
                 />
               </svg>
             ) : (
-              <svg
-                className="rotate-[135deg]"
-                xmlns="http://www.w3.org/2000/svg"
-                width="400"
-                height="700"
-                fill="none"
-                viewBox="0 0 204 600"
-              >
-                <WestWingTopLevelsLayout />
-                <WestWingTopLevelsHighlighting
-                  handleOnApartmentClick={handleOnApartmentClick}
-                  handleOnMouseOut={handleOnMouseOut}
-                  handleOnMouseOver={handleOnMouseOver}
+              // <svg
+              //   className="rotate-[135deg]"
+              //   xmlns="http://www.w3.org/2000/svg"
+              //   width="400"
+              //   height="700"
+              //   fill="none"
+              //   viewBox="0 0 204 600"
+              // >
+              //   <WestWingTopLevelsLayout />
+              //   <WestWingTopLevelsHighlighting
+              //     handleOnApartmentClick={handleOnApartmentClick}
+              //     handleOnMouseOut={handleOnMouseOut}
+              //     handleOnMouseOver={handleOnMouseOver}
+              //   />
+              // </svg>
+              <>
+                <WestWingFloorLayout
+                  handleMouseEnter={handleOnMouseOver}
+                  handleMouseLeave={handleOnMouseOut}
+                  handleClick={handleOnApartmentClick}
                 />
-              </svg>
+              </>
             )
           ) : (
             <svg
@@ -242,7 +251,7 @@ const FloorSidebar = ({
               />
             </svg>
           ) : } */}
-        </div>
+        </svg>
       </div>
     </>
   );

client/src/components/complexWingPage/FloorSidebar/WestWingTopLevelsHighlighting.tsx

@@ -383,13 +383,6 @@ function WestWingTopLevelsHighlighting({
             fillOpacity="0.2"
           />
         </g>
-        <text
-          x={0}
-          y={10}
-          fill="currentColor"
-        >
-          Test test test
-        </text>
       </svg>
       <svg
         data-type="Studio Squared-Left"

client/src/components/complexWingPage/SequenceWing/SequenceWing.tsx

@@ -212,8 +212,8 @@ const SequenceWing = () => {
     // if (!currentHoveredFloor) return;
     setModal(
       <WingFloorModal
-        currentFloor={currentHoveredFloor}
-        floorApartments={currentHoveredApartments}
+        // currentFloor={currentHoveredFloor}
+        // floorApartments={currentHoveredApartments}
       />
     );
   };
@@ -225,8 +225,8 @@ const SequenceWing = () => {
     // if (!currentHoveredFloor) return;
     setModal(
       <WingFloorModal
-        currentFloor={currentHoveredFloor}
-        floorApartments={currentHoveredApartments}
+        // currentFloor={currentHoveredFloor}
+        // floorApartments={currentHoveredApartments}
       />
     );
   };

client/src/components/header/Header/DesktopHeader.tsx

@@ -2,15 +2,22 @@ import Auth from "../Auth/Auth";
 import Logo from "../../Logo";
 import Navbar from "../Navbar/Navbar";
 import Location from "../Location";
+import DownloadIcon from "../../icons/DownloadIcon";
 
 const DesktopHeader = () => (
-  <header className="bg-white w-full text-white sm:grid grid-cols-6 fixed left-0 top-0 z-[99999900] font-usual text-m select-none">
+  <header className="bg-white fixed left-0 top-0 w-full z-[99999900] font-usual text-m select-none flex justify-between">
     <div className="flex gap-4 col-span-2">
       <Logo />
       <Location />
     </div>
     <Navbar />
-    <Auth isAuth={false} />
+    <div className="flex gap-5">
+      <button className="flex items-center gap-1 text-[#73787C]">
+        <DownloadIcon />
+        <p>Brochure</p>
+      </button>
+      <Auth isAuth={false} />
+    </div>
   </header>
 );
 

client/src/components/header/Navbar/Navbar.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import { useEffect, useState } from "react";
 import { isMobile } from "react-device-detect";
 import { useNavigate, useLocation } from "react-router-dom";

client/src/components/header/Navbar/NavbarDesktop.tsx

@@ -9,7 +9,7 @@ interface NavbarProps {
 
 const NavbarDesktop = ({ selectedTab, onTabClick, tabs }: NavbarProps) => (
   <nav
-    className={`text-[#73787C] self-center col-span-2 justify-center flex h-full`}
+    className={`text-[#091118] self-center col-span-2 justify-center flex h-full`}
   >
     {tabs.map((tab) => (
       <NavbarTabDesktop

client/src/components/header/Navbar/NavbarTabDesktop.tsx

@@ -17,7 +17,7 @@ const NavbarTabDesktop = ({
       onClick={() => onClick(tab)}
     >
       <div
-        className={`border-b-2 h-full flex items-center transition-all duration-300 ${
+        className={`py-4 border-b-2 h-full flex items-center transition-all duration-300 ${
           isSelected
             ? "border-b-[#00BED7]"
             : "border-b-transparent hover:border-b-[#E2E2DC] active:border-b-[#00BED7]"

client/src/components/icons/DownloadIcon.tsx

@@ -0,0 +1,21 @@
+function DownloadIcon() {
+  return (
+    <svg
+      width={24}
+      height={24}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M4 16L4.00003 17.0001C4.00008 18.6569 5.34321 20 7.00003 20L17 20C18.6569 20 20 18.6569 20 17L20 16M16 12L12 16M12 16L8 12M12 16L12 4"
+        stroke="currentColor"
+        strokeWidth={1.5}
+        strokeLinecap="square"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default DownloadIcon;

client/src/components/modals/mobile/WingFloorModal.tsx

@@ -2,18 +2,15 @@ import { useSwipeable } from "react-swipeable";
 import useModal from "../../../store/useModal";
 import { useEffect, useState } from "react";
 import MinusIcon from "../../icons/MinusIcon";
-import { IDesctiptionFloor } from "../../../types/descriptionFloor";
-import { IAparmentRes } from "../../../types/apartmentsRes";
+// import { IDesctiptionFloor } from "../../../types/descriptionFloor";
+// import { IAparmentRes } from "../../../types/apartmentsRes";
 
-interface WingFloorModalProps {
-  currentFloor: IDesctiptionFloor | null;
-  floorApartments: IAparmentRes[];
-}
+// interface WingFloorModalProps {
+//   currentFloor: IDesctiptionFloor | null;
+//   floorApartments: IAparmentRes[];
+// }
 
-const WingFloorModal = ({
-  currentFloor,
-  floorApartments,
-}: WingFloorModalProps) => {
+const WingFloorModal = () => {
   const { setModal } = useModal();
   const [isAnimate, setIsAnimate] = useState(false);
 

client/src/consts/tabs.tsx

@@ -2,28 +2,34 @@ import { Tab } from "../types/tab";
 
 const tabs: Tab[] = [
   {
-    value: "Masterplan",
-    id: "1",
+    id: 1,
+    value: "Map",
     count: 0,
     path: "/masterplan",
   },
+  // {
+  //   id: 2,
+  //   value: "Unit Types",
+  //   count: 0,
+  //   path: "/unit-types",
+  // },
   {
-    value: "Search",
-    id: "2",
+    id: 3,
+    value: "About IRTH",
     count: 0,
-    path: "/search",
+    path: "/about",
   },
   {
+    id: 4,
     value: "Favorites",
-    id: "3",
-    count: 3,
+    count: 0,
     path: "/favorites",
   },
   {
-    value: "Company",
-    id: "4",
+    id: 5,
+    value: "Search",
     count: 0,
-    path: "/company",
+    path: "/search",
   },
 ];
 

client/src/layouts/DefaultLayout.tsx

@@ -3,12 +3,12 @@ import { Outlet } from "react-router-dom";
 import { isMobile } from "react-device-detect";
 import { FullScreen, useFullScreenHandle } from "react-full-screen";
 import { useEffect } from "react";
-import useModal from "../../../store/useModal";
-import DesktopHeader from "./DesktopHeader";
-import MobileHeader from "./MobileHeader";
-import useFullScreen from "../../../store/useFullScreen";
+import useModal from "../store/useModal";
+import useFullScreen from "../store/useFullScreen";
+import DesktopHeader from "../components/header/Header/DesktopHeader";
+import MobileHeader from "../components/header/Header/MobileHeader";
 
-const Layout = () => {
+const DefaultLayout = () => {
   const { modal } = useModal();
   const { setOnFullscreen } = useFullScreen();
   const onFullscreenHandle = useFullScreenHandle();
@@ -28,4 +28,4 @@ const Layout = () => {
   );
 };
 
-export default Layout;
+export default DefaultLayout;

client/src/main.tsx

@@ -1,58 +1,63 @@
 import ReactDOM from "react-dom/client";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
-import Layout from "./components/header/Header/Layout";
-import Masterplan from "./pages/Masterplan";
-import Company from "./pages/Company";
 import "./index.css";
-import Complex from "./pages/Complex";
-import ComplexWing from "./pages/ComplexWing";
-import Search from "./pages/Search";
-import ApartmentPage from "./pages/Apartment";
-import Favorites from "./pages/Favorites";
+import DefaultLayout from "./layouts/DefaultLayout";
+import MasterplanPage from "./pages/MasterplanPage";
+import ComplexPage from "./pages/ComplexPage";
+import ComplexWingPage from "./pages/ComplexWingPage";
+import AboutProjectsPage from "./pages/AboutProjectsPage";
+import UnitTypesPage from "./pages/UnitTypesPage";
+import AboutPage from "./pages/AboutPage";
+import FavoritesPage from "./pages/FavoritesPage";
+import SearchPage from "./pages/SearchPage";
+import ApartmentPage from "./pages/ApartmentPage";
 import VirtualTour from "./pages/VirtualTour";
-import AboutComplex from "./pages/AboutComplex";
 
 const router = createBrowserRouter([
   {
     path: "/",
-    element: <Layout />,
+    element: <DefaultLayout />,
     children: [
       {
-        path: "/",
-        element: <Masterplan />,
+        index: true,
+        element: <MasterplanPage />,
       },
       {
-        path: "/masterplan",
-        element: <Masterplan />,
+        path: "masterplan",
+        element: <MasterplanPage />,
       },
       {
-        path: "/masterplan/:complexId",
-        element: <Complex />,
+        path: "masterplan/:complexId",
+        element: <ComplexPage />,
       },
       {
-        path: "/aboutComplex",
-        element: <AboutComplex />,
+        path: "masterplan/:complexId/wing",
+        element: <ComplexWingPage />,
       },
       {
-        path: "/masterplan/:complexId/wing",
-        element: <ComplexWing />,
+        path: "about-projects",
+        element: <AboutProjectsPage />,
       },
       {
-        path: "/company",
-        element: <Company />,
+        path: "unit-types",
+        element: <UnitTypesPage />,
       },
       {
-        path: "/search",
-        element: <Search />,
+        path: "about",
+        element: <AboutPage />,
       },
       {
-        path: "/search/:id",
+        path: "favorites",
+        element: <FavoritesPage />,
+      },
+      {
+        path: "search",
+        element: <SearchPage />,
+      },
+      {
+        path: "search/:id",
         element: <ApartmentPage />,
       },
-      {
-        path: "/favorites",
-        element: <Favorites />,
-      },
       {
         path: "virtual-tour/:appartmentTypeId",
         element: <VirtualTour />,

client/src/pages/AboutPage.tsx

@@ -4,7 +4,7 @@ import InvestmentPortfolio from "../components/companyPage/InvestmentPortfolio";
 import OurValues from "../components/companyPage/OurValues/OurValues";
 import Footer from "../components/Footer";
 
-const Company = () => {
+const AboutPage = () => {
   return (
     <section
       className={`xl:pt-16 pt-10 font-usual ${
@@ -27,4 +27,4 @@ const Company = () => {
   );
 };
 
-export default Company;
+export default AboutPage;

client/src/pages/AboutProjectsPage.tsx

@@ -118,7 +118,7 @@ const advStyles = [
   "xl:col-start-3 xl:col-span-4",
 ];
 
-const AboutComplex = () => {
+function AboutProjectsPage() {
   const navigate = useNavigate();
 
   const handleOnBackClick = () => {
@@ -489,6 +489,6 @@ const AboutComplex = () => {
       <Footer />
     </>
   );
-};
+}
 
-export default AboutComplex;
+export default AboutProjectsPage;

client/src/pages/ComplexPage.tsx

@@ -2,7 +2,7 @@ import ButtomPanelCompass from "../components/ButtomPanelCompass";
 import ComplexTopPanel from "../components/complexPage/ComplexTopPanel";
 import SequenceSlider from "../components/complexPage/SequenceSlider";
 
-const Complex = () => {
+function ComplexPage() {
   return (
     <div className="overflow-hidden h-screen w-screen select-none">
       <ComplexTopPanel />
@@ -10,6 +10,6 @@ const Complex = () => {
       <ButtomPanelCompass />
     </div>
   );
-};
+}
 
-export default Complex;
+export default ComplexPage;

client/src/pages/ComplexWingPage.tsx

@@ -2,7 +2,7 @@ import ComplexTopPanel from "../components/complexPage/ComplexTopPanel";
 import ButtomPanelCompass from "../components/ButtomPanelCompass";
 import SequenceWing from "../components/complexWingPage/SequenceWing/SequenceWing";
 
-const ComplexWing = () => {
+function ComplexWingPage() {
   return (
     <div className="overflow-hidden h-screen w-screen select-none">
       <ComplexTopPanel />
@@ -10,6 +10,6 @@ const ComplexWing = () => {
       <ButtomPanelCompass />
     </div>
   );
-};
+}
 
-export default ComplexWing;
+export default ComplexWingPage;

client/src/pages/FavoritesPage.tsx

@@ -152,7 +152,7 @@ const initialCollectionCompareSwitcher: ISwitcher = {
   isSwitched: false,
 };
 
-const Favorites = () => {
+const FavoritesPage = () => {
   const [sortList, setSortList] = useState(initialSortList);
   const [switcher, setSwitcher] = useState(initialCollectionCompareSwitcher);
   const { favorites, setFavorites } = useFavorites();
@@ -234,4 +234,4 @@ const Favorites = () => {
   );
 };
 
-export default Favorites;
+export default FavoritesPage;

client/src/pages/MasterplanPage.tsx

@@ -6,7 +6,7 @@ import TopPanel from "../components/masterplanPage/TopPanel";
 import ButtomPanel from "../components/ButtomPanel";
 import ZoomHint from "../components/modals/ZoomHintModal";
 
-const Masterplan = () => {
+function MasterplanPage() {
   const { setModal } = useModal();
   useEffect(() => {
     setModal(<ZoomHint />);
@@ -19,6 +19,6 @@ const Masterplan = () => {
       <ButtomPanel />
     </div>
   );
-};
+}
 
-export default Masterplan;
+export default MasterplanPage;

client/src/pages/SearchPage.tsx

@@ -2,7 +2,7 @@ import Footer from "../components/Footer";
 import LayoutOptions from "../components/searchPage/LayoutOptions";
 import SidebarFilters from "../components/searchPage/SidebarFilters";
 
-const Search = () => {
+const SearchPage = () => {
   return (
     <div className="overflow-scroll h-screen w-screen pt-14 select-none">
       <div className="flex">
@@ -14,4 +14,4 @@ const Search = () => {
   );
 };
 
-export default Search;
+export default SearchPage;

client/src/pages/UnitTypesPage.tsx

@@ -0,0 +1,5 @@
+function UnitTypesPage() {
+  return <div>UnitTypesPage</div>;
+}
+
+export default UnitTypesPage;

client/src/types/tab.ts

@@ -1,6 +1,6 @@
 interface Tab {
+  id: number;
   value: string;
-  id: string;
   count: number;
   path: string;
 }