feat: install section with CLI, quickstart, and MCP config examples

Author: Patel230

src/pages/LandingPage.tsx

@@ -149,9 +149,10 @@ export function LandingPage() {
           </Link>
           <div style={{ display: 'flex', alignItems: 'center', gap: 32 }}>
             <a href="#features" style={{ fontSize: 14, color: '#8b8d94', transition: 'color 150ms' }}>Features</a>
+            <a href="#install" style={{ fontSize: 14, color: '#8b8d94', transition: 'color 150ms' }}>Install</a>
             <a href="#how" style={{ fontSize: 14, color: '#8b8d94', transition: 'color 150ms' }}>How it works</a>
             <a href="#faq" style={{ fontSize: 14, color: '#8b8d94', transition: 'color 150ms' }}>FAQ</a>
-            <a href="https://github.com/Growth-Club/openjob" target="_blank" rel="noopener" style={{ fontSize: 14, color: '#8b8d94' }}>GitHub</a>
+            <a href="https://github.com/GrayCodeAI" target="_blank" rel="noopener" style={{ fontSize: 14, color: '#8b8d94' }}>GitHub</a>
             <Link to="/login" style={{
               fontSize: 14, color: '#0c0e14', background: '#f5a623', padding: '8px 20px',
               fontWeight: 600, letterSpacing: '-0.3px',
@@ -269,6 +270,61 @@ export function LandingPage() {
         </div>
       </section>
 
+      {/* ═══ INSTALL ═══ */}
+      <section id="install" style={{ maxWidth: 1100, margin: '0 auto', padding: '0 24px 100px' }}>
+        <div style={{ marginBottom: 48 }}>
+          <SectionLabel text="Install" />
+          <h2 style={{ fontSize: 36, fontWeight: 700, letterSpacing: '-1.5px', color: '#e8e6e3' }}>Get started in 2 minutes</h2>
+        </div>
+
+        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0 }}>
+          {/* CLI Install */}
+          <div style={{ padding: 32, borderRight: '1px solid #1e2233' }}>
+            <h3 style={{ fontSize: 16, fontWeight: 600, color: '#e8e6e3', marginBottom: 20 }}>1. Install the CLI</h3>
+            <div style={{ background: '#0a0c12', border: '1px solid #1e2233', padding: '16px 20px', fontFamily: "'JetBrains Mono', monospace", fontSize: 13, color: '#8b8d94', lineHeight: 2 }}>
+              <div><span style={{ color: '#f5a623' }}>$</span> curl -fsSL https://raw.githubusercontent.com/GrayCodeAI/lark-cli/main/install.sh | bash</div>
+            </div>
+            <p style={{ fontSize: 13, color: '#6b6d74', marginTop: 12, lineHeight: 1.6 }}>
+              Or build from source: <code style={{ color: '#f5a623', background: '#12151e', padding: '2px 6px', fontSize: 12 }}>go install github.com/GrayCodeAI/lark-cli/cmd/lark-cli@latest</code>
+            </p>
+          </div>
+
+          {/* Quick Start */}
+          <div style={{ padding: 32 }}>
+            <h3 style={{ fontSize: 16, fontWeight: 600, color: '#e8e6e3', marginBottom: 20 }}>2. Connect your first agent</h3>
+            <div style={{ background: '#0a0c12', border: '1px solid #1e2233', padding: '16px 20px', fontFamily: "'JetBrains Mono', monospace", fontSize: 13, color: '#8b8d94', lineHeight: 2 }}>
+              <div><span style={{ color: '#f5a623' }}>$</span> lark init</div>
+              <div><span style={{ color: '#f5a623' }}>$</span> lark connect claude</div>
+              <div><span style={{ color: '#f5a623' }}>$</span> lark send general "Hello from Claude!"</div>
+              <div><span style={{ color: '#f5a623' }}>$</span> lark status</div>
+            </div>
+            <p style={{ fontSize: 13, color: '#6b6d74', marginTop: 12, lineHeight: 1.6 }}>
+              Supports Claude, Cursor, Copilot, and any MCP-compatible agent.
+            </p>
+          </div>
+        </div>
+
+        {/* MCP Config */}
+        <div style={{ padding: 32, borderTop: '1px solid #1e2233' }}>
+          <h3 style={{ fontSize: 16, fontWeight: 600, color: '#e8e6e3', marginBottom: 20 }}>Or connect via MCP (Claude Code, Cursor, etc.)</h3>
+          <div style={{ background: '#0a0c12', border: '1px solid #1e2233', padding: '16px 20px', fontFamily: "'JetBrains Mono', monospace", fontSize: 13, color: '#8b8d94', lineHeight: 1.8 }}>
+            <div style={{ color: '#6b6d74' }}>{'// claude_desktop_config.json or .cursor/mcp.json'}</div>
+            <div>{'{'}</div>
+            <div>&nbsp;&nbsp;<span style={{ color: '#f5a623' }}>"mcpServers"</span>: {'{'}</div>
+            <div>&nbsp;&nbsp;&nbsp;&nbsp;<span style={{ color: '#f5a623' }}>"lark"</span>: {'{'}</div>
+            <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style={{ color: '#f5a623' }}>"command"</span>: <span style={{ color: '#64d8cb' }}>"npx"</span>,</div>
+            <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style={{ color: '#f5a623' }}>"args"</span>: [<span style={{ color: '#64d8cb' }}>"@larkhq/mcp-server"</span>],</div>
+            <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style={{ color: '#f5a623' }}>"env"</span>: {'{'}</div>
+            <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style={{ color: '#f5a623' }}>"LARK_API"</span>: <span style={{ color: '#64d8cb' }}>"http://localhost:4001"</span>,</div>
+<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style={{ color: '#f5a623' }}>"LARK_TOKEN"</span>: <span style={{ color: '#64d8cb' }}>{"your-token-here"}</span></div>
+            <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{'}'}</div>
+            <div>&nbsp;&nbsp;&nbsp;&nbsp;{'}'}</div>
+            <div>&nbsp;&nbsp;{'}'}</div>
+            <div>{'}'}</div>
+          </div>
+        </div>
+      </section>
+
       {/* ═══ CTA ═══ */}
       <section style={{ maxWidth: 1100, margin: '0 auto', padding: '0 24px 100px' }}>
         <div style={{