refactor(v2): minor styling improvements (#4167)

* refactor(v2): minor styling improvements

* Fixes

website/src/pages/index.js

@@ -106,11 +106,11 @@ function Home() {
               />
             </h1>
             <div className={styles.indexCtas}>
-              <Link className={styles.indexCtasGetStartedButton} to="/docs">
+              <Link className="button button--primary" to="/docs">
                 <Translate>Get Started</Translate>
               </Link>
               <Link
-                className={styles.indexCtaTryNowButton}
+                className="button button--info"
                 to="https://new.docusaurus.io">
                 <Translate>Playground</Translate>
               </Link>

website/src/pages/styles.module.css

@@ -67,7 +67,6 @@
   color: var(--ifm-color-primary);
 }
 
-
 @keyframes jackInTheBox {
   from {
     opacity: 0;
@@ -98,22 +97,15 @@
 }
 
 .indexCtas {
+  --ifm-button-size-multiplier: 1.6;
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   margin-top: 24px;
 }
 
-.indexCtasGetStartedButton {
-  border: 2px solid var(--ifm-color-primary);
-  line-height: 1.2em;
-  text-decoration: none !important;
-  text-transform: uppercase;
-  transition: background 0.3s, color 0.3s;
-  border-radius: 8px;
-  color: #fff;
-  font-size: 24px;
-  font-weight: bold;
-  padding: 18px 36px;
+.indexCtas a:last-of-type {
+  margin: 20px 36px;
 }
 
 .indexCtasGitHubButtonWrapper {
@@ -125,16 +117,6 @@
   overflow: hidden;
 }
 
-.indexCtaTryNowButton {
-  line-height: 1.2em;
-  text-decoration: underline;
-  text-transform: uppercase;
-  transition: background 0.3s, color 0.3s;
-  color: #fff;
-  font-size: 14px;
-  font-weight: bold;
-  margin: 0 36px;
-}
 .indexCtaTryNowButton:hover {
   color: var(--ifm-color-primary);
 }
@@ -164,6 +146,10 @@
     justify-content: center;
   }
 
+  .indexCtas a {
+    margin: 20px 36px;
+  }
+
   .indexCtasGitHubButton {
     display: none;
   }