feat: change max width for, add three rows for stream marquee and change streamers card style

Author: haxgun

frontend/src/components/HomePage/Streamers.vue

@@ -16,7 +16,7 @@ import StreamersMarquee from '@/components/HomePage/StreamersMarquee.vue'
       <span class="whitespace-pre-line text-center text-base font-normal text-[#CECECE]">
         {{ $t('streamers.subtitle') }}
       </span>
-      <div class="container">
+      <div class="max-w-[98dvw]">
         <StreamersMarquee />
       </div>
     </div>

frontend/src/components/HomePage/StreamersMarquee.vue

@@ -3,11 +3,14 @@ import { STREAMERS_DATA } from '@/data/Streamers.data'
 import Marquee from '@/components/ui/Marquee.vue'
 import StreamersCard from '@/components/ui/StreamersCard.vue'
 
-const middleIndex = Math.floor(STREAMERS_DATA.length / 2)
-const [firstRow, secondRow] = [
+const middleIndex = Math.floor(STREAMERS_DATA.length / 3)
+
+const [firstRow, secondRow, thirdRow] = [
   STREAMERS_DATA.slice(0, middleIndex),
-  STREAMERS_DATA.slice(middleIndex),
-]
+  STREAMERS_DATA.slice(middleIndex, 2 * middleIndex),
+  STREAMERS_DATA.slice(2 * middleIndex)
+];
+
 </script>
 
 <template>
@@ -16,6 +19,7 @@ const [firstRow, secondRow] = [
   >
     <Marquee pause-on-hover class="[--duration:180s]">
       <StreamersCard
+        v-memo="[streamer]"
         v-for="streamer in firstRow"
         :key="streamer.username"
         :img="streamer.img"
@@ -27,6 +31,7 @@ const [firstRow, secondRow] = [
     </Marquee>
     <Marquee reverse pause-on-hover class="[--duration:180s]">
       <StreamersCard
+        v-memo="[streamer]"
         v-for="streamer in secondRow"
         :key="streamer.username"
         :img="streamer.img"
@@ -36,6 +41,18 @@ const [firstRow, secondRow] = [
         :verified="streamer.verified"
       />
     </Marquee>
+    <Marquee pause-on-hover class="[--duration:180s]">
+      <StreamersCard
+        v-memo="[streamer]"
+        v-for="streamer in thirdRow"
+        :key="streamer.username"
+        :img="streamer.img"
+        :username="streamer.username"
+        :followers="streamer.followers"
+        :live="streamer.live"
+        :verified="streamer.verified"
+      />
+    </Marquee>
     <div
       class="pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-r from-white dark:from-background"
     ></div>

frontend/src/components/ui/StreamersCard.vue

@@ -16,7 +16,7 @@ defineProps<Props>()
 <template>
   <figure
     @click="openLink(`https://twitch.tv/${username}`)"
-    class="relative w-64 cursor-pointer overflow-hidden rounded-xl border border-gray-950/[.1] bg-gray-950/[.01] p-4 hover:bg-gray-950/[.05] dark:border-gray-50/[.1] dark:bg-gray-50/[.10] dark:hover:bg-gray-50/[.15]"
+    class="relative w-64 cursor-pointer overflow-hidden rounded-xl border border-transparent bg-[#0F0F0F] p-4 hover:bg-white/10 transition-colors"
   >
     <div class="flex flex-row items-center gap-2">
       <div class="relative h-fit">