chore: consistent back button across pages (#936)

Author: iiio2

app/pages/about.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+const router = useRouter()
+
 interface GitHubContributor {
   login: string
   id: number
@@ -39,7 +41,19 @@ const { data: contributors, status: contributorsStatus } = useFetch<GitHubContri
   <main class="container flex-1 py-12 sm:py-16">
     <article class="max-w-2xl mx-auto">
       <header class="mb-12">
-        <h1 class="font-mono text-3xl sm:text-4xl font-medium mb-4">{{ $t('about.heading') }}</h1>
+        <div class="flex items-baseline justify-between gap-4 mb-4">
+          <h1 class="font-mono text-3xl sm:text-4xl font-medium">
+            {{ $t('about.heading') }}
+          </h1>
+          <button
+            type="button"
+            class="inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0"
+            @click="router.back()"
+          >
+            <span class="i-carbon:arrow-left rtl-flip w-4 h-4" aria-hidden="true" />
+            <span class="hidden sm:inline">{{ $t('nav.back') }}</span>
+          </button>
+        </div>
         <p class="text-fg-muted text-lg">
           {{ $t('tagline') }}
         </p>
@@ -215,16 +229,6 @@ const { data: contributors, status: contributorsStatus } = useFetch<GitHubContri
 
         <CallToAction />
       </section>
-
-      <footer class="mt-16 pt-8 border-t border-border">
-        <NuxtLink
-          to="/"
-          class="inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-[color] duration-200 rounded focus-visible:outline-accent/70"
-        >
-          <span class="i-carbon:arrow-left rtl-flip w-4 h-4" aria-hidden="true" />
-          {{ $t('about.back_home') }}
-        </NuxtLink>
-      </footer>
     </article>
   </main>
 </template>

app/pages/compare.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { useRouteQuery } from '@vueuse/router'
 
+const router = useRouter()
+
 definePageMeta({
   name: 'compare',
 })
@@ -61,9 +63,19 @@ useSeoMeta({
   <main class="container flex-1 py-12 sm:py-16 w-full">
     <div class="max-w-2xl mx-auto">
       <header class="mb-12">
-        <h1 class="font-mono text-3xl sm:text-4xl font-medium mb-4">
-          {{ $t('compare.packages.title') }}
-        </h1>
+        <div class="flex items-baseline justify-between gap-4 mb-4">
+          <h1 class="font-mono text-3xl sm:text-4xl font-medium">
+            {{ $t('compare.packages.title') }}
+          </h1>
+          <button
+            type="button"
+            class="inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0"
+            @click="router.back()"
+          >
+            <span class="i-carbon:arrow-left rtl-flip w-4 h-4" aria-hidden="true" />
+            <span class="hidden sm:inline">{{ $t('nav.back') }}</span>
+          </button>
+        </div>
         <p class="text-fg-muted text-lg">
           {{ $t('compare.packages.tagline') }}
         </p>