update grid stats

templates/shortcodes/grid_stats.html

@@ -1,4 +1,4 @@
-{% set styles = "background-image: url('images/grid_map.png');" %}
+{% set styles = "background-image: url('images/V3.png');" %}
 {% set data = load_data(url="https://explorer.threefold.io/api/stats", required=false, format="json") %}
 {% if data %}
   {% set capacity = data.hru + data.sru / 1000 %}
@@ -9,66 +9,56 @@
 
 {% if data %}
 <section class="px-2 h-auto bg-center lg:py-28 p-12 bg-cover bg-no-repeat" style="{{styles}}">
-    <div class="flex flex-wrap text-center -mx-auto">
+    <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="my-10 grid lg:grid-cols-3 lg:gap-8">
+            <div class="my-10 grid lg:grid-cols-4 lg:gap-8">
-                <div class="..."></div>
+                
 
                 <!-- capacity -->
-                <div class="leading-none font-extrabold text-5xl">
+            <div class="flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4">
-                    {{ capacity / 1000000 | round(precision=2) }}PB
+                    <img class="mx-auto p-4" src="images/V3-08.png" width="150" alt="">
-                    <span class="block text-3xl uppercase">capacity</span>
+                <div class="leading-none font-extrabold text-3xl">
+                    {{ capacity /400000 | round(precision=2) }} PB
+                    <span class="block text-lg mt-4 font-normal capitalize">capacity</span>
                 </div>
-                <div class="..."></div>
+            </div>
+                
 
                 <!-- Nodes -->
-                <div class="
+            <div class="flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4">
-                mx-auto
+                    <img class="mx-auto p-4" src="images/V3-09.png" width="150" alt="">
-                rounded-full
+                <div class="leading-none font-extrabold text-3xl">
-                h-32
+                    {{ nodes }}
-                w-32
+                    <span class="block text-lg mt-4 font-normal capitalize">nodes</span>
-                lg:h-60 lg:w-60
-                inline-flex
-                items-center
-                justify-center
-                bg-green
-                my-4
-              ">
-                    <div class="leading-none font-extrabold md:text-6xl">
-                        {{ nodes }}
-                        <span class="block md:text-2xl uppercase">nodes</span>
-                    </div>
                 </div>
-                <div class="hidden md:block"></div>
+            </div>
+                
+                
 
                 <!-- countries -->
-                <div class="
+            <div class="flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4">
-                mx-auto
+                    <img class="mx-auto p-4" src="images/V3-10.png" width="150" alt="">
-                rounded-full
+                <div class="leading-none font-extrabold text-3xl">
-                h-32
+                    {{ countries }}
-                w-32
+                    <span class="block text-lg mt-4 font-normal capitalize">countries</span>
-                lg:h-60 lg:w-60
-                inline-flex
-                items-center
-                justify-center
-                bg-pink
-              ">
-                    <div class="leading-none font-extrabold md:text-6xl">
-                        {{ countries }}
-                        <span class="block md:text-2xl uppercase">countries</span>
-                    </div>
                 </div>
             </div>
-            <div class="..."></div>
 
-            <!-- cores -->
+              <!-- cores -->
-            <div class="leading-none font-extrabold text-5xl">
+            <div class="flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4">
+                   <img class="mx-auto p-4" src="images/V3-11.png" width="150" alt="">
+                <div class="leading-none font-extrabold text-3xl">
                 {{ cores | num_format }}
-                <span class="block text-2xl uppercase">cores</span>
+                <span class="block text-lg mt-4 font-normal capitalize">cores</span>
+                </div>
             </div>
 
+ 
+            </div>
+            
+
             <button class="my-8"><a href="https://dashboard.grid.tf/explorer/statistics" target="_blank">Explore
                     ThreeFold Grid Capacity</a></button>
         </div>