feat(site): add npm downloads badge to hero

Surface live monthly npm downloads for @pythoughts/pythinker-code in the
hero, above the install command. Unify the badge accent across the site
and README on the brand blue (#2b89ff).

Author: elkaix

README.md

@@ -10,7 +10,7 @@
 <br />
 
 [![npm version](https://img.shields.io/npm/v/@pythoughts/pythinker-code?style=for-the-badge&logo=npm&logoColor=white&color=CB3837&label=pythinker-code)](https://www.npmjs.com/package/@pythoughts/pythinker-code)
-[![Downloads](https://img.shields.io/npm/dm/@pythoughts/pythinker-code?style=for-the-badge&logo=npm&logoColor=white&color=16a34a&label=downloads)](https://www.npmjs.com/package/@pythoughts/pythinker-code)
+[![Downloads](https://img.shields.io/npm/dm/@pythoughts/pythinker-code?style=for-the-badge&logo=npm&logoColor=white&color=2b89ff&label=downloads)](https://www.npmjs.com/package/@pythoughts/pythinker-code)
 [![Node.js](https://img.shields.io/badge/Node.js-26%2B-339933?style=for-the-badge&logo=nodedotjs&logoColor=white)](https://github.com/Pythoughts-labs/pythinker-code/blob/main/package.json)
 [![License: MIT](https://img.shields.io/badge/License-MIT-16a34a.svg?style=for-the-badge)](https://github.com/Pythoughts-labs/pythinker-code/blob/main/LICENSE)
 [![CI](https://img.shields.io/github/actions/workflow/status/Pythoughts-labs/pythinker-code/ci.yml?branch=main&label=CI&style=for-the-badge&logo=githubactions&logoColor=white)](https://github.com/Pythoughts-labs/pythinker-code/actions/workflows/ci.yml?query=branch%3Amain)

apps/site/src/App.vue

@@ -227,6 +227,20 @@ onUnmounted(() => {
         <h1>Pythinker Code</h1>
         <p class="hero-accent">Think first, then code.</p>
         <p class="hero-lead">An open-source AI engineering agent for your terminal. It reads your repo, edits files, runs commands, and iterates until the job is done.</p>
+        <a
+          class="hero-npm-badge"
+          href="https://www.npmjs.com/package/@pythoughts/pythinker-code"
+          target="_blank"
+          rel="noopener"
+        >
+          <img
+            src="https://img.shields.io/npm/dm/%40pythoughts%2Fpythinker-code?style=flat&logo=npm&logoColor=white&color=2b89ff&label=downloads"
+            alt="npm downloads per month for @pythoughts/pythinker-code"
+            width="161"
+            height="20"
+            loading="lazy"
+          />
+        </a>
         <div class="hero-install">
           <InstallCommand />
         </div>
@@ -630,7 +644,7 @@ onUnmounted(() => {
 
 .hero-install {
   max-width: 720px;
-  margin: 36px auto 0;
+  margin: 10px auto 0;
 }
 
 .hero-download-milestone {
@@ -639,6 +653,25 @@ onUnmounted(() => {
   justify-content: center;
 }
 
+.hero-npm-badge {
+  display: inline-flex;
+  margin-top: 14px;
+  border-radius: var(--radius);
+  opacity: 0.85;
+  transition: opacity 0.2s ease;
+}
+
+.hero-npm-badge:hover {
+  opacity: 1;
+}
+
+/* ponytail: width:auto lets the badge grow as the download count does; the width attr only reserves space */
+.hero-npm-badge img {
+  display: block;
+  width: auto;
+  height: 20px;
+}
+
 .hero-caption {
   margin-top: 12px;
   color: var(--ink-subtle);

apps/site/src/components/LegacyDownloadsPopup.vue

@@ -25,7 +25,7 @@ const visible = ref(true);
           aria-label="View pythinker-code download statistics on Pepy"
         >
           <img
-            src="https://static.pepy.tech/personalized-badge/pythinker-code?period=total&amp;units=INTERNATIONAL_SYSTEM&amp;left_color=BLACK&amp;right_color=GREEN&amp;left_text=downloads"
+            src="https://static.pepy.tech/personalized-badge/pythinker-code?period=total&amp;units=INTERNATIONAL_SYSTEM&amp;left_color=BLACK&amp;right_color=BLUE&amp;left_text=downloads"
             alt="PyPI download count for pythinker-code"
             height="20"
           />