@amulet-laboratories/rig-nuxt 0.3.0 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@amulet-laboratories/rig-nuxt",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "type": "module",
   "description": "Nuxt module for @amulet-laboratories/rig — auto-imports, tree-shaking, SSR-safe",
   "license": "MIT",
@@ -16,7 +16,7 @@
   ],
   "peerDependencies": {
     "@amulet-laboratories/rig": ">=0.4.0",
-    "nuxt": "^3.0.0",
+    "nuxt": "^3.21.6",
     "@nuxt/content": "^3.0.0",
     "@sentry/vue": "^9.0.0"
   },

package/src/module.ts

@@ -259,7 +259,6 @@ export default defineNuxtModule<NuxtRigOptions>({
       addImports({ name: 'useDetailView', from: '@amulet-laboratories/rig' })
       addImports({ name: 'useFormatDate', from: '@amulet-laboratories/rig' })
       addImports({ name: 'useBreadcrumbs', from: '@amulet-laboratories/rig' })
-      addImports({ name: 'useFathom', from: '@amulet-laboratories/rig' })
     }
 
     // ── Content features (authority-site runtime) ──
@@ -267,6 +266,11 @@ export default defineNuxtModule<NuxtRigOptions>({
 
     const contentOpts: ContentOptions = options.content === true ? {} : options.content
 
+    // Authority-site analytics composable. Gated to content consumers so it
+    // does not shadow an app's own `useFathom` auto-import (e.g. QuizSort's
+    // quiz-specific analytics live in its local composables/useFathom.ts).
+    addImports({ name: 'useFathom', from: '@amulet-laboratories/rig' })
+
     // Content components
     const contentComponents: Array<{ name: string; filePath: string }> = [
       {
@@ -301,6 +305,30 @@ export default defineNuxtModule<NuxtRigOptions>({
         name: 'ProductCardWrapper',
         filePath: resolve('./runtime/components/content/ProductCardWrapper.vue'),
       },
+      {
+        name: 'CategoryIcon',
+        filePath: resolve('./runtime/components/content/CategoryIcon.vue'),
+      },
+      {
+        name: 'ContentHomePage',
+        filePath: resolve('./runtime/components/content/ContentHomePage.vue'),
+      },
+      {
+        name: 'ContentComparePage',
+        filePath: resolve('./runtime/components/content/ContentComparePage.vue'),
+      },
+      {
+        name: 'ContentCompareIndexPage',
+        filePath: resolve('./runtime/components/content/ContentCompareIndexPage.vue'),
+      },
+      {
+        name: 'ContentBestForPersonaPage',
+        filePath: resolve('./runtime/components/content/ContentBestForPersonaPage.vue'),
+      },
+      {
+        name: 'ContentBestForIndexPage',
+        filePath: resolve('./runtime/components/content/ContentBestForIndexPage.vue'),
+      },
       {
         name: 'AffiliateDisclosure',
         filePath: resolve('./runtime/components/content/AffiliateDisclosure.vue'),
@@ -309,6 +337,10 @@ export default defineNuxtModule<NuxtRigOptions>({
         name: 'ContentNewsletterSignup',
         filePath: resolve('./runtime/components/content/NewsletterSignup.vue'),
       },
+      {
+        name: 'NewsletterSignup',
+        filePath: resolve('./runtime/components/content/NewsletterSignup.vue'),
+      },
       { name: 'QuizPromo', filePath: resolve('./runtime/components/content/QuizPromo.vue') },
       {
         name: 'QuizEmbedWrapper',
@@ -326,6 +358,10 @@ export default defineNuxtModule<NuxtRigOptions>({
         name: 'AdUnit',
         filePath: resolve('./runtime/components/content/AdUnit.vue'),
       },
+      {
+        name: 'EditorialSidebar',
+        filePath: resolve('./runtime/components/content/EditorialSidebar.vue'),
+      },
       {
         name: 'ContentAppFooter',
         filePath: resolve('./runtime/components/layout/ContentAppFooter.vue'),

package/src/runtime/components/content/ArticleHeader.vue

@@ -10,6 +10,12 @@ interface Props {
   updatedAt?: string
   category?: string
   timeToRead?: number
+  featuredImage?: {
+    src: string
+    alt: string
+    width?: number
+    height?: number
+  }
 }
 
 const props = defineProps<Props>()
@@ -46,6 +52,16 @@ const formattedUpdatedDate = computed(() => {
     </div>
     <h1 data-rig-article-header-title>{{ title }}</h1>
     <p v-if="description" data-rig-article-header-description>{{ description }}</p>
+    <NuxtImg
+      v-if="featuredImage"
+      :src="featuredImage.src"
+      :alt="featuredImage.alt"
+      :width="featuredImage.width ?? 1200"
+      :height="featuredImage.height ?? 630"
+      fetchpriority="high"
+      loading="eager"
+      data-rig-article-header-image
+    />
     <div v-if="publishedAt || updatedAt" data-rig-article-header-byline>
       <time v-if="publishedAt" :datetime="publishedAt">
         {{ formattedDate }}

package/src/runtime/components/content/CategoryIcon.vue

@@ -0,0 +1,453 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{
+  category: string
+  size?: number
+}>()
+
+const iconSize = computed(() => props.size ?? 24)
+</script>
+
+<template>
+  <svg
+    v-if="category === 'brewing-guides'"
+    :width="iconSize"
+    :height="iconSize"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+    data-rig-category-icon
+  >
+    <path d="M17 8h1a4 4 0 1 1 0 8h-1" />
+    <path d="M3 8h14v9a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V8z" />
+    <line x1="6" y1="2" x2="6" y2="4" />
+    <line x1="10" y1="2" x2="10" y2="4" />
+    <line x1="14" y1="2" x2="14" y2="4" />
+  </svg>
+  <svg
+    v-else-if="category === 'equipment-reviews'"
+    :width="iconSize"
+    :height="iconSize"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+    data-rig-category-icon
+  >
+    <path
+      d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"
+    />
+  </svg>
+  <svg
+    v-else-if="category === 'beans-and-blends'"
+    :width="iconSize"
+    :height="iconSize"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+    data-rig-category-icon
+  >
+    <path
+      d="M12 2C9.24 2 7 4.24 7 7c0 3.18 2.45 5.47 5 8 2.55-2.53 5-4.82 5-8 0-2.76-2.24-5-5-5z"
+    />
+    <path d="M12 10V7" />
+    <path d="M12 15c-2.76 0-5 2.24-5 5s2.24 4 5 4 5-1.24 5-4-2.24-5-5-5z" />
+  </svg>
+  <svg
+    v-else-if="category === 'routines'"
+    :width="iconSize"
+    :height="iconSize"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+    data-rig-category-icon
+  >
+    <path
+      d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"
+    />
+    <path d="M9 18h6" />
+    <path d="M10 22h4" />
+  </svg>
+  <svg
+    v-else-if="category === 'ingredients'"
+    :width="iconSize"
+    :height="iconSize"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+    data-rig-category-icon
+  >
+    <path
+      d="M10 2v7.527a2 2 0 0 1-.211.896L4.72 20.55a1 1 0 0 0 .9 1.45h12.76a1 1 0 0 0 .9-1.45l-5.069-10.127A2 2 0 0 1 14 9.527V2"
+    />
+    <path d="M8.5 2h7" />
+    <path d="M7 16h10" />
+  </svg>
+  <svg
+    v-else-if="category === 'style-guides'"
+    :width="iconSize"
+    :height="iconSize"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+    data-rig-category-icon
+  >
+    <circle cx="13.5" cy="6.5" r="2.5" />
+    <circle cx="19" cy="13" r="2" />
+    <circle cx="6" cy="12" r="3" />
+    <path d="M12 22s8-4 8-10.4A7.6 7.6 0 0 0 12 4a7.6 7.6 0 0 0-8 7.6C4 18 12 22 12 22z" />
+  </svg>
+  <svg
+    v-else-if="category === 'room-guides'"
+    :width="iconSize"
+    :height="iconSize"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+    data-rig-category-icon
+  >
+    <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
+    <polyline points="9 22 9 12 15 12 15 22" />
+  </svg>
+  <svg
+    v-else-if="category === 'best-of'"
+    :width="iconSize"
+    :height="iconSize"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+    data-rig-category-icon
+  >
+    <path d="M6 9H4.5a2.5 2.5 0 0 1 0-5C7 4 7 7 7 7" />
+    <path d="M18 9h1.5a2.5 2.5 0 0 0 0-5C17 4 17 7 17 7" />
+    <path d="M4 22h16" />
+    <path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22" />
+    <path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22" />
+    <path d="M18 2H6v7a6 6 0 0 0 12 0V2Z" />
+  </svg>
+  <svg
+    v-else-if="category === 'comparisons'"
+    :width="iconSize"
+    :height="iconSize"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+    data-rig-category-icon
+  >
+    <path d="M16 3h5v5" />
+    <path d="M8 3H3v5" />
+    <path d="M12 22V8" />
+    <path d="M21 3l-9 9" />
+    <path d="M3 3l9 9" />
+  </svg>
+  <svg
+    v-else-if="category === 'mechanics'"
+    :width="iconSize"
+    :height="iconSize"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+    data-rig-category-icon
+  >
+    <circle cx="12" cy="12" r="3" />
+    <path
+      d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"
+    />
+  </svg>
+  <svg
+    v-else-if="category === 'guides'"
+    :width="iconSize"
+    :height="iconSize"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+    data-rig-category-icon
+  >
+    <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" />
+    <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" />
+  </svg>
+  <svg
+    v-else-if="category === 'recommendations'"
+    :width="iconSize"
+    :height="iconSize"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+    data-rig-category-icon
+  >
+    <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" />
+    <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" />
+    <path d="M6 8h2" />
+    <path d="M6 12h2" />
+    <path d="M16 8h2" />
+    <path d="M16 12h2" />
+  </svg>
+  <svg
+    v-else-if="category === 'genre-guides'"
+    :width="iconSize"
+    :height="iconSize"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+    data-rig-category-icon
+  >
+    <circle cx="12" cy="12" r="10" />
+    <polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76" />
+  </svg>
+  <svg
+    v-else-if="category === 'device-reviews'"
+    :width="iconSize"
+    :height="iconSize"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+    data-rig-category-icon
+  >
+    <rect x="4" y="2" width="16" height="20" rx="2" />
+    <line x1="8" y1="6" x2="16" y2="6" />
+    <line x1="8" y1="10" x2="16" y2="10" />
+    <line x1="8" y1="14" x2="12" y2="14" />
+    <circle cx="12" cy="19" r="1" fill="currentColor" />
+  </svg>
+  <svg
+    v-else-if="category === 'reading-guides'"
+    :width="iconSize"
+    :height="iconSize"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+    data-rig-category-icon
+  >
+    <path d="M12 2L2 7l10 5 10-5-10-5z" />
+    <path d="M2 17l10 5 10-5" />
+    <path d="M2 12l10 5 10-5" />
+  </svg>
+  <svg
+    v-else-if="category === 'dog-guides'"
+    :width="iconSize"
+    :height="iconSize"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+    data-rig-category-icon
+  >
+    <path
+      d="M10 5.172C10 3.782 8.423 2.679 6.5 3c-2.823.47-4.113 6.006-4 7 .137 1.217 1.5 2 2.5 2s2-.5 3-1l1-1"
+    />
+    <path
+      d="M14.267 5.172c0-1.39 1.577-2.493 3.5-2.172 2.823.47 4.113 6.006 4 7-.137 1.217-1.5 2-2.5 2s-2-.5-3-1l-1-1"
+    />
+    <path d="M8 14v.5" />
+    <path d="M16 14v.5" />
+    <path d="M11.25 16.25h1.5L12 17l-.75-.75z" />
+    <path
+      d="M4.42 11.247A13.152 13.152 0 0 0 4 14.556C4 18.728 7.582 21 12 21s8-2.272 8-6.444a11.7 11.7 0 0 0-.42-3.31"
+    />
+  </svg>
+  <svg
+    v-else-if="category === 'cat-guides'"
+    :width="iconSize"
+    :height="iconSize"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+    data-rig-category-icon
+  >
+    <path d="M12 5c-2.76 0-5 2.24-5 5v6a4 4 0 0 0 4 4h2a4 4 0 0 0 4-4v-6c0-2.76-2.24-5-5-5z" />
+    <path d="M7 5L5 2" />
+    <path d="M17 5l2-3" />
+    <circle cx="10" cy="11" r="1" fill="currentColor" />
+    <circle cx="14" cy="11" r="1" fill="currentColor" />
+    <path d="M10 14h4" />
+    <path d="M12 14v2" />
+  </svg>
+  <svg
+    v-else-if="category === 'care'"
+    :width="iconSize"
+    :height="iconSize"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+    data-rig-category-icon
+  >
+    <path
+      d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3.332.88-4.5 2.17A6.42 6.42 0 0 0 7.5 3 5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7 7-7z"
+    />
+  </svg>
+  <svg
+    v-else-if="category === 'education'"
+    :width="iconSize"
+    :height="iconSize"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+    data-rig-category-icon
+  >
+    <path d="M22 10v6M2 10l10-5 10 5-10 5z" />
+    <path d="M6 12v5c0 1.66 2.69 3 6 3s6-1.34 6-3v-5" />
+  </svg>
+  <svg
+    v-else-if="category === 'organization'"
+    :width="iconSize"
+    :height="iconSize"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+    data-rig-category-icon
+  >
+    <rect x="3" y="3" width="7" height="7" />
+    <rect x="14" y="3" width="7" height="7" />
+    <rect x="3" y="14" width="7" height="7" />
+    <rect x="14" y="14" width="7" height="7" />
+  </svg>
+  <svg
+    v-else-if="category === 'reviews'"
+    :width="iconSize"
+    :height="iconSize"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+    data-rig-category-icon
+  >
+    <polygon
+      points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
+    />
+  </svg>
+  <svg
+    v-else-if="category === 'buying-guides'"
+    :width="iconSize"
+    :height="iconSize"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+    data-rig-category-icon
+  >
+    <path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z" />
+    <line x1="3" y1="6" x2="21" y2="6" />
+    <path d="M16 10a4 4 0 0 1-8 0" />
+  </svg>
+  <svg
+    v-else-if="category === 'culture'"
+    :width="iconSize"
+    :height="iconSize"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+    data-rig-category-icon
+  >
+    <path
+      d="M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-2 2zm0 0a2 2 0 0 1-2-2v-9c0-1.1.9-2 2-2h2"
+    />
+    <path d="M18 14h-8" />
+    <path d="M15 18h-5" />
+    <path d="M10 6h8v4h-8V6z" />
+  </svg>
+  <svg
+    v-else
+    :width="iconSize"
+    :height="iconSize"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+    data-rig-category-icon
+  >
+    <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" />
+    <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" />
+  </svg>
+</template>

package/src/runtime/components/content/ContentBestForIndexPage.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import {
+  useRuntimeConfig,
+  useSiteConfig,
+  useSeoMeta,
+  useSchemaOrg,
+  defineWebPage,
+  defineBreadcrumb,
+  navigateTo,
+} from '#imports'
+
+const runtimeConfig = useRuntimeConfig()
+const personaSlugs = runtimeConfig.contentPersonaSlugs.split(',')
+
+const personaLabels = computed(() =>
+  personaSlugs.map((slug: string) => ({
+    slug,
+    label: slug
+      .split('-')
+      .map((word: string) => word.charAt(0).toUpperCase() + word.slice(1))
+      .join(' '),
+  })),
+)
+
+const siteConfig = useSiteConfig()
+
+useSeoMeta({
+  title: `Best For You | ${siteConfig.name}`,
+  description: `Personalized product picks based on your quiz results. Find the best ${siteConfig.name} recommendations for your type.`,
+})
+
+useSchemaOrg([
+  defineWebPage({ name: `Best For You | ${siteConfig.name}` }),
+  defineBreadcrumb({
+    itemListElement: [
+      { name: 'Home', item: '/', position: 1 },
+      { name: 'Best For', item: '/best-for', position: 2 },
+    ],
+  }),
+])
+</script>
+
+<template>
+  <div>
+    <ContentBreadcrumbs
+      :items="[
+        { label: 'Home', path: '/' },
+        { label: 'Best For', path: '/best-for' },
+      ]"
+    />
+    <Section
+      title="Best For You"
+      subtitle="Personalized recommendations based on your quiz results"
+    >
+      <div v-if="personaLabels.length" data-rig-article-grid>
+        <Card
+          v-for="persona in personaLabels"
+          :key="persona.slug"
+          interactive
+          role="link"
+          :tabindex="0"
+          @click="navigateTo(`/best-for/${persona.slug}`)"
+          @keydown.enter="navigateTo(`/best-for/${persona.slug}`)"
+        >
+          <NuxtLink :to="`/best-for/${persona.slug}`" data-rig-article-card-link>
+            <span data-rig-persona-badge>Persona</span>
+            <span data-rig-article-card-title>{{ persona.label }}</span>
+            <span data-rig-article-card-description
+              >See our curated product picks for this type.</span
+            >
+          </NuxtLink>
+        </Card>
+      </div>
+      <p v-else data-rig-empty-state>
+        No persona results available yet. Take a quiz to get personalized picks.
+      </p>
+    </Section>
+  </div>
+</template>