Add link to Learn.RoboSats, add WIP _include

docs/_includes/wip

@@ -0,0 +1,13 @@
+
+<div align="center">
+<img src="/assets/images/wip.png"  width="150" />
+</div>
+
+This page is under construction. Learn.RoboSats is a joint effort of the RoboSats community.
+
+### <i class="fa-solid fa-seedling"></i> You can complete this page!
+
+**ProTip:** You can directly edit [the content of this page <i class="fa-brands fa-github-alt"></i>]({{page.src}}) and open a [Pull Request <i class="fa-solid fa-code-pull-request"/>](https://github.com/Reckless-Satoshi/robosats/pulls), your changes will show right here.
+{: .notice--primary}
+
+If you have already used RoboSats, you are an expert! If you understand how it works behind the scenes, you are a master! Please, consider contributing to the Learn.RoboSats' guides and platform documentation. 

docs/_pages/docs/00-quick-start/01-lightning.md

@@ -1,9 +1,10 @@
 ---
 layout: single
-title: "<i class='fa-solid fa-rocket'></i> Quick Start Guide"
+title: "The Lightning Network"
-permalink: /docs/quick-start/
+permalink: /docs/lightning/
 sidebar:
-  title: "<i class='fa-solid fa-rocket'></i> Quick Start"
+  title: "<i class='fa-solid fa-bolt'></i> Lightning Network</span>"
   nav: docs
+src: "https://github.com/Reckless-Satoshi/robosats/blob/main/docs/_pages/docs/00-quick-start/01-lightning.md"
 --- 
-To start exchanging Bitcoin with RoboSats securily and privately you only need two things: a lightning wallet and a web browser that supports TOR.
+{% include wip %}

docs/_pages/docs/00-quick-start/02-tor.md

@@ -1,9 +1,10 @@
 ---
 layout: single
-title: "<i class='fa-solid fa-rocket'></i> Quick Start Guide"
+title: "The TOR Network"
-permalink: /docs/quick-start/
+permalink: /docs/tor/
 sidebar:
-  title: "<i class='fa-solid fa-rocket'></i> Quick Start"
+  title: "<img style='width:28px;height:29px' src='/assets/vector/tor.svg'/> TOR"
   nav: docs
+src: "https://github.com/Reckless-Satoshi/robosats/blob/main/docs/_pages/docs/00-quick-start/02-tor.md"
 --- 
-To start exchanging Bitcoin with RoboSats securily and privately you only need two things: a lightning wallet and a web browser that supports TOR.
+{% include wip %}

docs/_pages/tutorials/read/how-to-use.md

@@ -4,6 +4,7 @@ title: How to Use (v0.1.0)
 permalink: /read/en/
 toc: true
 toc_sticky: true
+excerpt: "Guide: How to use RoboSats. A complete walkthrough RoboSats P2P Exchange"
 sidebar:
   title: "<i class='fa-solid fa-chalkboard-user'></i> How to use"
   nav: tutorial
@@ -90,7 +91,7 @@ You can also tap on any order to see the full order page:
 
 Every order has an expiration counter. By default, in RoboSats v0.1.0 new orders will stay public in the book for 6 hours.
 
-### Walktrough-1: Taking an order as a buyer
+### Walkthrough-1: Taking an order as a buyer
 
 When you are decided for an order to take simply tap the "Take Order" button. You will see the contract box. Follow the contract box indications until you complete the trade! :) 
 
@@ -136,7 +137,7 @@ As soon as you have sent the fiat, you should tap on "Confirm fiat sent" button.
 
 Rating the platform and leaving tips for improvement in our Telegram group or Github Issues is super appreciated!
 
-### Walktrough-2: Making an order as a seller
+### Walkthrough-2: Making an order as a seller
 
 It might happen that there are no active orders for the positioning and currency you want. In this case, there is no orders to SELL bitcoin for GBP.
  

docs/_pages/tutorials/watch/videos-en.md

@@ -10,4 +10,7 @@ sidebar:
 --- 
 
 ### BTCSessions: Buy and Sell BTC with no ID
-<iframe width="560" height="315" src="https://www.youtube.com/embed/XW_wzRz_BDI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+<iframe width="560" height="315" src="https://www.youtube.com/embed/XW_wzRz_BDI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+
+### [How to Use Guide](/read/en/)

docs/home.md

@@ -5,7 +5,7 @@ header:
   overlay_color: "#5e616c"
   overlay_image: /assets/images/misc/learn-robosats-home.png
   cta_label: "<i class='fa-solid fa-lines-leaning'></i> Learn How to Use Now"
-  cta_url: "/docs/how-to-use/"
+  cta_url: "/watch/en/"
   caption:
 excerpt: 'A simple and private way to exchange bitcoin for national currencies.<br /> <i class="fa-solid fa-bolt"></i> <small><a href="https://robosats.com">Use RoboSats with Tor Browser</a></small> <br/> <i class="fa-brands fa-github-alt"></i> <small><a href="https://github.com/reckless-satoshi/robosats">GitHub Project Page</a></small>'
 feature_row:

frontend/src/components/App.js

@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 import ReactDOM from 'react-dom/client';
 import HomePage from "./HomePage";
-import { CssBaseline, IconButton} from "@mui/material";
+import { CssBaseline, IconButton , Link} from "@mui/material";
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import UnsafeAlert from "./UnsafeAlert";
 
@@ -10,6 +10,7 @@ import i18n from "./i18n";
 
 import DarkModeIcon from '@mui/icons-material/DarkMode';
 import LightModeIcon from '@mui/icons-material/LightMode';
+import SchoolIcon from '@mui/icons-material/School';
 
 export default class App extends Component {
   constructor(props) {
@@ -35,6 +36,7 @@ export default class App extends Component {
       <I18nextProvider i18n={i18n}>
         <ThemeProvider theme={this.state.dark ? this.darkTheme : this.lightTheme}>
           <CssBaseline/>
+          <IconButton sx={{position:'fixed',right:'28px'}} component={Link} href="https://learn.robosats.com" target="_blank"><SchoolIcon/></IconButton>
           <IconButton sx={{position:'fixed',right:'0px'}} onClick={()=>this.setState({dark:!this.state.dark})}>
             {this.state.dark ? <LightModeIcon/>:<DarkModeIcon/>}
           </IconButton>