Added scrolling text

src/components/sections/HeroSection.astro

@@ -18,6 +18,10 @@ const statusColor =
         yellow: "bg-warning",
         red: "bg-error",
     }[statusColorConfig] || "bg-success";
+
+const rotatingText = (siteConfig.hero as any).rotatingText as
+    | { text: string; className: string }[]
+    | undefined;
 ---
 
 <section class="relative overflow-hidden bg-neutral">
@@ -44,11 +48,32 @@ const statusColor =
 
             <h1
                 class="text-4xl sm:text-5xl lg:text-6xl xl:text-7xl font-extrabold text-white leading-tight tracking-tight mb-6"
-                set:html={siteConfig.hero.mainTitle.replace(
+            >
-                    "Digital Solutions",
+                {
-                    "Digital Solutions<br class='hidden sm:block' />",
+                    siteConfig.hero.mainTitle
-                )}
+                        .split("{rotating}")
-            />
+                        .map((part, index, array) => (
+                            <>
+                                {part}
+                                {index < array.length - 1 && rotatingText && (
+                                    <span class="block w-full my-2">
+                                        <span class="text-rotate">
+                                            <span class="justify-items-center">
+                                                {rotatingText.map((item) => (
+                                                    <span
+                                                        class={item.className}
+                                                    >
+                                                        {item.text}
+                                                    </span>
+                                                ))}
+                                            </span>
+                                        </span>
+                                    </span>
+                                )}
+                            </>
+                        ))
+                }
+            </h1>
 
             <p
                 class="text-lg sm:text-xl text-white/70 max-w-2xl mx-auto mb-10 leading-relaxed"

src/config/site.ts

@@ -40,7 +40,12 @@ export const siteConfig = {
 
   hero: {
     title: "Atash Consulting",
-    mainTitle: "Building Digital Solutions That Drive Growth",
+    mainTitle: "{rotating} That Drive Growth",
+    rotatingText: [
+      { text: "Web Applications", className: "bg-primary text-primary-content px-2" },
+      { text: "Mobile Apps", className: "bg-secondary text-secondary-content px-2" },
+      { text: "IT Strategies", className: "bg-accent text-accent-content px-2" },
+    ],
     description: "Software Consulting based in Edmonton, Alberta",
     cta: "Discuss Your Project",
     secondaryCta: "View Services",

src/styles/global.css

@@ -43,3 +43,8 @@ html {
 body {
     font-family: 'Inter Variable', system-ui, -apple-system, sans-serif;
 }
+
+.text-rotate:hover,
+.text-rotate:hover * {
+    animation-play-state: running !important;
+}