feat: adding self host and mcp server

fern/products/docs/pages/getting-started/overview.mdx

@@ -11,7 +11,7 @@ subtitle: A website builder for beautiful agent and developer-friendly docs.
   <div className="dashed-pattern-right"></div>
 
   <h2>Get started</h2>
-  <p>Build a docs site quickly by importing your existing styling and specs.</p>
+  <p>Build a docs site quickly by importing your existing syling and specs.</p>
 
   <CardGroup cols={2}>
     <a class="fern-card interactive not-prose relative block p-6 text-base" href="/docs/getting-started/quickstart">
@@ -31,7 +31,7 @@ subtitle: A website builder for beautiful agent and developer-friendly docs.
       </div>
     </a>
 
-    <a class="fern-card interactive not-prose rounded-3 relative block border p-6 text-base" href="/docs/configuration/what-is-docs-yml">
+    <a class="fern-card interactive not-prose rounded-3 relative block border p-6 text-base" href="/docs/customization/what-is-docs-yml">
       <div class="flex items-start flex-col space-y-3">
         <img class="mx-auto dark:hidden" alt="Configure with ease" src="./images/configure.png" />
         <img class="mx-auto hidden dark:block" alt="Configure with ease" src="./images/configure-dark.png" />
@@ -115,7 +115,41 @@ subtitle: A website builder for beautiful agent and developer-friendly docs.
             <img src="./images/arrow-right-white.svg" alt="Arrow right light" className="arrow-right hidden dark:block m-0" noZoom />
           </div>
           <div class="text-(color:--grayscale-a11) font-light">
-            <p>Get instant answers to questions about your docs from a personalized chatbot.</p>
+            <p>A personalized chatbot that can answer questions about your documentation.</p>
+          </div>
+        </div>
+      </div>
+    </a>
+
+    <a class="fern-card interactive not-prose rounded-3 relative block border p-6 text-base" href="/docs/self-hosted/overview">
+      <div class="flex items-start flex-col space-y-3">
+        <img class="mx-auto dark:hidden" alt="Self-host your docs" src="./images/self-host-light.png" />
+        <img class="mx-auto hidden dark:block" alt="Self-host your docs" src="./images/self-host-dark.png" />
+        <div class="w-full space-y-1 overflow-hidden">
+          <div class="text-(color:--grayscale-a12) text-body text-base font-semibold card-title">
+            Self-host your docs
+            <img src="./images/arrow-right-black.svg" alt="Arrow right light" className="arrow-right dark:hidden m-0" noZoom />
+            <img src="./images/arrow-right-white.svg" alt="Arrow right light" className="arrow-right hidden dark:block m-0" noZoom />
+          </div>
+          <div class="text-(color:--grayscale-a11) font-light">
+            <p>Deploy on your own infrastructure to meet security or compliance requirements.</p>
+          </div>
+        </div>
+      </div>
+    </a>
+
+    <a class="fern-card interactive not-prose rounded-3 relative block border p-6 text-base" href="https://github.com/fern-api/fern-mcp-server">
+      <div class="flex items-start flex-col space-y-3">
+        <img class="mx-auto dark:hidden" alt="Fern's MCP Server" src="./images/mcp-server-light.png" />
+        <img class="mx-auto hidden dark:block" alt="Fern's MCP Server" src="./images/mcp-server-dark.png" />
+        <div class="w-full space-y-1 overflow-hidden">
+          <div class="text-(color:--grayscale-a12) text-body text-base font-semibold card-title">
+            Fern's MCP Server
+            <img src="./images/arrow-right-black.svg" alt="Arrow right light" className="arrow-right dark:hidden m-0" noZoom />
+            <img src="./images/arrow-right-white.svg" alt="Arrow right light" className="arrow-right hidden dark:block m-0" noZoom />
+          </div>
+          <div class="text-(color:--grayscale-a11) font-light">
+            <p>Add Fern's MCP server to your AI workflows.</p>
           </div>
         </div>
       </div>