From a01fed00c98bcf868ed765c7194107e24627a17f Mon Sep 17 00:00:00 2001
From: marzban-dev <marzban.dev@gmail.com>
Date: Mon, 5 May 2025 21:04:47 +0330
Subject: [PATCH] Fix marquee bug

---
 frontend/assets/css/tailwind.css      |   8 --
 frontend/components/global/Brands.vue | 121 ++++++++++++--------------
 2 files changed, 54 insertions(+), 75 deletions(-)

diff --git a/frontend/assets/css/tailwind.css b/frontend/assets/css/tailwind.css
index f071dc5..5696404 100644
--- a/frontend/assets/css/tailwind.css
+++ b/frontend/assets/css/tailwind.css
@@ -131,8 +131,6 @@
     --breakpoint-3xl: 1700px;
 
     /* ANIMATIONS */
-    --animate-marquee: marquee 20s linear infinite;
-    --animate-marquee-reverse: marquee 20s linear infinite reverse;
     --animate-fade-in: fadeIn 350ms ease-in-out;
 
     --animate-slide-down: slideDown 300ms ease-out;
@@ -149,12 +147,6 @@
     --animate-toast-in: toastSlideIn 600ms cubic-bezier(0.16, 1, 0.3, 1);
     --animate-toast-out: toastSlideOut 200ms ease-out;
 
-    @keyframes marquee {
-        to {
-            transform: translateX(50%);
-        }
-    }
-
     @keyframes fadeIn {
         from {
             opacity: 0;
diff --git a/frontend/components/global/Brands.vue b/frontend/components/global/Brands.vue
index ca20a1c..d570827 100644
--- a/frontend/components/global/Brands.vue
+++ b/frontend/components/global/Brands.vue
@@ -9,6 +9,15 @@ type Props = {
 
 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",
+]);
 </script>
 
 <template>
@@ -20,86 +29,64 @@ const {} = toRefs(props);
                 متون بلکه روزنامه و مجله در ستون و سطرآنچنان که
             </p>
         </div>
-        <div class="-rotate-z-2 z-20">
-            <div
-                class="bg-black flex items-center pr-20 gap-12 sm:gap-20 w-max animate-marquee-reverse h-[90px] sm:h-[140px]"
+        <div class="-rotate-z-2 z-20 w-[110%]">
+            <Marquee
+                class="bg-black h-full"
+                :clone="true"
+                dir="ltr"
+                :duration="3"
             >
-                <template v-for="i in 10">
-                    <div class="text-[30px] lg:text-[40px] text-white whitespace-nowrap font-semibold opacity-85">
+                <div class="flex items-center gap-12 sm:gap-20 px-6 sm:px-10 h-[90px] sm:h-[140px]">
+                    <div class="text-[30px] lg:text-[40px] mt-2 text-white whitespace-nowrap font-semibold opacity-85">
                         HEYMLZ
                     </div>
                     <NuxtImg
                         src="/img/heymlz/heymlz-logo.png"
                         class="h-[25px] sm:h-[45px] invert opacity-85"
                     />
-                </template>
-                <template v-for="i in 10">
-                    <div class="text-[30px] lg:text-[40px] text-white whitespace-nowrap font-semibold opacity-85">
-                        HEYMLZ
-                    </div>
-                    <NuxtImg
-                        src="/img/heymlz/heymlz-logo.png"
-                        class="h-[25px] sm:h-[45px] invert opacity-85"
-                    />
-                </template>
-            </div>
+                </div>
+            </Marquee>
         </div>
 
-        <div class="rotate-z-2 z-10">
-            <div
-                class="bg-slate-100/70 flex items-center pr-20 gap-12 sm:gap-20 w-max animate-marquee h-[90px] sm:h-[140px]"
+        <div class="rotate-z-2 z-10 w-[110%]">
+            <Marquee
+                class="bg-slate-100/70"
+                :direction="'reverse'"
+                :clone="true"
+                dir="ltr"
+                :duration="10"
             >
-                <template v-for="i in 2">
+                <div
+                    v-for="brand in brands"
+                    :key="brand"
+                    class="flex items-center px-6 sm:px-10 h-[90px] sm:h-[140px]"
+                >
                     <NuxtImg
-                        src="/img/brands/brand-1.png"
+                        :src="brand"
                         class="h-[25px] sm:h-[45px]"
                     />
-                    <NuxtImg
-                        src="/img/brands/brand-2.png"
-                        class="h-[25px] sm:h-[45px]"
-                    />
-                    <NuxtImg
-                        src="/img/brands/brand-3.png"
-                        class="h-[25px] sm:h-[45px]"
-                    />
-                    <NuxtImg
-                        src="/img/brands/brand-4.png"
-                        class="h-[25px] sm:h-[45px]"
-                    />
-                    <NuxtImg
-                        src="/img/brands/brand-5.png"
-                        class="h-[25px] sm:h-[45px]"
-                    />
-                    <NuxtImg
-                        src="/img/brands/brand-6.png"
-                        class="h-[25px] sm:h-[45px]"
-                    />
-                    <NuxtImg
-                        src="/img/brands/brand-1.png"
-                        class="h-[25px] sm:h-[45px]"
-                    />
-                    <NuxtImg
-                        src="/img/brands/brand-2.png"
-                        class="h-[25px] sm:h-[45px]"
-                    />
-                    <NuxtImg
-                        src="/img/brands/brand-3.png"
-                        class="h-[25px] sm:h-[45px]"
-                    />
-                    <NuxtImg
-                        src="/img/brands/brand-4.png"
-                        class="h-[25px] sm:h-[45px]"
-                    />
-                    <NuxtImg
-                        src="/img/brands/brand-5.png"
-                        class="h-[25px] sm:h-[45px]"
-                    />
-                    <NuxtImg
-                        src="/img/brands/brand-6.png"
-                        class="h-[25px] sm:h-[45px]"
-                    />
-                </template>
-            </div>
+                </div>
+            </Marquee>
         </div>
     </div>
 </template>
+<!-- <NuxtImg
+src="/img/brands/brand-2.png"
+class="h-[25px] sm:h-[45px]"
+/>
+<NuxtImg
+src="/img/brands/brand-3.png"
+class="h-[25px] sm:h-[45px]"
+/>
+<NuxtImg
+src="/img/brands/brand-4.png"
+class="h-[25px] sm:h-[45px]"
+/>
+<NuxtImg
+src="/img/brands/brand-5.png"
+class="h-[25px] sm:h-[45px]"
+/>
+<NuxtImg
+src="/img/brands/brand-6.png"
+class="h-[25px] sm:h-[45px]"
+/> -->