style: add Product Hunt #3 badge to banner SVG

rohitg00 · rohitg00 · commit eeddd2a8cf13 · 2026-02-09T21:32:51.000Z
diff --git a/docs/img/banner.svg b/docs/img/banner.svg
@@ -1,4 +1,4 @@
-<svg width="1200" height="400" viewBox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg">
+<svg width="1200" height="420" viewBox="0 0 1200 420" xmlns="http://www.w3.org/2000/svg">
   <defs>
     <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
       <stop offset="0%" style="stop-color:#0a0a0a"/>
@@ -10,45 +10,57 @@
       <stop offset="50%" style="stop-color:#555"/>
       <stop offset="100%" style="stop-color:#333"/>
     </linearGradient>
+    <linearGradient id="ph-badge" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" style="stop-color:#2a2a2a"/>
+      <stop offset="100%" style="stop-color:#1a1a1a"/>
+    </linearGradient>
   </defs>
 
-  <rect width="1200" height="400" fill="url(#bg)" rx="12"/>
-  <rect x="1" y="1" width="1198" height="398" fill="none" stroke="url(#border)" stroke-width="1" rx="12"/>
+  <rect width="1200" height="420" fill="url(#bg)" rx="12"/>
+  <rect x="1" y="1" width="1198" height="418" fill="none" stroke="url(#border)" stroke-width="1" rx="12"/>
 
-  <line x1="60" y1="330" x2="1140" y2="330" stroke="#1a1a1a" stroke-width="1"/>
+  <line x1="60" y1="350" x2="1140" y2="350" stroke="#1a1a1a" stroke-width="1"/>
 
   <g transform="translate(60, 72)">
     <rect width="16" height="16" fill="white" rx="2"/>
   </g>
 
   <text x="90" y="86" font-family="'SF Mono', 'Fira Code', 'JetBrains Mono', Consolas, monospace" font-size="20" font-weight="700" fill="white" letter-spacing="3">SKILLKIT</text>
 
-  <text x="600" y="190" font-family="'SF Mono', 'Fira Code', 'JetBrains Mono', Consolas, monospace" font-size="62" font-weight="700" fill="white" text-anchor="middle" letter-spacing="-1">One Skill. 44 Agents.</text>
+  <g transform="translate(890, 58)">
+    <rect width="250" height="40" fill="url(#ph-badge)" stroke="#444" stroke-width="1" rx="20"/>
+    <circle cx="28" cy="20" r="14" fill="#da552f"/>
+    <text x="28" y="25" font-family="system-ui, sans-serif" font-size="16" font-weight="700" fill="white" text-anchor="middle">P</text>
+    <text x="54" y="16" font-family="system-ui, sans-serif" font-size="9" font-weight="600" fill="#888" letter-spacing="1">PRODUCT HUNT</text>
+    <text x="54" y="30" font-family="system-ui, sans-serif" font-size="13" font-weight="700" fill="white">#3 Product of the Day</text>
+  </g>
+
+  <text x="600" y="200" font-family="'SF Mono', 'Fira Code', 'JetBrains Mono', Consolas, monospace" font-size="62" font-weight="700" fill="white" text-anchor="middle" letter-spacing="-1">One Skill. 44 Agents.</text>
 
-  <text x="600" y="235" font-family="'SF Mono', 'Fira Code', 'JetBrains Mono', Consolas, monospace" font-size="20" fill="#888" text-anchor="middle" letter-spacing="0.5">The open source package manager for AI agent skills</text>
+  <text x="600" y="248" font-family="'SF Mono', 'Fira Code', 'JetBrains Mono', Consolas, monospace" font-size="20" fill="#888" text-anchor="middle" letter-spacing="0.5">The open source package manager for AI agent skills</text>
 
-  <g transform="translate(240, 268)">
+  <g transform="translate(240, 282)">
     <rect width="260" height="38" fill="#1a1a1a" stroke="#333" stroke-width="1" rx="6"/>
     <text x="16" y="25" font-family="'SF Mono', 'Fira Code', monospace" font-size="14" fill="#666">$</text>
     <text x="32" y="25" font-family="'SF Mono', 'Fira Code', monospace" font-size="14" fill="#ccc">npx skillkit@latest</text>
   </g>
 
-  <g transform="translate(520, 268)">
+  <g transform="translate(520, 282)">
     <rect width="150" height="38" fill="transparent" stroke="#444" stroke-width="1" rx="6"/>
     <text x="75" y="25" font-family="'SF Mono', 'Fira Code', monospace" font-size="14" fill="#999" text-anchor="middle">15,000+ skills</text>
   </g>
 
-  <g transform="translate(690, 268)">
+  <g transform="translate(690, 282)">
     <rect width="140" height="38" fill="transparent" stroke="#444" stroke-width="1" rx="6"/>
     <text x="70" y="25" font-family="'SF Mono', 'Fira Code', monospace" font-size="14" fill="#999" text-anchor="middle">Zero rewrites</text>
   </g>
 
-  <g transform="translate(850, 268)">
+  <g transform="translate(850, 282)">
     <rect width="120" height="38" fill="transparent" stroke="#444" stroke-width="1" rx="6"/>
     <text x="60" y="25" font-family="'SF Mono', 'Fira Code', monospace" font-size="14" fill="#999" text-anchor="middle">Apache-2.0</text>
   </g>
 
-  <g transform="translate(60, 350)">
+  <g transform="translate(60, 370)">
     <circle cx="5" cy="5" r="3" fill="#666"/>
     <circle cx="15" cy="5" r="3" fill="#555"/>
     <circle cx="25" cy="5" r="3" fill="#444"/>
