feat: add Product Hunt review pill to navbar for higher visibility

Surface the Product Hunt review CTA in the fixed navbar (next to Star on
GitHub) as an on-brand pill, plus a full-width entry in the mobile menu, so
it's visible without scrolling to the footer. Centralize the review URL in
links.ts and reuse it in the footer badge.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: maskedsyntax

website/src/lib/components/Navbar.svelte

@@ -3,8 +3,11 @@
   import { goto } from '$app/navigation';
   import { theme } from '$lib/stores/theme';
   import { githubStats, links } from '$lib/data/links';
+  import { logEvent } from '$lib/utils/analytics';
   import ContentContainer from './ContentContainer.svelte';
+  import BrandIcon from './BrandIcon.svelte';
   import { Download, Menu, X, Sun, Moon, Star, ChevronDown } from 'lucide-svelte';
+  import { siProducthunt } from 'simple-icons';
 
   let {
     onNavigate
@@ -29,6 +32,10 @@
     mobileMenuOpen = false;
   }
 
+  function trackProductHunt() {
+    logEvent('product_hunt_review_click', { source: 'navbar' });
+  }
+
   $effect(() => {
     const onScroll = () => {
       scrolled = window.scrollY > 8;
@@ -125,6 +132,16 @@
             <Moon size={20} />
           {/if}
         </button>
+        <a
+          class="ph-btn"
+          href={links.productHuntReview}
+          target="_blank"
+          rel="noopener noreferrer"
+          onclick={trackProductHunt}
+        >
+          <BrandIcon icon={siProducthunt} size={16} color="currentColor" />
+          <span>Review</span>
+        </a>
         <a class="github-btn" href={links.github} target="_blank" rel="noopener noreferrer">
           <Star size={16} />
           <span>Star on GitHub</span>
@@ -203,6 +220,19 @@
             {starCountLabel}
           </span>
         </a>
+        <a
+          class="ph-btn mobile-ph"
+          href={links.productHuntReview}
+          target="_blank"
+          rel="noopener noreferrer"
+          onclick={() => {
+            trackProductHunt();
+            closeMobile();
+          }}
+        >
+          <BrandIcon icon={siProducthunt} size={16} color="currentColor" />
+          <span>Review on Product Hunt</span>
+        </a>
       </div>
     </div>
   {/if}
@@ -369,6 +399,27 @@
     border-color: color-mix(in srgb, var(--border) 70%, var(--accent) 30%);
   }
 
+  .ph-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 9px 14px;
+    border-radius: 8px;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 1;
+    color: color-mix(in srgb, var(--text) 82%, transparent);
+    background: var(--surface-alt);
+    border: 1px solid var(--border);
+    transition: background 0.2s, color 0.2s, border-color 0.2s;
+  }
+
+  .ph-btn:hover {
+    color: var(--accent);
+    background: color-mix(in srgb, var(--surface-alt) 90%, var(--accent) 10%);
+    border-color: color-mix(in srgb, var(--border) 70%, var(--accent) 30%);
+  }
+
   .star-count {
     display: inline-flex;
     align-items: center;
@@ -492,7 +543,8 @@
   }
 
   .mobile-download,
-  .mobile-github {
+  .mobile-github,
+  .mobile-ph {
     width: 100%;
     justify-content: center;
   }
@@ -501,6 +553,10 @@
     margin-top: 0;
   }
 
+  .mobile-ph {
+    margin-top: 0;
+  }
+
   .mobile-download {
     margin-top: 0;
   }

website/src/lib/data/links.ts

@@ -13,7 +13,9 @@ export const links = {
   issues: 'https://github.com/maskedsyntax/patterns/issues',
   license: 'https://github.com/maskedsyntax/patterns/blob/master/LICENSE',
   maskedsyntax: 'https://maskedsyntax.com/',
-  site: 'https://patternsocd.com/'
+  site: 'https://patternsocd.com/',
+  productHuntReview:
+    'https://www.producthunt.com/products/patterns-ocd-erp-journal/reviews/new?utm_source=badge-product_review&utm_medium=badge&utm_source=badge-patterns-ocd-erp-journal'
 } as const;
 
 export const githubStats = {

website/src/lib/sections/Footer.svelte

@@ -36,6 +36,21 @@
         <img src="/assets/logo.png" alt="" width="28" height="28" />
         <span>Patterns</span>
         <p>Clarity for the mind through<br />structured reflection.</p>
+        <a
+          class="ph-badge"
+          href={links.productHuntReview}
+          target="_blank"
+          rel="noopener noreferrer"
+          onclick={() => trackClick('product_hunt_review')}
+        >
+          <img
+            src="https://api.producthunt.com/widgets/embed-image/v1/product_review.svg?product_id=1265014&theme=neutral"
+            alt="Patterns - Track urges, mood & exposure | Product Hunt"
+            width="250"
+            height="54"
+            loading="lazy"
+          />
+        </a>
       </div>
       <div class="link-groups">
         <nav class="links" aria-label="Resources">
@@ -104,6 +119,16 @@
     color: var(--text-secondary);
   }
 
+  .ph-badge {
+    margin-top: 4px;
+    display: inline-flex;
+    line-height: 0;
+  }
+
+  .ph-badge img {
+    border-radius: 0;
+  }
+
   .link-groups {
     display: flex;
     flex-wrap: wrap;