Feat: Migrate SDK guides

fern/assets/styles.css

@@ -6,6 +6,10 @@
   appearance: none;
 }
 
+#builtwithfern {
+  display: none !important;
+}
+
 .motivation p {
   max-width: unset !important;
 }

fern/products/docs/docs.yml

@@ -136,10 +136,17 @@ navigation:
   - section: Authentication
     collapsed: true
     contents:
+      - page: SSO
+        path: ./pages/authentication/sso.mdx
       - page: RBAC
         path: ./pages/authentication/rbac.mdx
       - page: API Key Injection
         path: ./pages/api-references/autopopulate-api-key.mdx
+  - section: Enterprise
+    collapsed: true
+    contents:
+      - page: Self-hosted
+        path: ./pages/enterprise/self-hosted.mdx
   - section: Integrations
     collapsed: true
     contents:

fern/products/docs/pages/authentication/sso.mdx

@@ -2,6 +2,6 @@
 title: Single Sign-On
 ---
 
-How to configure Single Sign-On (SSO) for your documentation platform.
+Fern supports SSO so that your docs site is gated for your team and customers.
 
-<Warning>This page is a WIP, please refer to our previous [documentation](https://buildwithfern.com/learn/docs/getting-started/overview).</Warning> 
+<Warning>Docs are coming soon for this page.<br/><br/>Please [book a demo](https://buildwithfern.com/book-demo) or [reach out to us](https://buildwithfern.com/book-demo)to get set up with this feature. </Warning> 

fern/products/docs/pages/enterprise/self-hosted.mdx

@@ -2,6 +2,6 @@
 title: Self-hosted Enterprise
 ---
 
-Information about self-hosted enterprise solutions for your documentation platform.
+Fern supports self-hosting so that you can run your docs site on your own infrastructure.
 
-<Warning>This page is a WIP, please refer to our previous [documentation](https://buildwithfern.com/learn/docs/getting-started/overview).</Warning> 
+<Warning>Docs are coming soon for this page.<br/><br/>Please [book a demo](https://buildwithfern.com/book-demo) or [reach out to us](https://buildwithfern.com/book-demo)to get set up with this feature. </Warning> 

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

@@ -8,59 +8,162 @@ description: Meet documentation that is stunning by default, AI-ready, and desig
     .fern-card {
       text-decoration: none !important;
     } 
+
+    .docs-homepage {
+      position: relative;
+
+      .dashed-pattern-left {
+        position: absolute;
+        left: -4rem;
+        top: -8.5rem;
+        height: calc(100% + 26rem);
+        width: 1rem;
+        opacity: 1;
+        pointer-events: none;
+        border-right: 1px solid var(--grayscale-5);
+        border-left: 1px solid var(--grayscale-5);
+        mask: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0 ) 100%);
+        -webkit-mask: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
+      }
+
+      .dashed-pattern-right {
+        position: absolute;
+        right: -4rem;
+        top: -8.5rem;
+        height: calc(100% + 26rem);
+        width: 1rem;
+        opacity: 1;
+        pointer-events: none;
+        border-right: 1px solid var(--grayscale-5);
+        border-left: 1px solid var(--grayscale-5);
+        mask: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
+        -webkit-mask: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
+      }
+
+      .dashed-gradient {
+        height: 100%;
+        width: 100%;
+        background-image: url('data:image/svg+xml;utf8,<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_351_76922)"><rect width="100" height="100" fill="transparent"/><path d="M0 100L100 -7.07537e-07" stroke="%23E0E1E6" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_351_76922"><rect width="100" height="100" fill="white"/></clipPath></defs></svg>');
+        background-repeat: repeat;
+        background-size: 12px 12px;
+        mask: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
+        -webkit-mask: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
+      }
+
+      .fern-card {
+        border: none !important;
+        padding: 0 !important;
+        box-shadow: none !important;
+
+        .card-title {
+          display: flex;
+          gap: 0.25rem;
+          align-items: center;
+        }
+
+        img {
+          transition: transform 0.15s ease-in-out;
+        }
+
+        .arrow-right {
+          height: 1rem;
+          opacity: 0;
+          transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out;
+          transform: translateX(0px);
+        }
+
+        &:hover {
+          img {
+            transform: scale(1.01);
+          }
+
+          .arrow-right {
+            opacity: 1;
+            transform: translateX(2px);
+          }
+        }
+      }
+    }
   `}
 </style>
 
-<CardGroup cols={2}>
-  <a class="fern-card interactive not-prose rounded-3 relative block border p-6 text-base" href="/docs/guides/getting-started/quickstart">
-    <div class="flex items-start flex-col space-y-3">
-      <img class="mx-auto dark:hidden" alt="Quickstart" src="./images/quickstart.png" />
-      <img class="mx-auto hidden dark:block" alt="Quickstart" src="./images/quickstart-dark.png" />
-      <div class="w-full space-y-1 overflow-hidden">
-        <div class="text-(color:--grayscale-a12) text-body text-base font-semibold">Quickstart</div>
-        <div class="text-(color:--grayscale-a11) font-light">
-          <p>Start building beautiful documentation in under 5 minutes.</p>
+<div className="docs-homepage">
+  {/* Dashed Pattern - Left Side */}
+  <div className="dashed-pattern-left">
+    <div className="dashed-gradient"></div>
+  </div>
+
+  {/* Dashed Pattern - Right Side */}
+  <div className="dashed-pattern-right">
+    <div className="dashed-gradient"></div>
+  </div>
+  <CardGroup cols={2}>
+    <a class="fern-card interactive not-prose relative block p-6 text-base" href="/docs/guides/getting-started/quickstart">
+      <div class="flex items-start flex-col space-y-3">
+        <img class="mx-auto dark:hidden" alt="Quickstart" src="./images/quickstart.png" />
+        <img class="mx-auto hidden dark:block" alt="Quickstart" src="./images/quickstart-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">
+            Quickstart
+            <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>Start building beautiful documentation in under 5 minutes.</p>
+          </div>
         </div>
       </div>
-    </div>
-  </a>
-
-  <a class="fern-card interactive not-prose rounded-3 relative block border p-6 text-base" href="/docs/guides/getting-started/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" />
-      <div class="w-full space-y-1 overflow-hidden">
-        <div class="text-(color:--grayscale-a12) text-body text-base font-semibold">Configure with ease</div>
-        <div class="text-(color:--grayscale-a11) font-light">
-          <p>One simple file that can be used to generate documentation that fits your brand.</p>
+    </a>
+
+    <a class="fern-card interactive not-prose rounded-3 relative block border p-6 text-base" href="/docs/guides/getting-started/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" />
+        <div class="w-full space-y-1 overflow-hidden">
+          <div class="text-(color:--grayscale-a12) text-body text-base font-semibold card-title">
+            Configure with ease
+            <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>One simple file that can be used to generate documentation that fits your brand.</p>
+          </div>
         </div>
       </div>
-    </div>
-  </a>
-
-  <a class="fern-card interactive not-prose rounded-3 relative block border p-6 text-base" href="/docs/component-library/overview">
-    <div class="flex items-start flex-col space-y-3">
-      <img class="mx-auto dark:hidden" alt="Flexible component library" src="./images/component-library.png" />
-      <img class="mx-auto hidden dark:block" alt="Flexible component library" src="./images/component-library-dark.png" />
-      <div class="w-full space-y-1 overflow-hidden">
-        <div class="text-(color:--grayscale-a12) text-body text-base font-semibold">Flexible component library</div>
-        <div class="text-(color:--grayscale-a11) font-light">
-          <p>Use pre-built or custom React components for a polished look.</p>
+    </a>
+
+    <a class="fern-card interactive not-prose rounded-3 relative block border p-6 text-base" href="/docs/component-library/overview">
+      <div class="flex items-start flex-col space-y-3">
+        <img class="mx-auto dark:hidden" alt="Flexible component library" src="./images/component-library.png" />
+        <img class="mx-auto hidden dark:block" alt="Flexible component library" src="./images/component-library-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">
+            Flexible component library
+            <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>Use pre-built or custom React components for a polished look.</p>
+          </div>
         </div>
       </div>
-    </div>
-  </a>
-
-  <a class="fern-card interactive not-prose rounded-3 relative block border p-6 text-base" href="/docs/component-library/writing-content/visual-editor">
-    <div class="flex items-start flex-col space-y-3">
-      <img class="mx-auto dark:hidden" alt="Visual Editor" src="./images/visual-editor.png" />
-      <img class="mx-auto hidden dark:block" alt="Visual Editor" src="./images/visual-editor-dark.png" />
-      <div class="w-full space-y-1 overflow-hidden">
-        <div class="text-(color:--grayscale-a12) text-body text-base font-semibold">Visual Editor</div>
-        <div class="text-(color:--grayscale-a11) font-light">
-          <p>Modify your documentation without touching code and publish to your GitHub.</p>
+    </a>
+
+    <a class="fern-card interactive not-prose rounded-3 relative block border p-6 text-base" href="/docs/component-library/writing-content/visual-editor">
+      <div class="flex items-start flex-col space-y-3">
+        <img class="mx-auto dark:hidden" alt="Visual Editor" src="./images/visual-editor.png" />
+        <img class="mx-auto hidden dark:block" alt="Visual Editor" src="./images/visual-editor-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">
+            Visual Editor
+            <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>Modify your documentation without touching code and publish to your GitHub.</p>
+          </div>
         </div>
       </div>
-    </div>
-  </a>
-</CardGroup> 
+    </a>
+  </CardGroup> 
+  </div>

fern/products/home/pages/welcome.mdx

@@ -8,21 +8,13 @@ layout: custom
 
 import { FernFooter } from "../../../components/FernFooter";
 
-<style>
-  {`
-    #builtwithfern {
-      display: none !important;
-    }
-  `}
-</style>
-
 <div className="absolute inset-0 z-[-1] box-border block">
   <div 
     style={{
       inset: 0,
       position: "fixed",
       backgroundImage: "linear-gradient(to bottom right, var(--green-1), var(--grayscale-0), var(--grayscale-1))"
-    }} 
+  }} 
     className="box-border block"
   />
   <div className="bg-gradient-green-left box-border block" />
@@ -143,8 +135,8 @@ import { FernFooter } from "../../../components/FernFooter";
         <div className="card-header">
           <a className="card-title" href="/docs/getting-started/overview">
             Docs
-            <img src="./images/arrow-right-black.svg" alt="Arrow right light" className="dark:hidden" noZoom />
-            <img src="./images/arrow-right-white.svg" alt="Arrow right light" className="hidden dark:block" noZoom />
+            <img src="./images/arrow-right-black.svg" alt="Arrow right light" className="dark:hidden m-0" noZoom />
+            <img src="./images/arrow-right-white.svg" alt="Arrow right light" className="hidden dark:block m-0" noZoom />
           </a>
           <p className="card-description">
             A beautiful, interactive documentation website.
@@ -203,8 +195,8 @@ import { FernFooter } from "../../../components/FernFooter";
         <div className="card-header">
           <a className="card-title" href="/ask-fern/getting-started/what-is-ask-fern">
             AI Search
-            <img src="./images/arrow-right-black.svg" alt="Arrow right light" className="dark:hidden" noZoom />
-            <img src="./images/arrow-right-white.svg" alt="Arrow right light" className="hidden dark:block" noZoom />
+            <img src="./images/arrow-right-black.svg" alt="Arrow right light" className="dark:hidden m-0" noZoom />
+            <img src="./images/arrow-right-white.svg" alt="Arrow right light" className="hidden dark:block m-0" noZoom />
           </a>
           <p className="card-description">
             Let users find answers in your documentation instantly
@@ -246,7 +238,7 @@ import { FernFooter } from "../../../components/FernFooter";
           </p>
           <a className="fern-button outlined normal gap-1 a-btn" href="/docs/changelog">
             Docs
-            <img src="./images/arrow-right-dark.svg" alt="Arrow right dark" className="dark:hidden" noZoom />
+            <img src="./images/arrow-right-black.svg" alt="Arrow right dark" className="dark:hidden" noZoom />
             <img src="./images/arrow-right-white.svg" alt="Arrow right dark" className="hidden dark:block" noZoom />
           </a>
         </div>
@@ -261,7 +253,7 @@ import { FernFooter } from "../../../components/FernFooter";
           </p>
           <a className="fern-button outlined normal gap-1 a-btn" href="https://github.com/fern-api/fern">
             View
-            <img src="./images/arrow-right-dark.svg" alt="Arrow right dark" className="dark:hidden" noZoom />
+            <img src="./images/arrow-right-black.svg" alt="Arrow right dark" className="dark:hidden" noZoom />
             <img src="./images/arrow-right-white.svg" alt="Arrow right dark" className="hidden dark:block" noZoom />
           </a>
         </div>
@@ -276,7 +268,7 @@ import { FernFooter } from "../../../components/FernFooter";
           </p>
           <a className="fern-button outlined normal gap-1 a-btn" href="https://buildwithfern.com/slack">
             View
-            <img src="./images/arrow-right-dark.svg" alt="Twitter Preview" className="dark:hidden" noZoom />
+            <img src="./images/arrow-right-black.svg" alt="Twitter Preview" className="dark:hidden" noZoom />
             <img src="./images/arrow-right-white.svg" alt="Twitter Preview" className="hidden dark:block" noZoom />
           </a>
         </div>
@@ -293,7 +285,7 @@ import { FernFooter } from "../../../components/FernFooter";
           </p>
           <a className="fern-button outlined normal gap-1 a-btn" href="https://x.com/buildwithfern">
             View
-            <img src="./images/arrow-right-dark.svg" alt="Twitter Preview" className="dark:hidden" noZoom />
+            <img src="./images/arrow-right-black.svg" alt="Twitter Preview" className="dark:hidden" noZoom />
             <img src="./images/arrow-right-white.svg" alt="Twitter Preview" className="hidden dark:block" noZoom />
           </a>
         </div>