Populate welcome and farewell pages

Author: Hans5958

assets/images/getting-started/step-1.png

@@ -1,18 +1,20 @@
 ---
 layout: default
 title: Farewell!
-description: 
+description: Scratch Addons has been uninstalled. We thank you for using the extension!
 ---
 
-<!-- Uncomment below for custom styles. (markdown style is for placeholder) -->
-<!-- <link rel="stylesheet" href="/assets/css/farewell.css" /> -->
-<link rel="stylesheet" href="/assets/css/markdown.css" />
-
-<h1>Farewell!</h1>
+<section id="intro" class="intro-heading">
+	<h1 class="mb-3">Farewell!</h1>
+	<p class="mb-1">Scratch Addons has been uninstalled. We thank you for using the extension!</p>
+</section>
 
 <section class="container">
-    <p>Scratch Addons has been uninstalled. We thank you for using the extension!</p>
-    <p>Tell us what you think about the extension <a href="/feedback">here</a>.</p>
+    <p>Here are some things that you can do.</p>
+    <ul>
+        <li>Tell us what you think about the extension <a href="/feedback">here</a></li>
+        <li>Reinstall the extension by clicking the install button above</li>
+    </ul>
 </section>
 
 

assets/images/getting-started/step-2.png

@@ -1,20 +1,52 @@
 ---
 layout: default
 title: Welcome!
-description: 
+description: If you are reading this, then Scratch Addons has been installed successfully! Thank you for installing, and enjoy using the extension!
 ---
 
-<!-- Uncomment below for custom styles. (markdown style is for placeholder) -->
-<!-- <link rel="stylesheet" href="/assets/css/welcome.css" /> -->
-<link rel="stylesheet" href="/assets/css/markdown.css" />
-
-<h1>Welcome!</h1>
+<section id="intro" class="intro-heading">
+	<h1 class="mb-3">Welcome!</h1>
+	<p class="mb-1">If you are reading this, then Scratch Addons has been installed successfully!</p>
+	<p class="mb-1">Thank you for installing, and enjoy using the extension!</p>
+</section>
 
-<section id="intro" class="container">
-    <p>Scratch Addons has been installed! Enjoy using the extension.</p>
+<section id="getting-started" class="container mb-4">
+	<h2>Getting started</h2>
+	<div class="card-group">
+		<div class="card">
+			<div class="card-header">
+				Step 1
+			</div>
+			<img class="card-img-top" src="/assets/images/getting-started/step-1.png" alt="Click the Scratch Addons extension icon">
+			<div class="card-body">
+				<h5 class="card-title">Click the Scratch Addons extension icon</h5>
+				<p class="card-text">It is on the top-right corner of your browser. Google Chrome users need to click the puzzle icon to find the icon.</p>
+			</div>
+		</div>
+		<div class="card">
+			<div class="card-header">
+				Step 2
+			</div>
+			<img class="card-img-top" src="/assets/images/getting-started/step-2.png" alt="Press the cog icon to go to the Settings page">
+			<div class="card-body">
+				<h5 class="card-title">Press the cog icon to go to the Settings page</h5>
+				<p class="card-text">This will open the Settings page where you can configure how the extension works.</p>
+			</div>
+		</div>
+		<div class="card">
+			<div class="card-header">
+				Step 3
+			</div>
+			<img class="card-img-top" src="/assets/images/getting-started/step-3.png" alt="Scroll through the addons list and enable the ones that you want">
+			<div class="card-body">
+				<h5 class="card-title">Scroll through the addons list and enable the ones that you want</h5>
+				<p class="card-text">You can also configure each of the addons on the bottom section of each addons.</p>
+			</div>
+		</div>
+	</div>
 </section>
 
 <section id="transition" class="container">
-    <h2 class="h5 font-weight-bold">Coming from Scratch Messaging Extension?</h2>
-    <p>Scratch Messaging Extension (by griffpatch) has been updated and is now called Scratch Addons. <a href="/scratch-messaging-transition">Read more</a>.</p>
+	<h2 class="h4">Coming from Scratch Messaging Extension?</h2>
+	<p>Scratch Messaging Extension (by griffpatch) has been updated and is now called Scratch Addons. <a href="/scratch-messaging-transition">Read more</a>.</p>
 </section>