feat: updated sdk cards

Author: Kapil Gowru

fern/assets/styles.css

@@ -371,7 +371,47 @@ 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;

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

@@ -123,8 +123,8 @@ subtitle: A website builder for beautiful agent and developer-friendly docs.
 
     <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/self-host-dark.png" />
+        <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
@@ -138,18 +138,18 @@ 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="/ask-fern/getting-started/what-is-ask-fern">
+    <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="Visual Editor" src="./images/mcp-server-light.png" />
-        <img class="mx-auto hidden dark:block" alt="Visual Editor" src="./images/mcp-server-dark.png" />
+        <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 agentic workflows.</p>
+            <p>Add Fern's MCP server for your AI agentic workflows.</p>
           </div>
         </div>
       </div>