docs: navigation (#5900)

2026-07-01 22:48:23 +05:30
parent f2532f072f
commit 207f65deda
107 changed files with 951 additions and 1296 deletions
@@ -1,79 +1,121 @@
 ---
-title: "Welcome to Mem0"
-description: "Mem0 is a universal, self-improving memory layer for LLM applications that enables persistent context across sessions."
+title: "Build AI apps that remember"
+description: "Add persistent, self-improving memory to your AI app with Mem0 Platform or self-hosted Open Source."
 mode: "custom"
 ---

-{/* debug: welcome-layout-v3-grid */}
-
-<div className="px-4 pt-8 pb-4 lg:pt-10 max-w-4xl mx-auto text-center space-y-3">
+<div className="px-4 pt-8 pb-6 lg:pt-10 max-w-4xl mx-auto text-center space-y-4">
  <h1 className="text-3xl lg:text-4xl font-bold text-gray-900 dark:text-zinc-50 tracking-tight mb-2">
    Build with <span className="text-primary">Mem0</span>
  </h1>

-  <p className="max-w-2xl mx-auto text-base text-gray-600 dark:text-zinc-400 leading-relaxed">
+  <p className="max-w-3xl mx-auto text-base text-gray-600 dark:text-zinc-400 leading-relaxed">
    Universal, self-improving memory layer for LLM applications.
  </p>
-
-  <a
-    href="/platform/quickstart"
-    className="inline-flex items-center gap-1 text-sm text-gray-500 dark:text-zinc-500 hover:text-primary dark:hover:text-primary transition-colors"
-  >
-    Write your first memory
-    <span className="group-hover:translate-x-0.5 transition-transform">→</span>
-  </a>
 </div>

 <section className="px-4 pt-4 pb-6 max-w-6xl mx-auto">
  <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
    <a
-      href="/platform/overview"
+      href="/platform/quickstart"
      className="group flex h-full flex-col overflow-hidden rounded-2xl border border-gray-200 dark:border-zinc-800/40 bg-white dark:bg-zinc-900/40 transition hover:border-primary/60 hover:bg-gray-50 dark:hover:bg-zinc-900"
    >
      <img
        className="block dark:hidden aspect-[2/1] w-full object-cover"
-        src="/images/docs thumbnails/light/mem0_platform.png"
+        src="/images/docs thumbnails/light/mem0-platform.png"
        alt="Mem0 Platform thumbnail"
        style={{pointerEvents: "none"}}
      />
      <img
        className="hidden dark:block aspect-[2/1] w-full object-cover"
-        src="/images/docs thumbnails/dark/mem0_platform.png"
+        src="/images/docs thumbnails/dark/mem0-platform.png"
        alt="Mem0 Platform thumbnail"
        style={{pointerEvents: "none"}}
      />
      <div className="flex flex-1 flex-col gap-2 px-4 pb-4 pt-3 text-left">
        <h3 className="text-base font-semibold text-gray-900 dark:text-zinc-100 group-hover:text-primary">
-          Mem0 Platform
+          Add memory to your app
        </h3>
        <p className="text-sm text-gray-600 dark:text-zinc-400">
-          Managed memory with production-scale infrastructure, ready in minutes.
+          Start with the quickstart and store your first memory in minutes.
        </p>
      </div>
    </a>

    <a
-      href="/open-source/overview"
+      href="/integrations"
      className="group flex h-full flex-col overflow-hidden rounded-2xl border border-gray-200 dark:border-zinc-800/40 bg-white dark:bg-zinc-900/40 transition hover:border-primary/60 hover:bg-gray-50 dark:hover:bg-zinc-900"
    >
      <img
        className="block dark:hidden aspect-[2/1] w-full object-cover"
-        src="/images/docs thumbnails/light/mem0_open_source.png"
-        alt="Mem0 Open Source thumbnail"
+        src="/images/docs thumbnails/light/mem0-plugins.png"
+        alt="Integrations thumbnail"
        style={{pointerEvents: "none"}}
      />
      <img
        className="hidden dark:block aspect-[2/1] w-full object-cover"
-        src="/images/docs thumbnails/dark/mem0_open_source.png"
-        alt="Mem0 Open Source thumbnail"
+        src="/images/docs thumbnails/dark/mem0-plugins.png"
+        alt="Integrations thumbnail"
        style={{pointerEvents: "none"}}
      />
      <div className="flex flex-1 flex-col gap-2 px-4 pb-4 pt-3 text-left">
        <h3 className="text-base font-semibold text-gray-900 dark:text-zinc-100 group-hover:text-primary">
-          Mem0 Open Source
+          Add memory to your agent
        </h3>
        <p className="text-sm text-gray-600 dark:text-zinc-400">
-          Self-host the Mem0 stack for full control over data, deployment, and customization.
+          Give Claude Code, Cursor, and Codex memory that persists across sessions. A drop-in plugin, no code to write.
+        </p>
+      </div>
+    </a>
+
+    <a
+      href="/platform/agent-signup"
+      className="group flex h-full flex-col overflow-hidden rounded-2xl border border-gray-200 dark:border-zinc-800/40 bg-white dark:bg-zinc-900/40 transition hover:border-primary/60 hover:bg-gray-50 dark:hover:bg-zinc-900"
+    >
+      <img
+        className="block dark:hidden aspect-[2/1] w-full object-cover"
+        src="/images/docs thumbnails/light/mem0-cli.png"
+        alt="Sign up as an agent thumbnail"
+        style={{pointerEvents: "none"}}
+      />
+      <img
+        className="hidden dark:block aspect-[2/1] w-full object-cover"
+        src="/images/docs thumbnails/dark/mem0-cli.png"
+        alt="Sign up as an agent thumbnail"
+        style={{pointerEvents: "none"}}
+      />
+      <div className="flex flex-1 flex-col gap-2 px-4 pb-4 pt-3 text-left">
+        <h3 className="text-base font-semibold text-gray-900 dark:text-zinc-100 group-hover:text-primary">
+          Sign up for Mem0 as an agent
+        </h3>
+        <p className="text-sm text-gray-600 dark:text-zinc-400">
+          Let an AI agent mint a Mem0 API key, claim ownership later, and write its first memory from the terminal.
+        </p>
+      </div>
+    </a>
+
+   <a
+      href="/integrations"
+      className="group flex h-full flex-col overflow-hidden rounded-2xl border border-gray-200 dark:border-zinc-800/40 bg-white dark:bg-zinc-900/40 transition hover:border-primary/60 hover:bg-gray-50 dark:hover:bg-zinc-900"
+    >
+      <img
+        className="block dark:hidden aspect-[2/1] w-full object-cover"
+        src="/images/docs thumbnails/light/mem0-integrations.png"
+        alt="Integrations thumbnail"
+        style={{pointerEvents: "none"}}
+      />
+      <img
+        className="hidden dark:block aspect-[2/1] w-full object-cover"
+        src="/images/docs thumbnails/dark/mem0-integrations.png"
+        alt="Integrations thumbnail"
+        style={{pointerEvents: "none"}}
+      />
+      <div className="flex flex-1 flex-col gap-2 px-4 pb-4 pt-3 text-left">
+        <h3 className="text-base font-semibold text-gray-900 dark:text-zinc-100 group-hover:text-primary">
+          Explore Mem0 integrations
+        </h3>
+        <p className="text-sm text-gray-600 dark:text-zinc-400">
+          Connect Mem0 to LangChain, CrewAI, Vercel AI SDK, and 20+ partner frameworks.
        </p>
      </div>
    </a>
@@ -96,88 +138,36 @@ mode: "custom"
      />
      <div className="flex flex-1 flex-col gap-2 px-4 pb-4 pt-3 text-left">
        <h3 className="text-base font-semibold text-gray-900 dark:text-zinc-100 group-hover:text-primary">
-          Cookbooks
+          See memory-app examples
        </h3>
        <p className="text-sm text-gray-600 dark:text-zinc-400">
-          Production-ready tutorials that show how to ship memorable AI experiences.
+          Browse cookbooks for companions, support agents, voice agents, research tools, and more.
        </p>
      </div>
    </a>

    <a
-      href="/integrations"
+      href="/open-source/overview"
      className="group flex h-full flex-col overflow-hidden rounded-2xl border border-gray-200 dark:border-zinc-800/40 bg-white dark:bg-zinc-900/40 transition hover:border-primary/60 hover:bg-gray-50 dark:hover:bg-zinc-900"
    >
      <img
        className="block dark:hidden aspect-[2/1] w-full object-cover"
-        src="/images/docs thumbnails/light/Integrations.png"
-        alt="Integrations thumbnail"
+        src="/images/docs thumbnails/light/mem0_open_source.png"
+        alt="Mem0 Open Source thumbnail"
        style={{pointerEvents: "none"}}
      />
      <img
        className="hidden dark:block aspect-[2/1] w-full object-cover"
-        src="/images/docs thumbnails/dark/Integrations.png"
-        alt="Integrations thumbnail"
+        src="/images/docs thumbnails/dark/mem0_open_source.png"
+        alt="Mem0 Open Source thumbnail"
        style={{pointerEvents: "none"}}
      />
      <div className="flex flex-1 flex-col gap-2 px-4 pb-4 pt-3 text-left">
        <h3 className="text-base font-semibold text-gray-900 dark:text-zinc-100 group-hover:text-primary">
-          Integrations
+          Self-host Mem0
        </h3>
        <p className="text-sm text-gray-600 dark:text-zinc-400">
-          Connect Mem0 to LangChain, CrewAI, Vercel AI SDK, and 20+ partner frameworks.
-        </p>
-      </div>
-    </a>
-
-    <a
-      href="/api-reference"
-      className="group flex h-full flex-col overflow-hidden rounded-2xl border border-gray-200 dark:border-zinc-800/40 bg-white dark:bg-zinc-900/40 transition hover:border-primary/60 hover:bg-gray-50 dark:hover:bg-zinc-900"
-    >
-      <img
-        className="block dark:hidden aspect-[2/1] w-full object-cover"
-        src="/images/docs thumbnails/light/API.png"
-        alt="API reference thumbnail"
-        style={{pointerEvents: "none"}}
-      />
-      <img
-        className="hidden dark:block aspect-[2/1] w-full object-cover"
-        src="/images/docs thumbnails/dark/API.png"
-        alt="API reference thumbnail"
-        style={{pointerEvents: "none"}}
-      />
-      <div className="flex flex-1 flex-col gap-2 px-4 pb-4 pt-3 text-left">
-        <h3 className="text-base font-semibold text-gray-900 dark:text-zinc-100 group-hover:text-primary">
-          API Reference
-        </h3>
-        <p className="text-sm text-gray-600 dark:text-zinc-400">
-          Explore every REST endpoint with payload examples and usage guidance.
-        </p>
-      </div>
-    </a>
-
-    <a
-      href="/platform/agent-signup"
-      className="group flex h-full flex-col overflow-hidden rounded-2xl border border-gray-200 dark:border-zinc-800/40 bg-white dark:bg-zinc-900/40 transition hover:border-primary/60 hover:bg-gray-50 dark:hover:bg-zinc-900"
-    >
-      <img
-        className="block dark:hidden aspect-[2/1] w-full object-cover"
-        src="/images/docs thumbnails/light/CLI.png"
-        alt="Sign up as an agent thumbnail"
-        style={{pointerEvents: "none"}}
-      />
-      <img
-        className="hidden dark:block aspect-[2/1] w-full object-cover"
-        src="/images/docs thumbnails/dark/CLI.png"
-        alt="Sign up as an agent thumbnail"
-        style={{pointerEvents: "none"}}
-      />
-      <div className="flex flex-1 flex-col gap-2 px-4 pb-4 pt-3 text-left">
-        <h3 className="text-base font-semibold text-gray-900 dark:text-zinc-100 group-hover:text-primary">
-          Sign up as an agent
-        </h3>
-        <p className="text-sm text-gray-600 dark:text-zinc-400">
-          For AI agents: mint a Mem0 API key in under five seconds: no email, no dashboard. Four commands to your first memory.
+          Use Open Source when you want memory without the hosted platform.
        </p>
      </div>
    </a>