Add Stats section, tersify/aimemo install switcher in Hero

- Hero: tab switcher between tersify and aimemo install commands,
  copy button now copies whichever tab is active
- Stats: new section (By the numbers) between Projects and Releases
- index: plug Stats into the home page layout

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: Strawbang

src/components/Hero.astro

@@ -15,9 +15,13 @@
       Rust tools built for the reality of AI-assisted development.
     </p>
 
+    <div class="install-tabs">
+      <button class="itab active" data-cmd="cargo install tersify">tersify</button>
+      <button class="itab" data-cmd="cargo install aimemo">aimemo</button>
+    </div>
     <div class="install-block">
       <span class="install-prompt">$</span>
-      <code id="install-cmd">cargo install aimemo</code>
+      <code id="install-cmd">cargo install tersify</code>
       <button class="copy-btn" id="copy-btn" aria-label="Copy install command">
         <svg id="icon-copy" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
           <rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/>
@@ -132,6 +136,37 @@
   }
 
   /* Install block */
+  .install-tabs {
+    display: inline-flex;
+    gap: 0;
+    margin-bottom: 0.5rem;
+    opacity: 0;
+    animation: fadeUp 0.7s ease forwards 0.4s;
+  }
+
+  .itab {
+    font-family: 'IBM Plex Mono', monospace;
+    font-size: 0.72rem;
+    padding: 0.3rem 0.75rem;
+    background: none;
+    border: 1px solid var(--border);
+    color: var(--text-dim);
+    cursor: pointer;
+    letter-spacing: 0.06em;
+    transition: color 0.2s, background 0.2s, border-color 0.2s;
+  }
+
+  .itab:first-child { border-radius: 3px 0 0 3px; }
+  .itab:last-child { border-radius: 0 3px 3px 0; margin-left: -1px; }
+
+  .itab.active {
+    background: var(--rust-glow);
+    border-color: var(--rust-dim);
+    color: var(--rust);
+  }
+
+  .itab:not(.active):hover { color: var(--text); border-color: var(--border-hi); }
+
   .install-block {
     display: inline-flex;
     align-items: center;
@@ -230,8 +265,19 @@
   const iconCopy = document.getElementById('icon-copy');
   const iconCheck = document.getElementById('icon-check');
 
+  const tabs = document.querySelectorAll<HTMLButtonElement>('.itab');
+  const cmdEl = document.getElementById('install-cmd')!;
+
+  tabs.forEach((tab) => {
+    tab.addEventListener('click', () => {
+      tabs.forEach((t) => t.classList.remove('active'));
+      tab.classList.add('active');
+      cmdEl.textContent = tab.dataset.cmd!;
+    });
+  });
+
   btn?.addEventListener('click', () => {
-    navigator.clipboard.writeText('cargo install aimemo');
+    navigator.clipboard.writeText(cmdEl.textContent!);
     btn.classList.add('copied');
     iconCopy!.style.display = 'none';
     iconCheck!.style.display = 'block';

src/components/Stats.astro

@@ -0,0 +1,94 @@
+---
+const facts = [
+  {
+    value: '50%',
+    label: 'fewer tokens',
+    desc: 'tersify strips noise from code and text before it reaches your LLM — without losing meaning.',
+  },
+  {
+    value: '1 cmd',
+    label: 'to install',
+    desc: 'cargo install aimemo or cargo install tersify. No config files, no manual steps.',
+  },
+  {
+    value: '4',
+    label: 'AI editors',
+    desc: 'aimemo works with Claude Code, Cursor, Windsurf, and GitHub Copilot — out of the box, zero configuration.',
+  },
+  {
+    value: 'v0.5',
+    label: 'tersify',
+    desc: 'tersify v0.5.0 — language-aware compression for Rust, Python, JavaScript, and more.',
+  },
+];
+---
+
+<section class="stats">
+  <div class="section-inner">
+    <div class="section-label reveal">By the numbers</div>
+    <h2 class="reveal">Built to perform</h2>
+    <p class="section-sub reveal">No benchmarks against imaginary competitors — just what our tools actually do.</p>
+
+    <div class="facts-grid">
+      {facts.map((f) => (
+        <div class="fact-item reveal">
+          <div class="fact-value">{f.value}</div>
+          <div class="fact-label">{f.label}</div>
+          <p class="fact-desc">{f.desc}</p>
+        </div>
+      ))}
+    </div>
+  </div>
+</section>
+
+<style>
+  .stats {
+    background: var(--bg-2);
+    border-top: 1px solid var(--border);
+    border-bottom: 1px solid var(--border);
+  }
+
+  .facts-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 0;
+    margin-top: 3rem;
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    overflow: hidden;
+  }
+
+  .fact-item {
+    padding: 2rem 1.75rem;
+    border-right: 1px solid var(--border);
+    border-bottom: 1px solid var(--border);
+    transition: background 0.2s;
+  }
+
+  .fact-item:hover { background: var(--bg-3); }
+
+  .fact-value {
+    font-family: 'Space Mono', monospace;
+    font-size: 2rem;
+    font-weight: 700;
+    color: var(--rust);
+    letter-spacing: -0.04em;
+    line-height: 1;
+    margin-bottom: 0.3rem;
+  }
+
+  .fact-label {
+    font-family: 'IBM Plex Mono', monospace;
+    font-size: 0.72rem;
+    color: var(--text-dim);
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    margin-bottom: 1rem;
+  }
+
+  .fact-desc {
+    font-size: 0.83rem;
+    color: var(--text-muted);
+    line-height: 1.65;
+  }
+</style>

src/pages/index.astro

@@ -3,6 +3,7 @@ import Layout from '../layouts/Layout.astro';
 import Nav from '../components/Nav.astro';
 import Hero from '../components/Hero.astro';
 import Projects from '../components/Projects.astro';
+import Stats from '../components/Stats.astro';
 import Releases from '../components/Releases.astro';
 import Footer from '../components/Footer.astro';
 ---
@@ -11,7 +12,8 @@ import Footer from '../components/Footer.astro';
   <Nav />
   <Hero />
   <Projects />
-<Releases />
+  <Stats />
+  <Releases />
   <Footer />
 </Layout>