feat: working on docs home

Author: Kapil Gowru

fern/products/docs/pages/guides/getting-started/images/component-library-dark.png

@@ -14,7 +14,8 @@ description: Meet documentation that is stunning by default, AI-ready, and desig
 <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" alt="Quickstart" src="./images/quickstart.png" />
+      <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">
@@ -26,7 +27,8 @@ description: Meet documentation that is stunning by default, AI-ready, and desig
 
   <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" />
+      <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">
@@ -38,7 +40,8 @@ description: Meet documentation that is stunning by default, AI-ready, and desig
 
   <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" />
+      <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">
@@ -50,7 +53,8 @@ description: Meet documentation that is stunning by default, AI-ready, and desig
 
   <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" />
+      <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">