merge

frontend/components/global/Brands.vue

@@ -14,15 +14,46 @@ const { isMobile } = useRatio();
 const props = defineProps<Props>();
 const {} = toRefs(props);
 
-const brands = ref([
-    "/img/brands/brand-1.png",
-    "/img/brands/brand-2.png",
-    "/img/brands/brand-3.png",
-    "/img/brands/brand-4.png",
-    "/img/brands/brand-5.png",
-    "/img/brands/brand-6.png",
+const brandsList = ref([
+    "acer.png",
+    "adidas.png",
+    "aeg.png",
+    "anker.png",
+    "apple.webp",
+    "asus.png",
+    "canon.png",
+    "cat.png",
+    "deawoo.png",
+    "dell.png",
+    "greenlion.webp",
+    "gucci.png",
+    "hp.png",
+    "huawei.webp",
+    "jbl.png",
+    "jordan.png",
+    "lg.png",
+    "microsoft.png",
+    "msi.png",
+    "nike.png",
+    "ninja.png",
+    "philips.png",
+    "playstation.png",
+    "reebok.png",
+    "samsung.png",
+    "sencor.png",
+    "sony.png",
+    "tefal.png",
+    "uwell.png",
+    "westinghous.png",
+    "xbox.png",
+    "xiaomi.png",
+    "xvision.png",
+    "zara.png",
 ]);
 
+const brands = computed(() => {
+    return brandsList.value.map(i => `/img/brands/${i}`)
+})
 // preload images using vueuse
 const isReady = ref(false);
 
@@ -75,11 +106,11 @@ onMounted(async () => {
         <div class="rotate-z-2 z-10 w-[110%]">
             <Marquee
                 v-if="isReady"
-                class="bg-slate-100/70  will-change-transform"
+                class="bg-slate-100/70 will-change-transform"
                 direction="reverse"
                 :clone="true"
                 dir="ltr"
-                :duration="14"
+                :duration="48"
             >
                 <div
                     v-for="brand in brands"

frontend/components/global/MegaMenu.vue

@@ -160,7 +160,7 @@ onMounted(() => {
             />
 
             <div class="container relative z-10">
-                <div class="flex h-200 bg-white rounded-b-2xl border-t border-slate-200">
+                <div class="flex h-[70svh] max-h-200 bg-white rounded-b-2xl border-t border-slate-200">
                     <div class="bg-slate-100 p-4 flex flex-col overflow-y-auto mask-b-from-90% pb-8">
                         <button
                             v-for="(item, index) in items"
@@ -183,7 +183,7 @@ onMounted(() => {
                         >
                             <div
                                 :key="selectedItem"
-                                class="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 p-4 text-back w-full h-fit"
+                                class="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 p-4 gap-2 text-back w-full h-fit"
                                 :style="{
                                     // gridTemplateRows: 'repeat(5, auto)',
                                     // justifyContent: 'center',

frontend/components/global/ProductsGrid.vue

@@ -47,9 +47,10 @@ withDefaults(defineProps<Props>(), {
                     :title="product.name"
                     :picture="product.image ?? product.variants[0].images[0].image"
                     :colors="product.colors"
-                    :price="product.variants[0].price"
+                    :price="product.variants[0].price_after_discount ?? product.variants[0].price"
                     :rate="product.rating"
                     :dark-layer="true"
+                    :tag="`${product.variants[0].discount}% تخفیف`"
                 />
             </li>
         </ul>

frontend/components/global/Tag.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="text-white flex items-center justify-center rounded-full px-4 py-2 bg-danger-600 typo-sub-h-sm">
+    <div class="text-white flex items-center justify-center rounded-full px-3 lg:px-4 py-2 bg-danger-600 typo-sub-h-xs lg:typo-sub-h-sm">
         <slot />
     </div>
 </template>