From 2e070e2331a99c3014ec45f2586023a84addb5fd Mon Sep 17 00:00:00 2001
From: ZGaetano <zgaetano@wilddragon.net>
Date: Thu, 30 Apr 2026 21:52:47 -0400
Subject: [PATCH] seo: add sr-only static role text so crawler sees content
 that animated typewriter hides

---
 src/components/Hero.tsx | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
index 70b4d91..17548fb 100755
--- a/src/components/Hero.tsx
+++ b/src/components/Hero.tsx
@@ -53,7 +53,7 @@ export default function Hero() {
       <div className="absolute inset-0">
         <Image
           src="/images/photos/production-switcher.jpg"
-          alt="Production switcher panel"
+          alt="Production switcher panel in a broadcast control room"
           fill
           className="object-cover opacity-20"
           priority
@@ -87,7 +87,7 @@ export default function Hero() {
         >
           <Image
             src="/images/wild-dragon-logo.png"
-            alt="Wild Dragon"
+            alt="Wild Dragon — Zachary Gaetano"
             width={220}
             height={62}
             className="mx-auto logo-silhouette opacity-90"
@@ -95,16 +95,21 @@ export default function Hero() {
           />
         </div>
 
-        {/* Animated role tagline */}
+        {/* Animated role tagline — static version for crawlers */}
         <div
           className={`h-5 mb-10 transition-all duration-1000 delay-150 ease-out ${
             loaded ? "opacity-100 translate-y-0" : "opacity-0 translate-y-6"
           }`}
         >
-          <p className="font-mono text-[10px] tracking-[0.35em] uppercase text-accent/80">
+          {/* Visible animated text */}
+          <p className="font-mono text-[10px] tracking-[0.35em] uppercase text-accent/80" aria-hidden="true">
             {displayText}
             <span className="animate-pulse ml-0.5 text-accent/40">|</span>
           </p>
+          {/* Screen-reader / crawler accessible static version */}
+          <p className="sr-only">
+            {roles.join(" · ")}
+          </p>
         </div>
 
         {/* Name */}
@@ -159,6 +164,7 @@ export default function Hero() {
       {/* Scroll indicator */}
       <a
         href="#clients"
+        aria-label="Scroll to clients"
         className={`absolute bottom-10 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2 transition-all duration-1000 delay-[800ms] ease-out ${
           loaded ? "opacity-100" : "opacity-0"
         }`}