From 26fee5fa6932eee5d3fa25b8347bc27948c9f9ac Mon Sep 17 00:00:00 2001
From: Nick K <nick.k@trieve.ai>
Date: Wed, 16 Jul 2025 08:16:15 -0700
Subject: [PATCH] fix: layout shift on introduction page for docs

---
 index.mdx | 91 ++++++++++++++++++++++++++++++++-----------------------
 1 file changed, 53 insertions(+), 38 deletions(-)

diff --git a/index.mdx b/index.mdx
index 19dac9ae0..dd1438db6 100644
--- a/index.mdx
+++ b/index.mdx
@@ -8,51 +8,66 @@ mode: "custom"
 export const HeroCard = ({ filename, title, description, href }) => {
   return (
     <a className="group cursor-pointer pb-8" href={href}>
-      <img src={`https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/hero/${filename}.png`} className="block dark:hidden pointer-events-none group-hover:scale-105 transition-all duration-100" />
-      <img src={`https://mintlify.s3.us-west-1.amazonaws.com/mintlify/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>
+      <img
+        src={`https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/hero/${filename}.png`}
+        className="block dark:hidden pointer-events-none group-hover:scale-105 transition-all duration-100"
+      />
+      <img
+        src={`https://mintlify.s3.us-west-1.amazonaws.com/mintlify/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="relative">
-<div className="absolute top-0 lg:-top-16 left-0 right-0">
-<img
-  src="/images/hero/background-light.png"
-  className="block dark:hidden pointer-events-none"
-/>
-<img
-  src="/images/hero/background-dark.png"
-  className="hidden dark:block pointer-events-none"
-/>
+  <div className="absolute top-0 lg:-top-16 left-0 right-0">
+    <img
+      src="/images/hero/background-light.png"
+      className="block dark:hidden pointer-events-none"
+    />
+    <img
+      src="/images/hero/background-dark.png"
+      className="hidden dark:block pointer-events-none"
+    />
+  </div>
 
-</div>
-
-<div className="px-4 py-16 lg:py-48 lg:pb-24 max-w-3xl mx-auto">
-<h1 className="text-4xl font-medium text-center text-gray-900 dark:text-zinc-50 tracking-tight">
-Documentation
-
-</h1>
-
-<p 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.
+  <div className="px-4 py-16 lg:py-48 lg:pb-24 max-w-3xl mx-auto">
+    <h1 className="text-4xl font-medium text-center text-gray-900 dark:text-zinc-50 tracking-tight">
+      Documentation
+    </h1>
 
-</p>
+    <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.
+    </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="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" />
 
-<HeroCard filename="cli" title="CLI installation" description="Install the CLI to preview and develop your docs locally" href="/installation" />
+      <HeroCard
+        filename="cli"
+        title="CLI installation"
+        description="Install the CLI to preview and develop your docs locally"
+        href="/installation"
+      />
 
-<HeroCard filename="editor" title="Web editor" description="Make quick updates and manage content with our browser-based editor" href="/editor" />
-
-<HeroCard filename="components" title="Components" description="Build rich, interactive documentation with our ready-to-use components" href="/components" />
-
-</div>
+      <HeroCard
+        filename="editor"
+        title="Web editor"
+        description="Make quick updates and manage content with our browser-based editor"
+        href="/editor"
+      />
 
+      <HeroCard
+        filename="components"
+        title="Components"
+        description="Build rich, interactive documentation with our ready-to-use components"
+        href="/components"
+      />
+    </div>
+  </div>
 </div>
-
-</div>
\ No newline at end of file