fixed marquee

frontend/components/global/Brands.vue

@@ -1,12 +1,16 @@
 <script setup lang="ts">
-// types
+import { useImage } from "@vueuse/core";
+import { useRatio } from "~/composables/global/useRatio";
 
+// types
 type Props = {
-    // brands: string[];
+    // brands?: string[];
 };
 
 // props
 
+const { isMobile } = useRatio();
+
 const props = defineProps<Props>();
 const {} = toRefs(props);
 
@@ -18,6 +22,15 @@ const brands = ref([
     "/img/brands/brand-5.png",
     "/img/brands/brand-6.png",
 ]);
+
+// preload images using vueuse
+const isReady = ref(false);
+
+onMounted(async () => {
+    const loaders = brands.value.map((src) => useImage({ src }));
+    await Promise.all(loaders.map((l) => (l.isLoading.value ? l.promise : Promise.resolve())));
+    isReady.value = true;
+});
 </script>
 
 <template>
@@ -29,48 +42,68 @@ const brands = ref([
                 متون بلکه روزنامه و مجله در ستون و سطرآنچنان که
             </p>
         </div>
+
+        <!-- TOP MARQUEE -->
         <div class="-rotate-z-2 z-20 w-[110%] shadow-2xl shadow-black/7">
             <Marquee
-                class="bg-blue-500 h-full"
+                class="bg-blue-500 will-change-transform"
                 :clone="true"
                 dir="ltr"
-                :duration="3"
+                :duration="14"
             >
-                <div class="flex items-center gap-12 sm:gap-20 px-6 sm:px-10 h-[90px] sm:h-[140px]">
+                <div
+                    v-for="i in 6"
+                    :key="i"
+                    class="flex items-center gap-12 sm:gap-20 px-6 sm:px-10 h-[70px] sm:h-[140px] shrink-0 grow-0"
+                >
                     <div class="text-[30px] text-white lg:text-[40px] mt-2 whitespace-nowrap font-semibold opacity-85">
                         HEYMLZ
                     </div>
-                    <NuxtImg
+                    <div class="size-[25px] sm:size-[45px] flex-center">
-                        loading="lazy"
+                        <NuxtImg
-                        fetch-priority="low"
+                            loading="lazy"
-                        src="/img/heymlz/heymlz-logo.png"
+                            fetch-priority="low"
-                        class="h-[25px] sm:h-[45px] invert"
+                            src="/img/heymlz/heymlz-logo.png"
-                    />
+                            class="w-full object-contain invert"
+                        />
+                    </div>
                 </div>
             </Marquee>
         </div>
 
+        <!-- BOTTOM MARQUEE -->
         <div class="rotate-z-2 z-10 w-[110%]">
             <Marquee
-                class="bg-slate-100/70"
+                v-if="isReady"
-                :direction="'reverse'"
+                class="bg-slate-100/70  will-change-transform"
+                direction="reverse"
                 :clone="true"
                 dir="ltr"
-                :duration="10"
+                :duration="14"
             >
                 <div
                     v-for="brand in brands"
                     :key="brand"
-                    class="flex items-center px-6 sm:px-10 h-[90px] sm:h-[140px]"
+                    class="flex items-center px-6 sm:px-10 h-[70px] sm:h-[140px] shrink-0 grow-0"
                 >
                     <NuxtImg
-                        loading="lazy"
                         fetch-priority="low"
                         :src="brand"
-                        class="h-[25px] sm:h-[45px] opacity-25"
+                        class="opacity-25 object-contain w-[120px] sm:w-[200px] h-[45px] sm:h-[90px]"
                     />
                 </div>
             </Marquee>
         </div>
     </div>
 </template>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+    transition: opacity 0.4s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+    opacity: 0;
+}
+</style>