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>

frontend/components/product/ProductView.vue

@@ -8,48 +8,49 @@ const maxQuantity = ref(10);
 
 <template>
     <div class="flex gap-12">
-        <div class="w-[800px] flex flex-col items-end gap-3 mt-12">
+        <div class="bg-red-300 w-full h-[500px] flex-1 rounded-200">
+
+        </div>
+        <div class="flex-1 flex flex-col gap-3 mt-12">
             <span class="typo-label-sm">
-                Nova
+                سامسونگ
             </span>
             <h1 class="typo-h-2">
-                Nova
+                موبایل Nova
             </h1>
             <div class="flex w-full items-center justify-between">
-                <Rating />
                 <span class="typo-p-2xl">
                     $689.00
                 </span>
+                <Rating />
             </div>
-            <p class="typo-p-md text-slate-500 text-left">
-                Compact, stylish, and engineered for the future, Eco Tunes are more than just headphones; they're a
-                statement. Hear the future, save the planet.
+            <p class="typo-p-md text-slate-500">
+                لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و
+                متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و
+                کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته.
             </p>
             <div class="w-full flex flex-col gap-6 mt-4">
-                <RemainQuantity :quantity="maxQuantity" />
+                <RemainQuantity :maxQuantity="maxQuantity" :quantity="quantity" />
                 <div class="w-full flex gap-3 flex-col">
                     <div class="w-full flex gap-3">
                         <Button
-                            class="w-full"
+                            class="w-full rounded-full"
                             end-icon="ci:plus"
                         >
-                            Add to cart
+                            افزودن به سبد خرید
                         </Button>
                         <QuantityCounter v-model="quantity" :max="maxQuantity" />
                     </div>
                     <Button
-                        class="w-full"
+                        class="w-full rounded-full"
                         variant="outlined"
                     >
-                        Buy it now
+                        همین الان بخر
                     </Button>
                 </div>
                 <InfoCard />
                 <Share />
             </div>
         </div>
-        <div class="bg-red-300 w-full h-[500px] rounded-200">
-
-        </div>
     </div>
 </template>