fixes

package.json

@@ -14,10 +14,12 @@
     "@heroicons/react": "^2.1.1",
     "@react-spring/web": "^9.7.3",
     "@use-gesture/react": "^10.3.0",
+    "i18next": "^23.11.5",
     "react": "^18.2.0",
     "react-device-detect": "^2.2.3",
     "react-dom": "^18.2.0",
     "react-full-screen": "^1.1.1",
+    "react-i18next": "^14.1.2",
     "react-router-dom": "^6.21.3",
     "react-swipeable": "^7.0.1",
     "react-unity-webgl": "^9.5.0",

src/components/HintThreeDTour.tsx

@@ -1,5 +1,6 @@
 import PedestrianIcon from "../icons/Pedestrianicon";
 import CrossIcon from "../icons/CrossIcon";
+import { useTranslation } from "react-i18next";
 
 type HintThreeDTourProps = {
   isMobile?: boolean;
@@ -12,6 +13,7 @@ const HintThreeDTour = ({
   className,
   onClose,
 }: HintThreeDTourProps) => {
+  const [t] = useTranslation();
   return (
     <div
       className={`flex items-center justify-center bg-[#EAE5E0] h-fit w-fit px-12 py-2 gap-2 rounded-full mx-auto text-sm ${
@@ -19,7 +21,7 @@ const HintThreeDTour = ({
       } ${className ? className : ""}`}
     >
       <PedestrianIcon color="#000" className="w-5 h-5" />
-      <p>Choose a room to start the 3D tour</p>
+      <p>{t("Choose a room to start the 3D tour")}</p>
       {onClose && (
         <div onClick={onClose}>
           <CrossIcon />

src/components/HouseItem.tsx

@@ -1,9 +1,9 @@
+import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import useStore from "../store/store";
 import { Villa } from "../types/appartment";
 import KnowMoreButton from "./mobile/Main/KnowMoreButton";
 import ViewOnMapButton from "./mobile/Main/ViewOnMapButton";
-
 type HouseItemProps = {
   villa: Villa;
 };
@@ -11,6 +11,7 @@ type HouseItemProps = {
 const HouseItem = ({ villa }: HouseItemProps) => {
   const { setSelectedOnMapVilla, setModal, selectedOnMapVilla } = useStore();
   const navigate = useNavigate();
+  const [t, i18n] = useTranslation();
 
   const handleOnViewOnMapClick = () => {
     setSelectedOnMapVilla(villa);
@@ -18,12 +19,16 @@ const HouseItem = ({ villa }: HouseItemProps) => {
 
   const handleOnKnowMoreButton = () => {
     setModal(null);
-    navigate(`../en/villa/${villa.type}`);
+    navigate(`${villa.type}`);
   };
 
   return (
     <div className={`flex flex-col border border-[#DDD7D6] rounded-2xl`}>
-      <div className="flex w-full text-[12px] font-medium">
+      <div
+        className={`flex w-full text-[12px] font-medium ${
+          i18n.language === "ar" ? "flex-row-reverse" : ""
+        }`}
+      >
         <div className="w-1/2 overflow-clip p-2">
           <div className="w-full min-w-full h-[132px] max-h-[132px] overflow-clip">
             {villa?.perspectiveWorkings[0]?.image && (
@@ -36,24 +41,40 @@ const HouseItem = ({ villa }: HouseItemProps) => {
             )}
           </div>
         </div>
-        <div className="flex p-4 pl-2">
+        <div
-          <div className="w-full flex flex-col justify-center gap-1 text-[#666668]">
+          className={`flex p-4 pl-2 ${
-            <p>Type</p>
+            i18n.language === "ar" ? "flex-row-reverse" : ""
-            <p>Plot area, m2</p>
+          }`}
-            <p>Unit area, m2</p>
+        >
-            <p>Bedrooms</p>
+          <div
-            <p>Villa Theme</p>
+            className={`w-full flex flex-col justify-center gap-1 text-[#666668]  ${
+              i18n.language === "ar" ? "text-right" : ""
+            }`}
+          >
+            <p>{t("Type")}</p>
+            <p>{t("PlotArea")}</p>
+            <p>{t("UnitArea")}</p>
+            <p>{t("Bedrooms")}</p>
+            <p>{t("VillaTheme")}</p>
           </div>
-          <div className="flex text-right flex-col w-[82px] justify-center gap-1">
+          <div
+            className={`flex flex-col w-[82px] justify-center gap-1 ${
+              i18n.language === "ar" ? "text-left" : "text-right"
+            }`}
+          >
             <div className="uppercase">{villa.type}</div>
             <div className="">{villa.plotArea}</div>
             <div className="">{villa.totalBuildUpArea}</div>
             <div>{villa.totalCountBedroms}</div>
-            <div>{villa.villaTheme}</div>
+            <div>{t(`${villa.villaTheme}`)}</div>
           </div>
         </div>
       </div>
-      <div className={`border-0 border-t-[1px] text-sm flex`}>
+      <div
+        className={`border-0 border-t-[1px] text-sm flex ${
+          i18n.language === "ar" ? "flex-row-reverse" : "flex-row"
+        }`}
+      >
         <ViewOnMapButton
           onClick={handleOnViewOnMapClick}
           isVillaSelected={selectedOnMapVilla?.type === villa.type}

src/components/ImagesButton.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import ImagesIcon from "../icons/ImagesIcon";
 
 type ImagesButtonProps = {
@@ -5,13 +6,14 @@ type ImagesButtonProps = {
 };
 
 const ImagesButton = ({ onClick }: ImagesButtonProps) => {
+  const [t] = useTranslation();
   return (
     <button
       onClick={onClick}
       className="bg-white py-[6px] pr-5 pl-4 rounded-full border border-[#C7BDBA] flex gap-1 items-center hover:bg-secondary transition-all duration-200 h-10 "
     >
       <ImagesIcon />
-      Images
+      {t("Images")}
     </button>
   );
 };

src/components/Layout.tsx

@@ -1,11 +1,23 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import { FullScreen, useFullScreenHandle } from "react-full-screen";
 import { useEffect } from "react";
-import { Outlet } from "react-router-dom";
+import { Outlet, useParams } from "react-router-dom";
 import useStore from "../store/store";
+import { useTranslation } from "react-i18next";
+import { languages } from "../consts/languages";
 
 const Layout = () => {
   const { loader, setOnFullscreen, modal, hintModal } = useStore();
   const onFullscreenHandle = useFullScreenHandle();
+  const { lang } = useParams();
+  const [, i18n] = useTranslation();
+
+  useEffect(() => {
+    console.log("lang", lang);
+    if (lang && languages.includes(lang)) {
+      i18n.changeLanguage(lang);
+    }
+  }, [i18n, lang]);
 
   useEffect(() => {
     setOnFullscreen(onFullscreenHandle);

src/components/LayoutButton.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import LayoutIcon from "../icons/LayoutIcon";
 
 type LayoutButtonProps = {
@@ -5,13 +6,14 @@ type LayoutButtonProps = {
 };
 
 const LayoutButton = ({ onClick }: LayoutButtonProps) => {
+  const [t] = useTranslation();
   return (
     <button
       onClick={onClick}
       className="bg-white py-[6px] pr-5 pl-4 rounded-full border border-[#C7BDBA] text-[16px] flex gap-1 justify-center items-center hover:bg-secondary transition-all duration-200 h-10"
     >
       <LayoutIcon />
-      Layout
+      {t("Layout")}
     </button>
   );
 };

src/components/LayoutToggle.tsx

@@ -1,3 +1,5 @@
+import { useTranslation } from "react-i18next";
+
 type LayoutToggleProps = {
   currentView: number;
   setCurrentView: React.Dispatch<React.SetStateAction<number>>;
@@ -9,6 +11,7 @@ const LayoutToggle = ({
   setCurrentView,
   className,
 }: LayoutToggleProps) => {
+  const [t] = useTranslation();
   return (
     <div className={`w-full mx-auto h-9 px-6 `}>
       <div
@@ -23,7 +26,7 @@ const LayoutToggle = ({
           onClick={() => setCurrentView(1)}
         >
           {" "}
-          Ground Floor
+          {t("GroundFloor")}
         </div>
         <div
           className={`${
@@ -32,7 +35,7 @@ const LayoutToggle = ({
           onClick={() => setCurrentView(2)}
         >
           {" "}
-          First Floor
+          {t("FirstFloor")}
         </div>
         <div
           className={`${
@@ -41,7 +44,7 @@ const LayoutToggle = ({
           onClick={() => setCurrentView(3)}
         >
           {" "}
-          Parking
+          {t("Parking")}
         </div>
       </div>
     </div>

src/components/LoaderModal.tsx

@@ -4,6 +4,7 @@ import { loadingMessages } from "../consts/loading";
 import { isDesktop } from "react-device-detect";
 import { useParams } from "react-router-dom";
 import useStore from "../store/store";
+import { useTranslation } from "react-i18next";
 
 type LoaderModalProps = {
   isSimleLoader?: boolean;
@@ -12,6 +13,7 @@ type LoaderModalProps = {
 const LoaderModal = ({ isSimleLoader = false }: LoaderModalProps) => {
   const { villaTitle } = useParams();
   const { villaLoadStatus } = useStore();
+
   const isMapDesktopModal = !villaTitle && isDesktop;
 
   return (
@@ -32,6 +34,8 @@ const LoaderModal = ({ isSimleLoader = false }: LoaderModalProps) => {
 
 const LoaderModalWithMessage = () => {
   const [offset, setOffset] = useState(0);
+  const [t] = useTranslation();
+
   useEffect(() => {
     const interval = setInterval(() => {
       setOffset((prev) => {
@@ -44,6 +48,7 @@ const LoaderModalWithMessage = () => {
       });
     }, 2000);
   }, []);
+
   return (
     <div className="relative h-7 overflow-hidden">
       <div
@@ -52,7 +57,7 @@ const LoaderModalWithMessage = () => {
       >
         {loadingMessages.map((message) => (
           <div className="h-7" key={message.id}>
-            {message.value}
+            {t(`${message.value}`)}
           </div>
         ))}
       </div>

src/components/UnitList.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import { Units } from "../types/appartment";
 
 type UnitListProps = {
@@ -6,26 +7,39 @@ type UnitListProps = {
 };
 
 const UnitList = ({ units, startIndex = 0 }: UnitListProps) => {
+  const [t, i18n] = useTranslation();
   return (
     <div className="sm:min-w-[440px] sm:overflow-y-scroll flex flex-col justify-center self-center sm:h-screen">
       <div className="px-8 py-6 h-full">
-        <div className="font-medium text-lg flex w-full gap-[18px] py-2 pr-6 pl-4">
+        <div
+          className={`font-medium text-lg flex w-full gap-[18px] py-2 pr-6 pl-4  ${
+            i18n.language === "ar" ? "flex-row-reverse" : ""
+          }`}
+        >
           <div>№</div>
-          <div className="flex justify-between w-full">
+          <div
-            <div>Unit</div>
+            className={`flex justify-between w-full ${
-            <div>Area (m)</div>
+              i18n.language === "ar" ? "flex-row-reverse" : ""
+            }`}
+          >
+            <div>{t("Unit")}</div>
+            <div>{t("Area (m)")}</div>
           </div>
         </div>
         {units.map((unit, index) => (
           <div
             key={unit.id}
             className={`font-medium text-lg flex w-full gap-[18px] py-2 pr-6 text-[#333333] pl-4 ${
-              index % 2 === 0 ? "bg-[#EAE5E0] rounded-lg" : ""
+              i18n.language === "ar" ? "flex-row-reverse" : ""
+            }  ${index % 2 === 0 ? "bg-[#EAE5E0] rounded-lg" : ""}`}
+          >
+            <div className={`text-[#858585]`}>{startIndex + index + 1}</div>
+            <div
+              className={`flex justify-between w-full ${
+                i18n.language === "ar" ? "flex-row-reverse" : ""
               }`}
             >
-            <div>{startIndex + index + 1}</div>
+              <div>{t(`${unit.title}`)}</div>
-            <div className="flex justify-between w-full">
-              <div>{unit.title}</div>
               <div>{unit.value}</div>
             </div>
           </div>

src/components/ViewToggle.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import useStore from "../store/store";
 
 type ViewSwitcherProps = {
@@ -7,6 +8,7 @@ type ViewSwitcherProps = {
 
 const ViewToggle = ({ offset, isDesktop }: ViewSwitcherProps) => {
   const { sendMessageToUnity, setCurrentView, currentView } = useStore();
+  const [t] = useTranslation();
 
   const handleOnFirstClick = () => {
     setCurrentView(1);
@@ -62,7 +64,7 @@ const ViewToggle = ({ offset, isDesktop }: ViewSwitcherProps) => {
             } py-2 px-3 text-[14px] w-full sm:w-fit rounded-[32px]`}
           >
             {" "}
-            Outdoor
+            {t("Outdoor")}
           </div>
           <div
             onClick={handleOnSecondClick}
@@ -73,7 +75,7 @@ const ViewToggle = ({ offset, isDesktop }: ViewSwitcherProps) => {
             }  py-2 px-3 w-full sm:w-fit rounded-[32px] `}
           >
             {" "}
-            Ground Floor
+            {t("GroundFloor")}
           </div>
           <div
             onClick={handleOnThirdClick}
@@ -84,7 +86,7 @@ const ViewToggle = ({ offset, isDesktop }: ViewSwitcherProps) => {
             }  py-2 px-3 w-full sm:w-fit rounded-[32px] `}
           >
             {" "}
-            First Floor
+            {t("FirstFloor")}
           </div>
         </div>
       </div>

src/components/desktop/Appartment/ButtonPanel.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 import { useNavigate, useLocation } from "react-router-dom";
 import { FullScreenHandle } from "react-full-screen";
 import { useState } from "react";
@@ -12,6 +13,7 @@ import LayoutModal from "./LayoutModal";
 import ImagesModal from "./ImagesModal";
 import HintThreeDTour from "../../HintThreeDTour";
 import ModalAnimationContainer from "./ModalAnimationContainer";
+import { useTranslation } from "react-i18next";
 
 type ButtonPanelProps = {
   handleFullscreen: FullScreenHandle | null;
@@ -19,6 +21,7 @@ type ButtonPanelProps = {
 
 const ButtonPanel = ({ handleFullscreen }: ButtonPanelProps) => {
   const { setModal, is3DTour, currentView, setModalAnimation } = useStore();
+  const [_, i18n] = useTranslation();
 
   const [isFullMode, setIsFullMode] = useState(false);
 
@@ -56,14 +59,24 @@ const ButtonPanel = ({ handleFullscreen }: ButtonPanelProps) => {
   };
 
   return (
-    <div className="absolute top-0 w-screen max-w-screen p-4 flex select-none">
+    <div
-      <div className="w-1/3">
+      className={`absolute top-0 w-screen max-w-screen p-4 flex select-none ${
+        i18n.language === "ar" ? "flex-row-reverse " : ""
+      }`}
+    >
+      <div
+        className={`w-1/3 ${i18n.language === "ar" ? "flex justify-end" : ""}`}
+      >
         <GoBackButton />
       </div>
       <div className="w-1/3">
         {currentView !== 1 && !is3DTour && <HintThreeDTour />}
       </div>
-      <div className="flex gap-2 w-fit ml-auto">
+      <div
+        className={`flex gap-2 w-fit ${
+          i18n.language === "ar" ? "mr-auto" : "ml-auto"
+        }`}
+      >
         <ImagesButton onClick={handleOnImagesClick} />
         <LayoutButton onClick={handleOnLayoutClick} />
         <HelpButton
@@ -85,9 +98,10 @@ const GoBackButton = () => {
   const location = useLocation();
   const isHistoryEmpty = location.key === "default";
   const navigate = useNavigate();
+  const { t } = useTranslation();
 
   const handleOnMapClick = () => {
-    navigate("../en");
+    navigate(-1);
   };
 
   const handleOnBackClick = () => {
@@ -110,7 +124,7 @@ const GoBackButton = () => {
           ) : (
             <BackButton
               onClick={handleOnMapClick}
-              title="Map"
+              title={t("Map")}
               className="w-[90px] h-10"
             />
           )}

src/components/desktop/Appartment/ControlHelpModal/ControlHelpModal.tsx

@@ -5,12 +5,14 @@ import useStore from "../../../../store/store";
 import StartThreeDTourHelpModal from "./StartThreeDTourHelpModal";
 import ThreeDTourHelpModal from "./ThreeDTourHelpModal";
 import TouchScreenHelpModal from "./TouchScreenHelpModal";
+import { useTranslation } from "react-i18next";
 
-const views = ["Outdoor", "Ground Floor", "First Floor"];
+const views = ["Outdoor", "GroundFloor", "FirstFloor"];
 
 const ControlHelpModal = () => {
   const { currentView, setModal, is3DTour } = useStore();
-  const currentViewTitle = views[currentView - 1];
+  const [t] = useTranslation();
+  const currentViewTitle = t(`${views[currentView - 1]}`);
   const handleOnCloseClick = () => {
     setModal(null);
   };

src/components/desktop/Appartment/ControlHelpModal/LookAroundButton.tsx

@@ -1,14 +1,17 @@
+import { useTranslation } from "react-i18next";
+
 type LookAroundButtonProps = {
   onClick: () => void;
 };
 
 const LookAroundButton = ({ onClick }: LookAroundButtonProps) => {
+  const [t] = useTranslation();
   return (
     <button
       className="bg-[#333] text-white px-6 py-[10px] w-fit rounded-full"
       onClick={onClick}
     >
-      Look around
+      {t("LookAround")}
     </button>
   );
 };

src/components/desktop/Appartment/ControlHelpModal/StartThreeDTourHelpModal.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import MouseIcon from "../../../../icons/MouseIcon";
 import PedestrianIcon from "../../../../icons/Pedestrianicon";
 import CrossButton from "../../../CrossButton";
@@ -12,6 +13,7 @@ const StartThreeDTourHelpModal = ({
   onClick,
   currentViewTitle,
 }: StartThreeDTourHelpModalProps) => {
+  const [t] = useTranslation();
   return (
     <div className="absolute h-screen w-screen bg-black bg-opacity-30 z-10 flex justify-center items-center select-none pointer-events-auto">
       <div className="w-[536px] min-h-[344px] bg-white rounded-[16px] flex flex-col py-8 px-10">
@@ -22,23 +24,20 @@ const StartThreeDTourHelpModal = ({
           <CrossButton onClick={onClick} />
         </div>
         <div className="flex flex-col gap-4 pb-8">
-          <h2 className="text-[#333] text-[32px] font-bold">Control Help</h2>
+          <h2 className="text-[#333] text-[32px] font-bold">
+            {t("ControlHelp")}
+          </h2>
           <div className="flex gap-4 items-center">
             <div className="w-[56px] h-[56px] flex items-center justify-center border border-[#EAE5E0] rounded-full">
               <MouseIcon />{" "}
             </div>
-            <div>
+            <div>{t("ClickAndHoldTheLeftMouseButtonToLookAround")}</div>
-              Click and hold the left mouse
-              <br /> button to look around
-            </div>
           </div>
           <div className="flex gap-4 items-center">
             <div className="min-w-[56px] h-[56px] flex items-center justify-center border border-[#EAE5E0] rounded-full">
               <PedestrianIcon />{" "}
             </div>
-            <div>
+            <div>{t("SelectAnAvailablePointToStartThe3DTour")}</div>
-              Select an available point <br /> to start the 3D tour
-            </div>
           </div>
         </div>
         <LookAroundButton onClick={onClick} />

src/components/desktop/Appartment/ControlHelpModal/ThreeDTourHelpModal.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import CursorIcon from "../../../../icons/CursorIcon";
 import MouseIcon from "../../../../icons/MouseIcon";
 import CrossButton from "../../../CrossButton";
@@ -12,6 +13,7 @@ const ThreeDTourHelpModal = ({
   onClick,
   currentViewTitle,
 }: ThreeDTourHelpModalProps) => {
+  const [t] = useTranslation();
   return (
     <div className="absolute h-screen w-screen bg-black bg-opacity-30 z-10 flex justify-center items-center select-none pointer-events-auto">
       <div className="w-[536px] min-h-[344px] bg-white rounded-[16px] flex flex-col py-8 px-10">
@@ -22,24 +24,23 @@ const ThreeDTourHelpModal = ({
           <CrossButton onClick={onClick} />
         </div>
         <div className="flex flex-col gap-4 pb-8">
-          <h2 className="text-[#333] text-[32px] font-bold">Control Help</h2>
+          <h2 className="text-[#333] text-[32px] font-bold">
+            {t("ControlHelp")}
+          </h2>
           <div className="flex gap-4 items-center">
             <div className="w-[56px] h-[56px] flex items-center justify-center border border-[#EAE5E0] rounded-full">
               <MouseIcon />{" "}
             </div>
-            <div>
+            <div>{t("ClickAndHoldTheLeftMouseButtonToLookAround")}</div>
-              Click and hold the left mouse
-              <br /> button to look around
-            </div>
           </div>
           <div className="flex gap-4 items-center">
             <div className="min-w-[56px] h-[56px] flex items-center justify-center border border-[#EAE5E0] rounded-full">
-              {/* <MouseIcon />{" "} */}
               <CursorIcon />{" "}
             </div>
             <div>
-              Place the cursor on a section of the floor and click the left
+              {t(
-              mouse button to move around the 3D scene
+                "PlaceTheCursorOnASectionOfTheFloorAndClickTheLeftMouseButtonToMoveAroundThe3DScene"
+              )}
             </div>
           </div>
         </div>

src/components/desktop/Appartment/ControlHelpModal/TouchScreenHelpModal.tsx

@@ -2,6 +2,7 @@ import TouchIcon from "../../../../icons/TouchIcon";
 import RotateIcon from "../../../../icons/RotateIcon";
 import CrossButton from "../../../CrossButton";
 import LookAroundButton from "./LookAroundButton";
+import { useTranslation } from "react-i18next";
 
 type TouchScreenHelpModalProps = {
   onClick: () => void;
@@ -12,6 +13,7 @@ const TouchScreenHelpModal = ({
   onClick,
   currentViewTitle,
 }: TouchScreenHelpModalProps) => {
+  const [t] = useTranslation();
   return (
     <div className="absolute h-screen w-screen bg-black bg-opacity-30 z-10 flex justify-center items-center select-none pointer-events-auto">
       <div className="w-[536px] min-h-[344px] bg-white rounded-[16px] flex flex-col py-8 px-10">
@@ -22,18 +24,20 @@ const TouchScreenHelpModal = ({
           <CrossButton onClick={onClick} />
         </div>
         <div className="flex flex-col gap-4 pb-8">
-          <h2 className="text-[#333] text-[32px] font-bold">Control Help</h2>
+          <h2 className="text-[#333] text-[32px] font-bold">
+            {t("ControlHelp")}
+          </h2>
           <div className="flex gap-4 items-center">
             <div className="w-[56px] h-[56px] flex items-center justify-center border border-[#EAE5E0] rounded-full">
               <TouchIcon />{" "}
             </div>
-            <div>Press the floor to move in 3D space</div>
+            <div>{t("PressTheFloorToMoveIn3DSpace")}</div>
           </div>
           <div className="flex gap-4 items-center">
             <div className="min-w-[56px] h-[56px] flex items-center justify-center border border-[#EAE5E0] rounded-full">
               <RotateIcon />{" "}
             </div>
-            <div>Rotate the camera by swiping the screen</div>
+            <div>{t("RotateTheCameraBySwipingTheScreen")}</div>
           </div>
         </div>
         <LookAroundButton onClick={onClick} />

src/components/desktop/Appartment/ParameterDescription.tsx

@@ -1,7 +1,9 @@
+import { useTranslation } from "react-i18next";
 import useStore from "../../../store/store";
 
 const ParameterDescription = () => {
   const { currentVilla } = useStore();
+  const [t, i18n] = useTranslation();
 
   return (
     <div className="flex py-6 gap-6 items-center justify-center select-none">
@@ -10,27 +12,39 @@ const ParameterDescription = () => {
       </h2>
       <div className="h-8 bg-[#DDD7D6] w-[1px]" />
       <div className="flex flex-col">
-        <div className="flex gap-4 justify-between">
+        <div
-          <div className="text-[#666668]">Villa Theme</div>
+          className={`flex gap-4 ${
-          <div>{currentVilla && currentVilla.villaTheme}</div>
+            i18n.language === "ar" ? "flex-row-reverse justify-between" : ""
+          }`}
+        >
+          <div className="text-[#666668]">{t("VillaTheme")}</div>
+          <div>{t(`${currentVilla && currentVilla.villaTheme}`)}</div>
         </div>
-        <div className="flex gap-4">
+        <div
-          <div className="text-[#666668]">Total no. of Bedrooms</div>
+          className={`flex gap-4 ${
+            i18n.language === "ar" ? "flex-row-reverse justify-between" : ""
+          }`}
+        >
+          <div className="text-[#666668]">{t("Total no. of Bedrooms")}</div>
           <div>{currentVilla && currentVilla.totalCountBedroms}</div>
         </div>
       </div>
       <div className="h-8 bg-[#DDD7D6] w-[1px]" />
       <div className="flex flex-col">
-        <div className="flex gap-4 justify-between">
+        <div
-          <div className="text-[#666668]">
+          className={`flex gap-4 justify-between ${
-            Plot area, m<sup>2</sup>
+            i18n.language === "ar" ? "flex-row-reverse" : ""
-          </div>
+          }`}
+        >
+          <div className="text-[#666668]">{t("PlotArea")}</div>
           <div>{currentVilla && currentVilla.plotArea}</div>
         </div>
-        <div className="flex gap-4">
+        <div
-          <div className="text-[#666668]">
+          className={`flex gap-4 ${
-            Total Build up Area, m<sup>2</sup>
+            i18n.language === "ar" ? "flex-row-reverse justify-between" : ""
-          </div>
+          }`}
+        >
+          <div className="text-[#666668]">{t("Total Build up Area, m 2")}</div>
           <div>{currentVilla && currentVilla.totalBuildUpArea}</div>
         </div>
       </div>

src/components/mobile/Appartment/ButtomPanelModal.tsx

@@ -6,12 +6,14 @@ import ViewToggle from "../../ViewToggle";
 import ImageSlider from "./ImageSlider";
 import LayoutSection from "./LayoutSection";
 import Parameters from "./Parameters";
+import { useTranslation } from "react-i18next";
 
 export default function ButtomPanelModal() {
   const height = window.screen.height - 218;
   const [offset, setOffset] = useState(1);
   const [isTouchable, setIsTouchable] = useState(true);
   const [{ y }, api] = useSpring(() => ({ y: height }));
+  const [t] = useTranslation();
 
   const bind = useDrag(
     ({
@@ -100,7 +102,7 @@ export default function ButtomPanelModal() {
             className="border flex w-full py-3 justify-center rounded-full"
             onClick={handleOnClose}
           >
-            Back
+            {t("Back")}
           </button>
         </div>
       </a.div>

src/components/mobile/Appartment/ButtonPanel.tsx

@@ -52,7 +52,7 @@ const GoBackButton = () => {
   const navigate = useNavigate();
 
   const handleOnMapClick = () => {
-    navigate("../en");
+    navigate(-1);
   };
 
   const handleOnBackClick = () => {

src/components/mobile/Appartment/LayoutSlider.tsx

@@ -48,7 +48,11 @@ const LayoutSlider = ({ currentView, setCurrentView }: LayoutSliderProps) => {
               className={`min-w-full flex flex-col px-6 transition-all duration-300 `}
               key={slider.id}
             >
-              <img src={slider.image} alt="" />
+              <img
+                src={slider.image}
+                alt=""
+                className="h-full w-full object-contain"
+              />
             </div>
           ))}
       </div>

src/components/mobile/Appartment/Parameters.tsx

@@ -1,21 +1,25 @@
+import { useTranslation } from "react-i18next";
 import useStore from "../../../store/store";
 
 const Parameters = () => {
   const { currentVilla } = useStore();
+  const [t] = useTranslation();
 
   return (
     <div className="p-6 border-b">
-      <h2 className="text-xl font-medium ">Parameters</h2>
+      <h2 className="text-xl font-medium ">{t("Parameters")}</h2>
       <div className="flex flex-col gap-2 pt-4">
         <div className="flex justify-between gap-4">
-          <div className="w-1/2 text-sm text-[#666668] font-medium">Type</div>
+          <div className="w-1/2 text-sm text-[#666668] font-medium">
+            {t("Type")}
+          </div>
           <div className="w-1/2 text-sm font-medium uppercase">
             {currentVilla && currentVilla.type}
           </div>
         </div>
         <div className="flex justify-between gap-4">
           <div className="w-1/2 text-sm text-[#666668] font-medium">
-            Plot area m<sup>2</sup>
+            {t("PlotArea")}
           </div>
           <div className="w-1/2 text-sm font-medium">
             {currentVilla && currentVilla.plotArea}
@@ -23,7 +27,7 @@ const Parameters = () => {
         </div>
         <div className="flex justify-between gap-4">
           <div className="w-1/2 text-sm text-[#666668] font-medium">
-            Unit Area, m<sup>2</sup>
+            {t("UnitArea")}
           </div>
           <div className="w-1/2 text-sm font-medium">
             {currentVilla && currentVilla.totalBuildUpArea}
@@ -31,7 +35,7 @@ const Parameters = () => {
         </div>
         <div className="flex justify-between gap-4">
           <div className="w-1/2 text-sm text-[#666668] font-medium">
-            Total no. of Bedrooms
+            {t("Total no. of Bedrooms")}
           </div>
           <div className="w-1/2 text-sm font-medium">
             {currentVilla && currentVilla.totalCountBedroms}
@@ -39,10 +43,10 @@ const Parameters = () => {
         </div>
         <div className="flex justify-between gap-4">
           <div className="w-1/2 text-sm text-[#666668] font-medium">
-            Villa Theme
+            {t("VillaTheme")}
           </div>
           <div className="w-1/2 text-sm font-medium">
-            {currentVilla && currentVilla.villaTheme}
+            {t(`${currentVilla && currentVilla.villaTheme}`)}
           </div>
         </div>
       </div>

src/components/mobile/Appartment/PopupModal.tsx

@@ -3,10 +3,12 @@ import CrossButton from "../../CrossButton";
 import RotateIcon from "../../../icons/RotateIcon";
 import TouchIcon from "../../../icons/TouchIcon";
 import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
 
 const PopupModal = () => {
   const [isVisible, setIsVisible] = useState(false);
   const { setHintModal } = useStore();
+  const [t] = useTranslation();
 
   const handleOnComplete = () => {
     setIsVisible(false);
@@ -35,7 +37,9 @@ const PopupModal = () => {
       >
         <div className="bg-white rounded-[16px] flex flex-col p-6 pr-7 w-full">
           <div className="flex justify-between">
-            <h2 className="text-[#333] text-[20px] font-bold">Control Help</h2>
+            <h2 className="text-[#333] text-[20px] font-bold">
+              {t("ControlHelp")}
+            </h2>
             <CrossButton onClick={handleOnComplete} />
           </div>
           <div className="flex flex-col gap-[10px] text-sm pr-8">
@@ -43,86 +47,17 @@ const PopupModal = () => {
               <div className="w-10 h-10 flex items-center justify-center border border-[#EAE5E0] rounded-full">
                 <TouchIcon width={24} height={24} />{" "}
               </div>
-              <div>
+              <div>{t("PressTheFloorToMoveIn3DSpace")}</div>
-                Press the floor to move in 3D space
-                <br /> أنقر على الأرض للتنقل من مكان لأخر
-              </div>
             </div>
             <div className="flex gap-3 items-center">
               <div className="w-10 h-10 flex items-center justify-center border border-[#EAE5E0] rounded-full">
                 <RotateIcon width={24} height={24} />{" "}
               </div>
-              <div>
+              <div>{t("RotateTheCameraBySwipingTheScreen")}</div>
-                Rotate the camera by swiping the screen <br /> حرك الشاشة بأصبعك
-                نحو اليمين أو اليسار لتحريك المشهد
             </div>
           </div>
         </div>
       </div>
-      </div>
-      {/* <div
-        className={`absolute bottom-0 w-full p-4 transition-all duration-300 z-20}`}
-      >
-        <div className="bg-white p-4 border rounded-2xl">
-          <div className="flex gap-4">
-            <div className="h-full w-10">
-              <TapToastIcon />
-            </div>
-            <div className="flex flex-col gap-4">
-              <div className="text-sm pr-12">
-                Tap on the floor to move in 3D space.
-              </div>
-              {popups.length === index + 1 ? (
-                  <button
-                    onClick={handleOnComplete}
-                    className="text-white bg-black rounded-full px-5 py-[6px] w-fit"
-                  >
-                    Complete
-                  </button>
-                ) : (
-                  <button
-                    onClick={handleOnNextClick(popup.id)}
-                    className="text-white bg-black rounded-full px-5 py-[6px] w-fit"
-                  >
-                    Next
-                  </button>
-                )}
-            </div>
-          </div>
-        </div>
-      </div> */}
-      {/* {popups.map((popup, index) => (
-        <div
-          key={popup.id}
-          className={`absolute bottom-0 w-full p-4 transition-all duration-300 z-20 ${
-            1 !== popup.id ? "hidden opacity-0" : "opacity-1"
-          }`}
-        >
-          <div className="bg-white p-4 border rounded-2xl">
-            <div className="flex gap-4">
-              <div className="h-full w-10">{popup.icon}</div>
-              <div className="flex flex-col gap-4">
-                <div className="text-sm pr-12">{popup.title}</div>
-                {popups.length === index + 1 ? (
-                  <button
-                    onClick={handleOnComplete}
-                    className="text-white bg-black rounded-full px-5 py-[6px] w-fit"
-                  >
-                    Complete
-                  </button>
-                ) : (
-                  <button
-                    onClick={handleOnNextClick(popup.id)}
-                    className="text-white bg-black rounded-full px-5 py-[6px] w-fit"
-                  >
-                    Next
-                  </button>
-                )}
-              </div>
-            </div>
-          </div>
-        </div>
-      ))} */}
     </>
   );
 };

src/components/mobile/Main/HouseListModal.tsx

@@ -1,10 +1,12 @@
 import MainPagePanel from "./MainPagePanel";
 import HouseList from "./HouseList";
+import { useTranslation } from "react-i18next";
 
 const HouseListModal = () => {
+  const [t] = useTranslation();
   return (
     <div className="w-screen bg-white absolute z-30">
-      <MainPagePanel title="Select a House" />
+      <MainPagePanel title={t("SelectAHouse")} />
       <HouseList />
     </div>
   );

src/components/mobile/Main/KnowMoreButton.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import ArrowIcon from "../../../icons/ArrowIcon";
 
 type KnowMoreButtonProps = {
@@ -5,13 +6,20 @@ type KnowMoreButtonProps = {
 };
 
 const KnowMoreButton = ({ onClick }: KnowMoreButtonProps) => {
+  const [t, i18n] = useTranslation();
   return (
     <button
       onClick={onClick}
-      className="w-1/2 py-[10px] flex justify-center gap-1 hover:bg-secondary transition-all duration-200"
+      className={`w-1/2 py-[10px] flex justify-center gap-1 hover:bg-secondary transition-all duration-200 ${
+        i18n.language === "ar"
+          ? "rounded-es-2xl flex-row-reverse"
+          : "rounded-ee-2xl"
+      }`}
     >
-      Know more
+      {t("KnowMore")}
+      <div className={`${i18n.language === "ar" ? "rotate-180" : ""}`}>
         <ArrowIcon />
+      </div>
     </button>
   );
 };

src/components/mobile/Main/ViewOnMapButton.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import ViewOnMapIcon from "../../../icons/ViewOnMapIcon";
 
 type ViewOnMapProps = {
@@ -6,14 +7,17 @@ type ViewOnMapProps = {
 };
 
 const ViewOnMapButton = ({ onClick, isVillaSelected }: ViewOnMapProps) => {
+  const [t, i18n] = useTranslation();
   return (
     <button
-      className={`w-1/2 border-r flex justify-center gap-1 items-center hover:bg-secondary transition-all duration-200 ${
+      className={`w-1/2 flex justify-center gap-1 items-center hover:bg-secondary transition-all duration-200 ${
-        isVillaSelected ? "bg-[#EAE5E0] rounded-es-2xl" : ""
+        i18n.language === "ar"
-      }`}
+          ? "rounded-ee-2xl border-l flex-row-reverse"
+          : "rounded-es-2xl border-r"
+      } ${isVillaSelected ? "bg-[#EAE5E0] " : ""}`}
       onClick={onClick}
     >
-      View on Map
+      {t("ViewOnMap")}
       <ViewOnMapIcon />
     </button>
   );

src/consts/languages.ts

@@ -0,0 +1 @@
+export const languages = ["ar", "en"];

src/consts/loading.ts

@@ -1,9 +1,9 @@
 const loadingMessages = [
-    { id: 1, value: "looking for a villa" },
+  { id: 1, value: "LookingForAVilla" },
-    { id: 2, value: "building the walls" },
+  { id: 2, value: "BuildingTheWalls" },
-    { id: 3, value: "installing the roof" },
+  { id: 3, value: "InstallingTheRoof" },
-    { id: 4, value: "arranging the furniture" },
+  { id: 4, value: "ArrangingTheFurniture" },
-    { id: 5, value: "preparing the villa for showing" },
+  { id: 5, value: "PreparingTheVillaForShowing" },
-  ];
+];
 
-  export {loadingMessages}
+export { loadingMessages };

src/languages/arabian/translation.json

@@ -0,0 +1,80 @@
+{
+  "ViewOnMap": "العرض على الخريطة",
+  "KnowMore": "تعرف أكثر",
+  "Type": "النوع",
+  "PlotArea": "مساحة الأرض (متر مربع)",
+  "UnitArea": "مساحة الفيلا (متر مربع)",
+  "Bedrooms": "غرف النوم",
+  "VillaTheme": "تصميم واجهة الفيلا",
+  "Traditional": "تقليدي",
+  "Modern": "حديث",
+  "SelectAHouse": "اختر فيلا",
+  "LookingForAVilla": "..جاري تحميل نموذج الفيلا",
+  "BuildingTheWalls": "..جاري بناء الجدران",
+  "InstallingTheRoof": "..جاري  تركيب السقف",
+  "ArrangingTheFurniture": "..جاري ترتيب الأثاث",
+  "PreparingTheVillaForShowing": "..جاري تجهيز الفيلا للعرض",
+  "Images": "الصور",
+  "Layout": "المخطط",
+  "Outdoor": "خارج الفيلا",
+  "ControlHelp": "تعليمات التحكم",
+  "ClickAndHoldTheLeftMouseButtonToLookAround": "استمر بالضغط على زر الماوس الأيسر لتحريك المشهد",
+  "SelectAnAvailablePointToStartThe3DTour": "قم باختيار نقطة متاحة لبدء الجولة ثلاثية الأبعاد",
+  "LookAround": "انظر حولك",
+  "Map": "الخريطة",
+  "GroundFloor": "الطابق الأرضي",
+  "FirstFloor": "الطابق الأول",
+  "PressTheFloorToMoveIn3DSpace": "أنقر على الأرض للتنقل من مكان لأخر",
+  "RotateTheCameraBySwipingTheScreen": "حرك الشاشة بأصبعك نحو اليمين أو اليسار لتحريك المشهد",
+  "PlaceTheCursorOnASectionOfTheFloorAndClickTheLeftMouseButtonToMoveAroundThe3DScene": "ضع المؤشر على جزء من الأرضية وانقر زر الماوس الأيسر للتنقل داخل المشهد ثلاثي الأبعاد",
+  "Parking": "موقف السيارات",
+  "Choose a room to start the 3D tour": "اختر غرفة لبدء الجولة ثلاثية الأبعاد",
+  "Total no. of Bedrooms": "عدد غرف النوم",
+  "Total Build up Area, m 2": "مساحة الفيلا",
+  "Unit": "الوحدة",
+  "Area (m)": "المساحة (م)",
+  "Entrance": "المدخل",
+  "Living Room": "غرفة المعيشة",
+  "Dining Room": "غرفة الطعام",
+  "Terrace 1": "شرفة 1",
+  "Terrace 2": "شرفة 2",
+  "Store 1": "متجر 1",
+  "Store 2": "متجر 2",
+  "Mens Majilas": "مجلس الرجال",
+  "Bathroom 1": "غرفة الحمام 1",
+  "Bathroom 2": "غرفة الحمام 2",
+  "Bathroom 3": "غرفة الحمام 3",
+  "Bathroom 4": "غرفة الحمام 4",
+  "Bathroom 5": "غرفة الحمام 5",
+  "Washbasins": "أحواض غسيل",
+  "Washbasins 2": "أحواض غسيل 2",
+  "Guest Bedroom": "غرفة نوم الضيوف",
+  "Kitchen": "مطبخ",
+  "Domestic Worker Room 1": "غرفة للعمالة المنزلية 1",
+  "Domestic Worker Room 2": "غرفة للعمالة المنزلية 2",
+  "Domestic Worker Bathroom 1": "حمام للعمالة المنزلية 1",
+  "Domestic Worker Bathroom 2": "حمام للعمالة المنزلية 2",
+  "Watertank": "خزان المياه",
+  "Outdoor Patio": "الباحة الخارجية",
+  "Master Bedroom": "غرفة النوم الرئيسية",
+  "Dressing Room 1": "غرفة تبديل الملابس 1",
+  "Dressing Room 2": "غرفة تبديل الملابس 2",
+  "Dressing Room 3": "غرفة تبديل الملابس 3",
+  "Dressing Room 4": "غرفة تبديل الملابس 4",
+  "Laundry Room": "غرفة الغسيل",
+  "Service Room": "غرفة الخدمات",
+  "Women's Majilas": "مجلس النساء",
+  "Wash Basins": "أحواض غسيل",
+  "Bath Room 1": "غرفة الحمام 1",
+  "Bath Room 2": "غرفة الحمام 2",
+  "Bath Room 3": "غرفة الحمام 3",
+  "Bath Room 4": "غرفة الحمام 4",
+  "Bath Room 5": "غرفة الحمام 5",
+  "Preparatory Kitchen": "مطبخ تحضيري",
+  "Bedroom 1": "غرفة النوم 1",
+  "Bedroom 2": "غرفة النوم 2",
+  "Bedroom 3": "غرفة النوم 3",
+  "Bedroom 4": "غرفة النوم 4",
+  "Back": "للخلف",
+  "Parameters": "القيم"
+}

src/languages/english/translation.json

@@ -0,0 +1,83 @@
+{
+  "ViewOnMap": "View on Map",
+  "KnowMore": "Know more",
+  "Type": "Type",
+  "PlotArea": "Plot area, m2",
+  "UnitArea": "Unit area, m2",
+  "Bedrooms": "Bedrooms",
+  "VillaTheme": "Villa Theme",
+  "Traditional": "Traditional",
+  "Modern": "Modern",
+  "SelectAHouse": "Select A House",
+  "LookingForAVilla": "looking for a villa",
+  "BuildingTheWalls": "building the walls",
+  "InstallingTheRoof": "installing the roof",
+  "ArrangingTheFurniture": "arranging the furniture",
+  "PreparingTheVillaForShowing": "preparing the villa for showing",
+  "Images": "Images",
+  "Layout": "Layout",
+  "Outdoor": "Outdoor",
+  "ControlHelp": "Control Help",
+  "ClickAndHoldTheLeftMouseButtonToLookAround": "Click and hold the left mouse button to look around",
+  "SelectAnAvailablePointToStartThe3DTour": "Select an available point to start the 3D tour",
+  "LookAround": "Look around",
+  "Map": "Map",
+  "GroundFloor": "Ground Floor",
+  "FirstFloor": "First Floor",
+  "PressTheFloorToMoveIn3DSpace": "Press the floor to move in 3D space",
+  "RotateTheCameraBySwipingTheScreen": "Rotate the camera by swiping the screen",
+  "PlaceTheCursorOnASectionOfTheFloorAndClickTheLeftMouseButtonToMoveAroundThe3DScene": "Place the cursor on a section of the floor and click the left mouse button to move around the 3D scene",
+  "Parking": "Parking",
+  "Choose a room to start the 3D tour": "Choose a room to start the 3D tour",
+  "Total no. of Bedrooms": "Total no. of Bedrooms",
+  "Total Build up Area, m 2": "Total Build up Area, m 2",
+  "Unit": "Unit",
+  "Area (m)": "Area (m)",
+  "Entrance": "Entrance",
+  "Living Room": "Living Room",
+  "Dining Room": "Dinning Room",
+  "Terrace 1": "Terrace 1",
+  "Terrace 2": "Terrace 2",
+  "Terrace 3": "Terrace 3",
+  "Terrace 4": "Terrace 4",
+  "Terrace 5": "Terrace 5",
+  "Store 1": "Store 1",
+  "Store 2": "Store 2",
+  "Mens Majilas": "Mens Majilas",
+  "Bathroom 1": "Bathroom 1",
+  "Bathroom 2": "Bathroom 2",
+  "Bathroom 3": "Bathroom 3",
+  "Bathroom 4": "Bathroom 4",
+  "Bathroom 5": "Bathroom 5",
+  "Washbasins": "Washbasins",
+  "Washbasins 2": "Washbasins 2",
+  "Guest Bedroom": "Guest Bedroom",
+  "Kitchen": "Kitchen",
+  "Domestic Worker Room 1": "Domestic Worker Room 1",
+  "Domestic Worker Room 2": "Domestic Worker Room 2",
+  "Domestic Worker Bathroom 1": "Domestic Worker Bathroom 1",
+  "Domestic Worker Bathroom 2": "Domestic Worker Bathroom 2",
+  "Watertank": "Watertank",
+  "Outdoor Patio": "Outdoor Patio",
+  "Master Bedroom": "Master Bedroom",
+  "Dressing Room 1": "Dressing Room 1",
+  "Dressing Room 2": "Dressing Room 2",
+  "Dressing Room 3": "Dressing Room 3",
+  "Dressing Room 4": "Dressing Room 4",
+  "Laundry Room": "Laundry Room",
+  "Service Room": "Service Room",
+  "Women's Majilas": "Women's Majilas",
+  "Wash Basins": "Wash Basins",
+  "Bath Room 1": "Bath Room 1",
+  "Bath Room 2": "Bath Room 2",
+  "Bath Room 3": "Bath Room 3",
+  "Bath Room 4": "Bath Room 4",
+  "Bath Room 5": "Bath Room 5",
+  "Preparatory Kitchen": "Preparatory Kitchen",
+  "Bedroom 1": "Bedroom 1",
+  "Bedroom 2": "Bedroom 2",
+  "Bedroom 3": "Bedroom 3",
+  "Bedroom 4": "Bedroom 4",
+  "Back": "Back",
+  "Parameters": "Parameters"
+}

src/languages/i18n.ts

@@ -0,0 +1,20 @@
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+import translationEn from "../languages/english/translation.json";
+import translationAr from "../languages/arabian/translation.json";
+
+const resources = {
+  en: { translation: translationEn },
+  ar: { translation: translationAr },
+};
+
+i18n.use(initReactI18next).init({
+  resources,
+  lng: "en",
+
+  interpolation: {
+    escapeValue: false,
+  },
+});
+
+export default i18n;

src/main.tsx

@@ -4,32 +4,25 @@ import MainPage from "./pages/MainPage";
 import ApartmentPage from "./pages/ApartmentPage";
 import "./index.css";
 import Layout from "./components/Layout";
+import "./languages/i18n";
 
 const router = createBrowserRouter([
   {
-    path: "/",
+    path: "/:lang/",
     element: <Layout />,
     children: [
       {
-        path: "en/:villaTitle",
+        path: ":villaTitle",
         element: <ApartmentPage />,
       },
       {
-        path: "en/",
+        index: true,
         element: <MainPage />,
       },
     ],
   },
 ]);
 
-//arabian
-//villa/:villaTitle
-//
-
-//english
-//en/villa/:villaTitle
-//en
-
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <RouterProvider router={router} />
 );

src/pages/Desktop/DesktopApartmentPage.tsx

@@ -9,6 +9,7 @@ import { useUnity } from "../../hooks/useUnity";
 import { useVilla } from "../../hooks/useVilla";
 import ViewToggle from "../../components/ViewToggle";
 import ParameterDescription from "../../components/desktop/Appartment/ParameterDescription";
+import { useTranslation } from "react-i18next";
 
 const DesktopApartmentPage = () => {
   const {
@@ -21,7 +22,7 @@ const DesktopApartmentPage = () => {
   } = useStore();
 
   const { villa } = useVilla();
-
+  const [, i18n] = useTranslation();
   const { unityProvider, sendMessage, addEventListener, removeEventListener } =
     useUnity();
 
@@ -77,7 +78,8 @@ const DesktopApartmentPage = () => {
 
     if (isContainerLoaded) {
       sendMessage("JsConnector", "SetCurrentVilla", villa.type);
-      sendMessage("JsConnector", "SeCurrentLang", "en");
+      const { language } = i18n;
+      sendMessage("JsConnector", "SetCurrentLang", language);
     }
   }, [isContainerLoaded]);
 

src/pages/Desktop/DesktopMainPage.tsx

@@ -1,11 +1,17 @@
+import { useTranslation } from "react-i18next";
 import MapComponent from "../../components/Map/Map";
 import HouseList from "../../components/desktop/Main/HouseList";
 
 const DesktopMainPage = () => {
+  const [, i18n] = useTranslation();
   return (
     <>
       <MapComponent />
-      <div className="absolute z-100 w-96 top-0 left-0 bg-white pr-1">
+      <div
+        className={`absolute z-100 w-96 top-0 bg-white pr-1 ${
+          i18n.language === "ar" ? "right-0" : "left-0"
+        }`}
+      >
         <HouseList />
       </div>
     </>

src/pages/Mobile/MobileApartmentPage.tsx

@@ -9,9 +9,9 @@ import ButtonPanel from "../../components/mobile/Appartment/ButtonPanel";
 import { useUnity } from "../../hooks/useUnity";
 import { useVilla } from "../../hooks/useVilla";
 import ButtomPanelModal from "../../components/mobile/Appartment/ButtomPanelModal";
-
 import NotSupportModal from "../../components/NotSupportModal";
 import PopupModal from "../../components/mobile/Appartment/PopupModal";
+import { useTranslation } from "react-i18next";
 
 const MobileApartmentPage = () => {
   const {
@@ -29,6 +29,7 @@ const MobileApartmentPage = () => {
     useUnity();
   const [isContainerLoaded, setIsContainerLoaded] = useState(false);
   const isDeviceSupported = (+osVersion.split(".")[0] >= 17 && isIOS) || !isIOS;
+  const [, i18n] = useTranslation();
 
   const handleVillaLoadedStatus = (percent: ReactUnityEventParameter) => {
     const status = Number(percent);
@@ -97,7 +98,8 @@ const MobileApartmentPage = () => {
     setSendMessageToUnity(sendMessage);
     if (isContainerLoaded) {
       sendMessage("JsConnector", "SetCurrentVilla", villa.type);
-      sendMessage("JsConnector", "SeCurrentLang", "en");
+      const { language } = i18n;
+      sendMessage("JsConnector", "SetCurrentLang", language);
     }
   }, [isContainerLoaded]);
 

yarn.lock

@@ -26,6 +26,118 @@
     luxon "~3.4.3"
     sortablejs "~1.15.0"
 
+"@babel/runtime@^7.23.2", "@babel/runtime@^7.23.9":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.6.tgz#5b76eb89ad45e2e4a0a8db54c456251469a3358e"
+  integrity sha512-Ja18XcETdEl5mzzACGd+DKgaGJzPTCow7EglgwTmHdwokzDFYh/MHua6lU6DV/hjF2IaOJ4oX2nqnjG7RElKOw==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
+"@esbuild/android-arm64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.18.20.tgz#984b4f9c8d0377443cc2dfcef266d02244593622"
+  integrity sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==
+
+"@esbuild/android-arm@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.18.20.tgz#fedb265bc3a589c84cc11f810804f234947c3682"
+  integrity sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw==
+
+"@esbuild/android-x64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.18.20.tgz#35cf419c4cfc8babe8893d296cd990e9e9f756f2"
+  integrity sha512-8GDdlePJA8D6zlZYJV/jnrRAi6rOiNaCC/JclcXpB+KIuvfBN4owLtgzY2bsxnx666XjJx2kDPUmnTtR8qKQUg==
+
+"@esbuild/darwin-arm64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/darwin-arm64/-/darwin-arm64-0.18.20.tgz#08172cbeccf95fbc383399a7f39cfbddaeb0d7c1"
+  integrity sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA==
+
+"@esbuild/darwin-x64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.18.20.tgz#d70d5790d8bf475556b67d0f8b7c5bdff053d85d"
+  integrity sha512-pc5gxlMDxzm513qPGbCbDukOdsGtKhfxD1zJKXjCCcU7ju50O7MeAZ8c4krSJcOIJGFR+qx21yMMVYwiQvyTyQ==
+
+"@esbuild/freebsd-arm64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.18.20.tgz#98755cd12707f93f210e2494d6a4b51b96977f54"
+  integrity sha512-yqDQHy4QHevpMAaxhhIwYPMv1NECwOvIpGCZkECn8w2WFHXjEwrBn3CeNIYsibZ/iZEUemj++M26W3cNR5h+Tw==
+
+"@esbuild/freebsd-x64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.18.20.tgz#c1eb2bff03915f87c29cece4c1a7fa1f423b066e"
+  integrity sha512-tgWRPPuQsd3RmBZwarGVHZQvtzfEBOreNuxEMKFcd5DaDn2PbBxfwLcj4+aenoh7ctXcbXmOQIn8HI6mCSw5MQ==
+
+"@esbuild/linux-arm64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.18.20.tgz#bad4238bd8f4fc25b5a021280c770ab5fc3a02a0"
+  integrity sha512-2YbscF+UL7SQAVIpnWvYwM+3LskyDmPhe31pE7/aoTMFKKzIc9lLbyGUpmmb8a8AixOL61sQ/mFh3jEjHYFvdA==
+
+"@esbuild/linux-arm@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.18.20.tgz#3e617c61f33508a27150ee417543c8ab5acc73b0"
+  integrity sha512-/5bHkMWnq1EgKr1V+Ybz3s1hWXok7mDFUMQ4cG10AfW3wL02PSZi5kFpYKrptDsgb2WAJIvRcDm+qIvXf/apvg==
+
+"@esbuild/linux-ia32@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.18.20.tgz#699391cccba9aee6019b7f9892eb99219f1570a7"
+  integrity sha512-P4etWwq6IsReT0E1KHU40bOnzMHoH73aXp96Fs8TIT6z9Hu8G6+0SHSw9i2isWrD2nbx2qo5yUqACgdfVGx7TA==
+
+"@esbuild/linux-loong64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.18.20.tgz#e6fccb7aac178dd2ffb9860465ac89d7f23b977d"
+  integrity sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg==
+
+"@esbuild/linux-mips64el@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.18.20.tgz#eeff3a937de9c2310de30622a957ad1bd9183231"
+  integrity sha512-d5NeaXZcHp8PzYy5VnXV3VSd2D328Zb+9dEq5HE6bw6+N86JVPExrA6O68OPwobntbNJ0pzCpUFZTo3w0GyetQ==
+
+"@esbuild/linux-ppc64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.18.20.tgz#2f7156bde20b01527993e6881435ad79ba9599fb"
+  integrity sha512-WHPyeScRNcmANnLQkq6AfyXRFr5D6N2sKgkFo2FqguP44Nw2eyDlbTdZwd9GYk98DZG9QItIiTlFLHJHjxP3FA==
+
+"@esbuild/linux-riscv64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.18.20.tgz#6628389f210123d8b4743045af8caa7d4ddfc7a6"
+  integrity sha512-WSxo6h5ecI5XH34KC7w5veNnKkju3zBRLEQNY7mv5mtBmrP/MjNBCAlsM2u5hDBlS3NGcTQpoBvRzqBcRtpq1A==
+
+"@esbuild/linux-s390x@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.18.20.tgz#255e81fb289b101026131858ab99fba63dcf0071"
+  integrity sha512-+8231GMs3mAEth6Ja1iK0a1sQ3ohfcpzpRLH8uuc5/KVDFneH6jtAJLFGafpzpMRO6DzJ6AvXKze9LfFMrIHVQ==
+
+"@esbuild/linux-x64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-x64/-/linux-x64-0.18.20.tgz#c7690b3417af318a9b6f96df3031a8865176d338"
+  integrity sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w==
+
+"@esbuild/netbsd-x64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.18.20.tgz#30e8cd8a3dded63975e2df2438ca109601ebe0d1"
+  integrity sha512-iO1c++VP6xUBUmltHZoMtCUdPlnPGdBom6IrO4gyKPFFVBKioIImVooR5I83nTew5UOYrk3gIJhbZh8X44y06A==
+
+"@esbuild/openbsd-x64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.18.20.tgz#7812af31b205055874c8082ea9cf9ab0da6217ae"
+  integrity sha512-e5e4YSsuQfX4cxcygw/UCPIEP6wbIL+se3sxPdCiMbFLBWu0eiZOJ7WoD+ptCLrmjZBK1Wk7I6D/I3NglUGOxg==
+
+"@esbuild/sunos-x64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.18.20.tgz#d5c275c3b4e73c9b0ecd38d1ca62c020f887ab9d"
+  integrity sha512-kDbFRFp0YpTQVVrqUd5FTYmWo45zGaXe0X8E1G/LKFC0v8x0vWrhOWSLITcCn63lmZIxfOMXtCfti/RxN/0wnQ==
+
+"@esbuild/win32-arm64@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.18.20.tgz#73bc7f5a9f8a77805f357fab97f290d0e4820ac9"
+  integrity sha512-ddYFR6ItYgoaq4v4JmQQaAI5s7npztfV4Ag6NrhiaW0RrnOXqBkgwZLofVTlq1daVTQNhtI5oieTvkRPfZrePg==
+
+"@esbuild/win32-ia32@0.18.20":
+  version "0.18.20"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.18.20.tgz#ec93cbf0ef1085cc12e71e0d661d20569ff42102"
+  integrity sha512-Wv7QBi3ID/rROT08SABTS7eV4hX26sVduqDOTe1MvGMjNd3EjOz4b7zeexIR62GTIEKrfJXKL9LFxTYgkyeu7g==
+
 "@esbuild/win32-x64@0.18.20":
   version "0.18.20"
   resolved "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.18.20.tgz"
@@ -192,7 +304,7 @@
     "@nodelib/fs.stat" "2.0.5"
     run-parallel "^1.1.9"
 
-"@nodelib/fs.stat@^2.0.2", "@nodelib/fs.stat@2.0.5":
+"@nodelib/fs.stat@2.0.5", "@nodelib/fs.stat@^2.0.2":
   version "2.0.5"
   resolved "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz"
   integrity sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==
@@ -264,6 +376,51 @@
   resolved "https://registry.npmjs.org/@stencil/core/-/core-2.22.3.tgz"
   integrity sha512-kmVA0M/HojwsfkeHsifvHVIYe4l5tin7J5+DLgtl8h6WWfiMClND5K3ifCXXI2ETDNKiEk21p6jql3Fx9o2rng==
 
+"@swc/core-darwin-arm64@1.3.105":
+  version "1.3.105"
+  resolved "https://registry.yarnpkg.com/@swc/core-darwin-arm64/-/core-darwin-arm64-1.3.105.tgz#2960f8a87aed01b3850d5c37f05b51d9d3747141"
+  integrity sha512-buWeweLVDXXmcnfIemH4PGnpjwsDTUGitnPchdftb0u1FU8zSSP/lw/pUCBDG/XvWAp7c/aFxgN4CyG0j7eayA==
+
+"@swc/core-darwin-x64@1.3.105":
+  version "1.3.105"
+  resolved "https://registry.yarnpkg.com/@swc/core-darwin-x64/-/core-darwin-x64-1.3.105.tgz#aaa502f902dec1e4735a0a37a4fcc3a2c0369882"
+  integrity sha512-hFmXPApqjA/8sy/9NpljHVaKi1OvL9QkJ2MbbTCCbJERuHMpMUeMBUWipHRfepGHFhU+9B9zkEup/qJaJR4XIg==
+
+"@swc/core-linux-arm-gnueabihf@1.3.105":
+  version "1.3.105"
+  resolved "https://registry.yarnpkg.com/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.3.105.tgz#5a8629c75db4fe298ca3fdb18ecbc7888cd34759"
+  integrity sha512-mwXyMC41oMKkKrPpL8uJpOxw7fyfQoVtIw3Y5p0Blabk+espNYqix0E8VymHdRKuLmM//z5wVmMsuHdGBHvZeg==
+
+"@swc/core-linux-arm64-gnu@1.3.105":
+  version "1.3.105"
+  resolved "https://registry.yarnpkg.com/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.3.105.tgz#9cae768a92944774511a569dffca45f1beab7cdd"
+  integrity sha512-H7yEIVydnUtqBSUxwmO6vpIQn7j+Rr0DF6ZOORPyd/SFzQJK9cJRtmJQ3ZMzlJ1Bb+1gr3MvjgLEnmyCYEm2Hg==
+
+"@swc/core-linux-arm64-musl@1.3.105":
+  version "1.3.105"
+  resolved "https://registry.yarnpkg.com/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.3.105.tgz#9244aabe4a7884d3d81df707d3e3c3478953a454"
+  integrity sha512-Jg7RTFT3pGFdGt5elPV6oDkinRy7q9cXpenjXnJnM2uvx3jOwnsAhexPyCDHom8SHL0j+9kaLLC66T3Gz1E4UA==
+
+"@swc/core-linux-x64-gnu@1.3.105":
+  version "1.3.105"
+  resolved "https://registry.yarnpkg.com/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.3.105.tgz#7fde7b8a2ab7f5152e2dc37abf95f9add2c46937"
+  integrity sha512-DJghplpyusAmp1X5pW/y93MmS/u83Sx5GrpJxI6KLPa82+NItTgMcl8KBQmW5GYAJpVKZyaIvBanS5TdR8aN2w==
+
+"@swc/core-linux-x64-musl@1.3.105":
+  version "1.3.105"
+  resolved "https://registry.yarnpkg.com/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.3.105.tgz#a8d96fc532427f353696283c70ae13e7fcc18358"
+  integrity sha512-wD5jL2dZH/5nPNssBo6jhOvkI0lmWnVR4vnOXWjuXgjq1S0AJpO5jdre/6pYLmf26hft3M42bteDnjR4AAZ38w==
+
+"@swc/core-win32-arm64-msvc@1.3.105":
+  version "1.3.105"
+  resolved "https://registry.yarnpkg.com/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.3.105.tgz#35edc1d898d7e9994fd6986b4c0085b3f1d59ec5"
+  integrity sha512-UqJtwILUHRw2+3UTPnRkZrzM/bGdQtbR4UFdp79mZQYfryeOUVNg7aJj/bWUTkKtLiZ3o+FBNrM/x2X1mJX5bA==
+
+"@swc/core-win32-ia32-msvc@1.3.105":
+  version "1.3.105"
+  resolved "https://registry.yarnpkg.com/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.3.105.tgz#5e538fd63b648d8c5bf9c22371c5e273c208f961"
+  integrity sha512-Z95C6vZgBEJ1snidYyjVKnVWiy/ZpPiIFIXGWkDr4ZyBgL3eZX12M6LzZ+NApHKffrbO4enbFyFomueBQgS2oA==
+
 "@swc/core-win32-x64-msvc@1.3.105":
   version "1.3.105"
   resolved "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.3.105.tgz"
@@ -322,7 +479,7 @@
   resolved "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz"
   integrity sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==
 
-"@types/node@^20.11.20", "@types/node@>= 14":
+"@types/node@^20.11.20":
   version "20.11.20"
   resolved "https://registry.npmjs.org/@types/node/-/node-20.11.20.tgz"
   integrity sha512-7/rR21OS+fq8IyHTgtLkDK949uzsa6n8BkziAKtPVpugIkO6D+/ooXMvzXxDnZrmtXVfjb1bKQafYpb8s89LOg==
@@ -341,7 +498,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@^18.2.15", "@types/react@>=16.8":
+"@types/react@*", "@types/react@^18.2.15":
   version "18.2.48"
   resolved "https://registry.npmjs.org/@types/react/-/react-18.2.48.tgz"
   integrity sha512-qboRCl6Ie70DQQG9hhNREz81jqC1cs9EVNcjQ1AU+jH6NFfSAhVVbrrY/+nSF+Bsk4AOwm9Qa61InvMCyV+H3w==
@@ -377,7 +534,7 @@
     semver "^7.5.4"
     ts-api-utils "^1.0.1"
 
-"@typescript-eslint/parser@^6.0.0", "@typescript-eslint/parser@^6.0.0 || ^6.0.0-alpha":
+"@typescript-eslint/parser@^6.0.0":
   version "6.19.0"
   resolved "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.19.0.tgz"
   integrity sha512-1DyBLG5SH7PYCd00QlroiW60YJ4rWMuUGa/JBV0iZuqi4l4IK3twKPq5ZkEebmGqRjXWVgsUzfd3+nZveewgow==
@@ -480,7 +637,7 @@ acorn-jsx@^5.3.2:
   resolved "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz"
   integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
 
-"acorn@^6.0.0 || ^7.0.0 || ^8.0.0", acorn@^8.9.0:
+acorn@^8.9.0:
   version "8.11.3"
   resolved "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz"
   integrity sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==
@@ -589,7 +746,7 @@ braces@^3.0.2, braces@~3.0.2:
   dependencies:
     fill-range "^7.0.1"
 
-browserslist@^4.22.2, "browserslist@>= 4.21.0":
+browserslist@^4.22.2:
   version "4.22.2"
   resolved "https://registry.npmjs.org/browserslist/-/browserslist-4.22.2.tgz"
   integrity sha512-0UgcrvQmBDvZHFGdYUehrCNIazki7/lUP3kkoi/r3YB2amZbFM9J43ZRkJTXBUZK4gmx56+Sqk9+Vs9mwZx9+A==
@@ -831,7 +988,7 @@ eslint-visitor-keys@^3.3.0, eslint-visitor-keys@^3.4.1, eslint-visitor-keys@^3.4
   resolved "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz"
   integrity sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==
 
-"eslint@^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0", "eslint@^6.0.0 || ^7.0.0 || >=8.0.0", "eslint@^7.0.0 || ^8.0.0", eslint@^8.45.0, eslint@>=7:
+eslint@^8.45.0:
   version "8.56.0"
   resolved "https://registry.npmjs.org/eslint/-/eslint-8.56.0.tgz"
   integrity sha512-Go19xM6T9puCOWntie1/P997aXxFsOi37JIHRWI514Hc6ZnaHGKY9xFhrU65RT6CcBEzZoGG1e6Nq+DT04ZtZQ==
@@ -977,7 +1134,7 @@ flatted@^3.2.9:
   resolved "https://registry.npmjs.org/flatted/-/flatted-3.2.9.tgz"
   integrity sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==
 
-focus-trap@~7.5.3, focus-trap@7.5.4:
+focus-trap@7.5.4, focus-trap@~7.5.3:
   version "7.5.4"
   resolved "https://registry.npmjs.org/focus-trap/-/focus-trap-7.5.4.tgz"
   integrity sha512-N7kHdlgsO/v+iD/dMoJKtsSqs5Dz/dXZVebRgJw23LDk+jMi/974zyiOYDziY2JPp8xivq9BmUGwIJMiuSBi7w==
@@ -1007,6 +1164,11 @@ fscreen@^1.0.2:
   resolved "https://registry.npmjs.org/fscreen/-/fscreen-1.2.0.tgz"
   integrity sha512-hlq4+BU0hlPmwsFjwGGzZ+OZ9N/wq9Ljg/sq3pX+2CD7hrJsX9tJgWWK/wiNTFM212CLHWhicOoqwXyZGGetJg==
 
+fsevents@~2.3.2:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
+  integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
+
 function-bind@^1.1.2:
   version "1.1.2"
   resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz"
@@ -1085,6 +1247,20 @@ hasown@^2.0.0:
   dependencies:
     function-bind "^1.1.2"
 
+html-parse-stringify@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz#dfc1017347ce9f77c8141a507f233040c59c55d2"
+  integrity sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==
+  dependencies:
+    void-elements "3.1.0"
+
+i18next@^23.11.5:
+  version "23.11.5"
+  resolved "https://registry.yarnpkg.com/i18next/-/i18next-23.11.5.tgz#d71eb717a7e65498d87d0594f2664237f9e361ef"
+  integrity sha512-41pvpVbW9rhZPk5xjCX2TPJi2861LEig/YRhUkY+1FQ2IQPS0bKUDYnEqY8XPPbB48h1uIwLnP9iiEfuSl20CA==
+  dependencies:
+    "@babel/runtime" "^7.23.2"
+
 ignore@^5.2.0, ignore@^5.2.4:
   version "5.3.0"
   resolved "https://registry.npmjs.org/ignore/-/ignore-5.3.0.tgz"
@@ -1292,6 +1468,13 @@ micromatch@^4.0.4, micromatch@^4.0.5:
     braces "^3.0.2"
     picomatch "^2.3.1"
 
+minimatch@9.0.3, minimatch@^9.0.1:
+  version "9.0.3"
+  resolved "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz"
+  integrity sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==
+  dependencies:
+    brace-expansion "^2.0.1"
+
 minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2:
   version "3.1.2"
   resolved "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz"
@@ -1299,20 +1482,6 @@ minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2:
   dependencies:
     brace-expansion "^1.1.7"
 
-minimatch@^9.0.1:
-  version "9.0.3"
-  resolved "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz"
-  integrity sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==
-  dependencies:
-    brace-expansion "^2.0.1"
-
-minimatch@9.0.3:
-  version "9.0.3"
-  resolved "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz"
-  integrity sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==
-  dependencies:
-    brace-expansion "^2.0.1"
-
 "minipass@^5.0.0 || ^6.0.2 || ^7.0.0":
   version "7.0.4"
   resolved "https://registry.npmjs.org/minipass/-/minipass-7.0.4.tgz"
@@ -1504,7 +1673,7 @@ postcss-value-parser@^4.0.0, postcss-value-parser@^4.2.0:
   resolved "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
-postcss@^8.0.0, postcss@^8.1.0, postcss@^8.2.14, postcss@^8.4.21, postcss@^8.4.23, postcss@^8.4.27, postcss@^8.4.31, postcss@>=8.0.9:
+postcss@^8.4.23, postcss@^8.4.27, postcss@^8.4.31:
   version "8.4.33"
   resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.33.tgz"
   integrity sha512-Kkpbhhdjw2qQs2O2DGX+8m5OVqEcbB9HRBvuYM9pgrjEFUg30A9LmXNlTAUj4S9kgtGyrMbTzVjH7E+s5Re2yg==
@@ -1535,7 +1704,7 @@ react-device-detect@^2.2.3:
   dependencies:
     ua-parser-js "^1.0.33"
 
-"react-dom@^16.8.0 || ^17.0.0 || ^18.0.0", react-dom@^18.2.0, "react-dom@>= 0.14.0", react-dom@>=16.8:
+react-dom@^18.2.0:
   version "18.2.0"
   resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz"
   integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
@@ -1550,6 +1719,14 @@ react-full-screen@^1.1.1:
   dependencies:
     fscreen "^1.0.2"
 
+react-i18next@^14.1.2:
+  version "14.1.2"
+  resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-14.1.2.tgz#cd57a755f25a32a5fcc3dbe546cf3cc62b4f3ebd"
+  integrity sha512-FSIcJy6oauJbGEXfhUgVeLzvWBhIBIS+/9c6Lj4niwKZyGaGb4V4vUbATXSlsHJDXXB+ociNxqFNiFuV1gmoqg==
+  dependencies:
+    "@babel/runtime" "^7.23.9"
+    html-parse-stringify "^3.0.1"
+
 react-router-dom@^6.21.3:
   version "6.21.3"
   resolved "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.21.3.tgz"
@@ -1575,7 +1752,7 @@ react-unity-webgl@^9.5.0:
   resolved "https://registry.npmjs.org/react-unity-webgl/-/react-unity-webgl-9.5.0.tgz"
   integrity sha512-zmTffL2S7QL1g2DQem0/HzxhJaEQ3L4aEV4VUlQOkZc4JzMjScrqGVvHc4AnyMz94vVQqlbHwNfq4YhJEEGzQg==
 
-"react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^16.8.3 || ^17 || ^18", react@^18.2.0, "react@>= 0.14.0", "react@>= 16", "react@>= 16.8.0", react@>=16.8, react@>=16.8.0:
+react@^18.2.0:
   version "18.2.0"
   resolved "https://registry.npmjs.org/react/-/react-18.2.0.tgz"
   integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
@@ -1596,6 +1773,11 @@ readdirp@~3.6.0:
   dependencies:
     picomatch "^2.2.1"
 
+regenerator-runtime@^0.14.0:
+  version "0.14.1"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz#356ade10263f685dda125100cd862c1db895327f"
+  integrity sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==
+
 resolve-from@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz"
@@ -1679,31 +1861,22 @@ slash@^3.0.0:
   resolved "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz"
   integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
 
-sortablejs@~1.15.0:
-  version "1.15.2"
-  resolved "https://registry.npmjs.org/sortablejs/-/sortablejs-1.15.2.tgz"
-  integrity sha512-FJF5jgdfvoKn1MAKSdGs33bIqLi3LmsgVTliuX6iITj834F+JRQZN90Z93yql8h0K2t0RwDPBmxwlbZfDcxNZA==
-
 sortablejs@1.15.0:
   version "1.15.0"
   resolved "https://registry.npmjs.org/sortablejs/-/sortablejs-1.15.0.tgz"
   integrity sha512-bv9qgVMjUMf89wAvM6AxVvS/4MX3sPeN0+agqShejLU5z5GX4C75ow1O2e5k4L6XItUyAK3gH6AxSbXrOM5e8w==
 
+sortablejs@~1.15.0:
+  version "1.15.2"
+  resolved "https://registry.npmjs.org/sortablejs/-/sortablejs-1.15.2.tgz"
+  integrity sha512-FJF5jgdfvoKn1MAKSdGs33bIqLi3LmsgVTliuX6iITj834F+JRQZN90Z93yql8h0K2t0RwDPBmxwlbZfDcxNZA==
+
 source-map-js@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz"
   integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
 
-"string-width-cjs@npm:string-width@^4.2.0":
+"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0:
-  version "4.2.3"
-  resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-string-width@^4.1.0:
   version "4.2.3"
   resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -1721,14 +1894,7 @@ string-width@^5.0.1, string-width@^5.1.2:
     emoji-regex "^9.2.2"
     strip-ansi "^7.0.1"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -1805,9 +1971,10 @@ tailwindcss@^3.3.5:
     resolve "^1.22.2"
     sucrase "^3.32.0"
 
-"test-kit-12@file:../kit":
+test-kit-12@^1.0.0:
   version "1.0.0"
-  resolved "file:../kit"
+  resolved "https://registry.yarnpkg.com/test-kit-12/-/test-kit-12-1.0.0.tgz#33b4b4f4d278e2efc2e3d48fa0913380ab1cfa49"
+  integrity sha512-Ixz8IQ3aGEi7jkTi+oGaaxKAKfLqDAOqfpwjhgTdwSKUYb0IJ+jYle+d9L549VbcH5a8mtuUosRNmOf5CWvD5Q==
 
 text-table@^0.2.0:
   version "0.2.0"
@@ -1862,7 +2029,7 @@ type-fest@^0.20.2:
   resolved "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz"
   integrity sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==
 
-typescript@^5.0.2, typescript@>=4.2.0:
+typescript@^5.0.2:
   version "5.3.3"
   resolved "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz"
   integrity sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==
@@ -1902,7 +2069,7 @@ util-deprecate@^1.0.2:
   resolved "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz"
   integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
 
-"vite@^4 || ^5", vite@^4.4.5:
+vite@^4.4.5:
   version "4.5.2"
   resolved "https://registry.npmjs.org/vite/-/vite-4.5.2.tgz"
   integrity sha512-tBCZBNSBbHQkaGyhGCDUGqeo2ph8Fstyp6FMSvTtsXeZSPpSMGlviAOav2hxVTqFcx8Hj/twtWKsMJXNY0xI8w==
@@ -1913,6 +2080,11 @@ util-deprecate@^1.0.2:
   optionalDependencies:
     fsevents "~2.3.2"
 
+void-elements@3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-3.1.0.tgz#614f7fbf8d801f0bb5f0661f5b2f5785750e4f09"
+  integrity sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==
+
 which@^2.0.1:
   version "2.0.2"
   resolved "https://registry.npmjs.org/which/-/which-2.0.2.tgz"