fill most content + improve ux

src/components/Marquee.astro

@@ -1,12 +1,23 @@
 ---
+import { Image } from 'astro:assets'
+import wideCrossIconSrc from '@/assets/icons/WideCrossIcon.svg'
+
 type Props = {
   texts: string[]
 }
 
 const { texts } = Astro.props
-const repeatedTexts = texts.length < 10 ? Array.from({ length: 10 / texts.length }, () => texts).flat() : texts;
+const repeatedTexts =
+  texts.length < 10 ? Array.from({ length: 10 / texts.length }, () => texts).flat() : texts
 ---
 
 <div class="flex h-full w-max animate-marquee items-center gap-10 text-5xl font-bold uppercase">
-  {repeatedTexts.map((text) => <h2>{text}</h2>)}
+  {
+    repeatedTexts.map((text) => (
+      <>
+        <h2>{text}</h2>
+        <Image src={wideCrossIconSrc} alt="cross-icon" />
+      </>
+    ))
+  }
 </div>