feat(site): homepage polish — hero stats, license badge, search, pagination

- Show plugin/author counts as prominent pixel-font stats in the hero
- Style license label with distinct blue badge in both light and dark mode
- Extend plugin search to match tags and author name/username
- Lower pagination compact-form threshold to >8 pages; set page size to 28

Author: anistark

site/src/components/Header.astro

@@ -20,10 +20,20 @@ const { pluginCount, authorCount } = Astro.props;
     Community-driven plugin marketplace for Claude Code
   </p>
   <div
-    class="mt-4 flex items-center justify-center gap-6 text-base text-gray-500"
+    class="mt-8 flex items-start justify-center gap-12 sm:gap-20"
   >
-    <span><strong class="text-white">{pluginCount}</strong> plugins</span>
-    <span><strong class="text-white">{authorCount}</strong> authors</span>
+    <div class="flex flex-col items-center">
+      <span class="font-pixel text-4xl sm:text-5xl font-bold leading-none text-white">
+        {pluginCount}
+      </span>
+      <span class="mt-2 text-sm text-gray-400">plugins</span>
+    </div>
+    <div class="flex flex-col items-center">
+      <span class="font-pixel text-4xl sm:text-5xl font-bold leading-none text-white">
+        {authorCount}
+      </span>
+      <span class="mt-2 text-sm text-gray-400">authors</span>
+    </div>
   </div>
   <div class="mt-4 inline-flex items-center gap-2 rounded-lg border border-white/10 bg-white/5 backdrop-blur-sm px-3 py-1.5">
     <code class="text-base text-gray-300">/plugin marketplace add nullorder/agenthub</code>

site/src/components/PluginCard.astro

@@ -93,7 +93,7 @@ const categoryColor = categoryColors[category] || categoryColors.other;
             </span>
           ))}
           {license && (
-            <span class="rounded bg-white/10 px-2 py-0.5 text-xs text-gray-400">
+            <span class="license-badge rounded px-2 py-0.5 text-xs">
               {license}
             </span>
           )}
@@ -162,7 +162,7 @@ const categoryColor = categoryColors[category] || categoryColors.other;
         )}
         <div class="flex items-center gap-2">
           {license && (
-            <span class="rounded bg-white/10 px-2 py-0.5 text-xs text-gray-400">
+            <span class="license-badge rounded px-2 py-0.5 text-xs">
               {license}
             </span>
           )}

site/src/pages/index.astro

@@ -27,7 +27,7 @@ const allTags = [
 const authorCount = [...new Set(plugins.map((p: any) => p.author.username))]
   .length;
 
-const PLUGINS_PER_PAGE = 32;
+const PLUGINS_PER_PAGE = 28;
 const initialPlugins = plugins.slice(0, PLUGINS_PER_PAGE);
 const totalPluginCount = plugins.length;
 ---
@@ -230,7 +230,12 @@ const totalPluginCount = plugins.length;
         const matchesSearch =
           !currentSearch ||
           p.name.toLowerCase().includes(currentSearch) ||
-          (p.description || "").toLowerCase().includes(currentSearch);
+          (p.description || "").toLowerCase().includes(currentSearch) ||
+          (p.tags || []).some((t) =>
+            t.toLowerCase().includes(currentSearch),
+          ) ||
+          (p.author?.name || "").toLowerCase().includes(currentSearch) ||
+          (p.author?.username || "").toLowerCase().includes(currentSearch);
         const matchesCategory =
           currentCategory === "all" || p.category === currentCategory;
         const matchesTag =
@@ -312,7 +317,7 @@ const totalPluginCount = plugins.length;
       if (pages <= 1) return;
 
       // Compact form when there are many pages: 1 < … current … > last
-      if (pages > 10) {
+      if (pages > 8) {
         const atStart = currentPage === 1;
         const atEnd = currentPage === pages;
 

site/src/styles/global.css

@@ -78,6 +78,17 @@ html.light .modal-content { background-color: rgba(255, 255, 255, 0.95); }
 
 .text-always-white { color: #fff !important; }
 
+/* License badge — distinct blue styling in both themes */
+.license-badge {
+  background-color: rgba(59, 130, 246, 0.15);
+  color: #93c5fd;
+}
+
+html.light .license-badge {
+  background-color: rgba(59, 130, 246, 0.12);
+  color: #1d4ed8;
+}
+
 /* Background image toggle */
 .bg-dark { display: block; }
 .bg-light { display: none; }