feat: adding self host and mcp server

Author: Kapil Gowru

fern/assets/styles.css

@@ -372,46 +372,6 @@ a[href*="changelog"] svg {
 .sdks-homepage {
   position: relative;
 
-  .changelog-button {
-    display: flex;
-    padding: 0.25rem 0.5rem;
-    align-items: center;
-    justify-content: center;
-    border-radius: 0.5rem;
-    transition: background-color 0.15s ease-in-out;
-    position: relative;
-    height: 2rem;
-    text-decoration: none !important;
-
-    img {
-      flex-shrink: 0;
-      width: 16px;
-      height: 16px;
-      position: relative;
-    }
-
-    div {
-      font-size: 1rem;
-      white-space: nowrap;
-      max-width: 0;
-      opacity: 0;
-      overflow: hidden;
-      transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
-      width: 0;
-    }
-
-    &:hover {
-      gap: 0.25rem;
-      background-color: var(--grayscale-a3);
-
-      div {
-        max-width: 200px;
-        opacity: 1;
-        width: fit-content;
-      }
-    }
-  }
-
   .dashed-pattern-left {
     position: absolute;
     left: -4rem;
@@ -557,6 +517,11 @@ a[href*="changelog"] svg {
   min-height: 100vh;
   position: relative;
 
+  /* Hide all anchor links on the homepage */
+  [data-radix-popper-content-wrapper]:has(span[id^="radix-"]) {
+    display: none !important;
+  }
+
   .dashed-pattern-left {
     position: absolute;
     left: -1rem;
@@ -648,7 +613,7 @@ a[href*="changelog"] svg {
   .card-header {
     display: flex;
     flex-direction: column;
-    gap: 0.25rem;
+    /* gap: 0.25rem; */
   }
 
   .card-title {
@@ -676,7 +641,7 @@ a[href*="changelog"] svg {
   }
 
   .card-description {
-    font-size: 1rem;
+    font-size: 0.875rem;
     color: var(--grayscale-10);
   }
 
@@ -770,6 +735,14 @@ a[href*="changelog"] svg {
     align-items: flex-start;
   }
 
+  .community-card-header {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
   .community-card-title {
     font-size: 1rem;
     font-weight: bold;
@@ -831,15 +804,17 @@ a[href*="changelog"] svg {
   /* Responsive Design - Mobile First */
   @media (max-width: 640px) {
     .main-content {
-      padding: 2rem 1rem;
+      padding: 2rem 0rem;
     }
 
     .dashed-pattern-left {
       left: 0px;
+      display: none;
     }
 
     .dashed-pattern-right {
       right: 0px;
+      display: none;
     }
 
     .hero-section {
@@ -857,27 +832,27 @@ a[href*="changelog"] svg {
     }
 
     .sdks-card {
-      padding: 1rem;
+      padding: 2rem 1rem;
     }
 
     .docs-card {
-      padding: 1rem;
+      padding: 2rem 1rem;
       border-left: none;
       grid-column: 1;
       grid-row: auto;
     }
 
     .ai-search-card {
-      padding: 1rem;
+      padding: 2rem 1rem;
     }
 
     .card-title {
       font-size: 1.375rem;
     }
 
-    .card-description {
+    /* .card-description {
       font-size: 1.0625rem;
-    }
+    } */
 
     .language-icons {
       flex-wrap: wrap;
@@ -917,7 +892,7 @@ a[href*="changelog"] svg {
     }
 
     .community-section {
-      padding: 2rem 1.5rem;
+      padding: 2rem 1rem;
     }
 
     .community-grid {
@@ -928,15 +903,15 @@ a[href*="changelog"] svg {
     .community-card {
       border-radius: 0.5rem;
       transition: all 0.2s ease;
+    }
 
-      &:hover {
-        border-color: var(--grayscale-6);
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-      }
+    .community-card-header {
+      flex-direction: row;
+      align-items: center;
     }
 
     .help-section {
-      padding: 2rem 1.5rem;
+      padding: 2rem 1rem;
     }
 
     .help-buttons {
@@ -996,12 +971,35 @@ a[href*="changelog"] svg {
   will-change: transform;
   /* Ensure click events can reach the canvas */
   pointer-events: auto;
+  min-height: 104px;
 }
 
 .sdk-rive:hover {
   transform: translateY(-3px) !important;
 }
 
+.docs-rive {
+  min-height: 213px;
+}
+
+.ask-fern-rive {
+  min-height: 114px;
+}
+
+@media (max-width: 640px) {
+  .sdk-rive {
+    min-height: inherit;
+  }
+
+  .docs-rive {
+    min-height: inherit;
+  }
+
+  .ask-fern-rive {
+    min-height: inherit;
+  }
+}
+
 /* Ensure the canvas can receive clicks and is properly layered */
 .rive-container {
   width: 100%;
@@ -1031,4 +1029,4 @@ a[href*="changelog"] svg {
   display: inline-block;
 }
 
-/*** END -- LANDING PAGE STYLING ***/
+/*** END -- LANDING PAGE STYLING ***/

fern/products/docs/pages/getting-started/images/mcp-server-light.png

@@ -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="Visual Editor" src="./images/self-host-light.png" />
+        <img class="mx-auto hidden dark:block" alt="Visual Editor" src="./images/ask-fern-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="/ask-fern/getting-started/what-is-ask-fern">
+      <div class="flex items-start flex-col space-y-3">
+        <img class="mx-auto dark:hidden" alt="Visual Editor" src="./images/mcp-server-light.png" />
+        <img class="mx-auto hidden dark:block" alt="Visual Editor" src="./images/ask-fern-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 agentic workflows.</p>
           </div>
         </div>
       </div>