Moved the scrolling text to Vue since it needs some JS and custom

styling not available in Tailwind

src/components/RotatingText.astro

@@ -1,22 +0,0 @@
----
-interface Props {
-    items: {
-        text: string;
-        className: string;
-    }[];
-}
-
-const { items } = Astro.props;
----
-
-<span class="block w-full my-2">
-    <span class="text-rotate">
-        <span class="justify-items-center">
-            {
-                items.map((item) => (
-                    <span class={item.className}>{item.text}</span>
-                ))
-            }
-        </span>
-    </span>
-</span>

src/components/RotatingText.vue

@@ -0,0 +1,33 @@
+<template>
+    <span class="block w-full my-2">
+        <span class="text-rotate">
+            <span class="justify-items-center">
+                <span
+                    v-for="(item, index) in items"
+                    :key="index"
+                    :class="item.className"
+                >
+                    {{ item.text }}
+                </span>
+            </span>
+        </span>
+    </span>
+</template>
+
+<script setup lang="ts">
+interface RotatingTextItem {
+    text: string;
+    className: string;
+}
+
+defineProps<{
+    items: RotatingTextItem[];
+}>();
+</script>
+
+<style scoped>
+.text-rotate:hover,
+.text-rotate:hover * {
+    animation-play-state: running !important;
+}
+</style>

src/components/sections/HeroSection.astro

@@ -2,7 +2,7 @@
 import { siteConfig } from "../../config/site";
 import { Icon } from "astro-icon/components";
 import Section from "../Section.astro";
-import RotatingText from "../RotatingText.astro";
+import RotatingText from "../RotatingText.vue";
 import StatusIndicator from "../StatusIndicator.vue";
 
 const rotatingText = (siteConfig.hero as any).rotatingText as
@@ -28,16 +28,18 @@ const rotatingText = (siteConfig.hero as any).rotatingText as
                 class="text-4xl sm:text-5xl lg:text-6xl xl:text-7xl font-extrabold text-white leading-tight tracking-tight mb-6"
             >
                 {
-                    siteConfig.hero.mainTitle
-                        .split("{rotating}")
-                        .map((part, index, array) => (
-                            <>
-                                {part}
-                                {index < array.length - 1 && rotatingText && (
-                                    <RotatingText items={rotatingText} />
-                                )}
-                            </>
-                        ))
+                    rotatingText ? (
+                        <>
+                            <RotatingText items={rotatingText} />
+                            <span class="block">
+                                {siteConfig.hero.mainTitle
+                                    .replace("{rotating}", "")
+                                    .trim()}
+                            </span>
+                        </>
+                    ) : (
+                        siteConfig.hero.mainTitle
+                    )
                 }
             </h1>
 

src/styles/global.css

@@ -43,8 +43,3 @@ html {
 body {
     font-family: "Roboto Slab Variable", serif;
 }
-
-.text-rotate:hover,
-.text-rotate:hover * {
-    animation-play-state: running !important;
-}