Add morabba font

Chnage ui to rtl

frontend/assets/css/fonts/morabba.css

@@ -0,0 +1,73 @@
+@layer base {
+    @font-face {
+        font-family: "Morabba";
+        src: url("/fonts/Morabba/IRANYekanX-UltraLight.woff2");
+        font-weight: 200;
+        font-style: normal;
+        font-display: swap;
+    }
+
+    @font-face {
+        font-family: "Morabba";
+        src: url("/fonts/Morabba/Morabba-Light.woff2");
+        font-weight: 300;
+        font-style: normal;
+        font-display: swap;
+    }
+
+    @font-face {
+        font-family: "Morabba";
+        src: url("/fonts/Morabba/Morabba-Regular.woff2");
+        font-weight: 400;
+        font-style: normal;
+        font-display: swap;
+    }
+
+    @font-face {
+        font-family: "Morabba";
+        src: url("/fonts/Morabba/Morabba-Medium.woff2");
+        font-weight: 500;
+        font-style: normal;
+        font-display: swap;
+    }
+
+    @font-face {
+        font-family: "Morabba";
+        src: url("/fonts/Morabba/Morabba-SemiBold.woff2");
+        font-weight: 600;
+        font-style: normal;
+        font-display: swap;
+    }
+
+    @font-face {
+        font-family: "Morabba";
+        src: url("/fonts/Morabba/Morabba-Bold.woff2");
+        font-weight: 700;
+        font-style: normal;
+        font-display: swap;
+    }
+
+    @font-face {
+        font-family: "Morabba";
+        src: url("/fonts/Morabba/Morabba-ExtraBold.woff2");
+        font-weight: 800;
+        font-style: normal;
+        font-display: swap;
+    }
+
+    @font-face {
+        font-family: "Morabba";
+        src: url("/fonts/Morabba/Morabba-Black.woff2");
+        font-weight: 900;
+        font-style: normal;
+        font-display: swap;
+    }
+
+    @font-face {
+        font-family: "Morabba";
+        src: url("/fonts/Morabba/Morabba-Heavy.woff2");
+        font-weight: 1000;
+        font-style: normal;
+        font-display: swap;
+    }
+}

frontend/assets/css/tailwind.css

@@ -4,7 +4,8 @@
 @import "./typo.utils.css";
 @import "./button.comp.css";
 @import "./input.comp.css";
-@import "./fonts/iran-yekan-x.css"
+@import "./fonts/iran-yekan-x.css";
+@import "./fonts/morabba.css";
 
 @theme {
     /* COLORS */
@@ -109,6 +110,7 @@
     --font-inter: "Inter", sans-serif;
     --font-dmsans: "DM Sans", sans-serif;
     --font-iran-yekan-x: "IRANYekanXVF", "sans-serif";
+    --font-morabba: "Morabba", "sans-serif";
 
     /* BREAKPOINTS */
     --breakpoint-3xl: 1700px;

frontend/assets/css/typo.utils.css

@@ -1,96 +1,96 @@
 /* TYPO HERO */
 @utility typo-hero-1 {
-    @apply text-[96px] leading-[96px] font-bold ;
+    @apply text-[96px] leading-[96px] font-semibold font-morabba;
 }
 
 @utility typo-hero-2 {
-    @apply text-[72px] leading-[72px] font-bold ;
+    @apply text-[72px] leading-[72px] font-semibold font-morabba;
 }
 
 /* TYPE HEADING */
 @utility typo-h-1 {
-    @apply text-[64px] leading-[72px] font-bold ;
+    @apply text-[64px] leading-[72px] font-semibold font-morabba;
 }
 
 @utility typo-h-2 {
-    @apply text-[56px] leading-[64px] font-bold ;
+    @apply text-[56px] leading-[64px] font-semibold font-morabba;
 }
 
 @utility typo-h-3 {
-    @apply text-[48px] leading-[56px] font-bold ;
+    @apply text-[48px] leading-[56px] font-semibold font-morabba;
 }
 
 @utility typo-h-4 {
-    @apply text-[40px] leading-[52px] font-bold ;
+    @apply text-[40px] leading-[52px] font-semibold font-morabba;
 }
 
 @utility typo-h-5 {
-    @apply text-[32px] leading-[40px] font-bold ;
+    @apply text-[32px] leading-[40px] font-semibold font-morabba;
 }
 
 @utility typo-h-6 {
-    @apply text-[24px] leading-[32px] font-bold ;
+    @apply text-[24px] leading-[32px] font-semibold font-morabba;
 }
 
 /* TYPE SUBHEADING */
 @utility typo-sub-h-xl {
-    @apply text-[20px] leading-[24px] font-semibold ;
+    @apply text-[20px] leading-[24px] font-semibold font-iran-yekan-x;
 }
 
 @utility typo-sub-h-lg {
-    @apply text-[18px] leading-[24px] font-semibold ;
+    @apply text-[18px] leading-[24px] font-semibold font-iran-yekan-x;
 }
 
 @utility typo-sub-h-md {
-    @apply text-[16px] leading-[20px] font-semibold ;
+    @apply text-[16px] leading-[20px] font-semibold font-iran-yekan-x;
 }
 
 @utility typo-sub-h-sm {
-    @apply text-[14px] leading-[20px] font-semibold ;
+    @apply text-[14px] leading-[20px] font-semibold font-iran-yekan-x;
 }
 
 @utility typo-sub-h-xs {
-    @apply text-[12px] leading-[16px] font-semibold ;
+    @apply text-[12px] leading-[16px] font-semibold font-iran-yekan-x;
 }
 
 /* TYPE PARAGRAPH */
 @utility typo-p-2xl {
-    @apply text-[24px] leading-[40px] font-light ;
+    @apply text-[24px] leading-[40px] font-light font-iran-yekan-x;
 }
 
 @utility typo-p-xl {
-    @apply text-[20px] leading-[32px] font-light ;
+    @apply text-[20px] leading-[32px] font-light font-iran-yekan-x;
 }
 
 @utility typo-p-lg {
-    @apply text-[18px] leading-[32px] font-light ;
+    @apply text-[18px] leading-[32px] font-light font-iran-yekan-x;
 }
 
 @utility typo-p-md {
-    @apply text-[16px] leading-[28px] font-light ;
+    @apply text-[16px] leading-[28px] font-light font-iran-yekan-x;
 }
 
 @utility typo-p-sm {
-    @apply text-[14px] leading-[24px] font-light ;
+    @apply text-[14px] leading-[24px] font-light font-iran-yekan-x;
 }
 
 @utility typo-p-xs {
-    @apply text-[12px] leading-[16px] font-light ;
+    @apply text-[12px] leading-[16px] font-light font-iran-yekan-x;
 }
 
 /* TYPO LABEL */
 @utility typo-label-lg {
-    @apply text-[18px] leading-[24px] font-medium ;
+    @apply text-[18px] leading-[24px] font-medium font-iran-yekan-x;
 }
 
 @utility typo-label-md {
-    @apply text-[16px] leading-[24px] font-medium ;
+    @apply text-[16px] leading-[24px] font-medium font-iran-yekan-x;
 }
 
 @utility typo-label-sm {
-    @apply text-[14px] leading-[20px] font-medium ;
+    @apply text-[14px] leading-[20px] font-medium font-iran-yekan-x;
 }
 
 @utility typo-label-xs {
-    @apply text-[12px] leading-[16px] font-medium ;
+    @apply text-[12px] leading-[16px] font-medium font-iran-yekan-x;
 }

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>

frontend/layouts/Default.vue

@@ -11,7 +11,7 @@
 </script>
 
 <template>
-    <div class="w-full flex flex-col-center font-iran-yekan-x" dir="rtl">
+    <div class="w-full flex flex-col-center persian-number" dir="rtl">
         <Header />
         <main class="w-full overflow-x-hidden container">
             <slot />