fix(docs): Improve light mode support for introduction page and organize thumbnails (#3880)

docs/introduction.mdx

@@ -34,19 +34,25 @@ mode: "custom"
   <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"
+      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
-        src="/images/docs thumbnails/Mem0 Platform.png"
+        className="block dark:hidden aspect-[4/3] w-full object-cover"
+        src="/images/docs thumbnails/light/mem0_platform.png"
+        alt="Mem0 Platform thumbnail"
+        style={{pointerEvents: "none"}}
+      />
+      <img
+        className="hidden dark:block aspect-[4/3] w-full object-cover"
+        src="/images/docs thumbnails/dark/mem0_platform.png"
         alt="Mem0 Platform thumbnail"
-        className="aspect-[4/3] w-full object-cover"
         style={{pointerEvents: "none"}}
       />
       <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">
+        <h3 className="text-base font-semibold text-gray-900 dark:text-zinc-100 group-hover:text-primary">
           Mem0 Platform
         </h3>
-        <p className="text-sm text-zinc-400">
+        <p className="text-sm text-gray-600 dark:text-zinc-400">
           Managed memory with production-scale infrastructure, ready in minutes.
         </p>
       </div>
@@ -54,19 +60,25 @@ mode: "custom"
 
     <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"
+      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
-        src="/images/docs thumbnails/Mem0 Open Source.png"
+        className="block dark:hidden aspect-[4/3] w-full object-cover"
+        src="/images/docs thumbnails/light/mem0_open_source.png"
+        alt="Mem0 Open Source thumbnail"
+        style={{pointerEvents: "none"}}
+      />
+      <img
+        className="hidden dark:block aspect-[4/3] w-full object-cover"
+        src="/images/docs thumbnails/dark/mem0_open_source.png"
         alt="Mem0 Open Source thumbnail"
-        className="aspect-[4/3] w-full object-cover"
         style={{pointerEvents: "none"}}
       />
       <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">
+        <h3 className="text-base font-semibold text-gray-900 dark:text-zinc-100 group-hover:text-primary">
           Mem0 Open Source
         </h3>
-        <p className="text-sm text-zinc-400">
+        <p className="text-sm text-gray-600 dark:text-zinc-400">
           Self-host the Mem0 stack for full control over data, deployment, and customization.
         </p>
       </div>
@@ -74,19 +86,25 @@ mode: "custom"
 
     <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"
+      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
-        src="/images/docs thumbnails/Mem0 OpenMemory.png"
+        className="block dark:hidden aspect-[4/3] w-full object-cover"
+        src="/images/docs thumbnails/light/mem0_openmemory.png"
+        alt="OpenMemory thumbnail"
+        style={{pointerEvents: "none"}}
+      />
+      <img
+        className="hidden dark:block aspect-[4/3] w-full object-cover"
+        src="/images/docs thumbnails/dark/mem0_openmemory.png"
         alt="OpenMemory thumbnail"
-        className="aspect-[4/3] w-full object-cover"
         style={{pointerEvents: "none"}}
       />
       <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">
+        <h3 className="text-base font-semibold text-gray-900 dark:text-zinc-100 group-hover:text-primary">
           OpenMemory
         </h3>
-        <p className="text-sm text-zinc-400">
+        <p className="text-sm text-gray-600 dark:text-zinc-400">
           Workspace-based memory for teams collaborating across agents and projects.
         </p>
       </div>
@@ -104,19 +122,25 @@ mode: "custom"
   <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
     <a
       href="/cookbooks/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"
+      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
-        src="/images/docs thumbnails/Cookbooks.png"
+        className="block dark:hidden aspect-[4/3] w-full object-cover"
+        src="/images/docs thumbnails/light/Cookbooks.png"
+        alt="Cookbooks thumbnail"
+        style={{pointerEvents: "none"}}
+      />
+      <img
+        className="hidden dark:block aspect-[4/3] w-full object-cover"
+        src="/images/docs thumbnails/dark/Cookbooks.png"
         alt="Cookbooks thumbnail"
-        className="aspect-[4/3] w-full object-cover"
         style={{pointerEvents: "none"}}
       />
       <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">
+        <h3 className="text-base font-semibold text-gray-900 dark:text-zinc-100 group-hover:text-primary">
           Cookbooks
         </h3>
-        <p className="text-sm text-zinc-400">
+        <p className="text-sm text-gray-600 dark:text-zinc-400">
           Production-ready tutorials that show how to ship memorable AI experiences.
         </p>
       </div>
@@ -124,19 +148,25 @@ mode: "custom"
 
     <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"
+      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
-        src="/images/docs thumbnails/Integrations.png"
+        className="block dark:hidden aspect-[4/3] w-full object-cover"
+        src="/images/docs thumbnails/light/Integrations.png"
+        alt="Integrations thumbnail"
+        style={{pointerEvents: "none"}}
+      />
+      <img
+        className="hidden dark:block aspect-[4/3] w-full object-cover"
+        src="/images/docs thumbnails/dark/Integrations.png"
         alt="Integrations thumbnail"
-        className="aspect-[4/3] w-full object-cover"
         style={{pointerEvents: "none"}}
       />
       <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">
+        <h3 className="text-base font-semibold text-gray-900 dark:text-zinc-100 group-hover:text-primary">
           Integrations
         </h3>
-        <p className="text-sm text-zinc-400">
+        <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>
@@ -144,19 +174,25 @@ mode: "custom"
 
     <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"
+      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
-        src="/images/docs thumbnails/API.png"
+        className="block dark:hidden aspect-[4/3] w-full object-cover"
+        src="/images/docs thumbnails/light/API.png"
+        alt="API reference thumbnail"
+        style={{pointerEvents: "none"}}
+      />
+      <img
+        className="hidden dark:block aspect-[4/3] w-full object-cover"
+        src="/images/docs thumbnails/dark/API.png"
         alt="API reference thumbnail"
-        className="aspect-[4/3] w-full object-cover"
         style={{pointerEvents: "none"}}
       />
       <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">
+        <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-zinc-400">
+        <p className="text-sm text-gray-600 dark:text-zinc-400">
           Explore every REST endpoint with payload examples and usage guidance.
         </p>
       </div>