From ecfc163255b83fcc9e2ba8d975d898b353021fe1 Mon Sep 17 00:00:00 2001
From: Atridad Lahiji <me@atri.dad>
Date: Mon, 22 Dec 2025 15:10:17 -0700
Subject: [PATCH] Added scrolling text

---
 src/components/sections/HeroSection.astro | 35 +++++++++++++++++++----
 src/config/site.ts                        |  7 ++++-
 src/styles/global.css                     |  5 ++++
 3 files changed, 41 insertions(+), 6 deletions(-)

diff --git a/src/components/sections/HeroSection.astro b/src/components/sections/HeroSection.astro
index 8c5cb78..3d24344 100644
--- a/src/components/sections/HeroSection.astro
+++ b/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"
diff --git a/src/config/site.ts b/src/config/site.ts
index f366efb..e897ac0 100644
--- a/src/config/site.ts
+++ b/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",
diff --git a/src/styles/global.css b/src/styles/global.css
index 42199f8..7256588 100644
--- a/src/styles/global.css
+++ b/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;
+}