feat(landing): add MCP integration section, API curl example, GitHub link

app/page.tsx

@@ -204,14 +204,59 @@ export default async function LandingPage() {
               <div className="bg-surface-container-low border border-border rounded-xl p-5 space-y-2">
                 <div className="text-sm font-medium text-primary">Claude Code-integratie</div>
                 <p className="text-sm text-muted-foreground leading-relaxed">
-                  Maak een API-token aan en laat Claude Code de volgende story ophalen,
-                  taken uitvoeren en resultaten vastleggen via de REST API.
+                  Twee opties: native MCP-server (aanbevolen) of REST API met Bearer-token.
+                  Beide laten Claude Code stories ophalen, taken bijwerken en resultaten vastleggen.
                 </p>
               </div>
             </div>
           </div>
         </section>
 
+        {/* ── Twee manieren om Claude Code te koppelen ─────────────── */}
+        <section className="px-6 py-14 bg-background border-t border-border">
+          <div className="max-w-4xl mx-auto">
+            <h2 className="text-xl font-semibold mb-2">Twee manieren om Claude Code te koppelen</h2>
+            <p className="text-muted-foreground text-sm mb-10 max-w-2xl">
+              Kies de aansluiting die bij je workflow past. Beide werken naast elkaar.
+            </p>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div className="bg-surface-container-low border border-border rounded-xl p-5 space-y-3">
+                <div className="flex items-center gap-2">
+                  <div className="text-sm font-medium text-primary">MCP-server</div>
+                  <span className="text-xs px-2 py-0.5 rounded bg-primary-container text-primary-container-foreground font-medium">
+                    Aanbevolen
+                  </span>
+                </div>
+                <p className="text-sm text-muted-foreground leading-relaxed">
+                  Native Model Context Protocol-tools voor Claude Code. Geen REST-configuratie —
+                  Claude ziet producten, stories en taken als ingebouwde commando&apos;s. Eén prompt
+                  orkestreert de hele implementatieflow: story ophalen, status updaten, plan loggen,
+                  commit vastleggen.
+                </p>
+                <a
+                  href="https://github.com/madhura68/scrum4me-mcp"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="inline-flex items-center gap-1 text-xs text-primary hover:underline"
+                >
+                  github.com/madhura68/scrum4me-mcp →
+                </a>
+              </div>
+              <div className="bg-surface-container-low border border-border rounded-xl p-5 space-y-3">
+                <div className="text-sm font-medium text-primary">REST API</div>
+                <p className="text-sm text-muted-foreground leading-relaxed">
+                  Universele HTTP-API met Bearer-token. Werkt vanuit Claude Code, Codex, eigen
+                  scripts of CI-pipelines. Zelfde rechten als de MCP-server, maar je beheert
+                  tokens en aanroepen zelf.
+                </p>
+                <a href="#api" className="inline-flex items-center gap-1 text-xs text-primary hover:underline">
+                  API-endpoints bekijken ↓
+                </a>
+              </div>
+            </div>
+          </div>
+        </section>
+
         {/* ── Scrum samenvatting ─────────────────────────────────────── */}
         <section className="px-6 py-14 bg-surface-container-low border-y border-border">
           <div className="max-w-4xl mx-auto">
@@ -361,13 +406,18 @@ export default async function LandingPage() {
         </section>
 
         {/* ── API-overzicht ─────────────────────────────────────────── */}
-        <section className="px-6 py-14 bg-surface-container-low border-t border-border">
+        <section id="api" className="px-6 py-14 bg-surface-container-low border-t border-border">
           <div className="max-w-4xl mx-auto">
             <h2 className="text-xl font-semibold mb-2">REST API voor Claude Code</h2>
-            <p className="text-muted-foreground text-sm mb-8 max-w-2xl">
+            <p className="text-muted-foreground text-sm mb-6 max-w-2xl">
               Alle API-endpoints vereisen een <code className="font-mono bg-surface-container px-1 rounded text-xs">Authorization: Bearer &lt;token&gt;</code> header.
               Tokens beheer je via Instellingen → Tokens.
             </p>
+            <pre className="bg-background border border-border rounded-lg p-4 text-xs font-mono overflow-x-auto mb-8 max-w-2xl">
+              <code className="text-foreground">{`# Volgende story uit de actieve Sprint ophalen
+curl -H "Authorization: Bearer $TOKEN" \\
+  https://<jouw-instance>/api/products/<product-id>/next-story`}</code>
+            </pre>
             <div className="space-y-2">
               {[
                 { method: 'GET',   path: '/api/products',                      desc: 'Lijst van actieve producten' },
@@ -399,6 +449,14 @@ export default async function LandingPage() {
       {/* ── Footer ─────────────────────────────────────────────────── */}
       <footer className="shrink-0 border-t border-border bg-surface-container-low px-6 py-4 flex items-center justify-between text-xs text-muted-foreground">
         <span>© {new Date().getFullYear()} Scrum4Me</span>
+        <a
+          href="https://github.com/madhura68/Scrum4Me"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="hover:text-foreground transition-colors"
+        >
+          GitHub
+        </a>
         <span>v{version} · gebouwd op {buildDate}</span>
       </footer>