feat(architecture): add diagram

src/assets/grlx-arch-dark.webp

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:7c0be79de7cde17b03b1e46ef75edb2baebebd32b0605bad3fcb3a2babe924e6
+size 68258

src/assets/grlx-arch-light.webp

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:852c13313142bfb83fefad5bbabd64f5e9f9eba95ef7bf180553dbe140ba2f24
+size 66244

src/components/ArchitectureImage.astro

@@ -0,0 +1,16 @@
+---
+import { Image } from 'astro:assets'
+import darkArch from "../assets/grlx-arch-dark.webp"
+import lightArch from '../assets/grlx-arch-light.webp'
+---
+
+<Image
+  class="dark:hidden"
+  src={lightArch}
+  alt="ADAtomic logo"
+/>
+<Image
+  class="hidden dark:inline"
+  src={darkArch}
+  alt="ADAtomic logo dark arch"
+/>

src/content/docs/architecture/overview.mdx

@@ -2,8 +2,12 @@
 title: Overview
 description: A brief description of the grlx architecture
 ---
+
+import ArchitectureImage from '../../../components/ArchitectureImage.astro'
+
 At a high level our architecture looks like the following:
 
+<ArchitectureImage />
 We can boil down the `grlx` into three different parts: the farmer, the sprout, and the CLI.
 
 ## Farmer

src/custom.css

@@ -3,3 +3,7 @@
   --sl-card-border: #454FBF !important;
 }
 
+[data-theme="light"] .hidden{
+  display: none;
+}
+