feat: working on docs home

Author: Kapil Gowru

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

@@ -12,11 +12,6 @@ description: Meet documentation that is stunning by default, AI-ready, and desig
 </style>
 
 <CardGroup cols={2}>
-  <Card title="Quickstart" href="/docs/guides/getting-started/quickstart">
-    <Image src="./images/quickstart.png" alt="Quickstart" />
-    Start building beautiful documentation in under 5 minutes.
-  </Card>
-
   <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" alt="Quickstart" src="./images/quickstart.png" />
@@ -29,18 +24,39 @@ description: Meet documentation that is stunning by default, AI-ready, and desig
     </div>
   </a>
 
-  <Card title="Configure with ease">
-    <Image src="./images/configure.png" alt="Configure with ease" />
-    One simple file that can be used to generate documentation that fits your brand.
-  </Card>
+  <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" alt="Configure with ease" src="./images/configure.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>
+        </div>
+      </div>
+    </div>
+  </a>
 
-  <Card title="Flexible component library">
-    <Image src="./images/component-library.png" alt="Flexible component library" />
-    Use pre-built or custom React components for a polished look.
-  </Card>
+  <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" alt="Flexible component library" src="./images/component-library.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>
+        </div>
+      </div>
+    </div>
+  </a>
 
-  <Card title="Visual Editor">
-    <Image src="./images/visual-editor.png" alt="Visual Editor" />
-    Modify your documentation without touching code and publish to your GitHub.
-  </Card>
+  <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" alt="Visual Editor" src="./images/visual-editor.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>
+        </div>
+      </div>
+    </div>
+  </a>
 </CardGroup>