Add themes page

Author: handotdev

docs.json

@@ -36,6 +36,7 @@
                   "navigation/localization"
                 ]
               },
+              "themes",
               "migration"
             ]
           },

images/themes/maple.png

@@ -0,0 +1,18 @@
+export const ThemeCard = ({ title, description, image, href }) => {
+  return (
+    <div className="flex mt-4 gap-12 group">
+      <div className="flex-1">
+        <h4 className="mt-0">{title}</h4>
+        <div class="prose-sm prose-gray mb-4">{description}</div>
+        <a href={href} className="not-prose text-sm font-medium text-gray-500 hover:text-gray-700 dark:hover:text-gray-300">
+          See preview
+        </a>
+      </div>
+      <div className="flex-1">
+        <a href={href}>
+          <img className="mt-0 rounded-xl" src={image} alt={title} style={{ pointerEvents: 'none' }} />
+        </a>
+      </div>
+    </div>
+  );
+};

images/themes/mint.png

@@ -0,0 +1,35 @@
+---
+title: "Themes"
+icon: "palette"
+description: "Customize the appearance of your documentation"
+---
+
+import { ThemeCard } from "/snippets/theme-card.mdx";
+
+We offer pre-built themes so you can differentiate the look and feel of your documentation based on your brand.
+
+## Configuration
+
+You can configure the theme in the `docs.json` file.
+
+For example, to use the `maple` theme, you can add the following to your `docs.json` file:
+
+```json
+{
+  "theme": "maple"
+}
+```
+
+## Available Themes
+
+There are a variety of themes to choose from.
+
+<br />
+
+<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="Maple" description="Modern, clean aesthetics perfect for AI and SaaS products." image="/images/themes/maple.png" href="https://maple.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="Willow" description="Stripped-back essentials for distraction-free documentation." image="/images/themes/willow.png" href="https://willow.mintlify.app" />