feat: add platform-specific guides to MCP Quick Start section (#49)

- Add Windows user guide link (Yuque blog post)
- Add macOS user guide link (GitHub installation docs)
- Display as card-style links with icons and hover effects
- Positioned below installation options with visual separator

Co-authored-by: babydog-ai <willchen.babydog@gmail.com>

Author: chen201724

website/src/components/McpQuickStart/McpQuickStart.module.css

@@ -210,6 +210,64 @@
   color: var(--color-primary);
 }
 
+/* Platform Guides */
+.platformGuides {
+  margin-bottom: 36px;
+}
+
+.platformGuidesTitle {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--color-text-muted);
+  text-align: center;
+  margin-bottom: 14px;
+}
+
+.platformLinks {
+  display: flex;
+  gap: 12px;
+  justify-content: center;
+}
+
+.platformLink {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 18px;
+  border-radius: 10px;
+  border: 1px solid var(--color-border);
+  background: var(--color-bg-secondary);
+  text-decoration: none;
+  transition: all 0.2s ease;
+}
+
+.platformLink:hover {
+  border-color: var(--color-primary);
+  background: rgba(0, 185, 107, 0.04);
+}
+
+.platformIcon {
+  font-size: 18px;
+  flex-shrink: 0;
+}
+
+.platformName {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--color-text);
+}
+
+.platformArrow {
+  font-size: 14px;
+  color: var(--color-text-muted);
+  transition: all 0.2s ease;
+}
+
+.platformLink:hover .platformArrow {
+  color: var(--color-primary);
+  transform: translateX(2px);
+}
+
 @media (max-width: 640px) {
   .section {
     padding: 60px 16px;
@@ -233,4 +291,7 @@
   .optionDesc {
     font-size: 13px;
   }
+  .platformLinks {
+    flex-direction: column;
+  }
 }

website/src/components/McpQuickStart/McpQuickStart.tsx

@@ -43,6 +43,33 @@ function McpQuickStart() {
         选择你的 MCP 客户端，一键接入语雀 AI 能力。支持所有主流编辑器和 AI 工具。
       </p>
 
+      {/* Platform Guides - moved to top */}
+      <div className={styles.platformGuides}>
+        <p className={styles.platformGuidesTitle}>📚 平台特定指南</p>
+        <div className={styles.platformLinks}>
+          <a
+            href="https://www.yuque.com/yuque/blog/lh9nfocqh1nqf0c0"
+            target="_blank"
+            rel="noopener noreferrer"
+            className={styles.platformLink}
+          >
+            <span className={styles.platformIcon}>🪟</span>
+            <span className={styles.platformName}>Windows 用户上手指南</span>
+            <span className={styles.platformArrow}>→</span>
+          </a>
+          <a
+            href="https://github.com/yuque/yuque-mcp-server#installation"
+            target="_blank"
+            rel="noopener noreferrer"
+            className={styles.platformLink}
+          >
+            <span className={styles.platformIcon}>🍎</span>
+            <span className={styles.platformName}>macOS 用户上手指南</span>
+            <span className={styles.platformArrow}>→</span>
+          </a>
+        </div>
+      </div>
+
       {/* Prerequisites - inline chips */}
       <div className={styles.prerequisites}>
         <span className={styles.prereqTitle}>前置条件:</span>