fix: adding changelog button

Author: Kapil Gowru

fern/products/sdks/images/csharp-card.png

@@ -3,8 +3,51 @@ title: SDKs Overview
 description: Generate idiomatic SDKs in multiple programming languages
 ---
 
+<style>
+  {`
+    .changelog-button {
+      display: flex;
+      padding: 0.25rem 0.5rem;
+      align-items: center;
+      gap: 0.25rem;
+      justify-content: center;
+      border-radius: 0.5rem;
+      transition: background-color 0.15s ease-in-out;
+      position: relative;
+
+      img {
+        flex-shrink: 0;
+        width: 24px;
+        height: 24px;
+        position: relative;
+      }
+
+      div {
+        margin-left: 12px;
+        font-size: 16px;
+        white-space: nowrap;
+        max-width: 0;
+        opacity: 0;
+        overflow: hidden;
+        transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+      }
+
+      &:hover {
+        background-color: var(--grayscale-a3);
+        width: auto;
+
+        div {
+          max-width: 320px;
+          opacity: 1;
+          width: fit-content;
+        }
+      }
+    }
+  `}
+</style>
+
 <div className="sdks-homepage">
-  {/* Dashed Pattern - Left Side */}
+{/* Dashed Pattern - Left Side */}
   <div className="dashed-pattern-left">
     {/* <div className="dashed-gradient"></div> */}
   </div>
@@ -18,16 +61,22 @@ description: Generate idiomatic SDKs in multiple programming languages
       <div class="flex items-start flex-col space-y-3">
         <img class="mx-auto dark:hidden" alt="TypeScript" src="./images/typescript-card.png" />
         <img class="mx-auto hidden dark:block" alt="TypeScript" src="./images/typescript-card-dark.png" />
+        
         <div class="w-full overflow-hidden flex justify-between items-center">
           <div class="text-(color:--grayscale-a12) text-body text-base font-semibold card-title">
             TypeScript
             <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-a12) text-body text-base font-light">
-            Changelog
+            v<Markdown src="/snippets/version-number-ts.mdx"/>
+          </div>
+           <div class="changelog-button text-(color:--grayscale-a12) text-body text-base font-light">
+            <img src="./images/changelog-icon.svg" alt="Changelog" className="m-0" noZoom />
+            <div class="text-(color:--grayscale-a12) text-body text-base font-light">
+              Changelog
+            </div>
           </div>
-          <Markdown src="/snippets/version-number-ts.mdx"/>
         </div>
       </div>
     </a>