fixes

This reverts commit 088781e76a.

.gitignore

@@ -9,7 +9,6 @@ lerna-debug.log*
 
 node_modules
 dist
-build
 dist-ssr
 *.local
 

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",

public/StreamingAssets/aa/AddressablesLink/link.xml

@@ -1,6 +1,5 @@
 <linker>
   <assembly fullname="Assembly-CSharp, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null">
-    <type fullname="ArabicText" preserve="all" />
     <type fullname="BalconyButton" preserve="all" />
     <type fullname="CameraAdjustment" preserve="all" />
     <type fullname="CameraZoom" preserve="all" />
@@ -37,7 +36,6 @@
     <type fullname="StarterAssets.StarterAssetsInputs" preserve="all" />
     <type fullname="StarterAssets.ThirdPersonController" preserve="all" />
     <type fullname="StarterAssets.UICanvasControllerInput" preserve="all" />
-    <type fullname="TapToMove" preserve="all" />
     <type fullname="UIVirtualTouchZone" preserve="all" />
     <type fullname=".SceneFloor" preserve="nothing" serialized="true" />
     <type fullname=".UIVirtualTouchZone/Event" preserve="nothing" serialized="true" />
@@ -75,10 +73,6 @@
     <type fullname="Cinemachine.NoiseSettings/NoiseParams" preserve="nothing" serialized="true" />
     <type fullname="Cinemachine.NoiseSettings/TransformNoiseParams" preserve="nothing" serialized="true" />
   </assembly>
-  <assembly fullname="RTLTMPro, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null">
-    <type fullname="RTLTMPro.RTLTextMeshPro" preserve="all" />
-    <type fullname="RTLTMPro.RTLTextMeshPro3D" preserve="all" />
-  </assembly>
   <assembly fullname="Unity.Addressables, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null" preserve="all">
     <type fullname="UnityEngine.AddressableAssets.Addressables" preserve="all" />
     <type fullname="UnityEngine.AddressableAssets.AssetReference" preserve="nothing" serialized="true" />
@@ -131,17 +125,15 @@
     <type fullname="UnityEngine.ResourceManagement.ResourceProviders.SceneProvider" preserve="all" />
   </assembly>
   <assembly fullname="Unity.TextMeshPro, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null">
-    <type fullname="TMPro.TextMeshPro" preserve="all" />
     <type fullname="TMPro.TextMeshProUGUI" preserve="all" />
     <type fullname="TMPro.TMP_FontAsset" preserve="all" />
+    <type fullname="TMPro.VertexGradient" preserve="nothing" serialized="true" />
     <type fullname="TMPro.FaceInfo_Legacy" preserve="nothing" serialized="true" />
     <type fullname="TMPro.FontAssetCreationSettings" preserve="nothing" serialized="true" />
     <type fullname="TMPro.KerningTable" preserve="nothing" serialized="true" />
     <type fullname="TMPro.TMP_Character" preserve="nothing" serialized="true" />
     <type fullname="TMPro.TMP_FontFeatureTable" preserve="nothing" serialized="true" />
     <type fullname="TMPro.TMP_FontWeightPair" preserve="nothing" serialized="true" />
-    <type fullname="TMPro.TMP_Glyph" preserve="nothing" serialized="true" />
-    <type fullname="TMPro.VertexGradient" preserve="nothing" serialized="true" />
   </assembly>
   <assembly fullname="UnityEngine.AnimationModule, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null">
     <type fullname="UnityEngine.Animations.AimConstraint" preserve="all" />

public/TemplateData/diagnostics.css

@@ -0,0 +1,105 @@
+#diagnostics-overlay {
+  resize: vertical;
+  overflow: auto;
+  position:fixed;
+  left:0px;
+  bottom:0px;
+  height:20%;
+  width:100%;
+  color: #090909;
+  background:rgba(200, 200, 200, .90);
+  display: flex;
+  align-items: stretch;
+}
+
+#diagnostics-btn {
+  float: left;
+  font-family: arial;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid #CCC;
+  background: #DDD;
+  box-shadow: 0 0 5px -1px rgba(0,0,0,0.2);
+  cursor: pointer;
+  width: 38px;
+  height: 38px;
+}
+
+#diagnostics-icon {
+  display: flex;
+  float: right;
+  width:38px;
+  height: 38px;
+  cursor:pointer;
+}
+
+#diagnostics-icon:hover {
+  background-color:#D3D3D3;
+}
+#diagnostics-summary {
+  display: inline-flex;
+  font-family: arial;
+  flex-flow: column;
+  column-gap: 1em;
+  margin: 1em;
+  padding: 1em;
+  max-width: 33em;
+  row-gap: 0.2em;
+  width: 20%;
+  resize: horizontal;
+  overflow-y: auto;
+  float: left;
+  border-right: 4px solid gray;
+  min-width: fit-content;  
+  height: 60%;    
+}
+
+#diagnostics-summary::-webkit-scrollbar {
+  -webkit-appearance: none;
+}
+
+#diagnostics-summary::-webkit-scrollbar:vertical {
+  width: 8px;
+}
+
+#diagnostics-summary::-webkit-scrollbar-thumb {
+  border-radius: 8px;
+  border: 1px solid white;
+  background-color: rgba(0, 0, 0, .5);
+}
+
+#diagnostics-graph {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  vertical-align: top;
+  height: 100%;
+  margin-left: 2%;
+}
+
+#diagnostics-graph-canvas{
+  width: 210px;
+  height: 120px;
+}
+
+.data-row {
+  display: flex;
+}
+
+.label {
+  display: flex;
+  flex: 2 1 auto;
+}
+
+.indented {
+  display: flex;
+  flex: 2 1 auto;
+  margin-left: 1em;
+}
+
+.data {
+  display: flex;
+  flex: 1 1 auto;
+  justify-content: right;
+}

public/TemplateData/diagnostics.js

@@ -0,0 +1,280 @@
+var unityDiagnostics = (function () {
+  var overlayOpen = false;
+  var intervalId = 0;
+  var graph_stats;
+  function openDiagnosticsDiv(GetMetricsInfoFunc) {
+    // if not open, open!
+    if (!overlayOpen) {
+      var diagnostics_div = document.getElementById('diagnostics-overlay');
+      if (!diagnostics_div) {
+        createDiagnosticsLayout();
+      }
+
+      var totalJSMemDiv = document.getElementById("jsTotalMem");
+      var usedJSMemDiv = document.getElementById("jsUsedMem");
+      var totalWASMHeapDiv = document.getElementById("wasmTotalMem");
+      var usedWASMHeapDiv = document.getElementById("wasmUsedMem");
+      var pageLoadTimeDiv = document.getElementById("pageLoadTime");
+      var pageLoadTimeToFrame1Div = document.getElementById("pageLoadTimeToFrame1");
+      var movingAverageFpsDiv = document.getElementById("movingAverageFps");
+      var fpsDiv = document.getElementById("fps");
+      var numJankedFramesDiv = document.getElementById("numJankedFrames");
+      var webAssemblyStartupTimeDiv = document.getElementById("webAssemblyStartupTime");
+      var codeDownloadTimeDiv = document.getElementById("codeDownloadTime");
+      var gameStartupTimeDiv = document.getElementById("gameStartupTime");
+      var assetLoadTimeDiv = document.getElementById("assetLoadTime");
+
+      intervalId = setInterval(updateWebMetricInfo, 1000);
+      document.getElementById("diagnostics-overlay").style.height = "20%";
+      diagnostics_icon.style.filter = "grayscale(1)";
+      overlayOpen = true;
+    }
+
+    function createDiagnosticsLayout() {
+      diagnostics_div = document.createElement("div");
+      diagnostics_div.id = "diagnostics-overlay";
+
+      document.body.appendChild(diagnostics_div);
+
+      var diagnostics_btn = document.createElement("div");
+      diagnostics_btn.id = "diagnostics-btn";
+      diagnostics_btn.innerHTML = "X";
+      diagnostics_btn.addEventListener("click", closeOverlay);
+
+      diagnostics_div.appendChild(diagnostics_btn);
+
+      var diagnostics_summary = document.createElement("div");
+      diagnostics_summary.id = "diagnostics-summary";
+
+      var diagnostics_graph = document.createElement("div");
+      diagnostics_graph.id = "diagnostics-graph";
+
+      diagnostics_div.appendChild(diagnostics_summary);
+      diagnostics_div.appendChild(diagnostics_graph);
+
+      createDiagnosticsRow(diagnostics_summary, "Total JS Memory", "jsTotalMem", false);
+      createDiagnosticsRow(diagnostics_summary, "Used JS Memory", "jsUsedMem", true);
+      createDiagnosticsRow(diagnostics_summary, "Total WASM Heap", "wasmTotalMem", false);
+      createDiagnosticsRow(diagnostics_summary, "Used WASM Heap", "wasmUsedMem", true);
+      createDiagnosticsRow(diagnostics_summary, "Page Load Time To First Frame", "pageLoadTimeToFrame1", false);
+      createDiagnosticsRow(diagnostics_summary, "Page Load Time", "pageLoadTime", true);
+      createDiagnosticsRow(diagnostics_summary, "Code Download Time", "codeDownloadTime", true);
+      createDiagnosticsRow(diagnostics_summary, "Load time of asset file(.data)", "assetLoadTime", true);
+      createDiagnosticsRow(diagnostics_summary, "WebAssembly Startup Time", "webAssemblyStartupTime", true);
+      createDiagnosticsRow(diagnostics_summary, "Game Startup Time", "gameStartupTime", true);
+      createDiagnosticsRow(diagnostics_summary, "Average FPS (10 seconds)", "movingAverageFps", false);
+      createDiagnosticsRow(diagnostics_summary, "Current frames per second", "fps", true);
+      createDiagnosticsRow(diagnostics_summary, "Number of Frame Stalls", "numJankedFrames", false);
+
+      graph_stats = new createGraph();
+      diagnostics_graph.appendChild(graph_stats.graph_dom);
+    }
+
+    function createDiagnosticsRow(diagnostics_summary, labelInnerHtml, spanId, indent) {
+      var data_row = document.createElement("div");
+      data_row.className = "data-row";
+      diagnostics_summary.appendChild(data_row);
+
+      var label = document.createElement("div");
+      label.className = "label";
+
+      var data = document.createElement("div");
+      data.className = "data";
+      data_row.appendChild(data);
+
+      var span = document.createElement("span");
+      data.appendChild(span);
+
+      label.innerHTML = labelInnerHtml;
+      span.id = spanId;
+      if (indent) {
+        var indent = document.createElement("div");
+        indent.className = "indented";
+        data_row.appendChild(indent);
+        indent.appendChild(label);
+      } else {
+        data_row.append(label);
+      }
+      data_row.append(data);
+    }
+
+    function updateWebMetricInfo(){
+      var metricsInfo = GetMetricsInfoFunc();
+      if (isNaN(metricsInfo.totalJSHeapSize) && isNaN(metricsInfo.usedJSHeapSize)) {
+        totalJSMemDiv.textContent = "N/A";
+        usedJSMemDiv.textContent = "N/A";
+      } else {
+        totalJSMemDiv.textContent = formatBytes(metricsInfo.totalJSHeapSize);
+        usedJSMemDiv.textContent = formatBytes(metricsInfo.usedJSHeapSize);
+      }
+      totalWASMHeapDiv.textContent = formatBytes(metricsInfo.totalWASMHeapSize);
+      usedWASMHeapDiv.textContent = formatBytes(metricsInfo.usedWASMHeapSize);
+      pageLoadTimeDiv.textContent = (metricsInfo.pageLoadTime/1000).toFixed(2) + ' sec';
+      pageLoadTimeToFrame1Div.textContent = (metricsInfo.pageLoadTimeToFrame1/1000).toFixed(2) + ' sec';
+      assetLoadTimeDiv.textContent = (metricsInfo.assetLoadTime/1000).toFixed(2) + ' sec';
+      webAssemblyStartupTimeDiv.textContent = (metricsInfo.webAssemblyStartupTime/1000).toFixed(2) + ' sec';
+      codeDownloadTimeDiv.textContent = (metricsInfo.codeDownloadTime/1000).toFixed(2) + ' sec';
+      gameStartupTimeDiv.textContent = (metricsInfo.gameStartupTime/1000).toFixed(2) + ' sec';
+      movingAverageFpsDiv.textContent = (metricsInfo.movingAverageFps).toFixed(2);
+      fpsDiv.textContent = (metricsInfo.fps).toFixed(2);
+      numJankedFramesDiv.textContent = metricsInfo.numJankedFrames;
+
+      graph_stats.plotGraph(metricsInfo, true);
+    }
+
+    function closeOverlay() {
+      clearInterval(intervalId);
+      intervalId = 0;
+      document.getElementById("diagnostics-overlay").style.height = "0px";
+      diagnostics_icon.style.filter = "grayscale(0)";
+      overlayOpen = false;
+    }
+
+    function formatNumber(num) {
+      num = num || 0;
+      var num_str = num.toString();
+      if (num >= 1000) return num_str.substr(0, 4);
+      else return num_str.substr(0, 5);
+    }
+
+    function formatBytes(bytes) {
+      if (bytes >= 1024 * 1024 * 1024) return formatNumber(bytes / (1024 * 1024 * 1024)) + '\xa0GB';
+      else if (bytes >= 1024 * 1024) return formatNumber(bytes / (1024 * 1024)) + '\xa0MB';
+      else if (bytes >= 1024) return formatNumber(bytes / 1024) + '\xa0KB';
+      else return formatNumber(bytes) + ' B';
+    }
+
+    function formatBytesInfo(bytes) {
+      if (bytes >= 1024 * 1024 * 1024) return {
+        bytesValue: formatNumber(bytes / (1024 * 1024 * 1024)),
+        unitMeasure: 'GB'
+      };
+      else if (bytes >= 1024 * 1024) return {
+        bytesValue: formatNumber(bytes / (1024 * 1024)),
+        unitMeasure: 'MB'
+      };
+      else if (bytes >= 1024) return {
+        bytesValue: formatNumber(bytes / 1024),
+        unitMeasure: 'KB'
+      };
+      else return {
+        bytesValue: formatNumber(bytes),
+        unitMeasure: 'B'
+      };
+    }
+
+    function GraphPanel(name, fontColor, backgroundColor) {
+      var min = Infinity, max = 0, round = Math.round;
+
+      var pixel_ratio = round( window.devicePixelRatio || 1);
+      if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
+        pixel_ratio = 1;
+      }
+    
+      var canvas_width = 250 * pixel_ratio, canvas_height = 180 * pixel_ratio,
+          textname_xpos = 6 * pixel_ratio, textname_ypos = 6 * pixel_ratio,
+          graph_area_xpos = 8 * pixel_ratio, graph_area_ypos = 30 * pixel_ratio,
+          graph_area_width = 234 * pixel_ratio, graph_area_height = 140 * pixel_ratio;
+    
+      var graph_canvas = document.createElement('canvas');
+      graph_canvas.id = "diagnostics-graph-canvas";
+      graph_canvas.width = canvas_width;
+      graph_canvas.height = canvas_height;
+    
+      var graph_ctx = graph_canvas.getContext('2d');
+      graph_ctx.font = 'bold ' + ( 16 * pixel_ratio) + 'px Helvetica,Arial,sans-serif';
+      graph_ctx.textBaseline = 'top';
+    
+      graph_ctx.fillStyle = backgroundColor;
+      graph_ctx.fillRect( 0, 0, canvas_width, canvas_height);
+
+      graph_ctx.fillStyle = fontColor;
+      graph_ctx.fillText( name, textname_xpos, textname_ypos);
+      graph_ctx.fillRect( graph_area_xpos, graph_area_ypos, graph_area_width, graph_area_height);
+    
+      
+      graph_ctx.fillStyle = backgroundColor;
+      graph_ctx.globalAlpha = 0.5;
+      graph_ctx.fillRect( graph_area_xpos, graph_area_ypos, graph_area_width, graph_area_height);
+
+      return {
+        graph_dom: graph_canvas,
+        update: function (value, unitMeasure) {
+          min = Math.min(min, value);
+          max = Math.max(max, value);
+          
+          graph_ctx.fillStyle = backgroundColor;
+          graph_ctx.globalAlpha = 1;
+          graph_ctx.fillRect(0, 0, canvas_width, graph_area_ypos);
+          
+          graph_ctx.fillStyle = fontColor;
+          graph_ctx.textAlign = 'left';
+          graph_ctx.fillText(name, textname_xpos, textname_ypos);
+
+          graph_ctx.textAlign = 'right';
+          if(unitMeasure){
+            graph_ctx.fillText(formatNumber(value) + unitMeasure + ' (' + round( min ) + '-' + round( max ) + ')', canvas_width-10, textname_ypos);
+          }
+          else{
+            graph_ctx.fillText(formatNumber(value) + ' (' + round( min ) + '-' + round( max ) + ')', canvas_width-10, textname_ypos);
+          }
+
+          graph_ctx.drawImage(graph_canvas, graph_area_xpos + pixel_ratio, graph_area_ypos, graph_area_width - pixel_ratio, graph_area_height, graph_area_xpos, graph_area_ypos, graph_area_width - pixel_ratio, graph_area_height);
+    
+          graph_ctx.fillRect(graph_area_xpos + graph_area_width - pixel_ratio, graph_area_ypos, pixel_ratio, graph_area_height);
+    
+          graph_ctx.fillStyle = backgroundColor;
+          graph_ctx.globalAlpha = 0.5;
+          graph_ctx.fillRect(graph_area_xpos + graph_area_width - pixel_ratio, graph_area_ypos, pixel_ratio, round((1 - (value / max)) * graph_area_height));
+        }
+      };
+    }
+
+    function createGraph(){
+      var numGraphPanel = 4;
+      var graphContainer = document.createElement('div');
+      if(graphContainer === undefined) return;
+
+      graphContainer.style.cssText = 'cursor:pointer;';
+      graphContainer.style.display = 'contents';
+
+
+      function addGraphPanel(graph_panel) {
+        graphContainer.appendChild(graph_panel.graph_dom);
+        return graph_panel;
+      }
+
+      function showGraphPanel(id) {
+        graphContainer.children[id].style.margin = '1em';
+      }
+      var fpsGraphPanel = addGraphPanel(new GraphPanel('FPS', '#0ff', '#002'));
+      var movingAvgFpsGraphPanel = addGraphPanel(new GraphPanel('Average FPS', '#0f0', '#020'));
+      var usedJsMemGraphPanel = addGraphPanel(new GraphPanel('Used JS Mem', '#f60', '#201'));
+      var usedWasmMemGraphPanel = addGraphPanel(new GraphPanel('Used Wasm', '#ff0', '#020'));
+
+      for(var i=0;i<numGraphPanel;i++){
+        showGraphPanel(i);
+      }
+
+      return {
+        graph_dom: graphContainer,
+        plotGraph: function (metrics) {
+          fpsGraphPanel.update(metrics.fps);
+          movingAvgFpsGraphPanel.update(metrics.movingAverageFps);
+
+          var formattedBytesInfo = formatBytesInfo(metrics.usedWASMHeapSize);
+          usedWasmMemGraphPanel.update(formattedBytesInfo.bytesValue, formattedBytesInfo.unitMeasure);
+          if(!isNaN(metrics.usedJSHeapSize)){
+            formattedBytesInfo = formatBytesInfo(metrics.usedJSHeapSize);
+            usedJsMemGraphPanel.update(formattedBytesInfo.bytesValue, formattedBytesInfo.unitMeasure); 
+          } 
+        }
+      };
+    }
+  }
+
+  return {
+    openDiagnosticsDiv: openDiagnosticsDiv
+  };
+
+})();

public/TemplateData/style.css

@@ -0,0 +1,16 @@
+body { padding: 0; margin: 0 }
+#unity-container { position: absolute }
+#unity-container.unity-desktop { left: 50%; top: 50%; transform: translate(-50%, -50%) }
+#unity-container.unity-mobile { position: fixed; width: 100%; height: 100% }
+#unity-canvas { background: #231F20 }
+.unity-mobile #unity-canvas { width: 100%; height: 100% }
+#unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none }
+#unity-logo { width: 154px; height: 130px; background: url('unity-logo-dark.png') no-repeat center }
+#unity-progress-bar-empty { width: 141px; height: 18px; margin-top: 10px; margin-left: 6.5px; background: url('progress-bar-empty-dark.png') no-repeat center }
+#unity-progress-bar-full { width: 0%; height: 18px; margin-top: 10px; background: url('progress-bar-full-dark.png') no-repeat center }
+#unity-footer { position: relative }
+.unity-mobile #unity-footer { display: none }
+#unity-logo-title-footer { float:left; width: 102px; height: 38px; background: url('unity-logo-title-footer.png') no-repeat center }
+#unity-build-title { float: right; margin-right: 10px; line-height: 38px; font-family: arial; font-size: 18px }
+#unity-fullscreen-button { cursor:pointer; float: right; width: 38px; height: 38px; background: url('fullscreen-button.png') no-repeat center }
+#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }

src/components/BackButton.tsx

@@ -10,14 +10,14 @@ const BackButton = ({ title = "", onClick, className }: BackButtonProps) => {
   return (
     <button
       onClick={onClick}
-      className={`flex items-center gap-1 py-[6px] pr-2 pl-4 bg-white rounded-full text-sm font-medium border border-[#C7BDBA] justify-center select-none hover:bg-secondary transition-all duration-200 ${
+      className={`flex items-center gap-1 py-[6px] pl-2 pr-4 bg-white rounded-full text-sm font-medium border border-[#C7BDBA] justify-center select-none hover:bg-secondary transition-all duration-200 ${
         title ? "w-fit" : "w-10"
       }  ${className ? className : ""}`}
     >
-      {title}
       <div className="w-5 h-5 flex items-center justify-center">
-        <BackIcon className="w-[5px] h-[10px] rotate-180" />
+        <BackIcon className="w-[5px] h-[10px]" />
       </div>
+      {title}
     </button>
   );
 };

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>اختر غرفة لبدء الجولة ثلاثية الأبعاد</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,40 +19,16 @@ const HouseItem = ({ villa }: HouseItemProps) => {
 
   const handleOnKnowMoreButton = () => {
     setModal(null);
-    navigate(`../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 p-4 pr-2 flex-1">
-          <div className="flex flex-col w-full text-sm leading-5">
-            <div className="flex justify-between w-full">
-              <p className="uppercase">{villa.type}</p>
-              <p className="text-right text-[#858585]">النوع</p>
-            </div>
-            <div className="flex justify-between w-full">
-              <p>{villa.plotArea}</p>
-              <p className="text-right text-[#858585]">
-                مساحة الأرض (متر مربع)
-              </p>
-            </div>
-            <div className="flex justify-between w-full">
-              <p>{villa.totalBuildUpArea}</p>
-              <p className="text-right text-[#858585]">
-                مساحة الفيلا (متر مربع)
-              </p>
-            </div>
-            <div className="flex justify-between w-full">
-              <p>{villa.totalCountBedroms}</p>
-              <p className="text-right text-[#858585]">غرف النوم</p>
-            </div>
-            <div className="flex justify-between w-full">
-              <p>{villa.villaTheme}</p>
-              <p className="text-right text-[#858585]">تصميم واجهة الفيلا</p>
-            </div>
-          </div>
-        </div>
+      <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 && (
@@ -64,13 +41,45 @@ const HouseItem = ({ villa }: HouseItemProps) => {
             )}
           </div>
         </div>
+        <div
+          className={`flex p-4 pl-2 ${
+            i18n.language === "ar" ? "flex-row-reverse" : ""
+          }`}
+        >
+          <div
+            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 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>{t(`${villa.villaTheme}`)}</div>
+          </div>
+        </div>
       </div>
-      <div className={`border-0 border-t-[1px] text-sm flex`}>
-        <KnowMoreButton onClick={handleOnKnowMoreButton} />
+      <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}
         />
+        <KnowMoreButton onClick={handleOnKnowMoreButton} />
       </div>
     </div>
   );

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 />
-      الصور
+      {t("Images")}
     </button>
   );
 };

src/components/Layout.tsx

@@ -1,17 +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 { useParams } from "react-router-dom";
+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 />
-      المخطط
+      {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)}
         >
           {" "}
-          الطابق الأرضي
+          {t("GroundFloor")}
         </div>
         <div
           className={`${
@@ -32,7 +35,7 @@ const LayoutToggle = ({
           onClick={() => setCurrentView(2)}
         >
           {" "}
-          الطابق الأول
+          {t("FirstFloor")}
         </div>
         <div
           className={`${
@@ -41,7 +44,7 @@ const LayoutToggle = ({
           onClick={() => setCurrentView(3)}
         >
           {" "}
-          موقف السيارات
+          {t("Parking")}
         </div>
       </div>
     </div>

src/components/ListButton.tsx

@@ -14,7 +14,7 @@ const ListButton = ({ className, onClick }: ListButtonProps) => {
       } items-center select-none cursor-pointer pl-2 pr-4 py-[6px] bg-[#EFE4DE] rounded-[32px] flex w-fit font-medium absolute`}
     >
       <ListIcon />
-      قائمة الفلل
+      List
     </button>
   );
 };

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,28 +7,41 @@ 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="flex justify-between w-full">
-            <div>المساحة (م)</div>
-            <div>الوحدة</div>
-          </div>
+        <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 ${
+              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" : ""
-            }`}
+            className={`font-medium text-lg flex w-full gap-[18px] py-2 pr-6 text-[#333333] pl-4 ${
+              i18n.language === "ar" ? "flex-row-reverse" : ""
+            }  ${index % 2 === 0 ? "bg-[#EAE5E0] rounded-lg" : ""}`}
           >
-            <div className="flex justify-between w-full">
+            <div className={`text-[#858585]`}>{startIndex + index + 1}</div>
+            <div
+              className={`flex justify-between w-full ${
+                i18n.language === "ar" ? "flex-row-reverse" : ""
+              }`}
+            >
+              <div>{t(`${unit.title}`)}</div>
               <div>{unit.value}</div>
-              <div>{unit.title}</div>
             </div>
-            <div>{startIndex + index + 1}</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]`}
           >
             {" "}
-            خارج الفيلا
+            {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] `}
           >
             {" "}
-            الطابق الأرضي
+            {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] `}
           >
             {" "}
-            الطابق الأول
+            {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,10 +59,26 @@ const ButtonPanel = ({ handleFullscreen }: ButtonPanelProps) => {
   };
 
   return (
-    <div className="absolute top-0 w-screen max-w-screen p-4 flex select-none">
-      <div className="flex gap-2 w-fit mr-auto">
-        <LayoutButton onClick={handleOnLayoutClick} />
+    <div
+      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 ${
+          i18n.language === "ar" ? "mr-auto" : "ml-auto"
+        }`}
+      >
         <ImagesButton onClick={handleOnImagesClick} />
+        <LayoutButton onClick={handleOnLayoutClick} />
         <HelpButton
           className="h-10 w-10"
           handleOnHelpClick={handleOnHelpClick}
@@ -70,12 +89,6 @@ const ButtonPanel = ({ handleFullscreen }: ButtonPanelProps) => {
           handleOnHelpClick={handleOnResizeClick}
         />
       </div>
-      <div className="w-1/3">
-        {currentView !== 1 && !is3DTour && <HintThreeDTour />}
-      </div>
-      <div className="w-1/3 flex justify-end">
-        <GoBackButton />
-      </div>
     </div>
   );
 };
@@ -85,9 +98,10 @@ const GoBackButton = () => {
   const location = useLocation();
   const isHistoryEmpty = location.key === "default";
   const navigate = useNavigate();
+  const { t } = useTranslation();
 
   const handleOnMapClick = () => {
-    navigate("../");
+    navigate(-1);
   };
 
   const handleOnBackClick = () => {
@@ -105,13 +119,13 @@ const GoBackButton = () => {
           {is3DTour || currentView !== 1 ? (
             <BackButton
               onClick={handleOnBackClick}
-              className="pl-[6px] pr-[6px] w-[40px] h-10 "
+              className="pl-[6px] pr-[6px] w-[40px] h-10"
             />
           ) : (
             <BackButton
               onClick={handleOnMapClick}
-              title="الخريطة"
-              className="w-[90px] h-10 "
+              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 = ["خارج الفيلا", "الطابق الأرضي", "الطابق الأول"];
+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}
     >
-      انظر حولك
+      {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,35 +13,34 @@ 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">
         <div className="flex justify-between">
-          <CrossButton onClick={onClick} />
-          <div className="text-[#858585] text-xl font-bold text-right">
+          <div className="text-[#858585] text-xl font-bold">
             {currentViewTitle}
           </div>
+          <CrossButton onClick={onClick} />
         </div>
         <div className="flex flex-col gap-4 pb-8">
-          <h2 className="text-[#333] text-[32px] font-bold text-right">
-            تعليمات التحكم
+          <h2 className="text-[#333] text-[32px] font-bold">
+            {t("ControlHelp")}
           </h2>
-          <div className="flex gap-4 items-center justify-end">
-            <div>استمر بالضغط على زر الماوس الأيسر لتحريك المشهد</div>
+          <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>{t("ClickAndHoldTheLeftMouseButtonToLookAround")}</div>
           </div>
-          <div className="flex gap-4 items-center justify-end">
-            <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>{t("SelectAnAvailablePointToStartThe3DTour")}</div>
           </div>
         </div>
-        <div className="self-end">
-          <LookAroundButton onClick={onClick} />
-        </div>
+        <LookAroundButton onClick={onClick} />
       </div>
     </div>
   );

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,38 +13,38 @@ 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">
         <div className="flex justify-between">
-          <CrossButton onClick={onClick} />
           <div className="text-[#858585] text-xl font-bold">
             {currentViewTitle}
           </div>
+          <CrossButton onClick={onClick} />
         </div>
-        <div className="flex flex-col gap-4 pb-8 justify-end">
-          <h2 className="text-[#333] text-[32px] font-bold text-right">
-            تعليمات التحكم
+        <div className="flex flex-col gap-4 pb-8">
+          <h2 className="text-[#333] text-[32px] font-bold">
+            {t("ControlHelp")}
           </h2>
-          <div className="flex gap-4 items-center justify-end text-right">
-            <div>استمر بالضغط على زر الماوس الأيسر لتحريك المشهد</div>
+          <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>{t("ClickAndHoldTheLeftMouseButtonToLookAround")}</div>
           </div>
-          <div className="flex gap-4 items-center  justify-end text-right">
-            <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>
+              {t(
+                "PlaceTheCursorOnASectionOfTheFloorAndClickTheLeftMouseButtonToMoveAroundThe3DScene"
+              )}
+            </div>
           </div>
         </div>
-        <div className="self-end">
-          <LookAroundButton onClick={onClick} />
-        </div>
+        <LookAroundButton onClick={onClick} />
       </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,35 +1,53 @@
+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">
-      <div className="flex flex-col">
-        <div className="flex gap-4 justify-between">
-          <div>{currentVilla && currentVilla.plotArea}</div>
-          <div className="text-[#666668]">مساحة الأرض (متر مربع)</div>
-        </div>
-        <div className="flex gap-4">
-          <div>{currentVilla && currentVilla.totalBuildUpArea}</div>
-          <div className="text-[#666668]">مساحة الفيلا (متر مربع)</div>
-        </div>
-      </div>
-      <div className="h-8 bg-[#DDD7D6] w-[1px]" />
-      <div className="flex flex-col">
-        <div className="flex gap-4 justify-between">
-          <div>{currentVilla && currentVilla.villaTheme}</div>
-          <div className="text-[#666668]">تصميم واجهة الفيلا</div>
-        </div>
-        <div className="flex gap-4">
-          <div>{currentVilla && currentVilla.totalCountBedroms}</div>
-          <div className="text-[#666668]">غرف النوم</div>
-        </div>
-      </div>
-      <div className="h-8 bg-[#DDD7D6] w-[1px]" />
       <h2 className="text-[#050409] font-medium text-2xl uppercase ">
         {currentVilla && currentVilla.type}
       </h2>
+      <div className="h-8 bg-[#DDD7D6] w-[1px]" />
+      <div className="flex flex-col">
+        <div
+          className={`flex gap-4 ${
+            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 ${
+            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 ${
+            i18n.language === "ar" ? "flex-row-reverse" : ""
+          }`}
+        >
+          <div className="text-[#666668]">{t("PlotArea")}</div>
+          <div>{currentVilla && currentVilla.plotArea}</div>
+        </div>
+        <div
+          className={`flex gap-4 ${
+            i18n.language === "ar" ? "flex-row-reverse justify-between" : ""
+          }`}
+        >
+          <div className="text-[#666668]">{t("Total Build up Area, m 2")}</div>
+          <div>{currentVilla && currentVilla.totalBuildUpArea}</div>
+        </div>
+      </div>
     </div>
   );
 };

src/components/desktop/Main/HouseList.tsx

@@ -4,7 +4,6 @@ import { VILLAS } from "../../../consts/villas";
 const HouseList = () => {
   return (
     <div className="max-h-screen overflow-y-scroll">
-      <div className="py-4 bg-[#EAE5E0] flex justify-center">اختر فيلا</div>
       <div className="flex flex-col gap-2 p-4">
         {VILLAS.map((villa) => {
           return <HouseItem villa={villa} key={villa.type} />;

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}
           >
-            للخلف
+            {t("Back")}
           </button>
         </div>
       </a.div>

src/components/mobile/Appartment/ButtonPanel.tsx

@@ -52,7 +52,7 @@ const GoBackButton = () => {
   const navigate = useNavigate();
 
   const handleOnMapClick = () => {
-    navigate("../");
+    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 ">القيم</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">النوع</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">
-            مساحة الأرض (متر مربع)
+            {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">
-            مساحة الفيلا (متر مربع)
+            {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">
-            عدد غرف النوم
+            {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">
-            تصميم واجهة الفيلا
+            {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);
@@ -33,25 +35,25 @@ const PopupModal = () => {
           isVisible ? "opacity-100" : "opacity-0"
         }`}
       >
-        <div className="bg-white rounded-[16px] flex flex-col p-6 pr-7 w-full text-right">
+        <div className="bg-white rounded-[16px] flex flex-col p-6 pr-7 w-full">
           <div className="flex justify-between">
-            <CrossButton onClick={handleOnComplete} />
             <h2 className="text-[#333] text-[20px] font-bold">
-              تعليمات التحكم
+              {t("ControlHelp")}
             </h2>
+            <CrossButton onClick={handleOnComplete} />
           </div>
-          <div className="flex flex-col gap-[10px] text-sm items-end">
+          <div className="flex flex-col gap-[10px] text-sm pr-8">
             <div className="flex gap-3 items-center">
-              <div>أنقر على الأرض للتنقل من مكان لأخر</div>
               <div className="w-10 h-10 flex items-center justify-center border border-[#EAE5E0] rounded-full">
                 <TouchIcon width={24} height={24} />{" "}
               </div>
+              <div>{t("PressTheFloorToMoveIn3DSpace")}</div>
             </div>
             <div className="flex gap-3 items-center">
-              <div>حرك الشاشة بأصبعك نحو اليمين أو اليسار لتحريك المشهد</div>
               <div className="w-10 h-10 flex items-center justify-center border border-[#EAE5E0] rounded-full">
                 <RotateIcon width={24} height={24} />{" "}
               </div>
+              <div>{t("RotateTheCameraBySwipingTheScreen")}</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="اختر فيلا" />
+      <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 rounded-es-2xl "
+      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"
+      }`}
     >
-      <ArrowIcon />
-      تعرف أكثر
+      {t("KnowMore")}
+      <div className={`${i18n.language === "ar" ? "rotate-180" : ""}`}>
+        <ArrowIcon />
+      </div>
     </button>
   );
 };

src/components/mobile/Main/SelectedHouseModal.tsx

@@ -26,10 +26,10 @@ const SelectedHouseModal = () => {
                 )}
               </div>
               <div className="w-full flex flex-col justify-center gap-1 text-[#666668]">
-                <p>النوع</p>
-                <p>مساحة الفيلا (متر مربع)</p>
-                <p>غرف النوم</p>
-                <p>تصميم واجهة الفيلا</p>
+                <p>Type</p>
+                <p>House Size</p>
+                <p>Bedrooms</p>
+                <p>Villa Theme</p>
               </div>
               <div className="flex flex-col w-[82px] pr-4 justify-center ">
                 <div className="uppercase">{selectedOnMapVilla?.type}</div>

src/components/mobile/Main/ViewOnMapButton.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import ViewOnMapIcon from "../../../icons/ViewOnMapIcon";
 
 type ViewOnMapProps = {
@@ -6,15 +7,18 @@ type ViewOnMapProps = {
 };
 
 const ViewOnMapButton = ({ onClick, isVillaSelected }: ViewOnMapProps) => {
+  const [t, i18n] = useTranslation();
   return (
     <button
-      className={`w-1/2 flex justify-center gap-1 items-center rounded-ee-2xl hover:bg-secondary transition-all duration-200 border-l ${
-        isVillaSelected ? "bg-[#EAE5E0] rounded-es-2xl" : ""
-      }`}
+      className={`w-1/2 flex justify-center gap-1 items-center hover:bg-secondary transition-all duration-200 ${
+        i18n.language === "ar"
+          ? "rounded-ee-2xl border-l flex-row-reverse"
+          : "rounded-es-2xl border-r"
+      } ${isVillaSelected ? "bg-[#EAE5E0] " : ""}`}
       onClick={onClick}
     >
+      {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: "جاري تحميل نموذج الفيلا .." },
-  { id: 2, value: "جاري بناء الجدران .." },
-  { id: 3, value: "جاري  تركيب السقف.." },
-  { id: 4, value: "جاري ترتيب الأثاث.." },
-  { id: 5, value: "جاري تجهيز الفيلا للعرض.." },
+  { id: 1, value: "LookingForAVilla" },
+  { id: 2, value: "BuildingTheWalls" },
+  { id: 3, value: "InstallingTheRoof" },
+  { id: 4, value: "ArrangingTheFurniture" },
+  { id: 5, value: "PreparingTheVillaForShowing" },
 ];
 
 export { loadingMessages };

src/icons/ArrowIcon.tsx

@@ -1,7 +1,6 @@
 const ArrowIcon = () => {
   return (
     <svg
-      className="rotate-180"
       width="21"
       height="20"
       viewBox="0 0 21 20"

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,6 +4,7 @@ import MainPage from "./pages/MainPage";
 import ApartmentPage from "./pages/ApartmentPage";
 import "./index.css";
 import Layout from "./components/Layout";
+import "./languages/i18n";
 
 const router = createBrowserRouter([
   {
@@ -11,7 +12,7 @@ const router = createBrowserRouter([
     element: <Layout />,
     children: [
       {
-        path: "villa/:villaTitle",
+        path: ":villaTitle",
         element: <ApartmentPage />,
       },
       {

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", "ar");
+      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 right-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", "ar");
+      const { language } = i18n;
+      sendMessage("JsConnector", "SetCurrentLang", language);
     }
   }, [isContainerLoaded]);
 

src/pages/Mobile/MobileMainPage.tsx

@@ -9,7 +9,7 @@ const MobileMainPage = () => {
   const { setModal, selectedOnMapVilla } = useStore();
   const title = selectedOnMapVilla?.type
     ? selectedOnMapVilla?.type
-    : "اختر فيلا";
+    : "Select a House";
 
   const handleOnClick = () => {
     setModal(<HouseListModal />);

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":
-  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:
+"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==
@@ -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":
-  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:
+"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==
@@ -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"