feat: add Get Involved CTAs to index page

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,83 @@ 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>