Update getting started screenshots

docs/getting-started/2-console/2-register.md

@@ -3,11 +3,34 @@ id: register
 title: Registration & Wizard
 ---
 
-To begin using Golioth please register for an account at [console.golioth.io](https://console.golioth.io/).
-
-Once registered, you can review our terms of service and continue to the wizard that guides you through provisioning your first device.
-
-![Golioth Console hardware provisioning wizard](../assets/gettingstarted-console-wizard.png)
+To begin using Golioth please register for an account at
+[console.golioth.io](https://console.golioth.io/).
+
+import Image from '@theme/IdealImage';
+import FlexImage from '@site/src/components/FlexImage';
+import GoliothConsoleOnboarding from '../assets/console-onboarding.jpg';
+import GoliothConsoleEmpty from '../assets/console-click-quickstart.jpg';
+import GoliothConsoleQuickstart from '../assets/console-quickstart-lets-go.jpg';
+import GoliothWizard1 from '../assets/console-quickstart-step1.jpg';
+import GoliothWizard2 from '../assets/console-quickstart-step2.jpg';
+import GoliothWizard3 from '../assets/console-quickstart-step3.jpg';
+
+<FlexImage column_count="3">
+  <Image img={GoliothConsoleOnboarding} alt="Golioth console without a project"/>
+  <Image img={GoliothConsoleEmpty} alt="Golioth console without a project"/>
+  <Image img={GoliothConsoleQuickstart} alt="Golioth console quickstart launch screen"/>
+</FlexImage>
+
+Once registered, you will be asked some onboarding questions and to review our
+terms of service. The console will be quite empty, so select `Quick Start` from
+top of the screen and click `Let's Go!` to use the quickstart wizard. The wizard
+includes three steps:
+
+<FlexImage column_count="3">
+  <Image img={GoliothWizard1} alt="Golioth console wizard create a project"/>
+  <Image img={GoliothWizard2} alt="Golioth console wizard register a device"/>
+  <Image img={GoliothWizard3} alt="Golioth console wizard setup your device"/>
+</FlexImage>
 
 ### Step 1: Project name
 

src/components/FlexImage.js

@@ -0,0 +1,16 @@
+import React from 'react';
+
+export default function FlexImage({children, column_count = "2"}) {
+  const itemClass = (column_count == "3") ? "flex-threecol-item" : "flex-twocol-item";
+
+  return (
+    <div class="image-flex-container">
+    {React.Children.map(children, child =>
+      <div class={itemClass}>
+        {child}
+      </div>
+      )
+    }
+    </div>
+  )
+}

src/css/custom.css

@@ -111,3 +111,29 @@ html[data-theme="dark"] {
   --ifm-footer-title-color: #0d0f19;
   --ifm-footer-link-color: #0d0f19;
 }
+
+.image-flex-container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  text-align: center;
+  justify-content: space-between;
+  gap: 0.3em;
+}
+
+.flex-twocol-item {
+  flex: 1;
+  flex-basis: 48%;
+}
+
+.flex-threecol-item {
+  flex: 1;
+  flex-basis: 30%;
+}
+
+/* Responsive layout - makes a one column-layout instead of two-column layout */
+@media (max-width: 996px) {
+  .image-flex-container {
+    flex-direction: column;
+  }
+}