Refresh homepage

docs.json

@@ -1,6 +1,6 @@
 {
   "$schema": "https://mintlify.com/docs.json",
-  "theme": "almond",
+  "theme": "luma",
   "name": "Mintlify",
   "colors": {
     "primary": "#166E3F",
@@ -1535,7 +1535,7 @@
     },
     "links": [
       {
-        "label": "Talk to us",
+        "label": "Talk with us",
         "href": "https://mintlify.com/contact/sales"
       }
     ]

index.mdx

@@ -2,25 +2,42 @@
 title: "Introduction"
 description: "Mintlify is an AI-native documentation platform built for developers, with beautiful defaults, interactive API playgrounds, and smart search."
 mode: "frame"
-keywords: ["overview", "platform", "getting started", "features"]
+keywords: ["overview", "platform", "get started", "features"]
 ---
 
-export const HeroCard = ({ filename, title, description, href }) => {
+export const SearchBar = () => {
+  const openSearch = () => {
+    const el = document.getElementById("search-bar-entry");
+    if (el) {
+      el.click();
+      return;
+    }
+    const isMac =
+      typeof navigator !== "undefined" &&
+      /Mac|iPhone|iPod|iPad/i.test(navigator.platform);
+    window.dispatchEvent(
+      new KeyboardEvent("keydown", {
+        key: "k",
+        metaKey: isMac,
+        ctrlKey: !isMac,
+        bubbles: true,
+        cancelable: true,
+      }),
+    );
+  };
   return (
-    <a className="group cursor-pointer pb-8" href={href}>
-      <img
-        src={`https://raw.githubusercontent.com/mintlify/docs/refs/heads/main/images/hero/${filename}.png`}
-        className="block dark:hidden pointer-events-none group-hover:scale-105 transition-all duration-100"
-      />
-      <img
-        src={`https://raw.githubusercontent.com/mintlify/docs/refs/heads/main/images/hero/${filename}-dark.png`}
-        className="pointer-events-none group-hover:scale-105 transition-all duration-100 hidden dark:block"
-      />
-      <h3 className="mt-5 text-gray-900 dark:text-zinc-50 font-medium">
-        {title}
-      </h3>
-      <span className="mt-1.5">{description}</span>
-    </a>
+    <button
+      type="button"
+      aria-label="Open search"
+      onClick={openSearch}
+      className="w-full max-w-[480px] mx-auto flex items-center gap-[4px] pl-[12px] pr-[10px] py-[10px] rounded-full bg-[#fafaf9] dark:bg-zinc-800 border border-[#f5f5f4] dark:border-zinc-700 text-[#78716c] dark:text-zinc-400 cursor-pointer hover:border-[#78716c] dark:hover:border-zinc-400 transition-colors outline-none focus-visible:ring-2 focus-visible:ring-stone-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-zinc-500 dark:focus-visible:ring-offset-zinc-900 font-[inherit] text-left"
+    >
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="shrink-0">
+        <circle cx="11" cy="11" r="8" />
+        <path d="m21 21-4.35-4.35" />
+      </svg>
+      <span className="text-base px-[4px]">Search or ask...</span>
+    </button>
   );
 };
 
@@ -29,47 +46,183 @@
     <img
       src="/images/hero/background-light.svg"
       className="block dark:hidden pointer-events-none w-full h-auto"
-      alt="Decorative background image."
+      aria-hidden="true"
     />
     <img
       src="/images/hero/background-dark.svg"
       className="hidden dark:block pointer-events-none w-full h-auto"
-      alt="Decorative background image."
+       aria-hidden="true"
     />
   </div>
 
-  <div className="relative z-10 px-4 py-16 lg:py-48 lg:pb-24 max-w-3xl mx-auto">
-    <h1 className="block text-4xl font-medium text-center text-gray-900 dark:text-zinc-50 tracking-tight">
-      Documentation
-    </h1>
+  <div className="relative z-10 px-4 py-16 lg:py-48 lg:pb-24 max-w-4xl mx-auto">
+    <div className="flex flex-col gap-12">
 
-    <div className="max-w-xl mx-auto px-4 mt-4 text-lg text-center text-gray-500 dark:text-zinc-500">
-      Meet the next generation of documentation. AI-native, beautiful out-of-the-box, and built for developers and teams.
-    </div>
+      <div className="flex flex-col gap-6 items-center pb-8">
+        <div className="flex flex-col gap-[8px] items-center text-center max-w-[480px]">
+          <h1 className="font-medium text-[30px] leading-9 tracking-[-0.5px] text-[#0c0a09] dark:text-zinc-50">
+            Mintlify documentation
+          </h1>
+          <p className="text-base leading-6 tracking-[-0.2px] text-[#57534e] dark:text-zinc-400">
+            Meet the next generation of documentation. AI-native, beautiful out-of-the-box, and built for developers and teams.
+          </p>
+        </div>
+        <SearchBar />
+      </div>
+
+      <div className="flex flex-col gap-6">
+        <h2 className="text-lg leading-[26px] font-medium tracking-[-0.2px] text-[#0c0a09] dark:text-zinc-50">Get started</h2>
+        <div className="grid sm:grid-cols-3 gap-5">
+          <a href="/quickstart" className="group flex flex-col justify-between min-h-[272px] p-4 rounded-2xl bg-[#fafaf9] dark:bg-zinc-800/60 no-underline transition-transform motion-reduce:transition-none hover:scale-[1.02] motion-reduce:hover:scale-100">
+            <div className="size-8 text-[#0c0a09] dark:text-zinc-300">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="w-full h-full">
+                <path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"/>
+                <path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"/>
+                <path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"/>
+                <path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"/>
+              </svg>
+            </div>
+            <div className="flex flex-col gap-[4px]">
+              <p className="font-medium text-base leading-6 tracking-[-0.2px] text-[#0c0a09] dark:text-zinc-50">Quickstart</p>
+              <p className="text-sm leading-5 tracking-[-0.1px] text-[#78716c] dark:text-zinc-400">Deploy your first documentation site with our step-by-step guide.</p>
+            </div>
+          </a>
+          <a
+            href="/installation"
+            className="group relative flex flex-col overflow-hidden rounded-2xl no-underline transition-transform motion-reduce:transition-none hover:scale-[1.02] motion-reduce:hover:scale-100 bg-gradient-to-br from-violet-400/70 from-0% via-sky-600/90 via-[73%] to-green-500/95 to-100% dark:from-indigo-950 dark:from-0% dark:via-sky-950 dark:via-[73%] dark:to-green-800 dark:to-100%"
+          >
+            {/* Soft watercolor-style washes + grain; decorative only */}
+            <div
+              aria-hidden="true"
+              className="pointer-events-none absolute inset-0 z-0 rounded-2xl bg-[radial-gradient(ellipse_95%_75%_at_12%_88%,rgba(255,255,255,0.16),transparent_58%),radial-gradient(ellipse_75%_60%_at_94%_8%,rgba(255,255,255,0.1),transparent_52%),radial-gradient(ellipse_55%_45%_at_50%_40%,rgba(255,255,255,0.06),transparent_60%)] dark:bg-[radial-gradient(ellipse_95%_75%_at_12%_88%,rgba(255,255,255,0.07),transparent_58%),radial-gradient(ellipse_75%_60%_at_94%_8%,rgba(255,255,255,0.05),transparent_52%),radial-gradient(ellipse_55%_45%_at_50%_40%,rgba(255,255,255,0.04),transparent_60%)]"
+            />
+            <div
+              aria-hidden="true"
+              className="pointer-events-none absolute inset-0 z-0 rounded-2xl opacity-[0.48] mix-blend-soft-light dark:opacity-[0.37] dark:mix-blend-overlay"
+              style={{
+                backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")`,
+              }}
+            />
+            <div className="relative z-10 flex min-h-[272px] flex-col justify-between p-4">
+              <div className="size-8 text-white drop-shadow-[0_1px_2px_rgba(0,0,0,0.35)]">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="w-full h-full">
+                  <rect width="20" height="20" x="2" y="2" rx="2" ry="2"/>
+                  <path d="m7 11 2-2-2-2"/>
+                  <path d="M11 13h4"/>
+                </svg>
+              </div>
+              <div className="flex flex-col gap-[4px] [text-shadow:0_1px_2px_rgba(0,0,0,0.35)]">
+                <p className="font-medium text-base leading-6 tracking-[-0.2px] text-white">CLI installation</p>
+                <p className="text-sm leading-5 tracking-[-0.1px] text-white/95">Install the CLI to preview and develop your content locally.</p>
+              </div>
+            </div>
+          </a>
+          <a href="/editor/index" className="group flex flex-col justify-between min-h-[272px] p-4 rounded-2xl bg-[#fafaf9] dark:bg-zinc-800/60 no-underline transition-transform motion-reduce:transition-none hover:scale-[1.02] motion-reduce:hover:scale-100">
+            <div className="size-8 text-[#0c0a09] dark:text-zinc-300">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="w-full h-full">
+                <path d="M12 20h9"/>
+                <path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z"/>
+              </svg>
+            </div>
+            <div className="flex flex-col gap-[4px]">
+              <p className="font-medium text-base leading-6 tracking-[-0.2px] text-[#0c0a09] dark:text-zinc-50">Web editor</p>
+              <p className="text-sm leading-5 tracking-[-0.1px] text-[#78716c] dark:text-zinc-400">Write, edit, and publish content in your browser.</p>
+            </div>
+          </a>
+        </div>
+      </div>
+
+      <div className="h-8 flex items-center" aria-hidden="true">
+        <div className="w-full h-px bg-[#f5f5f4] dark:bg-zinc-700" />
+      </div>
 
-    <div className="px-6 lg:px-0 mt-12 lg:mt-24 grid sm:grid-cols-2 gap-x-6 gap-y-4">
-      <HeroCard filename="rocket" title="Quickstart" description="Deploy your first docs site in minutes with our step-by-step guide" href="/quickstart" />
+      <div className="flex flex-col gap-6">
+        <h2 className="text-lg leading-[26px] font-medium tracking-[-0.2px] text-[#0c0a09] dark:text-zinc-50">Make it yours</h2>
+        <div className="grid sm:grid-cols-3 gap-5">
+          <a href="/customize/custom-domain" className="group flex flex-col no-underline transition-transform motion-reduce:transition-none hover:scale-[1.02] motion-reduce:hover:scale-100">
+            <div className="relative h-[170px] rounded-2xl overflow-hidden">
+              <div aria-hidden="true" className="absolute inset-0 pointer-events-none rounded-2xl">
+                <div className="absolute inset-0 bg-[#fafaf9] rounded-2xl" />
+                <img alt="" className="absolute inset-0 size-full object-cover rounded-2xl" src="/images/homepage/custom-domain.png" />
+              </div>
+            </div>
+            <div className="pt-4 flex flex-col gap-[4px]">
+              <p className="font-medium text-base leading-6 tracking-[-0.2px] text-[#0c0a09] dark:text-zinc-50">Custom domain</p>
+              <p className="text-sm leading-5 tracking-[-0.1px] text-[#57534e] dark:text-zinc-400">Host your documentation on a custom domain.</p>
+            </div>
+          </a>
+          <a href="/customize/themes" className="group flex flex-col no-underline transition-transform motion-reduce:transition-none hover:scale-[1.02] motion-reduce:hover:scale-100">
+            <div className="relative h-[170px] rounded-2xl overflow-hidden">
+              <div aria-hidden="true" className="absolute inset-0 pointer-events-none rounded-2xl">
+                <div className="absolute inset-0 bg-[#fafaf9] rounded-2xl" />
+                <img alt="" className="absolute inset-0 size-full object-cover rounded-2xl" src="/images/homepage/themes.png" />
+              </div>
+            </div>
+            <div className="pt-4 flex flex-col gap-[4px]">
+              <p className="font-medium text-base leading-6 tracking-[-0.2px] text-[#0c0a09] dark:text-zinc-50">Themes</p>
+              <p className="text-sm leading-5 tracking-[-0.1px] text-[#57534e] dark:text-zinc-400">Customize the appearance of your site with a prebuilt theme.</p>
+            </div>
+          </a>
+          <a href="/ai-native" className="group flex flex-col no-underline transition-transform motion-reduce:transition-none hover:scale-[1.02] motion-reduce:hover:scale-100">
+            <div className="relative h-[170px] rounded-2xl overflow-hidden">
+              <div aria-hidden="true" className="absolute inset-0 pointer-events-none rounded-2xl">
+                <div className="absolute inset-0 bg-[#fafaf9] rounded-2xl" />
+                <img alt="" className="absolute inset-0 size-full object-cover rounded-2xl" src="/images/homepage/ai-native.png" />
+              </div>
+            </div>
+            <div className="pt-4 flex flex-col gap-[4px]">
+              <p className="font-medium text-base leading-6 tracking-[-0.2px] text-[#0c0a09] dark:text-zinc-50">AI native features</p>
+              <p className="text-sm leading-5 tracking-[-0.1px] text-[#57534e] dark:text-zinc-400">Set up AI tools for reading, maintaining, and discovering your documentation.</p>
+            </div>
+          </a>
+        </div>
+      </div>
 
-      <HeroCard
-        filename="cli"
-        title="CLI installation"
-        description="Install the CLI to preview and develop your docs locally"
-        href="/installation"
-      />
+      <div className="h-8 flex items-center" aria-hidden="true">
+        <div className="w-full h-px bg-[#f5f5f4] dark:bg-zinc-700" />
+      </div>
 
-      <HeroCard
-        filename="editor"
-        title="Web editor"
-        description="Make quick updates and manage content with our browser-based editor"
-        href="/editor/index"
-      />
+      <div className="grid sm:grid-cols-3 gap-5">
+        <a href="/guides/index" className="group flex flex-col items-center text-center py-4 rounded-2xl no-underline hover:bg-[#fafaf9] dark:hover:bg-zinc-800/60 transition-colors">
+          <div className="size-8 text-[#0c0a09] dark:text-zinc-50">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="w-full h-full">
+              <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/>
+              <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>
+            </svg>
+          </div>
+          <div className="mt-4 flex flex-col gap-[4px]">
+            <p className="font-medium text-base leading-6 tracking-[-0.2px] text-[#0c0a09] dark:text-zinc-50">Guides</p>
+            <p className="text-sm leading-5 tracking-[-0.1px] text-[#57534e] dark:text-zinc-400">Learn how to create effective documentation.</p>
+          </div>
+        </a>
+        <a href="/changelog" className="group flex flex-col items-center text-center py-4 rounded-2xl no-underline hover:bg-[#fafaf9] dark:hover:bg-zinc-800/60 transition-colors">
+          <div className="size-8 text-[#0c0a09] dark:text-zinc-50">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="w-full h-full">
+              <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/>
+              <path d="M14 2v4a2 2 0 0 0 2 2h4"/>
+              <path d="M10 9H8"/>
+              <path d="M16 13H8"/>
+              <path d="M16 17H8"/>
+            </svg>
+          </div>
+          <div className="mt-4 flex flex-col gap-[4px]">
+            <p className="font-medium text-base leading-6 tracking-[-0.2px] text-[#0c0a09] dark:text-zinc-50">Changelog</p>
+            <p className="text-sm leading-5 tracking-[-0.1px] text-[#57534e] dark:text-zinc-400">Read about new product releases and improvements.</p>
+          </div>
+        </a>
+        <a href="/status" className="group flex flex-col items-center text-center py-4 rounded-2xl no-underline hover:bg-[#fafaf9] dark:hover:bg-zinc-800/60 transition-colors">
+          <div className="size-8 text-[#0c0a09] dark:text-zinc-50">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="w-full h-full">
+              <path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"/>
+            </svg>
+          </div>
+          <div className="mt-4 flex flex-col gap-[4px]">
+            <p className="font-medium text-base leading-6 tracking-[-0.2px] text-[#0c0a09] dark:text-zinc-50">Status</p>
+            <p className="text-sm leading-5 tracking-[-0.1px] text-[#57534e] dark:text-zinc-400">Check the status of our service availability.</p>
+          </div>
+        </a>
+      </div>
 
-      <HeroCard
-        filename="components"
-        title="Components"
-        description="Build rich, interactive documentation with our ready-to-use components"
-        href="/components/accordions"
-      />
     </div>
   </div>
 </div>