feat: update env string ui

Author: alexdln

app/components/AppHeader.vue

@@ -213,14 +213,16 @@ onKeyStroke(
           :to="{ name: 'index' }"
           :aria-label="$t('header.home')"
           dir="ltr"
-          class="inline-flex items-center gap-1 header-logo font-mono text-lg font-medium text-fg hover:text-fg/90 transition-colors duration-200 rounded"
+          class="relative inline-flex items-center gap-1 header-logo font-mono text-lg font-medium text-fg hover:text-fg/90 transition-colors duration-200 rounded"
         >
-          <AppLogo class="w-8 h-8 rounded-lg" />
-          <span>npmx</span>
-          <sup class="text-sm ms--1.5 italic text-fg-muted">
-            <!-- TODO: improve styling and show 'alpha' until March 3 annoucement -->
-            {{ env === 'release' ? '' : env }}
-          </sup>
+          <AppLogo class="w-7 h-7 rounded-lg" />
+          <span class="pb-0.5">npmx</span>
+          <span
+            aria-hidden="true"
+            class="scale-35 transform-origin-br font-mono tracking-wide text-accent absolute bottom-0.5 -force-right-1"
+          >
+            {{ env === 'release' ? 'alpha' : env }}
+          </span>
         </NuxtLink>
       </div>
       <!-- Spacer when logo is hidden on desktop -->

app/pages/index.vue

@@ -34,16 +34,18 @@ defineOgImageComponent('Default', {
       >
         <h1
           dir="ltr"
-          class="flex items-center justify-center gap-2 header-logo font-mono text-5xl sm:text-7xl md:text-8xl font-medium tracking-tight mb-2 motion-safe:animate-fade-in motion-safe:animate-fill-both"
+          class="relative flex items-center justify-center gap-2 header-logo font-mono text-5xl sm:text-7xl md:text-8xl font-medium tracking-tight mb-2 motion-safe:animate-fade-in motion-safe:animate-fill-both"
         >
           <AppLogo
             class="w-12 h-12 -ms-3 sm:w-20 sm:h-20 sm:-ms-5 md:w-24 md:h-24 md:-ms-6 rounded-2xl sm:rounded-3xl"
           />
           <span class="pb-4">npmx</span>
-          <sup class="text-3xl italic text-fg-muted">
-            <!-- TODO: improve styling and show 'alpha' until March 3 annoucement -->
-            {{ env === 'release' ? '' : env }}
-          </sup>
+          <span
+            aria-hidden="true"
+            class="scale-15 transform-origin-br font-mono tracking-widest text-accent absolute bottom-3 -force-right-1.5"
+          >
+            {{ env === 'release' ? 'alpha' : env }}
+          </span>
         </h1>
 
         <p