Update brands

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"