From 23468aa7ab8253f7bc0f023ac725b3fabf2b5429 Mon Sep 17 00:00:00 2001
From: Alexey Pelykh <alexey.pelykh@gmail.com>
Date: Sat, 7 Mar 2026 19:38:06 +0100
Subject: [PATCH] (feat) redesign install section with OS tab switcher in hero

Move the install UI into the hero section with a macOS/Linux | Windows | npm
pill switcher. Use remoteclaw.sh as the primary install URL. Auto-detects
visitor OS to pre-select the right tab. Remove the separate InstallBlock
section from the page layout.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/Hero.astro         | 195 ++++++++++++++++++++++----
 src/components/InstallBlock.astro | 218 ++++++++++++++++++++++++++----
 src/pages/index.astro             |   2 -
 3 files changed, 365 insertions(+), 50 deletions(-)

diff --git a/src/components/Hero.astro b/src/components/Hero.astro
index 32578fc..6651e22 100644
--- a/src/components/Hero.astro
+++ b/src/components/Hero.astro
@@ -1,27 +1,142 @@
 ---
+const tabs = [
+    { id: "unix", label: "macOS / Linux" },
+    { id: "windows", label: "Windows" },
+    { id: "npm", label: "npm" },
+];
 ---
 
 <section class="px-6 py-20 text-center sm:py-28 lg:py-36">
     <div class="mx-auto max-w-3xl">
-        <h1 class="font-heading text-4xl font-bold leading-tight sm:text-5xl lg:text-6xl">
-            Your <span class="font-mono text-accent">~/.<span class="text-accent-light">&lt;agent&gt;</span></span> &mdash; remotely.
+        <h1
+            class="font-heading text-4xl font-bold leading-tight sm:text-5xl lg:text-6xl"
+        >
+            Your <span class="font-mono text-accent"
+                >~/.<span class="text-accent-light">&lt;agent&gt;</span></span
+            > &mdash; remotely.
         </h1>
-        <p class="mx-auto mt-6 max-w-2xl text-lg text-text-secondary sm:text-xl">
-            Self-hosted middleware that connects Claude Code, Gemini CLI,
-            Codex CLI, and OpenCode to 22+ messaging channels.
+        <p
+            class="mx-auto mt-6 max-w-2xl text-lg text-text-secondary sm:text-xl"
+        >
+            Self-hosted middleware that connects Claude Code, Gemini CLI, Codex
+            CLI, and OpenCode to 22+ messaging channels.
         </p>
-        <div class="mt-10 flex flex-col items-center gap-4">
+
+        <!-- Install switcher -->
+        <div class="mx-auto mt-10 max-w-lg">
             <div
-                id="hero-install"
-                class="group relative inline-flex cursor-pointer items-center rounded-lg border border-border bg-bg-surface px-5 py-3 font-mono text-sm transition-colors hover:border-accent/50"
-                role="button"
-                tabindex="0"
+                class="flex items-center justify-center gap-1 rounded-lg border border-border bg-bg-surface p-1"
+                role="tablist"
             >
-                <span class="select-all text-text-primary">npm install -g remoteclaw</span>
-                <span class="ml-3 text-text-secondary transition-colors group-hover:text-accent-light">
-                    copy
-                </span>
+                {
+                    tabs.map((tab) => (
+                        <button
+                            role="tab"
+                            aria-selected={tab.id === "unix" ? "true" : "false"}
+                            aria-controls={`panel-${tab.id}`}
+                            data-tab={tab.id}
+                            class:list={[
+                                "install-tab rounded-md px-4 py-2 text-sm transition-colors",
+                                tab.id === "unix"
+                                    ? "bg-accent/15 text-accent-light"
+                                    : "text-text-secondary hover:text-text-primary",
+                            ]}
+                        >
+                            {tab.label}
+                        </button>
+                    ))
+                }
+            </div>
+
+            <div class="mt-4">
+                <!-- macOS / Linux -->
+                <div
+                    id="panel-unix"
+                    role="tabpanel"
+                    class="install-panel space-y-3"
+                >
+                    <div
+                        class="flex items-center justify-between rounded-lg border border-border bg-bg-surface px-5 py-3 font-mono text-sm"
+                    >
+                        <div class="min-w-0">
+                            <span class="text-text-secondary">$</span>
+                            <span class="ml-2 select-all text-text-primary"
+                                >curl -fsSL remoteclaw.sh | sh</span
+                            >
+                        </div>
+                        <button
+                            class="copy-btn ml-3 shrink-0 text-text-secondary transition-colors hover:text-accent-light"
+                            data-text="curl -fsSL remoteclaw.sh | sh"
+                            type="button"
+                        >
+                            copy
+                        </button>
+                    </div>
+                    <p class="text-left text-xs text-text-secondary">
+                        Detects your OS and installs Node if needed. No root
+                        required on macOS.
+                    </p>
+                </div>
+
+                <!-- Windows -->
+                <div
+                    id="panel-windows"
+                    role="tabpanel"
+                    class="install-panel hidden space-y-3"
+                >
+                    <div
+                        class="flex items-center justify-between rounded-lg border border-border bg-bg-surface px-5 py-3 font-mono text-sm"
+                    >
+                        <div class="min-w-0">
+                            <span class="text-text-secondary">&gt;</span>
+                            <span class="ml-2 select-all text-text-primary"
+                                >irm remoteclaw.org/install.ps1 | iex</span
+                            >
+                        </div>
+                        <button
+                            class="copy-btn ml-3 shrink-0 text-text-secondary transition-colors hover:text-accent-light"
+                            data-text="irm remoteclaw.org/install.ps1 | iex"
+                            type="button"
+                        >
+                            copy
+                        </button>
+                    </div>
+                    <p class="text-left text-xs text-text-secondary">
+                        Run in PowerShell. Installs Node if needed.
+                    </p>
+                </div>
+
+                <!-- npm -->
+                <div
+                    id="panel-npm"
+                    role="tabpanel"
+                    class="install-panel hidden space-y-3"
+                >
+                    <div
+                        class="flex items-center justify-between rounded-lg border border-border bg-bg-surface px-5 py-3 font-mono text-sm"
+                    >
+                        <div class="min-w-0">
+                            <span class="text-text-secondary">$</span>
+                            <span class="ml-2 select-all text-text-primary"
+                                >npm install -g remoteclaw</span
+                            >
+                        </div>
+                        <button
+                            class="copy-btn ml-3 shrink-0 text-text-secondary transition-colors hover:text-accent-light"
+                            data-text="npm install -g remoteclaw"
+                            type="button"
+                        >
+                            copy
+                        </button>
+                    </div>
+                    <p class="text-left text-xs text-text-secondary">
+                        Requires Node.js 18+. Works on all platforms.
+                    </p>
+                </div>
             </div>
+        </div>
+
+        <div class="mt-6">
             <a
                 href="https://docs.remoteclaw.org"
                 class="text-sm text-text-secondary transition-colors hover:text-accent-light"
@@ -33,15 +148,49 @@
 </section>
 
 <script>
-    const el = document.getElementById("hero-install");
-    if (el) {
-        el.addEventListener("click", () => {
-            navigator.clipboard.writeText("npm install -g remoteclaw");
-            const label = el.querySelector("span:last-child");
-            if (label) {
-                label.textContent = "copied!";
-                setTimeout(() => (label.textContent = "copy"), 2000);
+    // Tab switching
+    document.querySelectorAll(".install-tab").forEach((tab) => {
+        tab.addEventListener("click", () => {
+            const target = (tab as HTMLElement).dataset.tab;
+
+            document.querySelectorAll(".install-tab").forEach((t) => {
+                const isActive = (t as HTMLElement).dataset.tab === target;
+                t.setAttribute("aria-selected", String(isActive));
+                t.classList.toggle("bg-accent/15", isActive);
+                t.classList.toggle("text-accent-light", isActive);
+                t.classList.toggle("text-text-secondary", !isActive);
+                t.classList.toggle("hover:text-text-primary", !isActive);
+            });
+
+            document.querySelectorAll(".install-panel").forEach((panel) => {
+                panel.classList.toggle(
+                    "hidden",
+                    panel.id !== `panel-${target}`,
+                );
+            });
+        });
+    });
+
+    // Copy buttons
+    document.querySelectorAll(".copy-btn").forEach((btn) => {
+        btn.addEventListener("click", () => {
+            const text = (btn as HTMLElement).dataset.text;
+            if (text) {
+                navigator.clipboard.writeText(text);
+                btn.textContent = "copied!";
+                setTimeout(() => (btn.textContent = "copy"), 2000);
             }
         });
-    }
+    });
+
+    // Auto-detect OS
+    (() => {
+        const ua = navigator.userAgent;
+        if (/Win/.test(ua)) {
+            const tab = document.querySelector(
+                '.install-tab[data-tab="windows"]',
+            );
+            if (tab) (tab as HTMLElement).click();
+        }
+    })();
 </script>
diff --git a/src/components/InstallBlock.astro b/src/components/InstallBlock.astro
index 1a74c2f..c4bb3cc 100644
--- a/src/components/InstallBlock.astro
+++ b/src/components/InstallBlock.astro
@@ -1,46 +1,200 @@
 ---
+const tabs = [
+    { id: "unix", label: "macOS / Linux" },
+    { id: "windows", label: "Windows" },
+    { id: "npm", label: "npm" },
+];
 ---
 
 <section id="install" class="border-t border-border px-6 py-16">
-    <div class="mx-auto max-w-xl text-center">
-        <h2 class="font-heading text-2xl font-bold sm:text-3xl">
+    <div class="mx-auto max-w-xl">
+        <h2 class="text-center font-heading text-2xl font-bold sm:text-3xl">
             Get started
         </h2>
-        <p class="mt-3 text-text-secondary">
+        <p class="mt-3 text-center text-text-secondary">
             Install RemoteClaw in seconds.
         </p>
-        <div class="mt-8 space-y-3">
-            <div class="flex items-center justify-between rounded-lg border border-border bg-bg-surface px-5 py-3 font-mono text-sm">
-                <div>
-                    <span class="text-text-secondary">$</span>
-                    <span class="ml-2 select-all text-text-primary">npm install -g remoteclaw</span>
-                </div>
-                <button
-                    class="copy-btn text-text-secondary transition-colors hover:text-accent-light"
-                    data-text="npm install -g remoteclaw"
-                    type="button"
+
+        <!-- Tab switcher -->
+        <div
+            class="mt-8 flex items-center justify-center gap-1 rounded-lg border border-border bg-bg-surface p-1"
+            role="tablist"
+        >
+            {
+                tabs.map((tab) => (
+                    <button
+                        role="tab"
+                        aria-selected={tab.id === "unix" ? "true" : "false"}
+                        aria-controls={`panel-${tab.id}`}
+                        data-tab={tab.id}
+                        class:list={[
+                            "install-tab rounded-md px-4 py-2 text-sm transition-colors",
+                            tab.id === "unix"
+                                ? "bg-accent/15 text-accent-light"
+                                : "text-text-secondary hover:text-text-primary",
+                        ]}
+                    >
+                        {tab.label}
+                    </button>
+                ))
+            }
+        </div>
+
+        <!-- Tab panels -->
+        <div class="mt-4">
+            <!-- macOS / Linux -->
+            <div id="panel-unix" role="tabpanel" class="install-panel space-y-3">
+                <div
+                    class="flex items-center justify-between rounded-lg border border-border bg-bg-surface px-5 py-3 font-mono text-sm"
                 >
-                    copy
-                </button>
+                    <div>
+                        <span class="text-text-secondary">$</span>
+                        <span class="ml-2 select-all text-text-primary"
+                            >curl -fsSL remoteclaw.sh | sh</span
+                        >
+                    </div>
+                    <button
+                        class="copy-btn shrink-0 text-text-secondary transition-colors hover:text-accent-light"
+                        data-text="curl -fsSL remoteclaw.sh | sh"
+                        type="button"
+                    >
+                        copy
+                    </button>
+                </div>
+                <p class="text-xs text-text-secondary">
+                    Detects your OS, installs Node if needed, then installs
+                    RemoteClaw globally.
+                </p>
+                <details class="group text-sm">
+                    <summary
+                        class="cursor-pointer text-text-secondary transition-colors hover:text-accent-light"
+                    >
+                        Install without root
+                    </summary>
+                    <div
+                        class="mt-2 flex items-center justify-between rounded-lg border border-border bg-bg-surface px-5 py-3 font-mono text-sm"
+                    >
+                        <div>
+                            <span class="text-text-secondary">$</span>
+                            <span class="ml-2 select-all text-text-primary"
+                                >curl -fsSL remoteclaw.sh | sh -s -- --local</span
+                            >
+                        </div>
+                        <button
+                            class="copy-btn shrink-0 text-text-secondary transition-colors hover:text-accent-light"
+                            data-text="curl -fsSL remoteclaw.sh | sh -s -- --local"
+                            type="button"
+                        >
+                            copy
+                        </button>
+                    </div>
+                    <p class="mt-1 text-xs text-text-secondary">
+                        Installs to <code class="text-text-primary">~/.remoteclaw/bin</code> &mdash;
+                        no sudo required.
+                    </p>
+                </details>
             </div>
-            <div class="flex items-center justify-between rounded-lg border border-border bg-bg-surface px-5 py-3 font-mono text-sm">
-                <div>
-                    <span class="text-text-secondary">$</span>
-                    <span class="ml-2 select-all text-text-primary">curl -fsSL remoteclaw.org/install.sh | sh</span>
+
+            <!-- Windows -->
+            <div
+                id="panel-windows"
+                role="tabpanel"
+                class="install-panel hidden space-y-3"
+            >
+                <div
+                    class="flex items-center justify-between rounded-lg border border-border bg-bg-surface px-5 py-3 font-mono text-sm"
+                >
+                    <div>
+                        <span class="text-text-secondary">&gt;</span>
+                        <span class="ml-2 select-all text-text-primary"
+                            >irm remoteclaw.org/install.ps1 | iex</span
+                        >
+                    </div>
+                    <button
+                        class="copy-btn shrink-0 text-text-secondary transition-colors hover:text-accent-light"
+                        data-text="irm remoteclaw.org/install.ps1 | iex"
+                        type="button"
+                    >
+                        copy
+                    </button>
                 </div>
-                <button
-                    class="copy-btn text-text-secondary transition-colors hover:text-accent-light"
-                    data-text="curl -fsSL remoteclaw.org/install.sh | sh"
-                    type="button"
+                <p class="text-xs text-text-secondary">
+                    Run in PowerShell. Installs Node if needed, then installs
+                    RemoteClaw globally.
+                </p>
+            </div>
+
+            <!-- npm -->
+            <div
+                id="panel-npm"
+                role="tabpanel"
+                class="install-panel hidden space-y-3"
+            >
+                <div
+                    class="flex items-center justify-between rounded-lg border border-border bg-bg-surface px-5 py-3 font-mono text-sm"
                 >
-                    copy
-                </button>
+                    <div>
+                        <span class="text-text-secondary">$</span>
+                        <span class="ml-2 select-all text-text-primary"
+                            >npm install -g remoteclaw</span
+                        >
+                    </div>
+                    <button
+                        class="copy-btn shrink-0 text-text-secondary transition-colors hover:text-accent-light"
+                        data-text="npm install -g remoteclaw"
+                        type="button"
+                    >
+                        copy
+                    </button>
+                </div>
+                <p class="text-xs text-text-secondary">
+                    Requires Node.js 18+. Works on all platforms.
+                </p>
             </div>
         </div>
+
+        <!-- Post-install -->
+        <div class="mt-6 text-center text-sm text-text-secondary">
+            Then run:
+            <code class="font-mono text-text-primary">remoteclaw</code>
+            &mdash;
+            <a
+                href="https://docs.remoteclaw.org/getting-started"
+                class="transition-colors hover:text-accent-light"
+            >
+                getting started guide &rarr;
+            </a>
+        </div>
     </div>
 </section>
 
 <script>
+    // Tab switching
+    document.querySelectorAll(".install-tab").forEach((tab) => {
+        tab.addEventListener("click", () => {
+            const target = (tab as HTMLElement).dataset.tab;
+
+            // Update tab states
+            document.querySelectorAll(".install-tab").forEach((t) => {
+                const isActive = (t as HTMLElement).dataset.tab === target;
+                t.setAttribute("aria-selected", String(isActive));
+                t.classList.toggle("bg-accent/15", isActive);
+                t.classList.toggle("text-accent-light", isActive);
+                t.classList.toggle("text-text-secondary", !isActive);
+                t.classList.toggle("hover:text-text-primary", !isActive);
+            });
+
+            // Update panels
+            document.querySelectorAll(".install-panel").forEach((panel) => {
+                panel.classList.toggle(
+                    "hidden",
+                    panel.id !== `panel-${target}`,
+                );
+            });
+        });
+    });
+
+    // Copy buttons
     document.querySelectorAll(".copy-btn").forEach((btn) => {
         btn.addEventListener("click", () => {
             const text = (btn as HTMLElement).dataset.text;
@@ -51,4 +205,18 @@
             }
         });
     });
+
+    // Auto-detect OS and select tab
+    (() => {
+        const ua = navigator.userAgent;
+        let detected = "unix";
+        if (/Win/.test(ua)) detected = "windows";
+
+        const tab = document.querySelector(
+            `.install-tab[data-tab="${detected}"]`,
+        );
+        if (tab && detected !== "unix") {
+            (tab as HTMLElement).click();
+        }
+    })();
 </script>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 05e127e..c019f32 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -7,7 +7,6 @@ import Runtimes from "../components/Runtimes.astro";
 import Channels from "../components/Channels.astro";
 import Features from "../components/Features.astro";
 import Architecture from "../components/Architecture.astro";
-import InstallBlock from "../components/InstallBlock.astro";
 import Footer from "../components/Footer.astro";
 ---
 
@@ -19,7 +18,6 @@ import Footer from "../components/Footer.astro";
         <Channels />
         <Features />
         <Architecture />
-        <InstallBlock />
     </main>
     <Footer />
 </Base>