From a264d0ff484e56c7c15427d2975ce11f239e0b21 Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Mon, 21 Apr 2025 23:29:11 +0330
Subject: [PATCH] fixed brands height

---
 frontend/components/global/Brands.vue | 136 ++++++++++++++++++++------
 1 file changed, 106 insertions(+), 30 deletions(-)

diff --git a/frontend/components/global/Brands.vue b/frontend/components/global/Brands.vue
index 569db9a..370b2d5 100644
--- a/frontend/components/global/Brands.vue
+++ b/frontend/components/global/Brands.vue
@@ -12,11 +12,9 @@ const {} = toRefs(props);
 </script>
 
 <template>
-    <div class="relative w-full flex flex-col justify-center min-h-[450px] h-svh">
+    <div class="relative w-full flex flex-col justify-center py-32 lg:py-48">
         <div class="flex-col-center gap-6 mb-24 sm:mb-32 container">
-            <span class="typo-h-6 max-sm:text-xl md:typo-h-5 lg:typo-h-4 text-black">
-                مجله در ستون و سطرآنچ
-            </span>
+            <span class="typo-h-6 max-sm:text-xl md:typo-h-5 lg:typo-h-4 text-black"> مجله در ستون و سطرآنچ </span>
             <p class="text-slate-500 text-center max-w-[750px] typo-p-sm md:typo-p-lg xl:typo-p-xl">
                 لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و
                 متون بلکه روزنامه و مجله در ستون و سطرآنچنان که
@@ -30,13 +28,19 @@ const {} = toRefs(props);
                     <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" />
+                    <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" />
+                    <NuxtImg
+                        src="/img/heymlz/heymlz-logo.png"
+                        class="h-[25px] sm:h-[45px] invert opacity-85"
+                    />
                 </template>
             </div>
         </div>
@@ -46,32 +50,104 @@ const {} = toRefs(props);
                 class="bg-slate-100/70 flex items-center pr-20 gap-12 sm:gap-20 w-max animate-marquee h-[90px] sm:h-[140px]"
             >
                 <template v-for="i in 1">
-                    <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]" />
-                    <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]" />
+                    <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]"
+                    />
+                    <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>
                 <template v-for="i in 1">
-                    <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]" />
-                    <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]" />
+                    <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]"
+                    />
+                    <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>