From e6d4b34d0bef8236921ed2bbd06e5b1976615c6b Mon Sep 17 00:00:00 2001
From: Jean-Baptiste THERY <jb.thery@jcode.works>
Date: Sun, 5 Jul 2026 18:03:06 +0700
Subject: [PATCH] style(landing): resolve lighthouse accessibility issues

---
 .../src/components/hero-demo.tsx              |  2 +-
 .../src/components/landing-navbar.tsx         | 13 +++----
 .../src/components/ragmir-logo.astro          |  9 ++---
 packages/ragmir-landing/src/pages/404.astro   |  5 ++-
 packages/ragmir-landing/src/pages/500.astro   |  5 ++-
 packages/ragmir-landing/src/styles/global.css | 34 ++++++++++++-------
 6 files changed, 36 insertions(+), 32 deletions(-)

diff --git a/packages/ragmir-landing/src/components/hero-demo.tsx b/packages/ragmir-landing/src/components/hero-demo.tsx
index 648eb91..7ea41ff 100644
--- a/packages/ragmir-landing/src/components/hero-demo.tsx
+++ b/packages/ragmir-landing/src/components/hero-demo.tsx
@@ -282,7 +282,7 @@ export function HeroDemo({ translations }: HeroDemoProps): React.JSX.Element {
                     style={{ fontSize: "0.58rem" }}
                     type="button"
                   >
-                    <span className="text-muted-foreground/70" style={{ fontSize: "0.46rem" }}>
+                    <span className="text-foreground/70" style={{ fontSize: "0.46rem" }}>
                       {String(index + 1).padStart(2, "0")}
                     </span>
                     <Icon aria-hidden="true" className="size-2.5 shrink-0" />
diff --git a/packages/ragmir-landing/src/components/landing-navbar.tsx b/packages/ragmir-landing/src/components/landing-navbar.tsx
index 7d76fa4..82440b3 100644
--- a/packages/ragmir-landing/src/components/landing-navbar.tsx
+++ b/packages/ragmir-landing/src/components/landing-navbar.tsx
@@ -30,14 +30,11 @@ const GITHUB_URL = "https://github.com/jcode-works/jcode-ragmir"
 
 export function RagmirLogo(): React.JSX.Element {
   return (
-    <span className="logo-stack font-black text-2xl text-foreground leading-none tracking-tight md:text-3xl">
-      <span className="logo-index-1">Ragmir</span>
-      <span aria-hidden="true" className="logo-index-2">
-        Ragmir
-      </span>
-      <span aria-hidden="true" className="logo-index-3">
-        Ragmir
-      </span>
+    <span
+      className="logo-stack font-black text-2xl text-foreground leading-none tracking-tight md:text-3xl"
+      data-logo-text="Ragmir"
+    >
+      <span className="logo-index-1 logo-text">Ragmir</span>
     </span>
   )
 }
diff --git a/packages/ragmir-landing/src/components/ragmir-logo.astro b/packages/ragmir-landing/src/components/ragmir-logo.astro
index 74457d1..cea720f 100644
--- a/packages/ragmir-landing/src/components/ragmir-logo.astro
+++ b/packages/ragmir-landing/src/components/ragmir-logo.astro
@@ -2,8 +2,9 @@
 
 ---
 
-<span class="logo-stack font-black text-2xl text-foreground leading-none tracking-tight md:text-3xl">
-  <span class="logo-index-1">Ragmir</span>
-  <span aria-hidden="true" class="logo-index-2">Ragmir</span>
-  <span aria-hidden="true" class="logo-index-3">Ragmir</span>
+<span
+  class="logo-stack font-black text-2xl text-foreground leading-none tracking-tight md:text-3xl"
+  data-logo-text="Ragmir"
+>
+  <span class="logo-index-1 logo-text">Ragmir</span>
 </span>
diff --git a/packages/ragmir-landing/src/pages/404.astro b/packages/ragmir-landing/src/pages/404.astro
index 941ad41..e948680 100644
--- a/packages/ragmir-landing/src/pages/404.astro
+++ b/packages/ragmir-landing/src/pages/404.astro
@@ -25,10 +25,9 @@ const homeUrl = getLocalizedUrl("/", defaultLang)
     <a aria-label="Ragmir" class="flex items-center transition hover:opacity-80" href={homeUrl}>
       <span
         class="logo-stack font-black text-2xl text-foreground leading-none tracking-tight md:text-3xl"
+        data-logo-text="Ragmir"
       >
-        <span class="logo-index-1">Ragmir</span>
-        <span aria-hidden="true" class="logo-index-2">Ragmir</span>
-        <span aria-hidden="true" class="logo-index-3">Ragmir</span>
+        <span class="logo-index-1 logo-text">Ragmir</span>
       </span>
     </a>
 
diff --git a/packages/ragmir-landing/src/pages/500.astro b/packages/ragmir-landing/src/pages/500.astro
index 080747d..e4c59c7 100644
--- a/packages/ragmir-landing/src/pages/500.astro
+++ b/packages/ragmir-landing/src/pages/500.astro
@@ -25,10 +25,9 @@ const homeUrl = getLocalizedUrl("/", defaultLang)
     <a aria-label="Ragmir" class="flex items-center transition hover:opacity-80" href={homeUrl}>
       <span
         class="logo-stack font-black text-2xl text-foreground leading-none tracking-tight md:text-3xl"
+        data-logo-text="Ragmir"
       >
-        <span class="logo-index-1">Ragmir</span>
-        <span aria-hidden="true" class="logo-index-2">Ragmir</span>
-        <span aria-hidden="true" class="logo-index-3">Ragmir</span>
+        <span class="logo-index-1 logo-text">Ragmir</span>
       </span>
     </a>
 
diff --git a/packages/ragmir-landing/src/styles/global.css b/packages/ragmir-landing/src/styles/global.css
index 507fa53..79fd5f2 100644
--- a/packages/ragmir-landing/src/styles/global.css
+++ b/packages/ragmir-landing/src/styles/global.css
@@ -166,7 +166,9 @@ textarea {
   --logo-glitch-b: #22d3ee;
 }
 
-.logo-stack span {
+.logo-stack::before,
+.logo-stack::after,
+.logo-stack .logo-text {
   grid-row-start: 1;
   grid-column-start: 1;
   --stack-height: calc(100% / var(--stacks) - 1px);
@@ -177,28 +179,34 @@ textarea {
   animation: logo-glitch ease infinite 2s alternate-reverse;
 }
 
-.logo-stack span:nth-child(odd) {
-  --glitch-translate: 8px;
+.logo-stack::before,
+.logo-stack::after {
+  content: attr(data-logo-text);
+  pointer-events: none;
 }
 
-.logo-stack span:nth-child(even) {
+.logo-stack::before {
+  --index: 1;
   --glitch-translate: -8px;
 }
 
-.logo-index-1 {
-  --index: 0;
-}
-
-.logo-index-2 {
-  --index: 1;
+.logo-stack::after {
+  --index: 2;
+  --glitch-translate: 8px;
 }
 
-.logo-index-3 {
-  --index: 2;
+.logo-index-1 {
+  --index: 0;
+  --glitch-translate: 8px;
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .logo-stack span {
+  .logo-stack::before,
+  .logo-stack::after {
+    content: none;
+  }
+
+  .logo-stack .logo-text {
     animation: none;
     clip-path: none;
   }