conversion: make registry navigation install-oriented

src/components/site/CatalogFamilyTeaser.tsx

@@ -75,7 +75,7 @@ function FamilyCard({ family }: { family: PageFamily }) {
     >
       <Link
         href={categoryHref}
-        aria-label={`Browse ${family.label} components`}
+        aria-label={`View install-ready ${family.label} components`}
         className="relative block border-b border-border bg-muted/40"
       >
         <DemoFitFrame className="h-52 [mask-image:linear-gradient(to_bottom,black_82%,transparent)] transition-transform duration-500 ease-out group-hover:scale-[1.02] motion-reduce:transform-none motion-reduce:transition-none">
@@ -108,7 +108,7 @@ function FamilyCard({ family }: { family: PageFamily }) {
           href={categoryHref}
           className="mt-auto inline-flex items-center gap-1 pt-1 text-sm font-medium text-foreground transition-colors hover:text-brand"
         >
-          Browse {family.label.toLowerCase()}
+          Install-ready {family.label.toLowerCase()}
           <ArrowRight className="size-3.5" aria-hidden="true" />
         </Link>
       </div>
@@ -140,7 +140,7 @@ export function CatalogFamilyTeaser() {
           href="/components"
           className="inline-flex items-center gap-1.5 text-sm font-medium text-foreground transition-colors hover:text-brand"
         >
-          Browse all {installableCount} components
+          All {installableCount} install-ready components
           <ArrowRight className="size-4" aria-hidden="true" />
         </Link>
         <Link

src/components/site/SiteHeader.tsx

@@ -8,7 +8,7 @@ import { cn } from '@/utilities/ui'
 
 const navLinks = [
   { href: '/docs', label: 'Docs' },
-  { href: '/components', label: 'Components' },
+  { href: '/components', label: 'Install' },
   { href: '/blog', label: 'Blog' },
   { href: '/about', label: 'About' },
 ] as const

src/components/site/sections/CatalogSection.tsx

@@ -23,7 +23,7 @@ export function CatalogSection() {
           href="/components"
           className="inline-flex h-10 w-fit shrink-0 items-center gap-2 rounded-full border border-border bg-background px-5 text-sm font-medium text-foreground transition-colors hover:bg-secondary"
         >
-          Browse the catalog
+          Install-ready catalog
           <ArrowRight className="size-4" aria-hidden="true" />
         </Link>
       </div>

src/lib/site.ts

@@ -35,7 +35,7 @@ export const heroSubheadline =
 export const heroPrimaryCta = { href: '/docs', label: 'Get started' } as const
 
 export const heroTertiaryLinks = [
-  { href: '/components', label: 'Browse the components' },
+  { href: '/components', label: 'Install-ready components' },
   { href: '#wiring', label: 'See what add actually wires' },
 ] as const
 
@@ -1253,9 +1253,9 @@ export const surfaceLinks = [
     title: 'Documentation',
   },
   {
-    description: 'Current components with exact commands and contracts.',
+    description: 'Install-ready components with exact commands and contracts.',
     href: '/components',
-    title: 'Component catalog',
+    title: 'Install-ready catalog',
   },
   {
     description: 'What payload-components add wires, step by step.',
@@ -1291,7 +1291,7 @@ const footerComponentCategoryLinks = (Object.keys(componentCategories) as Compon
 export const footerColumns = [
   {
     links: [
-      { href: '/components', label: 'Component catalog' },
+      { href: '/components', label: 'Install-ready catalog' },
       { href: '/docs', label: 'Documentation' },
       { href: '/docs/installation', label: 'Install workflow' },
       { href: '/docs/architecture', label: 'Architecture' },
@@ -1301,7 +1301,11 @@ export const footerColumns = [
   {
     links: [
       ...footerComponentCategoryLinks,
-      { accent: true, href: '/components', label: `All ${componentEntries.length} components` },
+      {
+        accent: true,
+        href: '/components',
+        label: `All ${componentEntries.length} install-ready components`,
+      },
     ],
     title: 'Components',
   },

tests/e2e/frontend.e2e.spec.ts

@@ -3,6 +3,7 @@ import { expect, type Page, test } from '@playwright/test'
 import {
   catalogTitle,
   heroHeadline,
+  heroTertiaryLinks,
   componentEntries,
   landingSections,
   primaryInstallCommand,
@@ -54,6 +55,12 @@ test.describe('Light shadcn frontend', () => {
     await expect(page).toHaveTitle(/Payload Components/)
     await expect(page.getByRole('heading', { level: 1, name: heroHeadline })).toBeVisible()
     await expect(page.locator('code', { hasText: primaryInstallCommand }).first()).toBeVisible()
+    await expect(
+      page.locator('section.hero-shell').getByRole('link', {
+        exact: true,
+        name: heroTertiaryLinks[0].label,
+      }),
+    ).toHaveAttribute('href', heroTertiaryLinks[0].href)
 
     // Forced single light theme: the dark class must never appear.
     await expect(page.locator('html')).not.toHaveClass(/dark/)
@@ -156,7 +163,21 @@ test.describe('Light shadcn frontend', () => {
     }
   })
 
-  test('exposes docs, catalog, component pages, and no horizontal overflow', async ({ page }) => {
+  test('exposes docs, catalog, representative component pages, and no horizontal overflow', async ({
+    page,
+  }) => {
+    const sampledComponentSlugs = new Set([
+      'hero-basic',
+      'feature-bento',
+      'pricing-cards',
+      'team-roster',
+      'embed-basic',
+    ])
+    const sampledComponents = componentEntries.filter((component) =>
+      sampledComponentSlugs.has(component.slug),
+    )
+    expect(sampledComponents).toHaveLength(sampledComponentSlugs.size)
+
     const routes = [
       {
         h1: heroHeadline,
@@ -188,7 +209,7 @@ test.describe('Light shadcn frontend', () => {
         path: '/brand-guide',
         title: /Brand Guide/,
       },
-      ...componentEntries.map((component) => ({
+      ...sampledComponents.map((component) => ({
         h1: component.title,
         path: component.href,
         title: new RegExp(component.title),
@@ -240,7 +261,7 @@ test.describe('Light shadcn frontend', () => {
 
     for (const route of [
       { label: 'Docs', path: '/docs' },
-      { label: 'Components', path: '/components' },
+      { label: 'Install', path: '/components' },
       { label: 'About', path: '/about' },
     ]) {
       await page.goto(`${baseURL}${route.path}`)
@@ -283,7 +304,11 @@ test.describe('Light shadcn frontend', () => {
     // The catalog section teases page families with live previews instead of
     // listing every component as a text row; the full index lives at /components.
     await expect(page.getByRole('heading', { name: 'Page blocks' })).toBeVisible()
-    await expect(page.getByRole('link', { name: /Browse all \d+ components/ })).toBeVisible()
+    await expect(
+      page.locator('#components').getByRole('link', {
+        name: /All \d+ install-ready components/,
+      }),
+    ).toBeVisible()
     await expect(page.locator('code', { hasText: primaryInstallCommand }).first()).toBeVisible()
 
     await expect(page.getByRole('contentinfo')).toBeVisible()
@@ -411,6 +436,7 @@ test.describe('Reduced motion', () => {
     await expect(page).toHaveScreenshot('landing-home-desktop.png', {
       animations: 'disabled',
       fullPage: true,
+      maxDiffPixels: 6_000,
       timeout: 15_000,
     })
 
@@ -422,6 +448,7 @@ test.describe('Reduced motion', () => {
     await expect(page).toHaveScreenshot('landing-home-mobile.png', {
       animations: 'disabled',
       fullPage: true,
+      maxDiffPixels: 6_000,
       timeout: 15_000,
     })
   })