diff --git a/docs.json b/docs.json
index 065c9e2b0..b27da255a 100644
--- a/docs.json
+++ b/docs.json
@@ -1570,7 +1570,7 @@
     },
     "links": [
       {
-        "label": "Talk to us",
+        "label": "Talk with us",
         "href": "https://mintlify.com/contact/sales"
       }
     ]
diff --git a/images/homepage/ai-native.png b/images/homepage/ai-native.png
new file mode 100644
index 000000000..35884d26f
Binary files /dev/null and b/images/homepage/ai-native.png differ
diff --git a/images/homepage/custom-domain.png b/images/homepage/custom-domain.png
new file mode 100644
index 000000000..e0c348e22
Binary files /dev/null and b/images/homepage/custom-domain.png differ
diff --git a/images/homepage/themes.png b/images/homepage/themes.png
new file mode 100644
index 000000000..e636836f1
Binary files /dev/null and b/images/homepage/themes.png differ
diff --git a/index.mdx b/index.mdx
index 8885e44dd..191cbf4b0 100644
--- a/index.mdx
+++ b/index.mdx
@@ -2,74 +2,268 @@
 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 }) => {
-  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>
-  );
-};
+<div className="px-4 py-16 lg:py-48 lg:pb-24 max-w-4xl mx-auto">
+    <div className="flex flex-col gap-12">
 
-<div className="relative">
-  <div className="absolute -top-14 left-0 right-0 opacity-80">
-    <img
-      src="/images/hero/background-light.svg"
-      className="block dark:hidden pointer-events-none w-full h-auto"
-      alt="Decorative background image."
-    />
-    <img
-      src="/images/hero/background-dark.svg"
-      className="hidden dark:block pointer-events-none w-full h-auto"
-      alt="Decorative background image."
-    />
-  </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="min-h-[2.25rem] font-medium text-[30px] leading-9 tracking-[-0.5px] text-[#0c0a09] dark:text-zinc-50 [-webkit-text-size-adjust:100%] [text-size-adjust:100%]">
+            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>
+        <button
+          type="button"
+          aria-label="Open search"
+          onClick={() => {
+            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,
+              }),
+            );
+          }}
+          className="w-full max-w-[480px] mx-auto flex items-center gap-2.5 rounded-3xl bg-[#fafaf9] px-5 py-3 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 leading-none [overflow:visible]"
+        >
+          <span className="inline-flex size-5 shrink-0 items-center justify-center text-current [overflow:visible]">
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              aria-hidden="true"
+              className="block h-[18px] w-[18px] shrink-0 [overflow:visible]"
+            >
+              <path d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
+            </svg>
+          </span>
+          <span className="text-base px-[4px]">Search or ask...</span>
+        </button>
+      </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="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 relative isolate flex flex-col overflow-hidden rounded-2xl bg-[#fafaf9] dark:bg-zinc-800/60 no-underline [transition:transform_200ms_ease] motion-reduce:transition-none hover:scale-[1.02] motion-reduce:hover:scale-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-stone-400 dark:focus-visible:outline-zinc-500"
+          >
+            <div className="pointer-events-none absolute inset-0 z-0 opacity-0 transition-opacity duration-300 ease-out motion-reduce:transition-none group-hover:opacity-100">
+              <div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-violet-400/80 to-violet-600/95 dark:from-violet-950 dark:to-violet-900" />
+              <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.35] dark:opacity-[0.28]"
+                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>
+            <div className="relative z-10 flex min-h-[272px] flex-col justify-between p-4">
+              <div className="size-8 text-[#0c0a09] dark:text-zinc-300 transition-[color,filter] duration-300 ease-out group-hover:text-white group-hover: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">
+                  <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 transition-[color,text-shadow] duration-300 ease-out group-hover:text-white group-hover:[text-shadow:0_1px_2px_rgba(0,0,0,0.35)]">
+                  Quickstart
+                </p>
+                <p className="text-sm leading-5 tracking-[-0.1px] text-[#78716c] dark:text-zinc-400 transition-[color,text-shadow] duration-300 ease-out group-hover:text-white/95 group-hover:[text-shadow:0_1px_2px_rgba(0,0,0,0.35)]">
+                  Deploy your first documentation site with our step-by-step guide.
+                </p>
+              </div>
+            </div>
+          </a>
+          <a
+            href="/cli/install"
+            className="group relative isolate flex flex-col overflow-hidden rounded-2xl bg-[#fafaf9] dark:bg-zinc-800/60 no-underline [transition:transform_200ms_ease] motion-reduce:transition-none hover:scale-[1.02] motion-reduce:hover:scale-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-stone-400 dark:focus-visible:outline-zinc-500"
+          >
+            <div className="pointer-events-none absolute inset-0 z-0 opacity-0 transition-opacity duration-300 ease-out motion-reduce:transition-none group-hover:opacity-100">
+              <div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-sky-400/80 to-sky-700/95 dark:from-sky-950 dark:to-sky-900" />
+              <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.35] dark:opacity-[0.28]"
+                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>
+            <div className="relative z-10 flex min-h-[272px] flex-col justify-between p-4">
+              <div className="size-8 text-[#0c0a09] dark:text-zinc-300 transition-[color,filter] duration-300 ease-out group-hover:text-white group-hover: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]">
+                <p className="font-medium text-base leading-6 tracking-[-0.2px] text-[#0c0a09] dark:text-zinc-50 transition-[color,text-shadow] duration-300 ease-out group-hover:text-white group-hover:[text-shadow:0_1px_2px_rgba(0,0,0,0.35)]">
+                  CLI installation
+                </p>
+                <p className="text-sm leading-5 tracking-[-0.1px] text-[#78716c] dark:text-zinc-400 transition-[color,text-shadow] duration-300 ease-out group-hover:text-white/95 group-hover:[text-shadow:0_1px_2px_rgba(0,0,0,0.35)]">
+                  Install the CLI to preview and develop your content locally.
+                </p>
+              </div>
+            </div>
+          </a>
+          <a
+            href="/editor/index"
+            className="group relative isolate flex flex-col overflow-hidden rounded-2xl bg-[#fafaf9] dark:bg-zinc-800/60 no-underline [transition:transform_200ms_ease] motion-reduce:transition-none hover:scale-[1.02] motion-reduce:hover:scale-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-stone-400 dark:focus-visible:outline-zinc-500"
+          >
+            <div className="pointer-events-none absolute inset-0 z-0 opacity-0 transition-opacity duration-300 ease-out motion-reduce:transition-none group-hover:opacity-100">
+              <div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-green-400/80 to-green-700/95 dark:from-green-950 dark:to-green-900" />
+              <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.35] dark:opacity-[0.28]"
+                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>
+            <div className="relative z-10 flex min-h-[272px] flex-col justify-between p-4">
+              <div className="size-8 text-[#0c0a09] dark:text-zinc-300 transition-[color,filter] duration-300 ease-out group-hover:text-white group-hover: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">
+                  <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 transition-[color,text-shadow] duration-300 ease-out group-hover:text-white group-hover:[text-shadow:0_1px_2px_rgba(0,0,0,0.35)]">
+                  Web editor
+                </p>
+                <p className="text-sm leading-5 tracking-[-0.1px] text-[#78716c] dark:text-zinc-400 transition-[color,text-shadow] duration-300 ease-out group-hover:text-white/95 group-hover:[text-shadow:0_1px_2px_rgba(0,0,0,0.35)]">
+                  Write, edit, and publish content in your browser.
+                </p>
+              </div>
+            </div>
+          </a>
+        </div>
+      </div>
 
-    <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="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_200ms_ease] 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" loading="eager" decoding="async" fetchPriority="high" />
+              </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_200ms_ease] 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" loading="eager" decoding="async" />
+              </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_200ms_ease] 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" loading="eager" decoding="async" />
+              </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>