From e5e0446c64b8e4099dc192cdb0752f90a79ada87 Mon Sep 17 00:00:00 2001
From: Eric Rodriguez <thewavyx@gmail.com>
Date: Sat, 6 Jun 2026 09:45:17 +0200
Subject: [PATCH] feat(web): add an install section to the home page

A four-card Install band (npm / Homebrew / Scoop / Docker) with copyable
commands and OS tags, placed before the CTA. The hero keeps the single
npm one-liner; this section surfaces all channels added in 0.11.
---
 website/src/pages/index.astro | 50 +++++++++++++++++++++++++++++++++++
 website/src/styles/home.css   | 23 ++++++++++++++++
 2 files changed, 73 insertions(+)

diff --git a/website/src/pages/index.astro b/website/src/pages/index.astro
index 1cb7d13..70cf5ea 100644
--- a/website/src/pages/index.astro
+++ b/website/src/pages/index.astro
@@ -245,6 +245,56 @@ const description =
         </div>
       </section>
 
+      <!-- ============ INSTALL ============ -->
+      <section class="install-band">
+        <div class="section">
+          <div class="sec-head center">
+            <p class="sec-eyebrow">Install</p>
+            <h2 class="sec-title">Get it your way.</h2>
+            <p class="sec-desc">npm is the source of truth — Homebrew, Scoop, and Docker track every release.</p>
+          </div>
+          <div class="install-grid">
+            <article class="install-card">
+              <div class="install-card__head"><span class="install-card__name">npm</span><span class="install-card__os">any OS · Node 20+</span></div>
+              <div class="install-line">
+                <span class="dollar">$</span><span class="install-card__cmd">npm i -g <span class="pkg">@wavyx/hscli</span></span>
+                <button class="install-copy" data-copy="npm i -g @wavyx/hscli" aria-label="Copy npm install">
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="11" height="11" rx="2"></rect><path d="M5 15V5a2 2 0 0 1 2-2h10"></path></svg>
+                </button>
+              </div>
+            </article>
+            <article class="install-card">
+              <div class="install-card__head"><span class="install-card__name">Homebrew</span><span class="install-card__os">macOS · Linux</span></div>
+              <div class="install-line">
+                <span class="dollar">$</span><span class="install-card__cmd">brew install <span class="pkg">wavyx/tap/hscli</span></span>
+                <button class="install-copy" data-copy="brew install wavyx/tap/hscli" aria-label="Copy Homebrew install">
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="11" height="11" rx="2"></rect><path d="M5 15V5a2 2 0 0 1 2-2h10"></path></svg>
+                </button>
+              </div>
+            </article>
+            <article class="install-card">
+              <div class="install-card__head"><span class="install-card__name">Scoop</span><span class="install-card__os">Windows</span></div>
+              <div class="install-line">
+                <span class="dollar">$</span><span class="install-card__cmd">scoop install <span class="pkg">hscli</span></span>
+                <button class="install-copy" data-copy="scoop bucket add hscli https://github.com/wavyx/scoop-hscli && scoop install hscli" aria-label="Copy Scoop install">
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="11" height="11" rx="2"></rect><path d="M5 15V5a2 2 0 0 1 2-2h10"></path></svg>
+                </button>
+              </div>
+            </article>
+            <article class="install-card">
+              <div class="install-card__head"><span class="install-card__name">Docker</span><span class="install-card__os">no local Node</span></div>
+              <div class="install-line">
+                <span class="dollar">$</span><span class="install-card__cmd">docker run <span class="pkg">ghcr.io/wavyx/hscli</span></span>
+                <button class="install-copy" data-copy="docker run --rm ghcr.io/wavyx/hscli --help" aria-label="Copy Docker run">
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="11" height="11" rx="2"></rect><path d="M5 15V5a2 2 0 0 1 2-2h10"></path></svg>
+                </button>
+              </div>
+            </article>
+          </div>
+          <p class="install-note">Then <a href={`${base}guides/authentication/`}>authenticate</a> and run <code>hscli conv list</code> — or see the <a href={`${base}guides/installation/`}>installation guide</a>.</p>
+        </div>
+      </section>
+
       <!-- ============ CTA ============ -->
       <section class="cta-band">
         <div class="cta-card section">
diff --git a/website/src/styles/home.css b/website/src/styles/home.css
index 1eeb49b..9d70da4 100644
--- a/website/src/styles/home.css
+++ b/website/src/styles/home.css
@@ -125,6 +125,29 @@
 @media (max-width: 980px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
 @media (max-width: 560px) { .feature-grid { grid-template-columns: 1fr; } }
 
+/* ============================================================
+   INSTALL
+   ============================================================ */
+.install-band { padding: 64px 0; border-top: 1px solid var(--border); }
+.install-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
+.install-card {
+  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
+  padding: 20px; display: flex; flex-direction: column; transition: all var(--dur) var(--ease);
+}
+.install-card:hover { border-color: var(--accent-line); transform: translateY(-2px); box-shadow: var(--shadow-md); }
+.install-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
+.install-card__name { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--fg); letter-spacing: -.01em; }
+.install-card__os { font-family: var(--font-mono); font-size: 11px; color: var(--fg-subtle); white-space: nowrap; }
+.install-card .install-line { margin-top: 14px; display: flex; width: 100%; gap: 8px; font-size: 12.5px; padding: 9px 8px 9px 12px; }
+.install-card__cmd { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
+.install-card .install-line button { margin-left: auto; flex: none; }
+.install-note { text-align: center; margin: 28px 0 0; font-size: 14px; color: var(--fg-muted); }
+.install-note a { color: var(--accent); text-decoration: none; }
+.install-note a:hover { text-decoration: underline; }
+.install-note code { font-family: var(--font-mono); font-size: 12.5px; color: var(--accent); }
+@media (max-width: 980px) { .install-grid { grid-template-columns: repeat(2, 1fr); } }
+@media (max-width: 560px) { .install-grid { grid-template-columns: 1fr; } }
+
 /* ============================================================
    RECIPES (coral is the energy accent here)
    ============================================================ */