added buttons below hero text

src/css/custom.css

@@ -55,3 +55,24 @@ html[data-theme="dark"] .header-github-link:before {
   --ifm-button-border-color: var(--ifm-link-color);
   color: var(--ifm-link-color);
 }
+
+.indexCtas {
+  --ifm-button-size-multiplier: 1.6;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  margin-top: 24px;
+}
+
+.indexCtas a {
+  color: var(--ifm-font-color-base-inverse);
+}
+
+.indexCtas a:hover {
+  color: rgb(77, 77, 77)
+}
+
+.indexCtas a:last-of-type {
+  margin: 20px 36px;
+}

src/pages/index.tsx

@@ -4,6 +4,7 @@ import Head from '@docusaurus/Head';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Layout from '@theme/Layout';
+import Link from '@docusaurus/Link';
 
 const features = [
   {
@@ -120,6 +121,14 @@ function Home() {
             />
           </h1>
           <p className="hero__subtitle">{siteConfig.tagline}</p>
+          <div className="indexCtas">
+            <Link className="button button--lg" to="/docs/about">
+            Learn More
+            </Link>
+            <Link className="button button--lg" to="/docs/getting-started">
+            Get Started
+            </Link>
+          </div>
         </div>
       </header>
       <main>