feat(website): syntax-highlighted copy-able code blocks + content pass

- Add a CodeBlock component (Shiki highlighting at build time + a hover copy
  button) and use it for every code snippet on the homepage (pipeline, embed,
  dev installs) — replaces the plain <code> tags and the hand-built embed span
  block.

Content pass (factual + onboarding):
- Lead the hero with "Download the app" (Agent UI first — the easiest start),
  with "Start building" as the secondary. New line frames the flow:
  download → run an agent → build your own or embed one in your app.
- Drop the absolute "100% locally" (cloud providers are opt-in) → "locally".
- Fix the Run pipeline command: `python my_agent.py` (no `gaia <id>` run path
  exists for an installed agent — running happens via the app).
- Highlight that hub agents are purpose-built + bulletproof (tested, versioned,
  immutable once published).

Author: kovtcharov

website/src/components/CodeBlock.astro

@@ -0,0 +1,81 @@
+---
+// Copyright(C) 2024-2026 Advanced Micro Devices, Inc. All rights reserved.
+// SPDX-License-Identifier: MIT
+
+// Syntax-highlighted (Shiki, at build time) code block with a hover copy button.
+import { Code } from 'astro:components';
+
+interface Props {
+  code: string;
+  lang?: string;
+  class?: string;
+}
+const { code, lang = 'bash', class: className = '' } = Astro.props;
+---
+
+<div class={`code-block group relative ${className}`}>
+  <Code code={code} lang={lang as any} theme="github-dark" />
+  <button type="button" class="code-copy" data-code-copy={code} aria-label="Copy to clipboard">
+    <svg class="ic ic-copy" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
+    <svg class="ic ic-check" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg>
+  </button>
+</div>
+
+<script>
+  document.querySelectorAll<HTMLButtonElement>('.code-copy').forEach((btn) => {
+    btn.addEventListener('click', async () => {
+      try {
+        await navigator.clipboard.writeText(btn.dataset.codeCopy || '');
+      } catch {
+        return;
+      }
+      btn.classList.add('copied');
+      setTimeout(() => btn.classList.remove('copied'), 1500);
+    });
+  });
+</script>
+
+<style>
+  /* Shiki renders its own <pre>; frame it on tokens. */
+  .code-block :global(pre) {
+    margin: 0;
+    padding: 0.8rem 2.6rem 0.8rem 1rem; /* right pad leaves room for the copy button */
+    border-radius: 0.5rem;
+    border: 1px solid rgb(var(--g-border));
+    overflow-x: auto;
+    font-size: 12.5px;
+    line-height: 1.6;
+  }
+  .code-copy {
+    position: absolute;
+    top: 0.45rem;
+    right: 0.45rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.3rem;
+    border-radius: 0.375rem;
+    border: 1px solid rgb(var(--g-border));
+    background: rgb(var(--g-surface));
+    color: rgb(var(--g-muted));
+    opacity: 0;
+    transition: opacity 0.15s ease, color 0.15s ease;
+  }
+  .code-block:hover .code-copy,
+  .code-copy:focus-visible {
+    opacity: 1;
+  }
+  .code-copy:hover {
+    color: rgb(var(--g-text));
+  }
+  .ic-check {
+    display: none;
+  }
+  .code-copy.copied .ic-copy {
+    display: none;
+  }
+  .code-copy.copied .ic-check {
+    display: inline;
+    color: rgb(var(--g-gold-text));
+  }
+</style>

website/src/pages/index.astro

@@ -10,6 +10,7 @@ import AuroraBg from '../components/AuroraBg.astro';
 import AgentIcon from '../components/AgentIcon.astro';
 import FeaturedCard from '../components/FeaturedCard.astro';
 import DownloadButton from '../components/DownloadButton.astro';
+import CodeBlock from '../components/CodeBlock.astro';
 import { getCatalog } from '../data/catalog';
 
 const agents = await getCatalog();
@@ -29,8 +30,8 @@ const pipeline = [
   {
     step: 'Run',
     icon: 'cpu',
-    body: 'It runs 100% locally on AI PCs — AMD Ryzen AI first-class, via Lemonade. Private by default, no API keys required. Cloud models are opt-in.',
-    code: 'gaia my-agent "..."',
+    body: 'It runs locally on AI PCs — AMD Ryzen AI first-class, via Lemonade. Private by default, no API keys required; cloud models are opt-in.',
+    code: 'python my_agent.py',
   },
   {
     step: 'Distribute',
@@ -54,6 +55,12 @@ const devInstalls = [
   { label: 'pip', cmd: 'uv pip install amd-gaia', note: 'The Python SDK + CLI framework.' },
   { label: 'script', cmd: 'curl -fsSL https://amd-gaia.ai/install.sh | sh', note: 'One-line install (Windows: irm …install.ps1 | iex).' },
 ];
+
+const embedSnippet = `// embed the email agent as a local sidecar
+import { fetchBinary, startSidecar } from "@amd-gaia/agent-email";
+
+const { binaryPath } = await fetchBinary({ outDir: "resources" });
+const sidecar = await startSidecar({ binaryPath, port: 8131 });`;
 ---
 
 <Layout title="GAIA — The Agent Factory" description="Build, run, and distribute AI agents that run locally on AI PCs.">
@@ -69,17 +76,17 @@ const devInstalls = [
           GAIA — The Agent&nbsp;Factory.
         </h1>
         <p class="mt-5 text-lg text-g-muted max-w-2xl mx-auto">
-          Build, run, and distribute AI agents that run <strong class="text-g-text font-semibold">100% locally on AI PCs</strong> —
+          Build, run, and distribute AI agents that run <strong class="text-g-text font-semibold">locally on AI PCs</strong> —
           private by default, no API keys required. Write one in minutes; publish to the Agent Hub and anyone can install it in one click.
         </p>
         <div class="mt-9 flex flex-wrap items-center justify-center gap-3">
-          <a href={QUICKSTART} class="rounded-md bg-g-gold px-6 py-3 text-sm font-semibold text-black hover:brightness-110 transition">
+          <DownloadButton variant="primary" size="lg" />
+          <a href={QUICKSTART} class="rounded-md border border-g-border px-6 py-3 text-sm font-semibold text-g-text hover:border-g-gold/50 transition-colors">
             Start building
           </a>
-          <DownloadButton variant="secondary" size="lg" />
         </div>
         <p class="mt-3 text-xs text-g-muted">
-          Free · Windows, macOS, Linux · or <a href="#developers" class="text-g-gold-text hover:underline">install via CLI →</a>
+          Fastest start: download, browse the hub, run an agent — then build your own or embed one in your app. Free · Windows, macOS, Linux · or <a href="#developers" class="text-g-gold-text hover:underline">install via CLI →</a>
         </p>
         <!-- Trust strip -->
         <div class="mt-8 flex flex-wrap items-center justify-center gap-x-5 gap-y-2 text-[12px] text-g-muted">
@@ -106,7 +113,7 @@ const devInstalls = [
             </span>
             <h3 class="mt-4 text-lg font-semibold text-g-text">{p.step}</h3>
             <p class="mt-2 text-[14px] text-g-muted leading-relaxed">{p.body}</p>
-            <code class="mt-4 block rounded-md border border-g-border bg-g-bg px-3 py-2 font-mono text-[12.5px] text-g-gold-text overflow-x-auto">$ {p.code}</code>
+            <CodeBlock code={p.code} lang="bash" class="mt-4" />
           </div>
         ))}
       </div>
@@ -147,12 +154,7 @@ const devInstalls = [
             <span>· Signed &amp; checksummed artifacts</span>
           </div>
         </div>
-        <div class="rounded-xl border border-g-border bg-g-bg p-5 font-mono text-[12.5px] text-g-text overflow-x-auto">
-          <span class="text-g-muted">// embed the email agent as a local sidecar</span><br />
-          <span class="text-g-gold-text">import</span> {'{ fetchBinary, startSidecar }'} <span class="text-g-gold-text">from</span> "@amd-gaia/agent-email";<br /><br />
-          <span class="text-g-gold-text">const</span> {'{ binaryPath }'} = <span class="text-g-gold-text">await</span> fetchBinary({'{ outDir: "resources" }'});<br />
-          <span class="text-g-gold-text">const</span> sidecar = <span class="text-g-gold-text">await</span> startSidecar({'{ binaryPath, port: 8131 }'});
-        </div>
+        <CodeBlock code={embedSnippet} lang="ts" />
       </div>
     </section>
 
@@ -162,8 +164,12 @@ const devInstalls = [
         <div>
           <Eyebrow class="mb-2">Agent Hub</Eyebrow>
           <h2 class="text-2xl font-bold tracking-tight">There's an agent for that.</h2>
+          <p class="mt-2 max-w-lg text-[14px] text-g-muted">
+            Each one is <strong class="font-semibold text-g-text">purpose-built</strong> for a single job and
+            <strong class="font-semibold text-g-text">bulletproof</strong> — tested, versioned, and immutable once published.
+          </p>
         </div>
-        <a href="/hub" class="text-sm text-g-gold-text hover:underline">All agents →</a>
+        <a href="/hub" class="whitespace-nowrap text-sm text-g-gold-text hover:underline">All agents →</a>
       </div>
       {featured.length > 0 && (
         <div class="grid sm:grid-cols-3 gap-5">
@@ -182,7 +188,7 @@ const devInstalls = [
           {devInstalls.map((d) => (
             <div class="rounded-xl border border-g-border bg-g-surface p-5">
               <div class="text-[11px] font-bold uppercase tracking-wide text-g-gold-text">{d.label}</div>
-              <code class="mt-2 block rounded-md border border-g-border bg-g-bg px-3 py-2 font-mono text-[12px] text-g-text overflow-x-auto">{d.cmd}</code>
+              <CodeBlock code={d.cmd} lang="bash" class="mt-2" />
               <p class="mt-2 text-[12.5px] text-g-muted">{d.note}</p>
             </div>
           ))}