Merge resource counts into home page cards

- Remove separate hero-stats section
- Add card-count element to each resource card
- Update JS to populate counts from manifest
- Add card-with-count CSS for layout with count badge
- Reduces vertical space on home page

website/public/styles/global.css

@@ -357,34 +357,6 @@ a:hover {
   color: var(--color-text-muted);
 }
 
-.hero-stats {
-  display: flex;
-  justify-content: center;
-  gap: 48px;
-  margin-top: 56px;
-}
-
-.stat {
-  text-align: center;
-}
-
-.stat-value {
-  font-size: 40px;
-  font-weight: 800;
-  background: var(--gradient-primary);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-}
-
-.stat-label {
-  font-size: 14px;
-  color: var(--color-text-muted);
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
 /* Search Results Dropdown */
 .search-results {
   position: absolute;
@@ -487,6 +459,39 @@ a:hover {
   overflow: hidden;
 }
 
+.card-with-count {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+}
+
+.card-with-count .card-icon {
+  flex-shrink: 0;
+  margin-bottom: 0;
+}
+
+.card-with-count .card-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.card-with-count h3 {
+  margin-bottom: 6px;
+}
+
+.card-count {
+  flex-shrink: 0;
+  font-size: 28px;
+  font-weight: 700;
+  background: var(--gradient-primary);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  line-height: 1;
+  min-width: 40px;
+  text-align: right;
+}
+
 .card::before {
   content: '';
   position: absolute;
@@ -1407,11 +1412,6 @@ a:hover {
     font-size: 16px;
   }
   
-  .hero-stats {
-    flex-wrap: wrap;
-    gap: 20px;
-  }
-  
   .steps {
     grid-template-columns: 1fr;
     gap: 32px;
@@ -1420,6 +1420,16 @@ a:hover {
   .cards-grid {
     grid-template-columns: 1fr;
   }
+
+  .card-with-count {
+    flex-wrap: wrap;
+  }
+
+  .card-count {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+  }
   
   .resource-item {
     flex-direction: column;

website/src/pages/index.astro

@@ -16,9 +16,6 @@ const base = import.meta.env.BASE_URL;
           <input type="text" id="global-search" placeholder="Search all resources..." autocomplete="off">
           <div id="search-results" class="search-results hidden"></div>
         </div>
-        <div class="hero-stats" id="stats">
-          <!-- Populated by JS -->
-        </div>
       </div>
     </section>
 
@@ -26,35 +23,53 @@ const base = import.meta.env.BASE_URL;
     <section class="quick-links">
       <div class="container">
         <div class="cards-grid">
-          <a href={`${base}agents/`} class="card">
+          <a href={`${base}agents/`} class="card card-with-count" id="card-agents">
             <div class="card-icon">🤖</div>
-            <h3>Agents</h3>
-            <p>Custom agents for specialized Copilot experiences</p>
+            <div class="card-content">
+              <h3>Agents</h3>
+              <p>Custom agents for specialized Copilot experiences</p>
+            </div>
+            <div class="card-count" data-count="agents">-</div>
           </a>
-          <a href={`${base}prompts/`} class="card">
+          <a href={`${base}prompts/`} class="card card-with-count" id="card-prompts">
             <div class="card-icon">🎯</div>
-            <h3>Prompts</h3>
-            <p>Ready-to-use prompt templates for development tasks</p>
+            <div class="card-content">
+              <h3>Prompts</h3>
+              <p>Ready-to-use prompt templates for development tasks</p>
+            </div>
+            <div class="card-count" data-count="prompts">-</div>
           </a>
-          <a href={`${base}instructions/`} class="card">
+          <a href={`${base}instructions/`} class="card card-with-count" id="card-instructions">
             <div class="card-icon">📋</div>
-            <h3>Instructions</h3>
-            <p>Coding standards and best practices for Copilot</p>
+            <div class="card-content">
+              <h3>Instructions</h3>
+              <p>Coding standards and best practices for Copilot</p>
+            </div>
+            <div class="card-count" data-count="instructions">-</div>
           </a>
-          <a href={`${base}skills/`} class="card">
+          <a href={`${base}skills/`} class="card card-with-count" id="card-skills">
             <div class="card-icon">⚡</div>
-            <h3>Skills</h3>
-            <p>Self-contained folders with instructions and resources</p>
+            <div class="card-content">
+              <h3>Skills</h3>
+              <p>Self-contained folders with instructions and resources</p>
+            </div>
+            <div class="card-count" data-count="skills">-</div>
           </a>
-          <a href={`${base}collections/`} class="card">
+          <a href={`${base}collections/`} class="card card-with-count" id="card-collections">
             <div class="card-icon">📦</div>
-            <h3>Collections</h3>
-            <p>Curated collections organized by themes</p>
+            <div class="card-content">
+              <h3>Collections</h3>
+              <p>Curated collections organized by themes</p>
+            </div>
+            <div class="card-count" data-count="collections">-</div>
           </a>
-          <a href={`${base}tools/`} class="card">
+          <a href={`${base}tools/`} class="card card-with-count" id="card-tools">
             <div class="card-icon">🔧</div>
-            <h3>Tools</h3>
-            <p>MCP servers and developer tools</p>
+            <div class="card-content">
+              <h3>Tools</h3>
+              <p>MCP servers and developer tools</p>
+            </div>
+            <div class="card-count" data-count="tools">-</div>
           </a>
         </div>
       </div>

website/src/scripts/pages/index.ts

@@ -12,6 +12,7 @@ interface Manifest {
     instructions: number;
     skills: number;
     collections: number;
+    tools: number;
   };
 }
 
@@ -33,16 +34,14 @@ export async function initHomepage(): Promise<void> {
   // Load manifest for stats
   const manifest = await fetchData<Manifest>('manifest.json');
   if (manifest && manifest.counts) {
-    const statsEl = document.getElementById('stats');
-    if (statsEl) {
-      statsEl.innerHTML = `
-        <div class="stat"><span class="stat-value">${manifest.counts.agents}</span><span class="stat-label">Agents</span></div>
-        <div class="stat"><span class="stat-value">${manifest.counts.prompts}</span><span class="stat-label">Prompts</span></div>
-        <div class="stat"><span class="stat-value">${manifest.counts.instructions}</span><span class="stat-label">Instructions</span></div>
-        <div class="stat"><span class="stat-value">${manifest.counts.skills}</span><span class="stat-label">Skills</span></div>
-        <div class="stat"><span class="stat-value">${manifest.counts.collections}</span><span class="stat-label">Collections</span></div>
-      `;
-    }
+    // Populate counts in cards
+    const countKeys = ['agents', 'prompts', 'instructions', 'skills', 'collections', 'tools'] as const;
+    countKeys.forEach(key => {
+      const countEl = document.querySelector(`.card-count[data-count="${key}"]`);
+      if (countEl && manifest.counts[key] !== undefined) {
+        countEl.textContent = manifest.counts[key].toString();
+      }
+    });
   }
 
   // Load search index