fix

This reverts commit 088781e76a.

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

@@ -19,7 +19,7 @@ const HintThreeDTour = ({
       } ${className ? className : ""}`}
     >
       <PedestrianIcon color="#000" className="w-5 h-5" />
-      <p>اختر غرفة لبدء الجولة ثلاثية الأبعاد</p>
+      <p>Choose a room to start the 3D tour</p>
       {onClose && (
         <div onClick={onClose}>
           <CrossIcon />

src/components/HouseItem.tsx

@@ -18,40 +18,12 @@ const HouseItem = ({ villa }: HouseItemProps) => {
 
   const handleOnKnowMoreButton = () => {
     setModal(null);
-    navigate(`/${villa.type}`);
+    navigate(`../en/villa/${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="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 +36,29 @@ const HouseItem = ({ villa }: HouseItemProps) => {
             )}
           </div>
         </div>
+        <div className="flex p-4 pl-2">
+          <div className="w-full flex flex-col justify-center gap-1 text-[#666668]">
+            <p>Type</p>
+            <p>Plot area, m2</p>
+            <p>Unit area, m2</p>
+            <p>Bedrooms</p>
+            <p>Villa Theme</p>
+          </div>
+          <div className="flex text-right flex-col w-[82px] justify-center gap-1">
+            <div className="uppercase">{villa.type}</div>
+            <div className="">{villa.plotArea}</div>
+            <div className="">{villa.totalBuildUpArea}</div>
+            <div>{villa.totalCountBedroms}</div>
+            <div>{villa.villaTheme}</div>
+          </div>
+        </div>
       </div>
       <div className={`border-0 border-t-[1px] text-sm flex`}>
-        <KnowMoreButton onClick={handleOnKnowMoreButton} />
         <ViewOnMapButton
           onClick={handleOnViewOnMapClick}
           isVillaSelected={selectedOnMapVilla?.type === villa.type}
         />
+        <KnowMoreButton onClick={handleOnKnowMoreButton} />
       </div>
     </div>
   );

src/components/ImagesButton.tsx

@@ -11,7 +11,7 @@ const ImagesButton = ({ onClick }: ImagesButtonProps) => {
       className="bg-white py-[6px] pr-5 pl-4 rounded-full border border-[#C7BDBA] flex gap-1 items-center hover:bg-secondary transition-all duration-200 h-10 "
     >
       <ImagesIcon />
-      الصور
+      Images
     </button>
   );
 };

src/components/LayoutButton.tsx

@@ -11,7 +11,7 @@ const LayoutButton = ({ onClick }: LayoutButtonProps) => {
       className="bg-white py-[6px] pr-5 pl-4 rounded-full border border-[#C7BDBA] text-[16px] flex gap-1 justify-center items-center hover:bg-secondary transition-all duration-200 h-10"
     >
       <LayoutIcon />
-      المخطط
+      Layout
     </button>
   );
 };

src/components/LayoutToggle.tsx

@@ -23,7 +23,7 @@ const LayoutToggle = ({
           onClick={() => setCurrentView(1)}
         >
           {" "}
-          الطابق الأرضي
+          Ground Floor
         </div>
         <div
           className={`${
@@ -32,7 +32,7 @@ const LayoutToggle = ({
           onClick={() => setCurrentView(2)}
         >
           {" "}
-          الطابق الأول
+          First Floor
         </div>
         <div
           className={`${
@@ -41,7 +41,7 @@ const LayoutToggle = ({
           onClick={() => setCurrentView(3)}
         >
           {" "}
-          موقف السيارات
+          Parking
         </div>
       </div>
     </div>

src/components/UnitList.tsx

@@ -10,11 +10,11 @@ const UnitList = ({ units, startIndex = 0 }: UnitListProps) => {
     <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>№</div>
+          <div className="flex justify-between w-full">
+            <div>Unit</div>
+            <div>Area (m)</div>
+          </div>
         </div>
         {units.map((unit, index) => (
           <div
@@ -23,11 +23,11 @@ const UnitList = ({ units, startIndex = 0 }: UnitListProps) => {
               index % 2 === 0 ? "bg-[#EAE5E0] rounded-lg" : ""
             }`}
           >
-            <div className="flex justify-between w-full">
-              <div>{unit.value}</div>
-              <div>{unit.title}</div>
-            </div>
             <div>{startIndex + index + 1}</div>
+            <div className="flex justify-between w-full">
+              <div>{unit.title}</div>
+              <div>{unit.value}</div>
+            </div>
           </div>
         ))}
       </div>

src/components/ViewToggle.tsx

@@ -62,7 +62,7 @@ const ViewToggle = ({ offset, isDesktop }: ViewSwitcherProps) => {
             } py-2 px-3 text-[14px] w-full sm:w-fit rounded-[32px]`}
           >
             {" "}
-            خارج الفيلا
+            Outdoor
           </div>
           <div
             onClick={handleOnSecondClick}
@@ -73,7 +73,7 @@ const ViewToggle = ({ offset, isDesktop }: ViewSwitcherProps) => {
             }  py-2 px-3 w-full sm:w-fit rounded-[32px] `}
           >
             {" "}
-            الطابق الأرضي
+            Ground Floor
           </div>
           <div
             onClick={handleOnThirdClick}
@@ -84,7 +84,7 @@ const ViewToggle = ({ offset, isDesktop }: ViewSwitcherProps) => {
             }  py-2 px-3 w-full sm:w-fit rounded-[32px] `}
           >
             {" "}
-            الطابق الأول
+            First Floor
           </div>
         </div>
       </div>

src/components/desktop/Appartment/ButtonPanel.tsx

@@ -57,9 +57,15 @@ 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">
+      <div className="w-1/3">
-        <LayoutButton onClick={handleOnLayoutClick} />
+        <GoBackButton />
+      </div>
+      <div className="w-1/3">
+        {currentView !== 1 && !is3DTour && <HintThreeDTour />}
+      </div>
+      <div className="flex gap-2 w-fit ml-auto">
         <ImagesButton onClick={handleOnImagesClick} />
+        <LayoutButton onClick={handleOnLayoutClick} />
         <HelpButton
           className="h-10 w-10"
           handleOnHelpClick={handleOnHelpClick}
@@ -70,12 +76,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>
   );
 };
@@ -87,7 +87,7 @@ const GoBackButton = () => {
   const navigate = useNavigate();
 
   const handleOnMapClick = () => {
-    navigate("../");
+    navigate("../en");
   };
 
   const handleOnBackClick = () => {
@@ -105,13 +105,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="الخريطة"
+              title="Map"
-              className="w-[90px] h-10 "
+              className="w-[90px] h-10"
             />
           )}
         </>

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

@@ -6,7 +6,7 @@ import StartThreeDTourHelpModal from "./StartThreeDTourHelpModal";
 import ThreeDTourHelpModal from "./ThreeDTourHelpModal";
 import TouchScreenHelpModal from "./TouchScreenHelpModal";
 
-const views = ["خارج الفيلا", "الطابق الأرضي", "الطابق الأول"];
+const views = ["Outdoor", "Ground Floor", "First Floor"];
 
 const ControlHelpModal = () => {
   const { currentView, setModal, is3DTour } = useStore();

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

@@ -8,7 +8,7 @@ const LookAroundButton = ({ onClick }: LookAroundButtonProps) => {
       className="bg-[#333] text-white px-6 py-[10px] w-fit rounded-full"
       onClick={onClick}
     >
-      انظر حولك
+      Look around
     </button>
   );
 };

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

@@ -16,31 +16,32 @@ const StartThreeDTourHelpModal = ({
     <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">
-          <div className="text-[#858585] text-xl font-bold text-right">
             {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">Control Help</h2>
-            تعليمات التحكم
+          <div className="flex gap-4 items-center">
-          </h2>
-          <div className="flex gap-4 items-center justify-end">
-            <div>استمر بالضغط على زر الماوس الأيسر لتحريك المشهد</div>
             <div className="w-[56px] h-[56px] flex items-center justify-center border border-[#EAE5E0] rounded-full">
               <MouseIcon />{" "}
             </div>
+            <div>
+              Click and hold the left mouse
+              <br /> button to look around
+            </div>
           </div>
-          <div className="flex gap-4 items-center justify-end">
+          <div className="flex gap-4 items-center">
-            <div>قم باختيار نقطة متاحة لبدء الجولة ثلاثية الأبعاد</div>
             <div className="min-w-[56px] h-[56px] flex items-center justify-center border border-[#EAE5E0] rounded-full">
               <PedestrianIcon />{" "}
             </div>
+            <div>
+              Select an available point <br /> to start the 3D tour
+            </div>
           </div>
         </div>
-        <div className="self-end">
+        <LookAroundButton onClick={onClick} />
-          <LookAroundButton onClick={onClick} />
-        </div>
       </div>
     </div>
   );

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

@@ -16,34 +16,34 @@ const ThreeDTourHelpModal = ({
     <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">
+        <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">Control Help</h2>
-            تعليمات التحكم
+          <div className="flex gap-4 items-center">
-          </h2>
-          <div className="flex gap-4 items-center justify-end text-right">
-            <div>استمر بالضغط على زر الماوس الأيسر لتحريك المشهد</div>
             <div className="w-[56px] h-[56px] flex items-center justify-center border border-[#EAE5E0] rounded-full">
               <MouseIcon />{" "}
             </div>
-          </div>
-          <div className="flex gap-4 items-center  justify-end text-right">
             <div>
-              ضع المؤشر على جزء من الأرضية وانقر زر الماوس الأيسر للتنقل
+              Click and hold the left mouse
+              <br /> button to look around
             </div>
+          </div>
+          <div className="flex gap-4 items-center">
             <div className="min-w-[56px] h-[56px] flex items-center justify-center border border-[#EAE5E0] rounded-full">
               {/* <MouseIcon />{" "} */}
               <CursorIcon />{" "}
             </div>
+            <div>
+              Place the cursor on a section of the floor and click the left
+              mouse button to move around the 3D scene
+            </div>
           </div>
         </div>
-        <div className="self-end">
+        <LookAroundButton onClick={onClick} />
-          <LookAroundButton onClick={onClick} />
-        </div>
       </div>
     </div>
   );

src/components/desktop/Appartment/ParameterDescription.tsx

@@ -5,31 +5,35 @@ const ParameterDescription = () => {
 
   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 justify-between">
+          <div className="text-[#666668]">Villa Theme</div>
+          <div>{currentVilla && currentVilla.villaTheme}</div>
+        </div>
+        <div className="flex gap-4">
+          <div className="text-[#666668]">Total no. of Bedrooms</div>
+          <div>{currentVilla && currentVilla.totalCountBedroms}</div>
+        </div>
+      </div>
+      <div className="h-8 bg-[#DDD7D6] w-[1px]" />
+      <div className="flex flex-col">
+        <div className="flex gap-4 justify-between">
+          <div className="text-[#666668]">
+            Plot area, m<sup>2</sup>
+          </div>
+          <div>{currentVilla && currentVilla.plotArea}</div>
+        </div>
+        <div className="flex gap-4">
+          <div className="text-[#666668]">
+            Total Build up Area, m<sup>2</sup>
+          </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

@@ -100,7 +100,7 @@ export default function ButtomPanelModal() {
             className="border flex w-full py-3 justify-center rounded-full"
             onClick={handleOnClose}
           >
-            للخلف
+            Back
           </button>
         </div>
       </a.div>

src/components/mobile/Appartment/ButtonPanel.tsx

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

src/components/mobile/Appartment/Parameters.tsx

@@ -5,17 +5,17 @@ const Parameters = () => {
 
   return (
     <div className="p-6 border-b">
-      <h2 className="text-xl font-medium ">القيم</h2>
+      <h2 className="text-xl font-medium ">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">Type</div>
           <div className="w-1/2 text-sm font-medium uppercase">
             {currentVilla && currentVilla.type}
           </div>
         </div>
         <div className="flex justify-between gap-4">
           <div className="w-1/2 text-sm text-[#666668] font-medium">
-            مساحة الأرض (متر مربع)
+            Plot area m<sup>2</sup>
           </div>
           <div className="w-1/2 text-sm font-medium">
             {currentVilla && currentVilla.plotArea}
@@ -23,7 +23,7 @@ const Parameters = () => {
         </div>
         <div className="flex justify-between gap-4">
           <div className="w-1/2 text-sm text-[#666668] font-medium">
-            مساحة الفيلا (متر مربع)
+            Unit Area, m<sup>2</sup>
           </div>
           <div className="w-1/2 text-sm font-medium">
             {currentVilla && currentVilla.totalBuildUpArea}
@@ -31,7 +31,7 @@ const Parameters = () => {
         </div>
         <div className="flex justify-between gap-4">
           <div className="w-1/2 text-sm text-[#666668] font-medium">
-            عدد غرف النوم
+            Total no. of Bedrooms
           </div>
           <div className="w-1/2 text-sm font-medium">
             {currentVilla && currentVilla.totalCountBedroms}
@@ -39,7 +39,7 @@ const Parameters = () => {
         </div>
         <div className="flex justify-between gap-4">
           <div className="w-1/2 text-sm text-[#666668] font-medium">
-            تصميم واجهة الفيلا
+            Villa Theme
           </div>
           <div className="w-1/2 text-sm font-medium">
             {currentVilla && currentVilla.villaTheme}

src/components/mobile/Appartment/PopupModal.tsx

@@ -33,29 +33,96 @@ 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">
+            <h2 className="text-[#333] text-[20px] font-bold">Control Help</h2>
             <CrossButton onClick={handleOnComplete} />
-            <h2 className="text-[#333] text-[20px] font-bold">
-              تعليمات التحكم
-            </h2>
           </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>
+                Press the floor to move in 3D space
+                <br /> أنقر على الأرض للتنقل من مكان لأخر
+              </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>
+                Rotate the camera by swiping the screen <br /> حرك الشاشة بأصبعك
+                نحو اليمين أو اليسار لتحريك المشهد
+              </div>
             </div>
           </div>
         </div>
       </div>
+      {/* <div
+        className={`absolute bottom-0 w-full p-4 transition-all duration-300 z-20}`}
+      >
+        <div className="bg-white p-4 border rounded-2xl">
+          <div className="flex gap-4">
+            <div className="h-full w-10">
+              <TapToastIcon />
+            </div>
+            <div className="flex flex-col gap-4">
+              <div className="text-sm pr-12">
+                Tap on the floor to move in 3D space.
+              </div>
+              {popups.length === index + 1 ? (
+                  <button
+                    onClick={handleOnComplete}
+                    className="text-white bg-black rounded-full px-5 py-[6px] w-fit"
+                  >
+                    Complete
+                  </button>
+                ) : (
+                  <button
+                    onClick={handleOnNextClick(popup.id)}
+                    className="text-white bg-black rounded-full px-5 py-[6px] w-fit"
+                  >
+                    Next
+                  </button>
+                )}
+            </div>
+          </div>
+        </div>
+      </div> */}
+      {/* {popups.map((popup, index) => (
+        <div
+          key={popup.id}
+          className={`absolute bottom-0 w-full p-4 transition-all duration-300 z-20 ${
+            1 !== popup.id ? "hidden opacity-0" : "opacity-1"
+          }`}
+        >
+          <div className="bg-white p-4 border rounded-2xl">
+            <div className="flex gap-4">
+              <div className="h-full w-10">{popup.icon}</div>
+              <div className="flex flex-col gap-4">
+                <div className="text-sm pr-12">{popup.title}</div>
+                {popups.length === index + 1 ? (
+                  <button
+                    onClick={handleOnComplete}
+                    className="text-white bg-black rounded-full px-5 py-[6px] w-fit"
+                  >
+                    Complete
+                  </button>
+                ) : (
+                  <button
+                    onClick={handleOnNextClick(popup.id)}
+                    className="text-white bg-black rounded-full px-5 py-[6px] w-fit"
+                  >
+                    Next
+                  </button>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      ))} */}
     </>
   );
 };

src/components/mobile/Main/KnowMoreButton.tsx

@@ -8,10 +8,10 @@ const KnowMoreButton = ({ onClick }: KnowMoreButtonProps) => {
   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"
     >
+      Know more
       <ArrowIcon />
-      تعرف أكثر
     </button>
   );
 };

src/components/mobile/Main/ViewOnMapButton.tsx

@@ -8,13 +8,13 @@ type ViewOnMapProps = {
 const ViewOnMapButton = ({ onClick, isVillaSelected }: ViewOnMapProps) => {
   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 ${
+      className={`w-1/2 border-r flex justify-center gap-1 items-center hover:bg-secondary transition-all duration-200 ${
         isVillaSelected ? "bg-[#EAE5E0] rounded-es-2xl" : ""
       }`}
       onClick={onClick}
     >
+      View on Map
       <ViewOnMapIcon />
-      العرض على الخريطة
     </button>
   );
 };

src/consts/loading.ts

@@ -1,9 +1,9 @@
 const loadingMessages = [
-  { id: 1, value: "جاري تحميل نموذج الفيلا .." },
+    { id: 1, value: "looking for a villa" },
-  { id: 2, value: "جاري بناء الجدران .." },
+    { id: 2, value: "building the walls" },
-  { id: 3, value: "جاري  تركيب السقف.." },
+    { id: 3, value: "installing the roof" },
-  { id: 4, value: "جاري ترتيب الأثاث.." },
+    { id: 4, value: "arranging the furniture" },
-  { id: 5, value: "جاري تجهيز الفيلا للعرض.." },
+    { id: 5, value: "preparing the villa for showing" },
-];
+  ];
 
-export { loadingMessages };
+  export {loadingMessages}

src/hooks/useUnity.ts

@@ -2,11 +2,11 @@ import { useUnityContext } from "react-unity-webgl";
 
 function useUnity() {
   return useUnityContext({
-    loaderUrl: "Build/estate-webgl-dev.loader.js",
+    loaderUrl: "../../Build/estate-webgl-dev.loader.js",
-    dataUrl: "Build/estate-webgl-dev.data.unityweb",
+    dataUrl: "../../Build/estate-webgl-dev.data.unityweb",
-    frameworkUrl: "Build/estate-webgl-dev.framework.js.unityweb",
+    frameworkUrl: "../../Build/estate-webgl-dev.framework.js.unityweb",
-    codeUrl: "Build/estate-webgl-dev.wasm.unityweb",
+    codeUrl: "../../Build/estate-webgl-dev.wasm.unityweb",
-    streamingAssetsUrl: "StreamingAssets",
+    streamingAssetsUrl: "../../StreamingAssets",
   });
 }
 

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/main.tsx

@@ -11,17 +11,25 @@ const router = createBrowserRouter([
     element: <Layout />,
     children: [
       {
-        path: "/:villaTitle",
+        path: "en/:villaTitle",
         element: <ApartmentPage />,
       },
       {
-        path: "/",
+        path: "en/",
         element: <MainPage />,
       },
     ],
   },
 ]);
 
+//arabian
+//villa/:villaTitle
+//
+
+//english
+//en/villa/:villaTitle
+//en
+
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <RouterProvider router={router} />
 );

src/pages/Desktop/DesktopApartmentPage.tsx

@@ -77,6 +77,7 @@ const DesktopApartmentPage = () => {
 
     if (isContainerLoaded) {
       sendMessage("JsConnector", "SetCurrentVilla", villa.type);
+      sendMessage("JsConnector", "SeCurrentLang", "en");
     }
   }, [isContainerLoaded]);
 

src/pages/Desktop/DesktopMainPage.tsx

@@ -5,7 +5,7 @@ const DesktopMainPage = () => {
   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 left-0 bg-white pr-1">
         <HouseList />
       </div>
     </>

src/pages/Mobile/MobileApartmentPage.tsx

@@ -97,6 +97,7 @@ const MobileApartmentPage = () => {
     setSendMessageToUnity(sendMessage);
     if (isContainerLoaded) {
       sendMessage("JsConnector", "SetCurrentVilla", villa.type);
+      sendMessage("JsConnector", "SeCurrentLang", "en");
     }
   }, [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 />);