fix clouds

client/src/api/urls.ts

@@ -1,6 +1,7 @@
 // const serverApi = "http://192.168.56.1:3000";
 const serverApi = "http://194.26.138.94:4002";
 // const serverApi = import.meta.env.VITE_SERVER_API;
+const weatherApi = "";
 
 const apartmentsApi = `${serverApi}/apartments`;
 

client/src/components/masterplanPage/map/Clouds.tsx

@@ -11,14 +11,14 @@ function Clouds() {
 
   return (
     <div
-      className="absolute w-fit h-full z-40 select-none tounch-none pointer-events-none tranlsate-all duration-300 flex
+      className="absolute w-fit h-full z-40 select-none tounch-none pointer-events-none tranlsate-all duration-300 flex top-0 -left-[50vw] 
         "
       style={{
         opacity: `${Math.abs(mapScale - 0.5) * 200}%`,
       }}
     >
       <div
-        className={`w-[150vw] h-[150vw] relative transition-opacity ease-in-out infinite-animation opacity-40  `}
+        className={`w-[150vw] h-[100vw] relative transition-opacity ease-in-out infinite-animation opacity-40`}
       >
         <img
           src="/images/clouds/cloud-1.png"
@@ -67,7 +67,7 @@ function Clouds() {
         />
       </div>
       <div
-        className={`w-[150vw] h-[150vw] relative transition-opacity ease-in-out infinite-animation opacity-40  `}
+        className={`w-[150vw] h-[100vw] relative transition-opacity ease-in-out infinite-animation opacity-40 `}
       >
         <img
           src="/images/clouds/cloud-1.png"

client/src/index.css

@@ -50,25 +50,14 @@ body {
 
 @layer components {
   .infinite-animation {
-    animation: infiniter 75s linear infinite;
+    animation: infiniter 5s linear infinite;
   }
 
   @keyframes infiniter {
     from {
-      transform: translateX(0%);
-    }
-    to {
-      transform: translateX(-100%);
-    }
-  }
-
-  @keyframes infiniter {
-    from {
-      transform: translateX(0%);
       transform: translateX(-100%);
     }
     to {
-      transform: translateX(-100%);
       transform: translateX(0%);
     }
   }