update home page

content/home/index.md

@@ -16,9 +16,13 @@ extra:
 
 {% row(style="reverse header") %}
 
-# **ThreeFold**
+
 ## **Decentralized<br>Autonomous <span class="blue">Cloud</span>**
 
+#### **The <span class="blue">Leading</span> Decentralized Cloud Marketplace**
+
+<br>
+
 ThreeFold’s self-healing autonomous system empowers anyone to become a cloud service provider – no technical expertise required – allowing people and organizations to buy, sell and use cloud resources autonomously and securely.
 
 <br>
@@ -27,7 +31,9 @@ ThreeFold’s self-healing autonomous system empowers anyone to become a cloud s
 
 <br>
 
-<button>[Host](/host)</button> <button>[Deploy](https://dashboard.grid.tf)</button> <button>[Learn](https://manual.grid.tf)</button>
+<button class="blue_b">[Host The Cloud](/host)</button> <button class="green">[Deploy](https://dashboard.grid.tf)</button> 
+
+<!-- <button>[Learn](https://manual.grid.tf)</button> -->
 
 |||
 
@@ -54,15 +60,24 @@ Provide cloud and Internet capacity in your area and become a part of the larges
 
 {% row(style="reverse margin") %}
 
-## **It Starts with <span class="blue">3Nodes</span>**
+# **Host2 <span class="blue">Earn</span>**
 
-**<span class="blue">3Nodes</span>**, powered by our stateless operating system, Zero-OS, allow anyone to earn by providing compute, storage, and network capacity to the ThreeFold Cloud. Pre-configured plug and earn 3Nodes for beginners, or do it yourself 3Nodes for builders
+#### **It starts with <spane class="green_text">Nodes</spane>**
 
-<button>[Get Started](/host)</button>
+<br>
+
+3Nodes allow anyone to earn by providing compute, storage, and network capacity to the ThreeFold Cloud: pre-configured plug-and-earn nodes for beginners, or do-it-yourself nodes for builders. 
+
+<br>
+
+Earn TFT by adding capacity to the grid.
+
+<button class="green">[Host The Cloud](/host)</button>
+<button class="blue_b">[Explore Rewards](/host)</button>
 
 |||
 
-![Image](node_home.png#mx-auto)
+![Image](host2_earn.png#mx-auto)
 
 {% end %}
 
@@ -283,3 +298,44 @@ Meet the community and join the conversation
 
 
  </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>

templates/shortcodes/grid_stats.html

@@ -3,62 +3,72 @@
     <div class="relative lg:max-w-6xl mx-auto">
         <div class="text-center rounded lg:px-6 mt-10 lg:mt-0 mx-auto">
             {{body | markdown | safe }}
-            <div class="items my-10 grid lg:grid-cols-4 lg:gap-8 animate-pulse">
+            <div class="items my-10 block lg:flex lg:flex-wrap justify-center items-center animate-pulse">
                 <!-- capacity -->
-                <div class="item flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4">
+                <div class="item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
                     <img
                         class="mx-auto p-4"
                         src="images/V3-08.png"
-                        width="150"
+                        width="100"
                         alt=""
                     >
-                    <div id="capacity" class="leading-none font-extrabold text-3xl"></div>
+                    <div id="capacity" class="leading-none font-extrabold text-xl"></div>
-                    <span class="block text-lg mt-4 font-normal capitalize">capacity</span>
+                    <span class="block text-md mt-4 font-normal capitalize">capacity</span>
                 </div>
                 <!-- Nodes -->
-                <div class="item flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4">
+                <div class="item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
                     <img
                         class="mx-auto p-4"
                         src="images/V3-09.png"
-                        width="150"
+                        width="100"
                         alt=""
                     >
-                    <div id="nodes" class="leading-none font-extrabold text-3xl"></div>
+                    <div id="nodes" class="leading-none font-extrabold text-xl"></div>
-                    <span class="block text-lg mt-4 font-normal capitalize">nodes</span>
+                    <span class="block text-md mt-4 font-normal capitalize">nodes</span>
                 </div>
                 <!-- countries -->
-                <div class="item flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4">
+                <div class="item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
                     <img
                         class="mx-auto p-4"
                         src="images/V3-10.png"
-                        width="150"
+                        width="100"
                         alt=""
                     >
-                    <div id="countries" class="leading-none font-extrabold text-3xl"></div>
+                    <div id="countries" class="leading-none font-extrabold text-xl"></div>
-                    <span class="block text-lg mt-4 font-normal capitalize">countries</span>
+                    <span class="block text-md mt-4 font-normal capitalize">countries</span>
                 </div>
                 <!-- cores -->
-                <div class="item flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4">
+                <div class="item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
                     <img
                         class="mx-auto p-4"
                         src="images/V3-11.png"
-                        width="150"
+                        width="100"
                         alt=""
                     >
-                    <div id="cores" class="leading-none font-extrabold text-3xl"></div>
+                    <div id="cores" class="leading-none font-extrabold text-xl"></div>
-                    <span class="block text-lg mt-4 font-normal capitalize">cores</span>
+                    <span class="block text-md mt-4 font-normal capitalize">cores</span>
+                </div>
+                <div class="item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
+                    <img
+                        class="mx-auto p-4"
+                        src="images/V3-11.png"
+                        width="100"
+                        alt=""
+                    >
+                    <div id="farms" class="leading-none font-extrabold text-xl">900+</div>
+                    <span class="block text-md mt-4 font-normal capitalize">farms</span>
                 </div>
             </div>
-            <button class="my-8">
+            <button class="my-8 blue_b">
                 <a href="https://dashboard.grid.tf/#/tf-grid/node-statistics/" target="_blank">
-                    Explore ThreeFold Grid Capacity
+                    Explore Grid Capacity
                 </a>
             </button>
-            <button class="my-8">
+            {# <button class="my-8">
                 <a href="/host" target="_self">
                     Become a Cloud Provider
                 </a>
-            </button>
+            </button> #}
         </div>
     </div>
 </section>
@@ -77,4 +87,27 @@
     .bg-pink {
         background-color: #ea1ff7;
     }
+
+    .blue_b{
+  
+        background-color:#2E83FF !important;
+        color: #fff !important;
+    
+      }
+      .blue_b a{
+         color: #fff !important;
+      }
+    
+    .blue_b:hover {
+      background-color:#5596f5 !important;
+    }
+
 </style>
+
+
+
+ 
+  
+
+    
+