feat: reorganize footer links into product/legal/community columns (#1364)

Author: thegreatalxx

app/components/AppFooter.vue

@@ -20,27 +20,17 @@ const closeModal = () => modalRef.value?.close?.()
           </p>
           <BuildEnvironment v-if="!isHome" footer />
         </div>
-        <!-- Desktop: Show all links. Mobile: Links are in MobileMenu -->
-        <div class="hidden sm:flex flex-col lg:items-end gap-3 min-h-11 text-xs">
-          <div class="flex items-center gap-5">
-            <LinkBase :to="{ name: 'about' }">
-              {{ $t('footer.about') }}
-            </LinkBase>
-            <LinkBase :to="{ name: 'blog' }">
-              {{ $t('footer.blog') }}
-            </LinkBase>
-            <LinkBase :to="{ name: 'privacy' }">
-              {{ $t('privacy_policy.title') }}
-            </LinkBase>
-            <LinkBase :to="{ name: 'accessibility' }">
-              {{ $t('a11y.footer_title') }}
-            </LinkBase>
-            <LinkBase :to="{ name: 'translation-status' }">
-              {{ $t('translation_status.title') }}
-            </LinkBase>
+        <!-- Desktop: Show all links in columns. Mobile: Links are in MobileMenu -->
+        <div class="hidden sm:grid sm:grid-cols-2 lg:grid-cols-3 gap-x-10 gap-y-1 min-h-11 text-xs">
+          <!-- Column 1: Product -->
+          <div class="flex flex-col gap-1">
+            <span class="text-fg-subtle uppercase tracking-wider text-2xs mb-1">{{ $t('footer.product') }}</span>
+            <LinkBase :to="{ name: 'about' }">{{ $t('footer.about') }}</LinkBase>
+            <LinkBase :to="{ name: 'blog' }">{{ $t('footer.blog') }}</LinkBase>
+            <LinkBase :to="NPMX_DOCS_SITE">{{ $t('footer.docs') }}</LinkBase>
             <button
               type="button"
-              class="cursor-pointer group inline-flex gap-x-1 items-center justify-center underline-offset-[0.2rem] underline decoration-1 decoration-fg/30 font-mono text-fg hover:(decoration-accent text-accent) focus-visible:(decoration-accent text-accent) transition-colors duration-200"
+              class="text-start cursor-pointer inline-flex gap-x-1 items-center underline-offset-[0.2rem] underline decoration-1 decoration-fg/30 font-mono text-fg hover:(decoration-accent text-accent) focus-visible:(decoration-accent text-accent) transition-colors duration-200"
               @click.prevent="showModal"
               aria-haspopup="dialog"
             >
@@ -126,19 +116,21 @@ const closeModal = () => modalRef.value?.close?.()
               </p>
             </Modal>
           </div>
-          <div class="flex items-center gap-5">
-            <LinkBase :to="NPMX_DOCS_SITE">
-              {{ $t('footer.docs') }}
-            </LinkBase>
-            <LinkBase to="https://repo.npmx.dev">
-              {{ $t('footer.source') }}
-            </LinkBase>
-            <LinkBase to="https://social.npmx.dev">
-              {{ $t('footer.social') }}
-            </LinkBase>
-            <LinkBase :to="discord.url">
-              {{ discord.label }}
-            </LinkBase>
+
+          <!-- Column 2: Legal & Info -->
+          <div class="flex flex-col gap-1">
+            <span class="text-fg-subtle uppercase tracking-wider text-2xs mb-1">{{ $t('footer.legal') }}</span>
+            <LinkBase :to="{ name: 'privacy' }">{{ $t('privacy_policy.title') }}</LinkBase>
+            <LinkBase :to="{ name: 'accessibility' }">{{ $t('a11y.footer_title') }}</LinkBase>
+            <LinkBase :to="{ name: 'translation-status' }">{{ $t('translation_status.title') }}</LinkBase>
+          </div>
+
+          <!-- Column 3: Community -->
+          <div class="flex flex-col gap-1">
+            <span class="text-fg-subtle uppercase tracking-wider text-2xs mb-1">{{ $t('footer.community') }}</span>
+            <LinkBase to="https://repo.npmx.dev">{{ $t('footer.source') }}</LinkBase>
+            <LinkBase to="https://social.npmx.dev">{{ $t('footer.social') }}</LinkBase>
+            <LinkBase :to="discord.url">{{ discord.label }}</LinkBase>
           </div>
         </div>
       </div>