From 7b186a7b9f730242febc0f489591853f21e22e87 Mon Sep 17 00:00:00 2001
From: Felix Schneider <99918022+trueberryless@users.noreply.github.com>
Date: Sun, 1 Feb 2026 21:31:26 +0100
Subject: [PATCH 1/3] feat: add CTAs to landing page

---
 app/components/CallToAction.vue |  86 +++++++++++++++
 app/pages/about.vue             |  91 +---------------
 app/pages/index.vue             | 183 ++++++++++++++++----------------
 3 files changed, 179 insertions(+), 181 deletions(-)
 create mode 100644 app/components/CallToAction.vue

diff --git a/app/components/CallToAction.vue b/app/components/CallToAction.vue
new file mode 100644
index 000000000..77fe0d9cf
--- /dev/null
+++ b/app/components/CallToAction.vue
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+const socialLinks = {
+  github: 'https://repo.npmx.dev',
+  discord: 'https://chat.npmx.dev',
+  bluesky: 'https://social.npmx.dev',
+}
+</script>
+
+<template>
+  <div>
+    <h2 class="text-lg text-fg-subtle uppercase tracking-wider mb-6">
+      {{ $t('about.get_involved.title') }}
+    </h2>
+
+    <div class="grid gap-4 sm:grid-cols-3">
+      <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>
+
+      <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>
+
+      <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>
+  </div>
+</template>
diff --git a/app/pages/about.vue b/app/pages/about.vue
index 2ad67237c..b5cce2fa9 100644
--- a/app/pages/about.vue
+++ b/app/pages/about.vue
@@ -27,12 +27,6 @@ const pmLinks = {
   vlt: 'https://www.vlt.sh/',
 }
 
-const socialLinks = {
-  github: 'https://repo.npmx.dev',
-  discord: 'https://chat.npmx.dev',
-  bluesky: 'https://social.npmx.dev',
-}
-
 const { data: contributors, status: contributorsStatus } = useFetch<GitHubContributor[]>(
   '/api/contributors',
   {
@@ -210,90 +204,7 @@ const { data: contributors, status: contributorsStatus } = useFetch<GitHubContri
           </div>
         </div>
 
-        <!-- Get Involved CTAs -->
-        <div>
-          <h2 class="text-lg text-fg-subtle uppercase tracking-wider mb-6">
-            {{ $t('about.get_involved.title') }}
-          </h2>
-
-          <div class="grid gap-4 sm:grid-cols-3">
-            <!-- 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>
-        </div>
+        <CallToAction />
       </section>
 
       <footer class="mt-16 pt-8 border-t border-border">
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 375d47738..ac784faab 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -34,106 +34,107 @@ defineOgImageComponent('Default', {
 </script>
 
 <template>
-  <main class="container min-h-screen flex flex-col">
-    <!-- Hero section with vertical centering -->
-    <header class="flex-1 flex flex-col items-center justify-center text-center py-20">
-      <!-- Animated title -->
-      <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-4 motion-safe:animate-fade-in motion-safe:animate-fill-both"
-      >
-        <img
-          aria-hidden="true"
-          :alt="$t('alt_logo')"
-          src="/logo.svg"
-          width="48"
-          height="48"
-          class="w-12 h-12 sm:w-20 sm:h-20 md:w-24 md:h-24 rounded-2xl sm:rounded-3xl"
-        />
-        <span class="pb-4">npmx</span>
-      </h1>
+  <main>
+    <section class="container min-h-screen flex flex-col">
+      <header class="flex-1 flex flex-col items-center justify-center text-center py-20">
+        <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-4 motion-safe:animate-fade-in motion-safe:animate-fill-both"
+        >
+          <img
+            aria-hidden="true"
+            :alt="$t('alt_logo')"
+            src="/logo.svg"
+            width="48"
+            height="48"
+            class="w-12 h-12 sm:w-20 sm:h-20 md:w-24 md:h-24 rounded-2xl sm:rounded-3xl"
+          />
+          <span class="pb-4">npmx</span>
+        </h1>
 
-      <p
-        class="text-fg-muted text-lg sm:text-xl max-w-md mb-12 motion-safe:animate-slide-up motion-safe:animate-fill-both"
-        style="animation-delay: 0.1s"
-      >
-        {{ $t('tagline') }}
-      </p>
+        <p
+          class="text-fg-muted text-lg sm:text-xl max-w-md mb-12 motion-safe:animate-slide-up motion-safe:animate-fill-both"
+          style="animation-delay: 0.1s"
+        >
+          {{ $t('tagline') }}
+        </p>
 
-      <!-- Search form with micro-interactions -->
-      <search
-        class="w-full max-w-xl motion-safe:animate-slide-up motion-safe:animate-fill-both"
-        style="animation-delay: 0.2s"
-      >
-        <form method="GET" action="/search" class="relative" @submit.prevent.trim="search">
-          <label for="home-search" class="sr-only">
-            {{ $t('search.label') }}
-          </label>
+        <search
+          class="w-full max-w-xl motion-safe:animate-slide-up motion-safe:animate-fill-both"
+          style="animation-delay: 0.2s"
+        >
+          <form method="GET" action="/search" class="relative" @submit.prevent.trim="search">
+            <label for="home-search" class="sr-only">
+              {{ $t('search.label') }}
+            </label>
 
-          <!-- Search input with glow effect on focus -->
-          <div class="relative group" :class="{ 'is-focused': isSearchFocused }">
-            <!-- Subtle glow effect -->
-            <div
-              class="absolute -inset-px rounded-lg bg-gradient-to-r from-fg/0 via-fg/5 to-fg/0 opacity-0 transition-opacity duration-500 blur-sm group-[.is-focused]:opacity-100"
-            />
+            <div class="relative group" :class="{ 'is-focused': isSearchFocused }">
+              <div
+                class="absolute -inset-px rounded-lg bg-gradient-to-r from-fg/0 via-fg/5 to-fg/0 opacity-0 transition-opacity duration-500 blur-sm group-[.is-focused]:opacity-100"
+              />
 
-            <div class="search-box relative flex items-center">
-              <span
-                class="absolute inset-is-4 text-fg-subtle font-mono text-sm pointer-events-none transition-colors duration-200 group-focus-within:text-accent z-1"
-              >
-                /
-              </span>
+              <div class="search-box relative flex items-center">
+                <span
+                  class="absolute inset-is-4 text-fg-subtle font-mono text-sm pointer-events-none transition-colors duration-200 group-focus-within:text-accent z-1"
+                >
+                  /
+                </span>
 
-              <input
-                id="home-search"
-                ref="searchInputRef"
-                v-model="searchQuery"
-                type="search"
-                name="q"
-                autofocus
-                :placeholder="$t('search.placeholder')"
-                v-bind="noCorrect"
-                class="w-full bg-bg-subtle border border-border rounded-lg ps-8 pe-24 py-4 font-mono text-base text-fg placeholder:text-fg-subtle transition-border-color duration-300 focus:border-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
-                @input="handleInput"
-              />
+                <input
+                  id="home-search"
+                  ref="searchInputRef"
+                  v-model="searchQuery"
+                  type="search"
+                  name="q"
+                  autofocus
+                  :placeholder="$t('search.placeholder')"
+                  v-bind="noCorrect"
+                  class="w-full bg-bg-subtle border border-border rounded-lg ps-8 pe-24 py-4 font-mono text-base text-fg placeholder:text-fg-subtle transition-border-color duration-300 focus:border-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+                  @input="handleInput"
+                />
 
-              <button
-                type="submit"
-                class="absolute inset-ie-2 px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-[background-color,transform] duration-200 hover:bg-fg/90 active:scale-95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
-              >
-                {{ $t('search.button') }}
-              </button>
+                <button
+                  type="submit"
+                  class="absolute inset-ie-2 px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md transition-[background-color,transform] duration-200 hover:bg-fg/90 active:scale-95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+                >
+                  {{ $t('search.button') }}
+                </button>
+              </div>
             </div>
-          </div>
-        </form>
-      </search>
+          </form>
+        </search>
 
-      <!-- Build info badge -->
-      <BuildEnvironment class="mt-4" />
-    </header>
+        <BuildEnvironment class="mt-4" />
+      </header>
 
-    <!-- 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"
-      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">
-        <li
-          v-for="pkg in ['nuxt', 'vue', 'react', 'svelte', 'vite', 'next', 'astro', 'typescript']"
-          :key="pkg"
-        >
-          <NuxtLink
-            :to="{ name: 'package', params: { package: [pkg] } }"
-            class="link-subtle font-mono text-sm inline-flex items-center gap-2 group"
+      <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"
+        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">
+          <li
+            v-for="pkg in ['nuxt', 'vue', 'react', 'svelte', 'vite', 'next', 'astro', 'typescript']"
+            :key="pkg"
           >
-            <span
-              class="w-1 h-1 rounded-full bg-accent group-hover:bg-fg transition-colors duration-200"
-            />
-            {{ pkg }}
-          </NuxtLink>
-        </li>
-      </ul>
-    </nav>
+            <NuxtLink
+              :to="{ name: 'package', params: { package: [pkg] } }"
+              class="link-subtle font-mono text-sm inline-flex items-center gap-2 group"
+            >
+              <span
+                class="w-1 h-1 rounded-full bg-accent group-hover:bg-fg transition-colors duration-200"
+              />
+              {{ pkg }}
+            </NuxtLink>
+          </li>
+        </ul>
+      </nav>
+    </section>
+
+    <section class="border-t border-border py-24 bg-bg-subtle/10">
+      <div class="container max-w-2xl mx-auto">
+        <CallToAction />
+      </div>
+    </section>
   </main>
 </template>

From a41473dd677f4ed2f5ac39e5bad9d36d49962a18 Mon Sep 17 00:00:00 2001
From: Felix Schneider <99918022+trueberryless@users.noreply.github.com>
Date: Sun, 1 Feb 2026 21:49:46 +0100
Subject: [PATCH 2/3] test: new: no a11y issues in new component

---
 test/nuxt/a11y.spec.ts | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/test/nuxt/a11y.spec.ts b/test/nuxt/a11y.spec.ts
index 822515258..cca847f2e 100644
--- a/test/nuxt/a11y.spec.ts
+++ b/test/nuxt/a11y.spec.ts
@@ -58,6 +58,7 @@ import {
   AppFooter,
   AppHeader,
   BuildEnvironment,
+  CallToAction,
   CodeDirectoryListing,
   CodeFileTree,
   CodeMobileTreeDrawer,
@@ -1449,6 +1450,14 @@ describe('component accessibility audits', () => {
     })
   })
 
+  describe('CallToAction', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(CallToAction)
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
   describe('CollapsibleSection', () => {
     it('should have no accessibility violations', async () => {
       const component = await mountSuspended(CollapsibleSection, {

From e4c8fd2ccea12bdb1a9982eb6516c2a6c74e2f05 Mon Sep 17 00:00:00 2001
From: Felix Schneider <99918022+trueberryless@users.noreply.github.com>
Date: Sun, 1 Feb 2026 22:03:40 +0100
Subject: [PATCH 3/3] fix: increase container width

that way all titles of the cards can fit in one line
---
 app/pages/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/pages/index.vue b/app/pages/index.vue
index ac784faab..8b4c41d53 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -132,7 +132,7 @@ defineOgImageComponent('Default', {
     </section>
 
     <section class="border-t border-border py-24 bg-bg-subtle/10">
-      <div class="container max-w-2xl mx-auto">
+      <div class="container max-w-3xl mx-auto">
         <CallToAction />
       </div>
     </section>