Merge pull request #268 from jfirwin/front-page

Add call to action buttons on front page

docs/getting-started/getting_started.md

@@ -14,22 +14,25 @@ The radios automatically create a mesh to forward packets as needed, so everyone
 
 Meshtastic uses LoRa for the long range communications and depending on settings used, the maximum theoretical group size ranges from 30-200 device nodes. Currently, each device can only support a connection from a single user at a time.
 
-<Link
+<div className="indexCtasBody">
+  <Link
     className={'button button--outline  button--lg cta--button'}
     to={'/docs/about'}>
     Learn More
-</Link>
+  </Link>
+</div>
 
 ## Purchase a Radio
 
 The easiest way is to [buy a device with the software already installed](https://www.aliexpress.com/item/4001178678568.html). Other devices are [available](/docs/hardware/supported/tbeam). In the Americas get the 915MHz version, in Europe the 868MHz, or Asia 923MHz. See this listing by [The Things Network](https://www.thethingsnetwork.org/docs/lorawan/frequencies-by-country.html) for frequencies by specific countries.
 
-<Link
+<div className="indexCtasBody">
+  <Link
     className={'button button--outline  button--lg cta--button'}
     to={'/docs/hardware'}>
     Purchase Hardware
-</Link>
+  </Link>
-
+</div>
 
 ## Setup the Radio
 
@@ -53,11 +56,13 @@ If your device already has Meshtastic flashed to it, you can update it over the
 
 The manual firmware installation method will also depend on whether you have an ESP32 based device or a nRF52 based device. See our [hardware section](/docs/hardware) to determine which microcontroller your device is based on.
 
-<Link
+<div className="indexCtasBody">
+  <Link
     className={'button button--outline  button--lg cta--button'}
     to={'/docs/getting-started/flashing-firmware'}>
     Flash Firmware
-</Link>
+  </Link>
+</div>
 
 ## Connect to your Device
 
@@ -69,6 +74,15 @@ There are many ways to connect to your new radio!
 - Bluetooth
 - Web app over Wifi (in development)
 
+<div className="indexCtasBody">
+  <Link
+    className={'button button--outline  button--lg cta--button'}
+    to={'/docs/getting-started/clients'}>
+    Connect to Node
+  </Link>
+</div>
+
+
 ### A good first test (connect via USB and CLI)
 
 If you have at least two radios with the Meshtastic firmware, you may consider connecting one via USB and the other battery powered. Communicate with the USB radio using a CLI like [Meshtastic-python](https://meshtastic.org/docs/software/python/python-installation).

src/css/custom.css

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

src/pages/index.tsx

@@ -4,6 +4,8 @@ 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';
+import { HeaderText } from './downloads/_components/HeaderText';
 
 const features = [
   {
@@ -120,6 +122,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>
@@ -136,6 +146,115 @@ function Home() {
             </div>
           </section>
         )}
+        <div className="container">
+          <HeaderText
+            type="h1"
+            text="Getting Started"
+            link="getting-started"
+          />
+          <p>
+            Getting started with Meshtastic is as easy as 1, 2, 3!
+          </p>
+          <ul
+            style={{
+              position: "relative",
+              display: "grid",
+              gap: "1.5rem",
+              gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))",
+              paddingLeft: "0",
+            }}
+          >
+            <div className="card">
+              <div
+                className="card__header"
+                style={{ display: "flex", justifyContent: "space-between" }}
+              >
+                <h3>
+                  1. Purchase Supported Hardware
+                </h3>
+              </div>
+              <div
+                className="card__body"
+                style={{ display: "flex", justifyContent: "center"}}
+              >
+                <p>
+                  Hardware you will want to consider:
+                  <ul>
+                    <li>
+                      Radio
+                    </li>
+                    <li>
+                      Battery
+                    </li>
+                    <li>
+                      Case
+                    </li>
+                    <li>
+                      Antenna (most devices include an antenna, but the quality can be a bit of a mixed bag from some suppliers on stock antennas)
+                    </li>
+                  </ul>
+                </p>
+              </div>
+            </div>
+            <div className="card">
+              <div
+                className="card__header"
+                style={{ display: "flex", justifyContent: "space-between" }}
+              >
+                <h3>
+                  2. Flash & Configure Node
+                </h3>
+              </div>
+              <div
+                className="card__body"
+                style={{ display: "flex", justifyContent: "center"}}
+              >
+                <p>
+                  The Meshtastic Flasher application can assist you in flashing the firmware and configuring settings.
+                </p>
+              </div>
+            </div>
+            <div className="card">
+              <div
+                className="card__header"
+                style={{ display: "flex", justifyContent: "space-between" }}
+              >
+                <h3>
+                  3. Connect to Node
+                </h3>
+              </div>
+              <div
+                className="card__body"
+                style={{ display: "flex", justifyContent: "center"}}
+              >
+              <p>
+                Applications are available for the following systems:
+                <ul>
+                  <li>
+                    Android
+                  </li>
+                  <li>
+                    iOS
+                  </li>
+                  <li>
+                    Mac
+                  </li>
+                  <li>
+                    Web Browser
+                  </li>
+                </ul>
+              </p>
+              </div>
+            </div>
+          </ul>
+          <div className="indexCtasBody">
+            <Link
+            className="button button--outline button--lg cta--button" to="/docs/getting-started"
+            >
+            Getting Started
+            </Link>
+          </div>
+        </div>
       </main>
     </Layout>
   );