feat: redesign docs landing page with improved messaging and branding

Overhaul the docs index with stronger GitMem positioning, expanded feature
cards, brand-consistent styling, and production-ready asset paths.

- Rewrite "What is GitMem?" copy to emphasize compounding memory from
  human-agent interaction (wins, scars, decisions, corrections)
- Add nav logo (logo.svg) with dark mode invert
- Update banner.svg logo fill to white for dark background
- Add 2 new feature cards (Decisions, Knowledge Graph) for 6 total
- Add red accent left-border + hover effects on cards
- Add light-red hover state on secondary CTAs matching nav accent
- Neutralize install block from pink to gray
- Hide DocsTitle/DocsDescription on index page for custom hero layout
- Fix asset paths for production (/docs/ prefix) and update deploy workflow
- Rename "Home" nav link to "Website"

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

Author: Chris Crawford

.github/workflows/deploy-docs.yml

@@ -52,6 +52,7 @@ jobs:
           cp apps/docs/out/llms-full.txt _landing/llms-full.txt
           # Copy static assets that live at site root in the Next.js build
           [ -f apps/docs/out/banner.svg ] && cp apps/docs/out/banner.svg _landing/docs/banner.svg
+          [ -f apps/docs/out/logo.svg ] && cp apps/docs/out/logo.svg _landing/docs/logo.svg
 
       - name: Push to landing repo
         run: |

apps/docs/app/docs/[[...slug]]/page.tsx

@@ -19,11 +19,12 @@ export default async function Page(props: PageProps) {
   if (!page) notFound();
 
   const MDX = page.data.body;
+  const isIndex = !params.slug || params.slug.length === 0;
 
   return (
     <DocsPage toc={page.data.toc}>
-      <DocsTitle>{page.data.title}</DocsTitle>
-      <DocsDescription>{page.data.description}</DocsDescription>
+      {!isIndex && <DocsTitle>{page.data.title}</DocsTitle>}
+      {!isIndex && <DocsDescription>{page.data.description}</DocsDescription>}
       <DocsBody>
         <MDX components={{ ...defaultMdxComponents }} />
       </DocsBody>

apps/docs/app/global.css

@@ -25,17 +25,35 @@
   background-repeat: no-repeat;
 }
 
+
+/* Reduce gap between sidebar and content */
+@theme {
+  --fd-page-width: 1400px;
+}
+
+/* Nav logo: invert black to white in dark mode */
+.dark .nav-logo {
+  filter: invert(1) !important;
+}
+
 /* Banner image on docs landing */
 .gitmem-banner {
-  margin: 0 auto 1.5rem;
+  margin: 0 auto 0;
   max-width: 48rem;
-  border-radius: 0.75rem;
   overflow: hidden;
-  border: 1px solid hsl(0, 0%, 85%);
 }
 
-.dark .gitmem-banner {
-  border-color: hsl(0, 0%, 20%);
+/* Screen-reader only h1 for SEO */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
 }
 
 .gitmem-banner img {
@@ -47,7 +65,7 @@
 /* Hero section styles for docs landing */
 .gitmem-hero {
   text-align: center;
-  padding: 2rem 0 3rem;
+  padding: 0 0 0.5rem;
 }
 
 .gitmem-hero h1 {
@@ -68,7 +86,7 @@
   display: flex;
   gap: 0.75rem;
   justify-content: center;
-  margin-top: 1.5rem;
+  margin-top: 0.75rem;
   flex-wrap: wrap;
 }
 
@@ -83,22 +101,27 @@
   text-decoration: none;
 }
 
+.gitmem-hero .hero-cta .github-icon {
+  margin-right: 0.375rem;
+  vertical-align: -0.125em;
+}
+
 .gitmem-hero .hero-cta a.primary {
-  background: hsl(358, 84%, 42%);
+  background: hsl(0, 0%, 15%);
   color: white;
 }
 
 .gitmem-hero .hero-cta a.primary:hover {
-  background: hsl(358, 84%, 36%);
+  background: hsl(0, 0%, 25%);
 }
 
 .dark .gitmem-hero .hero-cta a.primary {
-  background: hsl(358, 84%, 52%);
-  color: white;
+  background: hsl(0, 0%, 95%);
+  color: hsl(0, 0%, 10%);
 }
 
 .dark .gitmem-hero .hero-cta a.primary:hover {
-  background: hsl(358, 84%, 58%);
+  background: hsl(0, 0%, 100%);
 }
 
 .gitmem-hero .hero-cta a.secondary {
@@ -107,15 +130,19 @@
 }
 
 .gitmem-hero .hero-cta a.secondary:hover {
-  background: hsl(0, 0%, 96%);
+  background: hsl(358, 84%, 97%);
+  border-color: hsl(358, 84%, 80%);
+  color: hsl(358, 84%, 38%);
 }
 
 .dark .gitmem-hero .hero-cta a.secondary {
   border-color: hsl(0, 0%, 25%);
 }
 
 .dark .gitmem-hero .hero-cta a.secondary:hover {
-  background: hsl(0, 0%, 15%);
+  background: hsla(358, 84%, 30%, 0.2);
+  border-color: hsl(358, 84%, 45%);
+  color: hsl(358, 84%, 72%);
 }
 
 /* Memory loop diagram */
@@ -152,13 +179,13 @@
   margin: 1.5rem 0;
   padding: 1.5rem;
   border-radius: 0.75rem;
-  border: 1px solid hsl(358, 84%, 85%);
-  background: hsl(358, 84%, 98%);
+  border: 1px solid hsl(0, 0%, 85%);
+  background: hsl(0, 0%, 97%);
 }
 
 .dark .install-block {
-  border-color: hsla(358, 84%, 40%, 0.3);
-  background: hsla(358, 84%, 15%, 0.15);
+  border-color: hsl(0, 0%, 25%);
+  background: hsl(0, 0%, 12%);
 }
 
 /* Inline signup form */
@@ -244,3 +271,24 @@
 .dark .signup-inline .signup-ok {
   color: hsl(145, 50%, 55%);
 }
+
+/* Make feature/explore cards pop */
+[data-card="true"] {
+  border-left: 3px solid hsl(358, 84%, 65%) !important;
+  transition: all 0.15s ease !important;
+}
+
+[data-card="true"]:hover {
+  border-left-color: hsl(358, 84%, 52%) !important;
+  box-shadow: 0 2px 8px hsla(358, 84%, 40%, 0.12) !important;
+  transform: translateY(-1px);
+}
+
+.dark [data-card="true"] {
+  border-left-color: hsl(358, 84%, 45%) !important;
+}
+
+.dark [data-card="true"]:hover {
+  border-left-color: hsl(358, 84%, 55%) !important;
+  box-shadow: 0 2px 12px hsla(358, 84%, 30%, 0.25) !important;
+}

apps/docs/content/docs/index.mdx

@@ -7,42 +7,27 @@ import { Cards, Card } from 'fumadocs-ui/components/card'
 import { Callout } from 'fumadocs-ui/components/callout'
 import { Steps, Step } from 'fumadocs-ui/components/steps'
 
+<h1 className="sr-only">GitMem — Institutional memory for AI coding agents</h1>
+
 <div className="gitmem-banner">
   <img src="/docs/banner.svg" alt="GitMem — Institutional memory for AI coding agents" />
 </div>
 
 <div className="gitmem-hero">
 
-# GitMem
-
-Institutional memory for AI coding agents.
-Every mistake learned from. Every win remembered.
-
-<div className="memory-loop">
-  <span className="step">recall</span>
-  <span className="arrow">&rarr;</span>
-  <span className="step">work</span>
-  <span className="arrow">&rarr;</span>
-  <span className="step">learn</span>
-  <span className="arrow">&rarr;</span>
-  <span className="step">close</span>
-  <span className="arrow">&rarr;</span>
-  <span className="step">recall</span>
-</div>
-
 <div className="hero-cta">
   <a href="/docs/getting-started/installation" className="primary">Get Started</a>
-  <a href="https://github.com/gitmem-dev/gitmem" className="secondary">GitHub</a>
+  <a href="https://github.com/gitmem-dev/gitmem" className="secondary"><svg className="github-icon" viewBox="0 0 16 16" fill="currentColor" width="16" height="16"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>GitHub</a>
   <a href="/docs/tools" className="secondary">Tool Reference</a>
 </div>
 
 </div>
 
----
-
 ## What is GitMem?
 
-Every time an AI agent makes a mistake, fixes a bug, or discovers a better approach, that knowledge disappears when the session ends. GitMem captures these lessons and surfaces them automatically before the agent takes similar actions.
+Every time an AI agent makes a mistake, fixes a bug, or discovers a better approach, that knowledge disappears when the session ends. GitMem is an MCP server that gives AI coding agents **persistent institutional memory** — the ability to learn from mistakes, remember what works, track decisions, and carry context across sessions and projects.
+
+It's not a note-taker. It's a **memory system with teeth**: scars surface automatically before the agent repeats a mistake, sessions close with structured reflection, and open threads carry forward so nothing falls through the cracks. One `npx gitmem-mcp init` and every session builds on the last — mistakes, wins, decisions, and human corrections compound into an agent that gets sharper in your dev context over time.
 
 <Cards>
   <Card title="Scars" href="/docs/concepts/scars">
@@ -57,6 +42,12 @@ Every time an AI agent makes a mistake, fixes a bug, or discovers a better appro
   <Card title="Threads" href="/docs/concepts/threads">
     Unresolved work that carries across sessions. Never lose track of open items.
   </Card>
+  <Card title="Decisions" href="/docs/concepts/learning-types">
+    Architectural choices logged with rationale and alternatives considered. Searchable forever.
+  </Card>
+  <Card title="Knowledge Graph" href="/docs/tools/graph-traverse">
+    Trace any decision, scar, or session back to its origin. See how your institutional memory connects.
+  </Card>
 </Cards>
 
 ## Quick Start

apps/docs/lib/layout.shared.tsx

@@ -3,7 +3,18 @@ import type { BaseLayoutProps } from "fumadocs-ui/layouts/shared";
 export function baseOptions(): BaseLayoutProps {
   return {
     nav: {
-      title: "GitMem",
+      title: (
+        <>
+          <img
+            src="/docs/logo.svg"
+            alt=""
+            className="nav-logo"
+            style={{ width: 24, height: 24 }}
+          />
+          GitMem
+        </>
+      ),
+      url: "/docs",
     },
     links: [
       {
@@ -12,7 +23,7 @@ export function baseOptions(): BaseLayoutProps {
         active: "nested-url",
       },
       {
-        text: "Home",
+        text: "Website",
         url: "https://gitmem.ai",
         external: true,
       },