Update brands component

frontend/components/global/Brands.vue

@@ -12,42 +12,55 @@ const {} = toRefs(props);
 </script>
 
 <template>
-    <div class="relative w-full flex flex-col justify-center min-h-[450px] md:h-[80svh]">
+    <div class="relative w-full flex flex-col justify-center min-h-[450px] h-svh">
+        <div class="flex-col-center gap-6 mb-32">
+            <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-lg xl:typo-p-xl">
+                لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و
+                متون بلکه روزنامه و مجله در ستون و سطرآنچنان که
+            </p>
+        </div>
         <div class="-rotate-z-2 z-20">
             <div
-                class="bg-warning-500 flex pr-20 gap-12 sm:gap-20 py-2 w-max animate-marquee-reverse"
+                class="bg-blue-500 flex items-center pr-20 gap-12 sm:gap-20 w-max animate-marquee-reverse h-[140px]"
             >
-                <span
-                    v-for="i in 10"
-                    class="text-[40px] lg:text-[50px] text-white whitespace-nowrap font-semibold"
-                >
-                    TEST {{ i }}
-                </span>
-                <span
-                    v-for="i in 10"
-                    class="text-[40px] lg:text-[50px] text-white whitespace-nowrap font-semibold"
-                >
-                    TEST {{ i }}
-                </span>
+                <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-[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-[45px] invert opacity-85" />
+                </template>
             </div>
         </div>
 
         <div class="rotate-z-2 z-10">
             <div
-                class="bg-slate-50 flex pr-20 gap-12 sm:gap-20 py-2 w-max animate-marquee"
+                class="bg-slate-100/70 flex items-center pr-20 gap-12 sm:gap-20 w-max animate-marquee h-[140px]"
             >
-                <span
-                    v-for="i in 10"
-                    class="text-[40px] lg:text-[50px] text-slate-300 whitespace-nowrap font-semibold"
-                >
-                    TEST {{ i }}
-                </span>
-                <span
-                    v-for="i in 10"
-                    class="text-[40px] lg:text-[50px] text-slate-300 whitespace-nowrap font-semibold"
-                >
-                    TEST {{ i }}
-                </span>
+                <template v-for="i in 1">
+                    <NuxtImg src="/img/brands/brand-1.png" class="h-[45px] grayscale opacity-40" />
+                    <NuxtImg src="/img/brands/brand-2.png" class="h-[45px] grayscale opacity-40" />
+                    <NuxtImg src="/img/brands/brand-3.png" class="h-[45px] grayscale opacity-40" />
+                    <NuxtImg src="/img/brands/brand-4.png" class="h-[45px] grayscale opacity-40" />
+                    <NuxtImg src="/img/brands/brand-5.png" class="h-[45px] grayscale opacity-40" />
+                    <NuxtImg src="/img/brands/brand-6.png" class="h-[45px] grayscale opacity-40" />
+                </template>
+                <template v-for="i in 1">
+                    <NuxtImg src="/img/brands/brand-1.png" class="h-[45px] grayscale opacity-40" />
+                    <NuxtImg src="/img/brands/brand-2.png" class="h-[45px] grayscale opacity-40" />
+                    <NuxtImg src="/img/brands/brand-3.png" class="h-[45px] grayscale opacity-40" />
+                    <NuxtImg src="/img/brands/brand-4.png" class="h-[45px] grayscale opacity-40" />
+                    <NuxtImg src="/img/brands/brand-5.png" class="h-[45px] grayscale opacity-40" />
+                    <NuxtImg src="/img/brands/brand-6.png" class="h-[45px] grayscale opacity-40" />
+                </template>
             </div>
         </div>
     </div>

frontend/pages/index.vue

@@ -15,7 +15,6 @@ const disableLoadingOverlay = useState("disableLoadingOverlay", () => false);
 const response = await suspense();
 
 if (response.isError) {
-    console.log(response);
     throw createError({
         statusCode: 500,
         statusMessage: `Landing error : ${response.error.message}`