Update docs index and nav (#2189)

docs/docs/installation/browser-extensions/chrome/_category_.json

@@ -1,4 +1,4 @@
 {
   "label": "Google Chrome",
-  "position": 2
+  "position": 1
 }

docs/docs/installation/browser-extensions/firefox/_category_.json

@@ -1,4 +1,4 @@
 {
   "label": "Firefox",
-  "position": 1
+  "position": 2
 }

docs/src/pages/index.module.css

@@ -128,11 +128,6 @@ a.featureCard:hover {
   color: var(--ifm-color-content-secondary);
 }
 
-.cta {
-  padding: 4rem 0 5rem;
-  text-align: center;
-}
-
 @media (max-width: 996px) {
   .heroTitle {
     font-size: 2.2rem;
@@ -140,4 +135,8 @@ a.featureCard:hover {
   .heroSubtitle {
     font-size: 1.1rem;
   }
+  /* Cards stack on mobile; add a vertical gap between them. */
+  .twoUpRow > div:not(:last-child) {
+    margin-bottom: 1.5rem;
+  }
 }

docs/src/pages/index.tsx

@@ -174,7 +174,7 @@ function GettingStartedAndContribute() {
   return (
     <section className={styles.section}>
       <div className="container">
-        <div className="row">
+        <div className={clsx('row', styles.twoUpRow)}>
           <div className="col col--6">
             <div className={styles.contentCard}>
               <Heading as="h3">🚀 Getting Started</Heading>
@@ -224,20 +224,6 @@ export default function Home(): ReactNode {
         <HomepageFeatures />
         <ExploreDocs />
         <GettingStartedAndContribute />
-        <section className={clsx(styles.cta, styles.sectionAlt)}>
-          <div className="container">
-            <Heading as="h2">Ready to get started?</Heading>
-            <p>
-              Spin up your own AliasVault instance with Docker in minutes, then
-              connect the browser extension and mobile apps.
-            </p>
-            <div className={styles.buttons}>
-              <Link className="button button--primary button--lg" to="/installation/">
-                Read the install guide
-              </Link>
-            </div>
-          </div>
-        </section>
       </main>
     </Layout>
   );