feat(header): add repo, docs, and sipeed buttons with icons (#2)

- Replace single Sipeed button with three header buttons (PicoClaw Repo, Documentation, Visit Sipeed) on a separate row with inline SVG icons
- Align subscribe card buttons to bottom with flex layout
- Add picoclaw.io site source link to footer
- Add i18n support for all new elements

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: imguoguo

index.html

@@ -96,26 +96,35 @@
     .badge-link { display: inline-flex; text-decoration: none; }
     .badge-link img { display: block; border-radius: 4px; }
 
-    .btn-sipeed {
+    .header-buttons {
+      position: relative; z-index: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 10px;
+      margin-top: 12px;
+    }
+
+    .btn-header {
       display: inline-flex;
       align-items: center;
-      gap: 6px;
-      padding: 6px 16px;
+      gap: 7px;
+      padding: 8px 20px;
       border-radius: 8px;
       border: 1px solid rgba(255, 255, 255, 0.22);
-      background: linear-gradient(140deg, #2d78e8, #0099c2);
-      color: #fff;
-      font-size: 0.82rem;
+      background: rgba(255, 255, 255, 0.06);
+      color: var(--accent);
+      font-size: 0.92rem;
       font-weight: 600;
       text-decoration: none;
-      transition: transform .2s, box-shadow .2s, border-color .2s;
-      box-shadow: 0 4px 14px rgba(45, 120, 232, 0.3);
+      transition: transform .2s, box-shadow .2s, border-color .2s, background .2s, color .2s;
     }
-    .btn-sipeed:hover {
+    .btn-header:hover {
       transform: translateY(-2px);
-      border-color: rgba(255, 255, 255, 0.5);
-      box-shadow: 0 8px 22px rgba(45, 120, 232, 0.45);
+      border-color: var(--accent);
+      background: var(--accent);
       color: #fff;
+      box-shadow: 0 8px 22px rgba(88, 166, 255, 0.3);
     }
 
     /* ─── MAIN ───────────────────────────────────────────────── */
@@ -384,6 +393,8 @@
     }
 
     .form-card {
+      display: flex;
+      flex-direction: column;
       background: var(--bg-card);
       border: 1px solid var(--border);
       border-radius: 16px;
@@ -396,12 +407,13 @@
     .form-card:hover { border-color: var(--border-h); background: var(--bg-card-h); }
 
     .form-card h3 { font-size: 0.92rem; font-weight: 600; color: var(--text); margin-bottom: 6px; }
-    .form-card p  { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 14px; line-height: 1.5; }
+    .form-card p  { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 0; line-height: 1.5; flex: 1; }
+    .form-card .form-link { margin-top: 14px; align-self: flex-start; }
 
     .form-link {
       display: inline-flex;
       align-items: center;
-      padding: 7px 14px;
+      padding: 9px 14px;
       border-radius: 8px;
       border: 1px solid var(--accent);
       background: transparent;
@@ -503,7 +515,20 @@
         <img src="https://img.shields.io/github/stars/sipeed/picoclaw?style=flat-square&logo=github&color=f5a623&labelColor=0d1117&logoColor=white"
              alt="GitHub Stars" height="24" />
       </a>
-      <a class="btn-sipeed" href="https://www.sipeed.com" target="_blank" rel="noopener noreferrer" data-i18n="sipeed-visit">Visit Sipeed</a>
+    </div>
+    <div class="header-buttons reveal d3">
+      <a class="btn-header" href="https://github.com/sipeed/picoclaw" target="_blank" rel="noopener noreferrer">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z"/></svg>
+        <span data-i18n="btn-repo">PicoClaw Repo</span>
+      </a>
+      <a class="btn-header" href="https://docs.picoclaw.io" target="_blank" rel="noopener noreferrer">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>
+        <span data-i18n="btn-docs">Documentation</span>
+      </a>
+      <a class="btn-header" href="https://www.sipeed.com" target="_blank" rel="noopener noreferrer">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
+        <span data-i18n="sipeed-visit">Visit Sipeed</span>
+      </a>
     </div>
   </header>
 
@@ -571,6 +596,8 @@ <h3 data-i18n="subscribe-cn">Mainland China · Feishu</h3>
       <a href="https://github.com/sipeed/picoclaw/releases" target="_blank" rel="noopener noreferrer" data-i18n="footer-releases">All Releases</a>
       <span class="footer-sep">·</span>
       <a href="https://github.com/sipeed/picoclaw/issues" target="_blank" rel="noopener noreferrer" data-i18n="footer-issues">Issues</a>
+      <span class="footer-sep">·</span>
+      <a href="https://github.com/sipeed/picoclaw.io" target="_blank" rel="noopener noreferrer" data-i18n="footer-site-repo">Site Source</a>
     </div>
     <div id="footer-credit">PicoClaw is open-source software by <a href="https://github.com/sipeed" target="_blank" rel="noopener noreferrer">Sipeed</a></div>
   </footer>
@@ -588,11 +615,14 @@ <h3 data-i18n="subscribe-cn">Mainland China · Feishu</h3>
         'footer-docs':          'Docs',
         'footer-releases':      'All Releases',
         'footer-issues':        'Issues',
+        'footer-site-repo':     'Site Source',
         'footer-credit':        'PicoClaw is open-source software by <a href="https://github.com/sipeed" target="_blank" rel="noopener noreferrer">Sipeed</a>',
         'load-error':           'Failed to load release info.',
         'view-github':          'View on GitHub →',
         'arch-count':           n => `${n} architecture${n > 1 ? 's' : ''}`,
         'sipeed-visit':         'Visit Sipeed',
+        'btn-repo':             'PicoClaw Repo',
+        'btn-docs':             'Documentation',
         'subscribe-title':      'Stay Connected',
         'subscribe-desc':       'Subscribe for news and product updates.',
         'subscribe-global':     'Global · Google Form',
@@ -612,11 +642,14 @@ <h3 data-i18n="subscribe-cn">Mainland China · Feishu</h3>
         'footer-docs':          '文档',
         'footer-releases':      '所有版本',
         'footer-issues':        '问题反馈',
+        'footer-site-repo':     '网站源码',
         'footer-credit':        'PicoClaw 是由 <a href="https://github.com/sipeed" target="_blank" rel="noopener noreferrer">Sipeed</a> 开发的开源软件',
         'load-error':           '加载发布信息失败。',
         'view-github':          '在 GitHub 上查看 →',
         'arch-count':           n => `${n} 个架构`,
         'sipeed-visit':         '访问 Sipeed',
+        'btn-repo':             'PicoClaw 仓库',
+        'btn-docs':             '文档',
         'subscribe-title':      '保持联系',
         'subscribe-desc':       '订阅最新动态和产品更新。',
         'subscribe-global':     '全球用户 · Google 表单',