ubdate host page

content/host/index.md

@@ -10,64 +10,67 @@ insert_anchor_links: "left"
 
 {% row(style="header") %}
 
-![Image](header_host.png#mx-auto)
+![Image](hero_host.png#semilarge#mx-auto)
 
 |||
 
 ## **Host <span class="blue">The Cloud,</span><br>Empower Human Potential**
 
-Regardless of technical knowledge, anyone can now become a cloud service provider, bringing local capacity to where people need it most while earning for your contributions. We call this process <span class="blue">**farming**</span>.
+RRegardless of technical knowledge, anyone can now become a cloud service provider, bringing local capacity to where people need it most while earning for your contributions. We call this process <span class="blue">**farming**</span>.
+
+<br>
+
+<button class="blue_b">[Get A Node](https://manual.grid.tf/documentation/threefold_token/buy_sell_tft/buy_sell_tft.html)</button>
 
 {% end %}
 
-</div>
+
 
 
 
 <!-- section 2 -->
 
-<div class="bg-gray-100">
-
-<div class="container mx-auto">
-
 {% row(style="center narrow mtop") %}
 
 ## How It Works
 
-Three simple steps enabling anyone to become a cloud service provider.
+#### <span class="blue">Three simple steps</span> enabling anyone to become a cloud service provider.
 
 {% end %}
 
 {% row(style="center between") %}
 
-![Image](step1.png#mx-auto)
+<div class="shadow-md rounded-md my-8">
 
-#### Step 1
+![Image](host_node.png#mx-auto)
-### Host a Node
 
-<br>
+</div>
+
+### **Host a Node**
 
 All you need to get started is a modern computer, electricity and network. Once booted with Zero OS, a computer becomes a ThreeFold Node.
 
 |||
 
-![Image](step2.png#mx-auto)
+<div class="shadow-md rounded-md my-8">
 
-#### Step 2
+![Image](offer_capacity.png#mx-auto)
-### Offer Capacity
 
-<br>
+</div>
+
+### **Offer Capacity**
 
 The capacity of the node gets verified and registered in the ThreeFold Blockchain, securing access to a decentralized autonomous cloud for users and communities.
 
 |||
 
-![Image](step3.png#mx-auto)
+<div class="shadow-md rounded-md my-8">
 
-#### Step 3
+![Image](earn_rewards.png#mx-auto)
-### Earn Rewards
 
-<br>
+</div>
+
+### **Earn Rewards**
 
 After your node is set up and verified, you’ll be rewarded for the capacity that you provide to the ThreeFold Grid.
 
@@ -75,24 +78,24 @@ After your node is set up and verified, you’ll be rewarded for the capacity th
 
 {% row(style="center between mbottom") %}
 
-<button>[Dive Deeper](https://www.manual.grid.tf/knowledge_base/technology/grid3_howitworks.html)</button>
+<button class="green">[Dive Deeper](https://www.manual.grid.tf/knowledge_base/technology/grid3_howitworks.html)</button>
 
 {% end %}
 
 </div>
-</div>
 
 
 
-<div class="container mx-auto">
-
 <!-- section 3 -->
 
+<div style="background-color:#F6F6F6">
+<div class="container mx-auto">
+
 {% row( style="center between mtop") %}
 
 ## **Kickstart Your Journey**
 
-### Documentation and Knowledge
+### **<span class="blue"> Documentation and Knowledge</span>**
 
 You can become a cloud service provider and bring local capacity <br> to where people need it most while earning for your contributions.
 
@@ -100,47 +103,69 @@ You can become a cloud service provider and bring local capacity <br> to where p
 
 <br>
 
-{% row( style="centerItem center semiNarrow mbottom") %}
+{% row( style="centerItem center narrow mbottom") %}
 
 [![Image](get_a_node.png#mx-auto)](https://marketplace.3node.global/)
 
 <br>
 
-#### **Get a Node**
+<div class="text-left">
 
-Today, the best way to buy a node is from independent vendors serving various geographical regions. Nodes are optimized for performance and rewards across different price points.
+#### **Buy a Node**
+
+The best way to buy a node is from independent vendors serving various regions. Nodes are optimized for performance and rewards across different price points.
 
 <br>
 
-<button>[Get](https://marketplace.3node.global/)</button>
+<span class="blue pt-4"> [Learn More](https://marketplace.3node.global/)</span>
+
+<br>
+
+<!-- <button class="blue_b">[Get](https://marketplace.3node.global/)</button> -->
+
+</div>
 
 |||
 
-[![Image](build_a_node.png#mx-auto)](https://www.manual.grid.tf/documentation/farmers/3node_building/3node_building.html)
+[![Image](build_node.png#mx-auto)](https://www.manual.grid.tf/documentation/farmers/3node_building/3node_building.html)
 
 <br>
 
+<div class="text-left">
+
 #### **Build a Node**
 
 Read our informative guide on how to set up your own 3Node. Optimize your own specs and configuration to ensure a reliable node to join the cloud network.
 
 <br>
 
-<button>[Build](https://www.manual.grid.tf/documentation/farmers/3node_building/3node_building.html)</button>
+<span class="blue pt-4"> [Learn More](https://www.manual.grid.tf/documentation/farmers/3node_building/3node_building.html)</span>
+
+<br>
+
+<!-- <button class="blue_b">[Build](https://www.manual.grid.tf/documentation/farmers/3node_building/3node_building.html)</button> -->
+
+</div>
 
 {% end %}
 
+</div>
+
+</div>
+
+
+
 
 
 
 <!-- section 4 -->
-
+<div class="container mx-auto">
 
 {% row(style="center narrow mtop") %}
 
-## The ThreeFold Dashboard
+## **The ThreeFold <span class="green_text">Dashboard</span>**
 
-The ThreeFold Dashboard is today's go-to-interface for hosters (farmers) and grid users. Create, update and monitor your nodes, estimate your potential earnings, explore and find available nodes on the grid, and much more.
+The ThreeFold Dashboard is today's <span class="blue">go-to-interface</span> for hosters (farmers) and grid users. Create, update and monitor your nodes, estimate your potential earnings, explore and find available nodes on the grid, and much more.
 
 {% end %}
 
@@ -150,7 +175,8 @@ The ThreeFold Dashboard is today's go-to-interface for hosters (farmers) and gri
 
 <br>
 
-<button>[Visit the Dashboard](https://dashboard.grid.tf/)</button>
+<button class="green">[Visit the Dashboard](https://dashboard.grid.tf/)</button>
+<button class="blue_b">[Dasboard walkthrough](https://dashboard.grid.tf/)</button>
 
 {% end %}
 
@@ -176,4 +202,44 @@ By joining us on this cloud journey, you're not just investing in technology –
 
 {% end %}
 
-</div>
+</div>
+
+
+
+<style>
+
+.green{
+    background-color:#58CF77 !important;
+    color: #fff !important;
+}
+
+.green:hover {
+  background-color:#7ad993 !important;
+}
+.green a{
+     color: #fff !important;
+}
+ 
+.green:hover {
+  background-color:#7ad993 !important;
+}
+
+.green_text{
+  color: #58CF77 ;
+}
+
+.blue_b{
+
+    background-color:#2E83FF !important;
+    color: #fff !important;
+
+}
+.blue_b a{
+     color: #fff !important;
+  }
+
+.blue_b:hover {
+  background-color:#5596f5 !important;
+}
+ 
+</style>

css/index.css

@@ -52,6 +52,10 @@ img[src*="#social"] {
   margin: auto;
 }
 
+img[src*="#semilarge"] {
+  width: 500px;
+  margin: auto;
+}
 
 img[src*="#large"] {
   width: 700px;
@@ -201,7 +205,7 @@ a img:hover{
     text-sm
     lg:mr-3
     py-1
-    my-4
+    my-2
     border
     rounded
     shadow