Add install tabs (Homebrew, Cargo, npm) to docs homepage

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

Author: m2de

docs/assets/style.css

@@ -171,15 +171,68 @@ main {
   margin: 0 auto 2rem;
 }
 
-.install-block {
-  display: inline-block;
+.install-tabs {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0;
+  max-width: 480px;
+  width: 100%;
+}
+
+.install-tab-buttons {
+  display: flex;
+  gap: 0;
+  border: 1px solid var(--border);
+  border-bottom: none;
+  border-radius: 8px 8px 0 0;
+  overflow: hidden;
+  background: var(--bg-secondary);
+  width: 100%;
+}
+
+.install-tab {
+  flex: 1;
+  padding: 0.5rem 1rem;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  border: none;
+  background: transparent;
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: color 0.15s, background 0.15s;
+  border-right: 1px solid var(--border);
+}
+
+.install-tab:last-child {
+  border-right: none;
+}
+
+.install-tab:hover {
+  color: var(--text);
+}
+
+.install-tab.active {
+  background: var(--bg-code);
+  color: var(--text);
+  font-weight: 600;
+}
+
+.install-panel {
+  display: none;
+  width: 100%;
   background: var(--bg-code);
   border: 1px solid var(--border);
-  border-radius: 8px;
+  border-radius: 0 0 8px 8px;
   padding: 0.75rem 1.5rem;
   font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
   font-size: 0.9375rem;
   color: var(--text);
+  text-align: left;
+}
+
+.install-panel.active {
+  display: block;
 }
 
 /* ===== Search & Filters ===== */

docs/templates/index.html

@@ -26,7 +26,16 @@
 <section class="hero">
   <h1>Stop Googling API setup docs</h1>
   <p>Step-by-step interactive guides for setting up API credentials. Browse the guides below, or install the CLI and follow along in your terminal.</p>
-  <div class="install-block">cargo install getapi</div>
+  <div class="install-tabs" id="install-tabs">
+    <div class="install-tab-buttons">
+      <button class="install-tab active" data-tab="brew">Homebrew</button>
+      <button class="install-tab" data-tab="cargo">Cargo</button>
+      <button class="install-tab" data-tab="npm">npm</button>
+    </div>
+    <div class="install-panel active" data-tab="brew">brew install m2de/tap/getapi</div>
+    <div class="install-panel" data-tab="cargo">cargo install getapi</div>
+    <div class="install-panel" data-tab="npm">npx getapi-cli list</div>
+  </div>
 </section>
 
 <section class="filters">
@@ -68,6 +77,19 @@ <h1>Stop Googling API setup docs</h1>
 
 {% block scripts %}
 <script>
+(function() {
+  var tabs = document.querySelectorAll('.install-tab');
+  var panels = document.querySelectorAll('.install-panel');
+  tabs.forEach(function(tab) {
+    tab.addEventListener('click', function() {
+      var t = tab.getAttribute('data-tab');
+      tabs.forEach(function(b) { b.classList.remove('active'); });
+      panels.forEach(function(p) { p.classList.remove('active'); });
+      tab.classList.add('active');
+      document.querySelector('.install-panel[data-tab="' + t + '"]').classList.add('active');
+    });
+  });
+})();
 (function() {
   var search = document.getElementById('search');
   var pills = document.querySelectorAll('.pill');