site: add Get started install/usage section

[kleczkowski]

Adds a "Get started" section to the landing page covering install and usage, drawn from the README's hosted-setup flow.

What's in the section

• Three step cards: connect the Bitrefill MCP + install qupick, register & connect to the hosted MCP server, then ask in plain English.
• Command panels styled with the existing dark --ink surface and mono/green tokens.
• The natural-language usage example as a quote, plus CTAs to the README setup guide and the repo.
• A matching Get started nav link.

The full 5-step register flow stays in the README; the section links to it rather than reproducing it.

Install framing (MCP-first)

qupick's purchase layer is the Bitrefill MCP (mcp__bitrefill__* tools — search-products, product-details, buy-products, get-invoice-by-id). It does not use the bitrefill skill's own mechanics. Step 1 therefore connects the MCP directly:

claude mcp add --transport http bitrefill https://api.bitrefill.com/mcp
cp -R skills/qupick .claude/skills/

This pairs with #8, which removes the vendored skills/bitrefill/ copy. The two PRs touch disjoint files (this one: site/index.html; #8: README/AGENTS/SKILL + the deletion), so they don't conflict and can merge in either order.

Notes

• New section only — no changes to existing sections or styles beyond added CSS.
• Verified locally: balanced section tags, all nav anchors resolve, served over python3 -m http.server and previewed in-browser.

[augmentcode]

🤖 Augment PR Summary

Summary: Adds a new Get started section to the landing page to help users install and use the hosted qupick/Bitrefill flow.

Changes:

• Introduces new CSS for a three-card “steps” layout plus code/quote callouts.
• Adds a “Get started” section with install, hosted MCP connect, and natural-language usage examples.
• Updates the top navigation to include an in-page “Get started” anchor link.

Technical Notes: Uses existing design tokens (ink/paper/green/mono) and links out to the README/repo for the full setup guide.

_{🤖 Was this summary useful? React with 👍 or 👎}

[augmentcode]

Review completed. 2 suggestions posted.

Comment augment review to trigger a new review at any time.

[augmentcode]

cp -R ... .claude/skills/ assumes .claude/skills/ already exists; on a fresh Claude Code setup these commands will fail unless the directory is created first (the README includes a mkdir -p .claude/skills step).

Severity: medium

_{🤖 Was this useful? React with 👍 or 👎, or 🚀 if it prevented an incident/outage.}

[kleczkowski]

Fixed in 28fc79d — added a mkdir -p .claude/skills line before the cp -R in step 1.

[augmentcode]

The MCP endpoint shown as qupick.quip.network/mcp is missing a URL scheme; .mcp.json typically requires the full https://... URL (as shown in the README). Without it, copy/paste setup is likely to produce an invalid config.

Severity: medium

_{🤖 Was this useful? React with 👍 or 👎, or 🚀 if it prevented an incident/outage.}

[kleczkowski]

Fixed in 28fc79d — the step 2 panel now shows the full https://qupick.quip.network/mcp.