From 55e21cb826337426fd3a96221dd3cad1bf23c61b Mon Sep 17 00:00:00 2001
From: FireIsGood <fireisadequate@gmail.com>
Date: Sat, 8 Jun 2024 01:13:14 -0700
Subject: [PATCH] docs: improve home page

---
 website/src/css/custom.css          |  2 +-
 website/src/pages/index.js          | 13 +++++++++++--
 website/src/pages/styles.module.css |  5 ++++-
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index e92fea1b..3f00a262 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -34,7 +34,7 @@
 }
 
 .hero--image {
-  margin-top: 10px;
+  margin-top: 4rem;
 }
 
 .header-github-link:hover {
diff --git a/website/src/pages/index.js b/website/src/pages/index.js
index 5cfcf9f2..d6c12fcb 100644
--- a/website/src/pages/index.js
+++ b/website/src/pages/index.js
@@ -63,12 +63,21 @@ function Home() {
           <div className={styles.buttons}>
             <Link
               className={classnames(
-                "button button--outline button--lg",
+                "button button--primary button--lg",
                 styles.getStarted
               )}
               to={useBaseUrl("docs/")}
             >
-              Get Started
+              Get Started &rarr;
+            </Link>
+            <Link
+              className={classnames(
+                "button button--outline button--lg",
+                styles.getStarted
+              )}
+              to={useBaseUrl("docs/themes")}
+            >
+              See themes &rarr;
             </Link>
           </div>
           <img class="hero--image" src="/img/hero.png" alt="Oh My Posh prompt"></img>
diff --git a/website/src/pages/styles.module.css b/website/src/pages/styles.module.css
index 7a358e32..e9275d5a 100644
--- a/website/src/pages/styles.module.css
+++ b/website/src/pages/styles.module.css
@@ -7,6 +7,7 @@
 
 .heroBanner {
   padding: 4rem 0;
+  min-height: 60vh;
   text-align: center;
   position: relative;
   overflow: hidden;
@@ -14,12 +15,14 @@
 
 @media screen and (max-width: 966px) {
   .heroBanner {
-    padding: 2rem;
+    padding: 2rem 0;
   }
 }
 
 .buttons {
   display: flex;
+  flex-wrap: wrap;
+  gap: 1rem 1.5rem;
   align-items: center;
   justify-content: center;
 }