fix: fixed help seciton on home

Author: Kapil Gowru

fern/assets/styles.css

@@ -350,6 +350,24 @@
     font-size: 1.25rem;
     font-weight: bold;
     color: var(--grayscale-12);
+    display: flex;
+    gap: 0.25rem;
+    align-items: center;
+    text-decoration: none;
+
+    img {
+      height: 1rem;
+      opacity: 0;
+      transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out;
+      transform: translateX(0px);
+    }
+
+    &:hover {
+      img {
+        opacity: 1;
+        transform: translateX(2px);
+      }
+    }
   }
 
   .card-description {

fern/products/home/pages/welcome.mdx

@@ -60,7 +60,11 @@ import { FernFooter } from "../../../components/FernFooter";
       {/* SDKs Card */}
       <div className="sdks-card">
         <div className="card-header">
-          <h2 className="card-title">SDKs</h2>
+          <a className="card-title" href="/sdks/overview/introduction">
+            SDKs
+            <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">
             Generate client libraries in multiple languages.
           </p>
@@ -137,7 +141,11 @@ import { FernFooter } from "../../../components/FernFooter";
       {/* Docs Card */}
       <div className="docs-card">
         <div className="card-header">
-          <h2 className="card-title">Docs</h2>
+          <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 />
+          </a>
           <p className="card-description">
             A beautiful, interactive documentation website.
           </p>
@@ -193,7 +201,11 @@ import { FernFooter } from "../../../components/FernFooter";
       {/* AI Search Card */}
       <div className="ai-search-card">
         <div className="card-header">
-          <h2 className="card-title">AI Search</h2>
+          <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 />
+          </a>
           <p className="card-description">
             Let users find answers in your documentation instantly
           </p>