From 487619dd0502ee115b35e6b8242f9031656d0eaa Mon Sep 17 00:00:00 2001
From: Ubuntu <ubuntu@ip-172-31-16-130.us-west-2.compute.internal>
Date: Sun, 1 Feb 2026 00:46:59 +0000
Subject: [PATCH 1/2] feat: add Get Involved CTAs to index page

Adds the Get Involved section (Contribute, Community, Follow) from the
about page to the landing/search page as requested in issue #586.

This gives new visitors immediate visibility into how they can
participate in the project.

Closes #586
---
 app/pages/index.vue | 96 ++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 95 insertions(+), 1 deletion(-)

diff --git a/app/pages/index.vue b/app/pages/index.vue
index 375d47738..5fc629a1a 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,6 +1,12 @@
 <script setup lang="ts">
 import { debounce } from 'perfect-debounce'
 
+const socialLinks = {
+  github: 'https://repo.npmx.dev',
+  discord: 'https://chat.npmx.dev',
+  bluesky: 'https://social.npmx.dev',
+}
+
 const searchQuery = shallowRef('')
 const searchInputRef = useTemplateRef('searchInputRef')
 const { focused: isSearchFocused } = useFocus(searchInputRef)
@@ -115,7 +121,7 @@ defineOgImageComponent('Default', {
     <!-- Popular packages -->
     <nav
       :aria-label="$t('nav.popular_packages')"
-      class="pt-4 pb-36 sm:pb-40 text-center motion-safe:animate-fade-in motion-safe:animate-fill-both"
+      class="pt-4 pb-12 text-center motion-safe:animate-fade-in motion-safe:animate-fill-both"
       style="animation-delay: 0.3s"
     >
       <ul class="flex flex-wrap items-center justify-center gap-x-6 gap-y-3 list-none m-0 p-0">
@@ -135,5 +141,93 @@ defineOgImageComponent('Default', {
         </li>
       </ul>
     </nav>
+
+    <!-- Get Involved CTAs -->
+    <section
+      class="pb-24 sm:pb-32 motion-safe:animate-fade-in motion-safe:animate-fill-both"
+      style="animation-delay: 0.4s"
+    >
+      <h2 class="text-xs text-fg-subtle uppercase tracking-wider mb-6 text-center">
+        {{ $t('about.get_involved.title') }}
+      </h2>
+
+      <div class="grid gap-4 sm:grid-cols-3 max-w-3xl mx-auto">
+        <!-- Contribute CTA -->
+        <a
+          :href="socialLinks.github"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="group flex flex-col gap-3 p-4 rounded-lg bg-bg-subtle hover:bg-bg-elevated border border-border hover:border-border-hover transition-all duration-200"
+        >
+          <div class="flex gap-2">
+            <span
+              class="i-carbon:logo-github shrink-0 mt-1 w-5 h-5 text-fg"
+              aria-hidden="true"
+            />
+            <span class="font-medium text-fg">{{
+              $t('about.get_involved.contribute.title')
+            }}</span>
+          </div>
+          <p class="text-sm text-fg-muted leading-relaxed">
+            {{ $t('about.get_involved.contribute.description') }}
+          </p>
+          <span
+            class="text-sm text-fg-muted group-hover:text-fg inline-flex items-center gap-1 mt-auto"
+          >
+            {{ $t('about.get_involved.contribute.cta') }}
+            <span class="i-carbon:arrow-right rtl-flip w-3 h-3" aria-hidden="true" />
+          </span>
+        </a>
+
+        <!-- Community CTA -->
+        <a
+          :href="socialLinks.discord"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="group flex flex-col gap-3 p-4 rounded-lg bg-bg-subtle hover:bg-bg-elevated border border-border hover:border-border-hover transition-all duration-200"
+        >
+          <div class="flex gap-2">
+            <span class="i-carbon:chat shrink-0 mt-1 w-5 h-5 text-fg" aria-hidden="true" />
+            <span class="font-medium text-fg">{{
+              $t('about.get_involved.community.title')
+            }}</span>
+          </div>
+          <p class="text-sm text-fg-muted leading-relaxed">
+            {{ $t('about.get_involved.community.description') }}
+          </p>
+          <span
+            class="text-sm text-fg-muted group-hover:text-fg inline-flex items-center gap-1 mt-auto"
+          >
+            {{ $t('about.get_involved.community.cta') }}
+            <span class="i-carbon:arrow-right rtl-flip w-3 h-3" aria-hidden="true" />
+          </span>
+        </a>
+
+        <!-- Follow CTA -->
+        <a
+          :href="socialLinks.bluesky"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="group flex flex-col gap-3 p-4 rounded-lg bg-bg-subtle hover:bg-bg-elevated border border-border hover:border-border-hover transition-all duration-200"
+        >
+          <div class="flex gap-2">
+            <span
+              class="i-simple-icons:bluesky shrink-0 mt-1 w-5 h-5 text-fg"
+              aria-hidden="true"
+            />
+            <span class="font-medium text-fg">{{ $t('about.get_involved.follow.title') }}</span>
+          </div>
+          <p class="text-sm text-fg-muted leading-relaxed">
+            {{ $t('about.get_involved.follow.description') }}
+          </p>
+          <span
+            class="text-sm text-fg-muted group-hover:text-fg inline-flex items-center gap-1 mt-auto"
+          >
+            {{ $t('about.get_involved.follow.cta') }}
+            <span class="i-carbon:arrow-right rtl-flip w-3 h-3" aria-hidden="true" />
+          </span>
+        </a>
+      </div>
+    </section>
   </main>
 </template>

From a0bb079147261dca69a0c765757558d43d4a08ec Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Sun, 1 Feb 2026 00:50:12 +0000
Subject: [PATCH 2/2] [autofix.ci] apply automated fixes

---
 app/pages/index.vue | 18 ++++--------------
 1 file changed, 4 insertions(+), 14 deletions(-)

diff --git a/app/pages/index.vue b/app/pages/index.vue
index 5fc629a1a..f82480dc3 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -160,13 +160,8 @@ defineOgImageComponent('Default', {
           class="group flex flex-col gap-3 p-4 rounded-lg bg-bg-subtle hover:bg-bg-elevated border border-border hover:border-border-hover transition-all duration-200"
         >
           <div class="flex gap-2">
-            <span
-              class="i-carbon:logo-github shrink-0 mt-1 w-5 h-5 text-fg"
-              aria-hidden="true"
-            />
-            <span class="font-medium text-fg">{{
-              $t('about.get_involved.contribute.title')
-            }}</span>
+            <span class="i-carbon:logo-github shrink-0 mt-1 w-5 h-5 text-fg" aria-hidden="true" />
+            <span class="font-medium text-fg">{{ $t('about.get_involved.contribute.title') }}</span>
           </div>
           <p class="text-sm text-fg-muted leading-relaxed">
             {{ $t('about.get_involved.contribute.description') }}
@@ -188,9 +183,7 @@ defineOgImageComponent('Default', {
         >
           <div class="flex gap-2">
             <span class="i-carbon:chat shrink-0 mt-1 w-5 h-5 text-fg" aria-hidden="true" />
-            <span class="font-medium text-fg">{{
-              $t('about.get_involved.community.title')
-            }}</span>
+            <span class="font-medium text-fg">{{ $t('about.get_involved.community.title') }}</span>
           </div>
           <p class="text-sm text-fg-muted leading-relaxed">
             {{ $t('about.get_involved.community.description') }}
@@ -211,10 +204,7 @@ defineOgImageComponent('Default', {
           class="group flex flex-col gap-3 p-4 rounded-lg bg-bg-subtle hover:bg-bg-elevated border border-border hover:border-border-hover transition-all duration-200"
         >
           <div class="flex gap-2">
-            <span
-              class="i-simple-icons:bluesky shrink-0 mt-1 w-5 h-5 text-fg"
-              aria-hidden="true"
-            />
+            <span class="i-simple-icons:bluesky shrink-0 mt-1 w-5 h-5 text-fg" aria-hidden="true" />
             <span class="font-medium text-fg">{{ $t('about.get_involved.follow.title') }}</span>
           </div>
           <p class="text-sm text-fg-muted leading-relaxed">