Update images

Author: handotdev

core-concepts/themes.mdx

@@ -2,36 +2,57 @@
 title: "Themes"
 description: "Customize the appearance of your documentation"
 icon: "paint-bucket"
+mode: "custom"
 ---
 
-import { ThemeCard } from "/snippets/theme-card.mdx";
+export const ThemeCard = ({ title, value, description, href }) => {
+  return (
+    <a className="mt-4 gap-10 group cursor-pointer" href={href}>
+      <div>
+        <img className="mt-0 rounded-2xl group-hover:scale-105 transition-all block dark:hidden" src={`/images/themes/${value}-light.png`} alt={title} />
+        <img className="mt-0 rounded-2xl group-hover:scale-105 transition-all hidden dark:block" src={`/images/themes/${value}-dark.png`} alt={title} />
+      </div>
+      <div>
+        <div className="mt-4 flex space-x-2 items-center">
+        <h4 className="text-base font-medium text-gray-900 dark:text-gray-200">{title}</h4>
+        <label className="text-sm text-gray-500 dark:text-gray-400">"{value}"</label>
+      </div>
+        <div class="mt-1 prose-sm prose-gray mb-2">{description}</div>
+        <div className="flex items-center gap-1 mt-2 text-green-600 group-hover:text-green-800 dark:text-green-500 dark:group-hover:text-green-400">
+          <span className="text-sm font-medium">
+            See preview
+          </span>
+          <svg className="size-3 group-hover:translate-x-0.5 transition-all" width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M5.05566 2.70996L9.91678 7.57107L5.05566 12.4322" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+          </svg>
+        </div>
+      </div>
+    </a>
+  );
+};
+
+<div className="pt-10 px-4 px-4 max-w-2xl mx-auto prose prose-gray">
+
+<label className="eyebrow h-5 text-primary dark:text-primary-light text-sm font-semibold">Core Concepts</label>
+<h1 className="mt-1 mb-2 text-2xl sm:text-3xl text-gray-900 tracking-tight dark:text-gray-200 font-semibold">Themes</h1>
+<label className="text-lg prose prose-gray dark:prose-invert">Custom the appearance of your documentation<br /><br />Configure [theme](/core-concepts/settings#param-theme) in docs.json using one of the following themes.</label>
 
-The platform supports a variety of pre-built themes so you can tailor the look and feel of your documentation based on your brand.
-
-## Configuration
-
-You can configure the theme property in [docs.json](/core-concepts/settings#param-theme).
-
-For example, to use the `maple` theme, you can add the following:
+<br />
 
-```json
-{
-  "theme": "maple"
-}
-```
+<div className="mt-8 grid grid-cols-1 sm:grid-cols-2 gap-8 not-prose">
 
-## Themes
+<ThemeCard title="Mint" value="mint" description="Classic documentation theme with time-tested layouts and familiar navigation." href="https://mint.mintlify.app" />
 
-There are a variety of themes to choose from.
+<ThemeCard title="Maple" value="maple" description="Modern, clean aesthetics perfect for AI and SaaS products." href="https://maple.mintlify.app" />
 
-<br />
+<ThemeCard title="Palm" value="palm" description="Sophisticated fintech theme with deep customization for enterprise documentation." href="https://palm.mintlify.app" />
 
-<ThemeCard title="Mint" description="Classic documentation theme with time-tested layouts and familiar navigation." image="/images/themes/mint.png" href="https://mint.mintlify.app" />
+<ThemeCard title="Willow" value="willow" description="Stripped-back essentials for distraction-free documentation." href="https://willow.mintlify.app" />
 
-<ThemeCard title="Maple" description="Modern, clean aesthetics perfect for AI and SaaS products." image="/images/themes/maple.png" href="https://maple.mintlify.app" />
+<ThemeCard title="Linden" value="linden" description="Retro terminal vibes with monospace fonts for that 80s hacker aesthetic." href="https://linden.mintlify.app" />
 
-<ThemeCard title="Palm" description="Sophisticated fintech theme with deep customization for enterprise documentation." image="/images/themes/palm.png" href="https://palm.mintlify.app" />
+<ThemeCard title="Almond" value="almond" description="Card-based organization meets minimalist design for intuitive navigation." href="https://almond.mintlify.app" />
 
-<ThemeCard title="Willow" description="Stripped-back essentials for distraction-free documentation." image="/images/themes/willow.png" href="https://willow.mintlify.app" />
+</div>
 
-<ThemeCard title="Linden" description="Retro terminal vibes with monospace fonts for that 80s hacker aesthetic." image="/images/themes/linden.png" href="https://linden.mintlify.app" />
+</div>