From dc0fef6f8ef752f75f223c6b67b7e1d21338169e Mon Sep 17 00:00:00 2001
From: Konrad Kleczkowski <konrad@kleczkow.ski>
Date: Tue, 30 Jun 2026 12:01:45 +0200
Subject: [PATCH 1/4] site: add Get started install/usage section

---
 site/index.html | 81 +++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 81 insertions(+)

diff --git a/site/index.html b/site/index.html
index 16ba28f..47675a0 100644
--- a/site/index.html
+++ b/site/index.html
@@ -129,6 +129,40 @@
   .pipeline .lead{margin:0 auto 38px}
   .pipeline img{width:100%;max-width:1000px;height:auto;border-radius:var(--radius);box-shadow:0 18px 44px rgba(12,40,24,.12)}
 
+  /* ---------- Get started ---------- */
+  .start{padding:88px 0;border-bottom:1px solid var(--line);background:var(--paper-2)}
+  .start .head{text-align:center;margin:0 auto 48px}
+  .start h2{font-size:clamp(1.9rem,3.4vw,2.6rem);margin-bottom:14px}
+  .start .head .lead{margin:0 auto}
+  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
+  .step{
+    background:#fff;border:1px solid var(--line);border-radius:var(--radius);
+    padding:26px 24px;text-align:left;display:flex;flex-direction:column;
+    box-shadow:0 14px 36px rgba(12,40,24,.06);
+  }
+  .step .n{
+    display:inline-flex;align-items:center;justify-content:center;
+    width:32px;height:32px;border-radius:999px;background:var(--green);color:#fff;
+    font-family:var(--mono);font-size:14px;font-weight:600;margin-bottom:16px;
+  }
+  .step h3{font-size:1.2rem;margin-bottom:10px}
+  .step p{color:var(--ink-soft);font-size:.98rem;margin:0 0 16px}
+  .step code{font-family:var(--mono);font-size:.88em;color:var(--ink);background:rgba(12,20,16,.05);padding:1px 5px;border-radius:5px}
+  .code{
+    margin-top:auto;background:var(--ink);border-radius:12px;padding:14px 16px;
+    font-family:var(--mono);font-size:13px;line-height:1.65;color:#cdd8d1;
+    white-space:pre;overflow-x:auto;
+  }
+  .code .c{color:var(--green-bright)}
+  .code code{background:none;color:inherit;padding:0}
+  .ask{
+    margin-top:auto;background:rgba(22,163,74,.06);border:1px solid rgba(22,163,74,.28);
+    border-radius:12px;padding:15px 17px;color:var(--ink);font-size:1.02rem;
+    font-style:italic;line-height:1.5;
+  }
+  .start .cta{display:flex;gap:14px;justify-content:center;margin-top:40px;flex-wrap:wrap}
+  @media(max-width:860px){.steps{grid-template-columns:1fr}}
+
   /* ---------- Footer ---------- */
   footer{padding:64px 0 56px;background:var(--ink);color:#cdd8d1}
   footer .wrap{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:start}
@@ -152,6 +186,7 @@
       <a href="#qubo">QUBO</a>
       <a href="#pipeline">Pipeline</a>
       <a href="#edge">The edge</a>
+      <a href="#start">Get started</a>
     </nav>
   </div>
 </header>
@@ -291,6 +326,52 @@ <h2>The optimizer settles into the deepest wells</h2>
   </div>
 </section>
 
+<!-- ============== 6. GET STARTED ============== -->
+<section class="start" id="start">
+  <div class="wrap">
+    <div class="head">
+      <p class="eyebrow">Get started</p>
+      <h2>Three steps to first run</h2>
+      <p class="lead">
+        Install the skill into Claude Code, connect it to the hosted quantum backend, then
+        ask in plain English. There's no backend to run yourself.
+      </p>
+    </div>
+    <div class="steps">
+      <div class="step">
+        <span class="n">1</span>
+        <h3>Install the skill</h3>
+        <p>Drop <code>qupick</code> and its sibling <code>bitrefill</code> into Claude Code together.</p>
+        <div class="code"><span class="c">cp -R</span> skills/qupick    .claude/skills/
+<span class="c">cp -R</span> skills/bitrefill .claude/skills/</div>
+      </div>
+      <div class="step">
+        <span class="n">2</span>
+        <h3>Register &amp; connect</h3>
+        <p>
+          Point <code>.mcp.json</code> at the hosted server and register once — your API key is
+          emailed to you. Paste it into the <code>Authorization</code> header and reconnect.
+        </p>
+        <div class="code"><span class="c">url</span>   qupick.quip.network/mcp
+<span class="c">auth</span>  Bearer &lt;key-from-email&gt;</div>
+      </div>
+      <div class="step">
+        <span class="n">3</span>
+        <h3>Just ask</h3>
+        <p>
+          The agent picks your worst-performing asset, settles the bill, then retunes the rest of
+          the basket around it.
+        </p>
+        <div class="ask">"Buy a $20 Steam card and pay with my worst-performing crypto."</div>
+      </div>
+    </div>
+    <div class="cta">
+      <a class="btn primary" href="https://github.com/QuipNetwork/qubitrefill#readme" target="_blank" rel="noopener">Full setup guide → README ↗</a>
+      <a class="btn ghost" href="https://github.com/QuipNetwork/qubitrefill" target="_blank" rel="noopener">View Repo ↗</a>
+    </div>
+  </div>
+</section>
+
 <!-- ================= FOOTER ================= -->
 <footer>
   <div class="wrap">

From 5a140f0cfd0f5d1c4ebbd9afb55cf9af40d32148 Mon Sep 17 00:00:00 2001
From: Konrad Kleczkowski <konrad@kleczkow.ski>
Date: Tue, 30 Jun 2026 12:17:45 +0200
Subject: [PATCH 2/4] site: install bitrefill via upstream plugin, not vendored
 copy

---
 site/index.html | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/site/index.html b/site/index.html
index 47675a0..b2b952c 100644
--- a/site/index.html
+++ b/site/index.html
@@ -340,10 +340,11 @@ <h2>Three steps to first run</h2>
     <div class="steps">
       <div class="step">
         <span class="n">1</span>
-        <h3>Install the skill</h3>
-        <p>Drop <code>qupick</code> and its sibling <code>bitrefill</code> into Claude Code together.</p>
-        <div class="code"><span class="c">cp -R</span> skills/qupick    .claude/skills/
-<span class="c">cp -R</span> skills/bitrefill .claude/skills/</div>
+        <h3>Install the skills</h3>
+        <p>Add the <code>bitrefill</code> plugin from upstream, then drop <code>qupick</code> into Claude Code.</p>
+        <div class="code"><span class="c">/plugin</span> marketplace add bitrefill/agents
+<span class="c">/plugin</span> install bitrefill@bitrefill-skills
+<span class="c">cp -R</span> skills/qupick .claude/skills/</div>
       </div>
       <div class="step">
         <span class="n">2</span>

From 6c1e60d9ad412558e8a673bb1f8ecc6b10b59e01 Mon Sep 17 00:00:00 2001
From: Konrad Kleczkowski <konrad@kleczkow.ski>
Date: Tue, 30 Jun 2026 12:24:39 +0200
Subject: [PATCH 3/4] site: connect Bitrefill MCP instead of installing the
 skill plugin

---
 site/index.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/site/index.html b/site/index.html
index b2b952c..e3dcc89 100644
--- a/site/index.html
+++ b/site/index.html
@@ -340,10 +340,10 @@ <h2>Three steps to first run</h2>
     <div class="steps">
       <div class="step">
         <span class="n">1</span>
-        <h3>Install the skills</h3>
-        <p>Add the <code>bitrefill</code> plugin from upstream, then drop <code>qupick</code> into Claude Code.</p>
-        <div class="code"><span class="c">/plugin</span> marketplace add bitrefill/agents
-<span class="c">/plugin</span> install bitrefill@bitrefill-skills
+        <h3>Connect &amp; install</h3>
+        <p>Connect the <code>bitrefill</code> MCP, then drop <code>qupick</code> into Claude Code.</p>
+        <div class="code"><span class="c">claude mcp add</span> --transport http bitrefill \
+  https://api.bitrefill.com/mcp
 <span class="c">cp -R</span> skills/qupick .claude/skills/</div>
       </div>
       <div class="step">

From 28fc79d17a1c3c63deedba4fc38cbfac3e9e4466 Mon Sep 17 00:00:00 2001
From: Konrad Kleczkowski <konrad@kleczkow.ski>
Date: Tue, 30 Jun 2026 12:33:14 +0200
Subject: [PATCH 4/4] site: add mkdir step and full https URL in Get started

---
 site/index.html | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/site/index.html b/site/index.html
index e3dcc89..582641c 100644
--- a/site/index.html
+++ b/site/index.html
@@ -344,6 +344,7 @@ <h3>Connect &amp; install</h3>
         <p>Connect the <code>bitrefill</code> MCP, then drop <code>qupick</code> into Claude Code.</p>
         <div class="code"><span class="c">claude mcp add</span> --transport http bitrefill \
   https://api.bitrefill.com/mcp
+<span class="c">mkdir -p</span> .claude/skills
 <span class="c">cp -R</span> skills/qupick .claude/skills/</div>
       </div>
       <div class="step">
@@ -353,7 +354,7 @@ <h3>Register &amp; connect</h3>
           Point <code>.mcp.json</code> at the hosted server and register once — your API key is
           emailed to you. Paste it into the <code>Authorization</code> header and reconnect.
         </p>
-        <div class="code"><span class="c">url</span>   qupick.quip.network/mcp
+        <div class="code"><span class="c">url</span>   https://qupick.quip.network/mcp
 <span class="c">auth</span>  Bearer &lt;key-from-email&gt;</div>
       </div>
       <div class="step">