Add How To page.

src/assets/scss/_howto.scss

@@ -0,0 +1,29 @@
+.howto {
+    padding-bottom: 100px;
+
+    .howto_image {
+        width: 100%;
+    }
+
+    .row {
+        margin-top: 24px;
+        margin-bottom: 104px;
+
+        @include media-breakpoint-down(md) {
+            margin-bottom: 54px;
+        }
+    }
+
+    .howto_title {
+        font-size: 18px;
+        color: $light-gray-text;
+        padding: 12px;
+        font-weight: bold;
+    }
+
+    .howto_text {
+        color: $darker-gray;
+        padding: 12px;
+        padding-bottom: 24px;
+    }
+}

src/assets/scss/br.scss

@@ -45,4 +45,5 @@ $container-max-widths: (
 @import "_landing";
 @import "_features";
 @import "_download";
+@import "_howto";
 @import "_fonts";

src/layouts/how_to/list.html

@@ -1,15 +1,140 @@
 {{ define "page-title" }}
-    {{ T "bison_relay" }} — {{ T "nav_how_to" }}
+{{ T "bison_relay" }} — {{ T "nav_how_to" }}
 {{ end }}
 
 {{ define "main" }}
 
+{{ $img1 := resources.Get "images/screenshots/1-createpass.png" }}
+{{ $img2 := resources.Get "images/screenshots/2-copyseed.png" }}
+{{ $img3 := resources.Get "images/screenshots/3-networksync.png" }}
+{{ $img4 := resources.Get "images/screenshots/4-connectserver.png" }}
+{{ $img5 := resources.Get "images/screenshots/5-fundsneeded.png" }}
+{{ $img6 := resources.Get "images/screenshots/6-choosenick.png" }}
+{{ $img7 := resources.Get "images/screenshots/7-needout.png" }}
+{{ $img8 := resources.Get "images/screenshots/8-needin.png" }}
+
 <div class="subpage-padding body-img-gradient g-0">
     <div class="container">
-        
+
         <div class="subpage-header">
             <div class="subpage-title">{{ T "page_title_how_to" }}</div>
         </div>
+
+        <div class="howto">
+
+            <div class="row">
+                <div class="col-xl-5">
+                    <div class="howto_title">
+                        1. {{ T "how_to_title_1"}}
+                    </div>
+                    <div class="howto_text">
+                        {{ T "how_to_text_1"}}
+                    </div>
+                </div>
+                <div class="col-xl-7">
+                    <img class="howto_image" src="{{ $img1.RelPermalink }}" alt="createpass">
+                </div>
+            </div>
+
+            <div class="row">
+                <div class="col-xl-5 order-xl-last">
+                    <div class="howto_title">
+                        2. {{ T "how_to_title_2"}}
+                    </div>
+                    <div class="howto_text">
+                        {{ T "how_to_text_2"}}
+                    </div>
+                </div>
+                <div class="col-xl-7 order-xl-first">
+                    <img class="howto_image" src="{{ $img2.RelPermalink }}" alt="copyseed">
+                </div>
+            </div>
+
+            <div class="row">
+                <div class="col-xl-5">
+                    <div class="howto_title">
+                        3. {{ T "how_to_title_3"}}
+                    </div>
+                    <div class="howto_text">
+                        {{ T "how_to_text_3"}}
+                    </div>
+                </div>
+                <div class="col-xl-7">
+                    <img class="howto_image" src="{{ $img3.RelPermalink }}" alt="networksync">
+                </div>
+            </div>
+
+            <div class="row">
+                <div class="col-xl-5 order-xl-last">
+                    <div class="howto_title">
+                        4. {{ T "how_to_title_4"}}
+                    </div>
+                    <div class="howto_text">
+                        {{ T "how_to_text_4"}}
+                    </div>
+                </div>
+                <div class="col-xl-7 order-xl-first">
+                    <img class="howto_image" src="{{ $img4.RelPermalink }}" alt="connectserver">
+                </div>
+            </div>
+
+            <div class="row">
+                <div class="col-xl-5">
+                    <div class="howto_title">
+                        5. {{ T "how_to_title_5"}}
+                    </div>
+                    <div class="howto_text">
+                        {{ T "how_to_text_5"}}
+                    </div>
+                </div>
+                <div class="col-xl-7">
+                    <img class="howto_image" src="{{ $img5.RelPermalink }}" alt="fundsneeded">
+                </div>
+            </div>
+
+            <div class="row">
+                <div class="col-xl-5 order-xl-last">
+                    <div class="howto_title">
+                        6. {{ T "how_to_title_6"}}
+                    </div>
+                    <div class="howto_text">
+                        {{ T "how_to_text_6"}}
+                    </div>
+                </div>
+                <div class="col-xl-7 order-xl-first">
+                    <img class="howto_image" src="{{ $img6.RelPermalink }}" alt="choosenick">
+                </div>
+            </div>
+
+            <div class="row">
+                <div class="col-xl-5">
+                    <div class="howto_title">
+                        7. {{ T "how_to_title_7"}}
+                    </div>
+                    <div class="howto_text">
+                        {{ T "how_to_text_7"}}
+                    </div>
+                </div>
+                <div class="col-xl-7">
+                    <img class="howto_image" src="{{ $img7.RelPermalink }}" alt="needout">
+                </div>
+            </div>
+
+            <div class="row">
+                <div class="col-xl-5 order-xl-last">
+                    <div class="howto_title">
+                        8. {{ T "how_to_title_8"}}
+                    </div>
+                    <div class="howto_text">
+                        {{ T "how_to_text_8"}}
+                    </div>
+                </div>
+                <div class="col-xl-7 order-xl-first">
+                    <img class="howto_image" src="{{ $img8.RelPermalink }}" alt="needin">
+                </div>
+            </div>
+
+        </div>
 
     </div>
 </div>

transifex_catalogs/en.json

@@ -55,5 +55,21 @@
   "os_choose_experience": "How would you prefer to experience Bison Relay?",
   "os_gui": "Graphical User Interface",
   "os_cli": "Command-line Interface",
-  "os_download_client": "Download the client, follow our simple guide and you’re set."
+  "os_download_client": "Download the client, follow our simple guide and you’re set.",
+  "how_to_title_1": "Create Wallet",
+  "how_to_text_1": "First you must choose and confirm a password for the wallet that handles the micro-transactions at the heart of Bison Relay.  You will need to use this password each time you login/open Bison Relay.",
+  "how_to_title_2": "Copy Seed",
+  "how_to_text_2": "You are then presented with a mnemonic seed that will allow you to recover your wallet in case of loss of access to the current instance.  NOTE: You should write this seed down on paper and keep in a secure location.",
+  "how_to_title_3": "Network Sync",
+  "how_to_text_3": "The wallet will now sync to the network.  This can take up to 20-30 mins on a modern computer.",
+  "how_to_title_4": "Connect Server",
+  "how_to_text_4": "We have currently populated the only known Bison Relay server in operation, but as other's arise you may choose to enter that address here.",
+  "how_to_title_5": "Deposit Funds",
+  "how_to_text_5": "You are provided an address which you will need to deposit DCR. A small amount such as 0.01 is adequate to get started.",
+  "how_to_title_6": "Choose Username & Nick",
+  "how_to_text_6": "Your username is what will be saved by the server and what will be shown to others you communicate with (this cannot be changed).  Your nick is what you see your name appear as locally (can be changed at anytime).",
+  "how_to_title_7": "Outbound Channel Required",
+  "how_to_text_7": "To begin communicating with others you must first establish an outbound channel on the Lightning Network.",
+  "how_to_title_8": "Inbound Channel Required",
+  "how_to_text_8": "To be able to receive funds or be paid for content you provide to others you must create an inbound channel on the Lightning Network."
 }