add link to screenshots docsite

docsite/src/pages/index.module.css

@@ -17,8 +17,8 @@
 }
 
 .buttons {
-  display: flex;
+  display: grid;
-  align-items: center;
-  justify-content: center;
   gap: 1rem;
+  grid-template-columns: 1fr 1fr;
+  width: fit-content;
 }

docsite/src/pages/index.tsx

@@ -17,22 +17,44 @@ function HomepageHeader() {
         <div style={{ display: "flex", gap: "1rem", justifyContent: "center" }}>
           <div style={{ position: "relative" }}>
             <MonitorLogo width="600px" />
-            <h1 className="hero__title" style={{ margin: 0, position: "absolute", top: "40%", left: "50%", transform: "translate(-50%, -50%)" }}>
+            <h1
+              className="hero__title"
+              style={{
+                margin: 0,
+                position: "absolute",
+                top: "40%",
+                left: "50%",
+                transform: "translate(-50%, -50%)",
+              }}
+            >
               monitor
             </h1>
           </div>
         </div>
         <p className="hero__subtitle">{siteConfig.tagline}</p>
-        <div className={styles.buttons}>
+        <div style={{ display: "flex", justifyContent: "center" }}>
-          <Link className="button button--secondary button--lg" to="/intro">
+          <div className={styles.buttons}>
-            docs
+            <Link className="button button--secondary button--lg" to="/intro">
-          </Link>
+              docs
-          <Link
+            </Link>
-            className="button button--secondary button--lg"
+            <Link
-            to="https://github.com/mbecker20/monitor"
+              className="button button--secondary button--lg"
-          >
+              to="https://github.com/mbecker20/monitor"
-            github
+            >
-          </Link>
+              github
+            </Link>
+            <Link
+              className="button button--secondary button--lg"
+              to="https://github.com/mbecker20/monitor#readme"
+              style={{
+                width: "100%",
+                boxSizing: "border-box",
+                gridColumn: "span 2",
+              }}
+            >
+              screenshots
+            </Link>
+          </div>
         </div>
       </div>
     </header>