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

styling not available in Tailwind

package.json

@@ -9,14 +9,15 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/node": "^9.5.2",
+    "@astrojs/node": "10.0.0-beta.0",
-    "@astrojs/vue": "^5.1.4",
+    "@astrojs/vue": "6.0.0-beta.0",
     "@fontsource-variable/inter": "^5.2.8",
     "@fontsource-variable/roboto-slab": "^5.2.8",
     "@heroicons/vue": "^2.2.0",
     "@tailwindcss/vite": "^4.1.18",
-    "astro": "^5.17.1",
+    "astro": "6.0.0-beta.6",
     "astro-icon": "^1.1.5",
+    "motion-v": "^1.10.2",
     "nodemailer": "^7.0.13",
     "tailwindcss": "^4.1.18",
     "vue": "^3.5.27"

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
+                    rotatingText ? (
-                        .split("{rotating}")
+                        <>
-                        .map((part, index, array) => (
+                            <RotatingText items={rotatingText} />
-                            <>
+                            <span class="block">
-                                {part}
+                                {siteConfig.hero.mainTitle
-                                {index < array.length - 1 && rotatingText && (
+                                    .replace("{rotating}", "")
-                                    <RotatingText items={rotatingText} />
+                                    .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;
-}