Skip to content

feat: add CTAs to landing page #678

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
danielroe merged 3 commits into from
Feb 1, 2026
+188 −181
Merged

feat: add CTAs to landing page #678

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7b186a7
feat: add CTAs to landing page
trueberryless Feb 1, 2026
a41473d
test: new: no a11y issues in new component
trueberryless Feb 1, 2026
e4c8fd2
fix: increase container width
trueberryless Feb 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
86 changes: 86 additions & 0 deletions app/components/CallToAction.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
91 changes: 1 addition & 90 deletions app/pages/about.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
{
Expand Down Expand Up @@ -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">
Expand Down
183 changes: 92 additions & 91 deletions app/pages/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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-3xl mx-auto">
<CallToAction />
</div>
</section>
</main>
</template>
Loading
Loading