Add morabba font

Chnage ui to rtl

frontend/components/global/product-detail/Rating.vue

@@ -4,9 +4,6 @@
 
 <template>
     <div class="flex items-center gap-2">
-        <span class="typo-p-sm">
-            5.0
-        </span>
         <div class="flex items-center gap-1">
             <Icon
                 name="ci:star-solid"
@@ -29,5 +26,8 @@
                 class="size-4.5 **:fill-yellow-500"
             />
         </div>
+        <span class="typo-p-sm">
+            5.0
+        </span>
     </div>
 </template>

frontend/components/global/product-detail/RemainQuantity.vue

@@ -3,6 +3,7 @@
 // types
 
 type Props = {
+    maxQuantity: number;
     quantity: number;
 }
 
@@ -13,16 +14,19 @@ defineProps<Props>();
 </script>
 
 <template>
-    <div class="flex flex-col gap-2 w-full items-end">
+    <div class="flex flex-col gap-2 w-full">
         <p class="typo-p-sm text-slate-500">
-            Hurry, only
+            سریع باش فقط
             <span class="text-black">
-                {{ quantity }}
+                {{ maxQuantity }}
             </span>
-            items left in stock
+            عدد از این محصول باقی مانده
         </p>
         <div class="h-2 rounded-full relative bg-slate-200 w-full">
-            <div class="w-[85%] h-full absolute left-0 rounded-full bg-black" />
+            <div
+                :style="{ width: `${quantity * (100 / maxQuantity)}%` }"
+                class="h-full absolute right-0 rounded-full bg-black transition-all ease-out"
+            />
         </div>
     </div>
 </template>