docs: improve home page

website/src/css/custom.css

@@ -34,7 +34,7 @@
 }
 
 .hero--image {
-  margin-top: 10px;
+  margin-top: 4rem;
 }
 
 .header-github-link:hover {

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>

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;
 }