[docs] Welcome page thumbnail and reranker fix (#3660)

2025-10-25 12:20:52 -07:00
parent 639d26e1ac
commit f98a17c716
24 changed files with 640 additions and 1048 deletions
@@ -6,7 +6,7 @@ mode: "custom"

 {/* debug: welcome-layout-v2 */}

-<div className="px-4 pt-16 pb-12 lg:pt-20 max-w-4xl mx-auto text-center space-y-4">
+<div className="px-4 pt-16 pb-12 lg:pt-20 max-w-4xl mx-auto text-center space-y-6">
  <h1 className="text-3xl lg:text-4xl font-bold text-gray-900 dark:text-zinc-50 tracking-tight mb-3">
    Build with <span className="text-primary">mem0</span>
  </h1>
@@ -31,20 +31,64 @@ mode: "custom"
    </h2>
  </div>

-  <CardGroup cols={3}>
-    <Card title="Mem0 Platform" icon="rocket" href="/platform/overview">
-      Managed memory with production-scale infrastructure, ready in minutes.
-    </Card>
+  <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+    <a
+      href="/platform/overview"
+      className="group flex h-full flex-col overflow-hidden rounded-2xl border border-zinc-800/40 bg-zinc-900/40 transition hover:border-primary/60 hover:bg-zinc-900"
+    >
+      <img
+        src="/images/docs%20thumbnails/Mem0%20Platform.png"
+        alt="Mem0 Platform thumbnail"
+        className="aspect-[4/3] w-full object-cover"
+      />
+      <div className="flex flex-1 flex-col gap-3 px-5 pb-6 pt-5 text-left">
+        <h3 className="text-base font-semibold text-zinc-100 group-hover:text-primary">
+          Mem0 Platform
+        </h3>
+        <p className="text-sm text-zinc-400">
+          Managed memory with production-scale infrastructure, ready in minutes.
+        </p>
+      </div>
+    </a>

-    <Card title="Mem0 Open Source" icon="code-branch" href="/open-source/overview">
-      Self-host the Mem0 stack for full control over data, deployment, and customization.
-    </Card>
+    <a
+      href="/open-source/overview"
+      className="group flex h-full flex-col overflow-hidden rounded-2xl border border-zinc-800/40 bg-zinc-900/40 transition hover:border-primary/60 hover:bg-zinc-900"
+    >
+      <img
+        src="/images/docs%20thumbnails/Mem0%20Open%20Source.png"
+        alt="Mem0 Open Source thumbnail"
+        className="aspect-[4/3] w-full object-cover"
+      />
+      <div className="flex flex-1 flex-col gap-3 px-5 pb-6 pt-5 text-left">
+        <h3 className="text-base font-semibold text-zinc-100 group-hover:text-primary">
+          Mem0 Open Source
+        </h3>
+        <p className="text-sm text-zinc-400">
+          Self-host the Mem0 stack for full control over data, deployment, and customization.
+        </p>
+      </div>
+    </a>

-    <Card title="OpenMemory" icon="brain" href="/openmemory/overview">
-      Workspace-based memory for teams collaborating across agents and projects.
-    </Card>
-
-  </CardGroup>
+    <a
+      href="/openmemory/overview"
+      className="group flex h-full flex-col overflow-hidden rounded-2xl border border-zinc-800/40 bg-zinc-900/40 transition hover:border-primary/60 hover:bg-zinc-900"
+    >
+      <img
+        src="/images/docs%20thumbnails/Mem0%20OpenMemory.png"
+        alt="OpenMemory thumbnail"
+        className="aspect-[4/3] w-full object-cover"
+      />
+      <div className="flex flex-1 flex-col gap-3 px-5 pb-6 pt-5 text-left">
+        <h3 className="text-base font-semibold text-zinc-100 group-hover:text-primary">
+          OpenMemory
+        </h3>
+        <p className="text-sm text-zinc-400">
+          Workspace-based memory for teams collaborating across agents and projects.
+        </p>
+      </div>
+    </a>
+  </div>
 </section>

 <section className="px-4 pt-12 pb-20 max-w-6xl mx-auto space-y-4">
@@ -54,18 +98,62 @@ mode: "custom"
    </h2>
  </div>

-  <CardGroup cols={3}>
-    <Card title="Cookbooks" icon="book-open" href="/examples">
-      Production-ready tutorials that show how to ship memorable AI experiences.
-    </Card>
+  <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+    <a
+      href="/examples"
+      className="group flex h-full flex-col overflow-hidden rounded-2xl border border-zinc-800/40 bg-zinc-900/40 transition hover:border-primary/60 hover:bg-zinc-900"
+    >
+      <img
+        src="/images/docs%20thumbnails/Cookbooks.png"
+        alt="Cookbooks thumbnail"
+        className="aspect-[4/3] w-full object-cover"
+      />
+      <div className="flex flex-1 flex-col gap-3 px-5 pb-6 pt-5 text-left">
+        <h3 className="text-base font-semibold text-zinc-100 group-hover:text-primary">
+          Cookbooks
+        </h3>
+        <p className="text-sm text-zinc-400">
+          Production-ready tutorials that show how to ship memorable AI experiences.
+        </p>
+      </div>
+    </a>

-    <Card title="Integrations" icon="plug" href="/integrations">
-      Connect Mem0 to LangChain, CrewAI, Vercel AI SDK, and 20+ partner frameworks.
-    </Card>
+    <a
+      href="/integrations"
+      className="group flex h-full flex-col overflow-hidden rounded-2xl border border-zinc-800/40 bg-zinc-900/40 transition hover:border-primary/60 hover:bg-zinc-900"
+    >
+      <img
+        src="/images/docs%20thumbnails/Integrations.png"
+        alt="Integrations thumbnail"
+        className="aspect-[4/3] w-full object-cover"
+      />
+      <div className="flex flex-1 flex-col gap-3 px-5 pb-6 pt-5 text-left">
+        <h3 className="text-base font-semibold text-zinc-100 group-hover:text-primary">
+          Integrations
+        </h3>
+        <p className="text-sm text-zinc-400">
+          Connect Mem0 to LangChain, CrewAI, Vercel AI SDK, and 20+ partner frameworks.
+        </p>
+      </div>
+    </a>

-    <Card title="API reference" icon="terminal" href="/api-reference">
-      Explore every REST endpoint with payload examples and usage guidance.
-    </Card>
-
-  </CardGroup>
+    <a
+      href="/api-reference"
+      className="group flex h-full flex-col overflow-hidden rounded-2xl border border-zinc-800/40 bg-zinc-900/40 transition hover:border-primary/60 hover:bg-zinc-900"
+    >
+      <img
+        src="/images/docs%20thumbnails/API.png"
+        alt="API reference thumbnail"
+        className="aspect-[4/3] w-full object-cover"
+      />
+      <div className="flex flex-1 flex-col gap-3 px-5 pb-6 pt-5 text-left">
+        <h3 className="text-base font-semibold text-zinc-100 group-hover:text-primary">
+          API reference
+        </h3>
+        <p className="text-sm text-zinc-400">
+          Explore every REST endpoint with payload examples and usage guidance.
+        </p>
+      </div>
+    </a>
+  </div>
 </section>