implement logo container and handle rtl styles

src/pages/menu/menu.module.css

@@ -49,20 +49,28 @@
 
 .logo {
   position: absolute;
-  left: 33px;
+  left: 19px;
   top: -64px;
   border-radius: 50%;
   /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); */
-  z-index: 10;
-  border: 3px solid var(--background);
-  width: 72px !important;
-  height: 72px !important;
+  z-index: 111;
+  width: 70px !important;
+  height: 70px !important;
+  border-image-source: linear-gradient(
+    180deg,
+    #ffffff 0%,
+    rgba(255, 255, 255, 0) 100%
+  );
 }
 
 :global(.darkApp) .logo {
   border-color: var(--background);
 }
 
+:global(.ant-app-rtl) .logo {
+  right: 19px;
+}
+
 .services {
   height: 36px;
   position: absolute;
@@ -669,4 +677,15 @@
   .navButton {
     display: none !important;
   }
-}
+}
+
+.logoContainerIcon {
+  position: absolute !important;
+  left: 0px !important;
+  top: 127px !important;
+  z-index: 10 !important;
+}
+
+:global(.ant-app-rtl) .logoContainerIcon {
+  right: -10px !important;
+}

src/pages/menu/page.tsx

@@ -1,6 +1,7 @@
 import { StarFilled } from "@ant-design/icons";
 import { Image, Select, Space } from "antd";
 import { FloatingButton } from "components/FloatingButton/FloatingButton";
+import LogoContainerIcon from "components/Icons/LogoContainerIcon";
 import ImageWithFallback from "components/ImageWithFallback";
 import LoyaltyCard from "components/LoyaltyCard/LoyaltyCard";
 import ProText from "components/ProText";
@@ -83,18 +84,7 @@ function MenuPage() {
               width={"100%"}
               preview={false}
             />
-            <div className={styles.leftShape}></div>
-            <div className={styles.rightShape}></div>
-            {/* <ResponsiveServices
-              orderType={orderType}
-              translations={{
-                common: {
-                  dineIn: translations.common?.dineIn || "Dine In",
-                  pickup: translations.common?.pickup || "Pickup",
-                  more: translations.common?.more || "More",
-                },
-              }}
-            /> */}
+            <LogoContainerIcon className={styles.logoContainerIcon} />
             <div
               className={`${styles.headerFloatingBtn} ${styles.backButtonContainer}`}
             >