edit

content/footer/_index.md

@@ -4,7 +4,7 @@ description: ""
 insert_anchor_links: "left"
 template: "partials/footer.html"
 extra:
-  logoPath: "images/odfz.svg"
+  logoPath: "images/tf_logo.svg"
   socialLinks: { Github: "https://github.com/ourworldfreezone", Twitter: "https://twitter.com/threefold_io", Telegram: "https://t.me/threefoldnews"  }
 ---
 

content/header/_index.md

@@ -4,7 +4,7 @@ description: ""
 insert_anchor_links: "left"
 template: "partials/header.html"
 extra:
-  logoPath: "./images/odfz.svg"
+  logoPath: "./images/tf_logo.svg"
   imgPath: ""
 ---
 - [Home]("/")

content/home/index.md

@@ -8,6 +8,7 @@ weight: 1
 ---
 
 
+
 <!--
   This page is made by combining different 'block' (partial html pages) together. 
   To edit the page content, please go to specific 'block' that you would like to edit.

css/index.css

@@ -404,3 +404,7 @@ header #menu button a{
   px-0
 }
 
+.bg-gradient-bl {
+  background: rgb(0,166,255);
+  background: linear-gradient(125deg, rgba(0,166,255,1) 0%, rgba(8,173,179,1) 100%);
+}

css/layout.css

@@ -481,3 +481,8 @@ footer {
     width: 40%;
   }
 }
+
+.bg-gradient-bl {
+  background: rgb(0,166,255);
+  background: linear-gradient(125deg, rgba(0,166,255,1) 0%, rgba(8,173,179,1) 100%);
+}

output.css

@@ -3452,6 +3452,8 @@ details[open] > summary::after {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
+
+
 .bg-white\/10 {
   background-color: rgb(255 255 255 / 0.1);
 }

static/images/1.svg

@@ -0,0 +1,3 @@
+<svg width="537" height="386" viewBox="0 0 537 386" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.998" fill-rule="evenodd" clip-rule="evenodd" d="M65.6565 0.891113C208.868 83.5741 352.077 166.256 495.29 248.94C515.544 264.44 520.837 286.554 511.172 315.286C497.835 338.851 484.365 362.338 470.758 385.749C313.932 295.205 157.109 204.663 0.283689 114.12C22.0745 76.3773 43.8657 38.634 65.6565 0.891113Z" fill="#090909"/>
+</svg>

static/images/2.svg

@@ -0,0 +1,3 @@
+<svg width="401" height="309" viewBox="0 0 401 309" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.999" fill-rule="evenodd" clip-rule="evenodd" d="M400.933 193.604C378.771 231.99 356.609 270.375 334.447 308.76C223.135 244.494 111.823 180.228 0.510309 115.962C22.6722 77.5764 44.8339 39.1913 66.9958 0.805664C178.308 65.0718 289.62 129.338 400.933 193.604Z" fill="#090909"/>
+</svg>

static/images/3.svg

@@ -0,0 +1,3 @@
+<svg width="537" height="386" viewBox="0 0 537 386" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.999" fill-rule="evenodd" clip-rule="evenodd" d="M65.8405 0.54834C222.665 91.0912 379.489 181.633 536.315 272.177C522.777 295.626 509.238 319.074 495.7 342.523C474.659 366.198 452.124 372.246 428.099 360.67C285.555 278.373 143.011 196.075 0.467649 113.777C22.2585 76.0345 44.0496 38.2912 65.8405 0.54834Z" fill="#090909"/>
+</svg>

tailwind.config.js

@@ -3,16 +3,34 @@ module.exports = {
   content: ['./templates/**/*.html', './content/**/*.md'],
   safelist: [
     {
-        pattern: /(-|)(ml|mr)-(4|8|12|16|20|24|28)/,
+      pattern: /(-|)(ml|mr)-(4|8|12|16|20|24|28)/,
-        variants: ['sm', 'md', 'lg', 'first', 'first:sm', 'first:md', 'first:lg', 'last', 'last:sm', 'last:md', 'last:lg'],
+      variants: ['sm', 'md', 'lg', 'first', 'first:sm', 'first:md', 'first:lg', 'last', 'last:sm', 'last:md', 'last:lg'],
     },
     {
-        pattern: /(pt|pb)-(0)/,
+      pattern: /(pt|pb)-(0)/,
-        variants: ['!', 'lg', 'first', 'first:sm', 'first:md', 'first:lg', 'last', 'last:sm', 'last:md', 'last:lg'],
+      variants: ['!', 'lg', 'first', 'first:sm', 'first:md', 'first:lg', 'last', 'last:sm', 'last:md', 'last:lg'],
+    },
+    {
+      pattern: /bg-teal-(50|100|200|300|400|500|600|700|800|900)/,  // Added teal color safelist
     }
   ],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        teal: {
+          50: '#E0F2F1',
+          100: '#B2DFDB',
+          200: '#80CBC4',
+          300: '#4DB6AC',
+          400: '#26A69A',
+          500: '#009688',
+          600: '#00897B',
+          700: '#00796B',
+          800: '#00695C',
+          900: '#004D40',
+        }
+      }
+    },
   },
   plugins: [],
 }

templates/index.html

@@ -4,15 +4,13 @@
 <!-- home page template, has a banner and rows of page summaries -->
 
 {% include "partials/hero.html" %}
+{% include "partials/logos2.html" %}
+{% include "shortcodes/grid_stats.html" %}
+
 
 
 
-<div>
-    {% set page = get_page(path="home/index.md") %}
-    {{page.content | safe}}
-</div>
 
-{% include "partials/about1.html" %}
 
 {% include "partials/about.html" %}
 

templates/layouts/hero.html

@@ -11,6 +11,7 @@
 </div>
 
 {% include "partials/ventures/hero.html" %}
+{% include "partials/ventures/logos2.html" %}
 
 
 {% endblock content %}

templates/partials/footer.html

@@ -6,7 +6,7 @@
   <div class="max-w-screen-2xl mx-auto lg:py-4 py-4 sm:px-6 lg:px-8">
     <div class="flex flex-col xl:flex-row xl:gap-4 items-center">
       <div class="space-y-8 lg:max-w-sm xl:max-w-sm lg:mr-8 mb-4 xl:col-span-1 text-center xl:text-left">
-        <img class="lg:w-60 h-auto w-20 mx-auto" src="./images/odfz.svg" alt="logo" />
+        <img class="lg:w-60 h-auto w-20 mx-auto" src="./images/tf_logo.svg" alt="logo" />
       </div>
       <p data-v-14efe4a7="" class="text-base leading-6 text-gray-400 mb-4">
         © 2024 OurWorld Holdings, All rights reserved.

templates/partials/header.html

@@ -10,12 +10,12 @@
 {% else %}
     <header id="header-container">
         {% set header_class = config.extra.header_class | default(value='') %}
-        <div class="{{'z-10 bg-white fixed w-screen ' ~ header_class}}">
+        <div class="{{'z-10 bg-transparent fixed w-screen ' ~ header_class}}">
             <div class="relative z-50 shadow">
             <div class="mx-auto flex z-50 shadow justify-between items-center pl-6 pr-2 md:pr-0 lg:py-5  md:px-12 py-2 lg:px-20 lg:justify-start lg:space-x-20">
                 <div>
                     <a href="/" class="flex">
-                        <img class="w-56 h-auto sm:w-15" src="{{logo_path}}" alt="FreeFlow Logo" />
+                        <img class="w-60 h-auto sm:w-15" src="{{logo_path}}" alt="tf Logo" />
                     </a>
                 </div>
                 <div class="-mr-2 -my-2 lg:hidden">

templates/partials/hero.html

@@ -1,26 +1,26 @@
-<div class="relative isolate overflow-hidden h-screen bg-white">
+<div class="relative bg-white">
-  <div class="flex flex-col justify-center items-center mx-auto max-w-2xl py-32 lg:py-48 text-center h-full">
+  <div class="mx-auto max-w-7xl">
-    <div class="text-center">
+    <div class="relative z-10 lg:w-full lg:max-w-2xl">
-      <img src="./images/logo.svg"
+      <div class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80" aria-hidden="true">
-     alt="Hero Image"
+        <div class="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div>
-     width="210"
+      </div>
-     height="210"
+      <div class="relative px-6 py-40 lg:px-8 lg:pr-0">
-     class="mx-auto rounded-md">
+        <div class="mx-auto max-w-2xl lg:mx-0 lg:max-w-xl animate-fade-up">
-
+          <h1 class="text-pretty lg:text-6xl text-4xl font-semibold tracking-tight text-gray-900 animate-fade-up">Self-Healing Data, Network, and Cloud Platform</h1>
-      <p class="text-base font-semibold leading-7 text-blue-600">WELCOME TO</p>
+          <p class="mt-8 text-pretty text-lg font-light text-gray-700 sm:text-xl/8 animate-fade-up">Imagine a system which can scale to a planetary level, is compatible with AI, Cloud, Web2, Web3 and Edge IT workloads, has the potential to recover from unforeseen events, provides 100% uptime, and allows any machine and human to communicate over the shortest, most direct path.</p>
-        <div class="max-w-4xl">
+          <div class="mt-10 flex items-center gap-x-6 animate-fade-up">
-         <h1 class="mt-4 text-3xl lg:text-5xl font-bold leading-8 tracking-tight text-black mb-4">OurWorld Digital Freezone</h1>
+            <a href="#" class="rounded-xl bg-black px-8 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-gray-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-600">Host</a>
+            <a href="#" class="rounded-xl bg-blue-700 px-8 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600">Deploy</a>
+            <a href="#" class="text-sm/6 font-semibold text-gray-900">Learn more <span aria-hidden="true">→</span></a>
+          </div>
         </div>
-      <p class="mt-6 text-lg sm:text-xl leading-7 sm:leading-8 text-gray-600 font-light mx-4 sm:mx-0">ODFZ OurWorld Digital FreeZone is a collaboration between the Government of Zanzibar and OurWorld Venture Creator. We are the world's first 100% digital free zone, accessible and affordable for all. Removing complexity from doing business.</p>
+      </div>
-      <div class="mt-10 flex items-center justify-center gap-x-6">
-        <a href="/about" class="rounded-xl bg-blue-700 px-4 py-2.5 font-semibold text-white shadow-sm hover:bg-blue-800 hover:text-blue-200 transition-colors duration-300">
-            Get Started
-        </a>
-        
-        <a href="/about" class="rounded-xl border border-gray-800 px-4 py-2.5 font-medium text-gray-900 bg-transparent shadow-sm hover:bg-blue-700 hover:text-blue-700 transition-all duration-300">
-            Learn More &#8594;
-        </a>
     </div>
+  </div>
+  <div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2 animate-fade-in">
+    <img class="aspect-[3/2] w-auto lg:absolute lg:inset-0 lg:aspect-auto" src="/images/tf3.gif" alt="">
+    <div class="absolute inset-x-0 -bottom-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-bottom-80" aria-hidden="true">
+      <div class="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div>
     </div>
   </div>
 </div>
@@ -31,26 +31,53 @@
     height: 100%;
   }
 
-  .relative.isolate.overflow-hidden.h-screen {
+  /* Background gradient */
-    height: 100vh;
+  .bg-gradient-bl {
+    background: linear-gradient(125deg, rgba(0, 166, 255, 1) 0%, rgba(8, 173, 179, 1) 100%);
   }
 
+  /* Fade-up animation for text */
+  @keyframes fadeUp {
+    from {
+      opacity: 0;
+      transform: translateY(20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
 
-  /* Custom styles for smaller font, margin adjustments, and line spacing for mobile */
+  /* Fade-in animation for the image (GIF) */
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  /* Apply fade-up animation to text */
+  .animate-fade-up {
+    animation: fadeUp 1.5s ease-out forwards;
+  }
+
+  /* Apply fade-in animation to the GIF */
+  .animate-fade-in {
+    animation: fadeIn 2s ease-out forwards;
+  }
+
+  /* Responsive styles for smaller screens */
   @media (max-width: 640px) {
     h1 {
-      font-size: 2rem; /* Smaller font for mobile */
+      font-size: 2rem;
     }
-    
-    h2 {
-      font-size: 1.25rem; /* Smaller font for mobile */
-    }
-
     p {
-      font-size: 1rem; /* Smaller font for mobile */
+      font-size: 1rem;
-      margin-left: 1rem; /* Margin left for mobile */
+      margin-left: 1rem;
-      margin-right: 1rem; /* Margin right for mobile */
+      margin-right: 1rem;
-      line-height: 1.5; /* Smaller line spacing */
+      line-height: 1.5;
     }
   }
 </style>

templates/partials/logos2.html

@@ -0,0 +1,41 @@
+<div class="bg-transparent pt-0 pb-12 overflow-hidden">
+    <div class="flex space-x-8 animate-scroll">
+        <!-- First set of logos -->
+        <img class="max-h-12 w-auto object-contain" src="images/logos/sikana.png" alt="Transistor">
+        <img class="max-h-12 w-auto object-contain" src="images/logos/ict.png" alt="Reform">
+        <img class="max-h-12 w-auto object-contain" src="images/logos/znz.png" alt="Tuple">
+        <img class="max-h-12 w-auto object-contain" src="images/logos/social.png" alt="SavvyCal">
+        <img class="max-h-12 w-auto object-contain" src="images/logos/holo.png" alt="Statamic">
+        <img class="max-h-12 w-auto object-contain" src="images/logos/freezone.png" alt="Statamic">
+        <img class="max-h-12 w-auto object-contain" src="images/logos/vverse.png" alt="Statamic">
+        <img class="max-h-12 w-auto object-contain" src="images/logos/veverse.png" alt="Statamic">
+        <img class="max-h-12 w-auto object-contain" src="images/logos/zictia.png" alt="Statamic">
+
+        <!-- Duplicate set of logos to create the endless effect -->
+        <img class="max-h-12 w-auto object-contain" src="images/logos/sikana.png" alt="Transistor">
+        <img class="max-h-12 w-auto object-contain" src="images/logos/ict.png" alt="Reform">
+        <img class="max-h-12 w-auto object-contain" src="images/logos/znz.png" alt="Tuple">
+        <img class="max-h-12 w-auto object-contain" src="images/logos/social.png" alt="SavvyCal">
+        <img class="max-h-12 w-auto object-contain" src="images/logos/holo.png" alt="Statamic">
+        <img class="max-h-12 w-auto object-contain" src="images/logos/freezone.png" alt="Statamic">
+        <img class="max-h-12 w-auto object-contain" src="images/logos/vverse.png" alt="Statamic">
+        <img class="max-h-12 w-auto object-contain" src="images/logos/veverse.png" alt="Statamic">
+        <img class="max-h-12 w-auto object-contain" src="images/logos/zictia.png" alt="Statamic">
+    </div>
+</div>
+
+<style>
+/* Keyframe animation for slow horizontal scrolling */
+@keyframes scroll {
+    0% { transform: translateX(0); }
+    100% { transform: translateX(-50%); }
+}
+
+/* Apply the animation */
+.animate-scroll {
+    display: flex;
+    animation: scroll 25s linear infinite;
+    gap: 2rem;
+    width: max-content;
+}
+</style>

templates/shortcodes/grid_stats.html

@@ -1,78 +1,150 @@
-{% set styles = "background-image: url('/images/ston_bg.png');" %}
+
-{% set data = load_data(url="https://gridproxy.grid.tf/stats?status=up", required=false, format="json") %}
+<section class="px-2 py-24 bg-center lg:py-54">
-{% if data %}
+    <div class="mx-auto max-w-3xl sm:text-center">
-{% set capacity = data.totalHru + data.totalSru / (1024 * 1024 * 1024 * 1024) %}
+        <h2 class="text-xl text-center font-normal tracking-wide text-indigo-600">LIVE AND OPERATIONAL</h2>
-{% set nodes = data.nodes %}
+        <p class="mt-4 text-center text-pretty text-4xl font-semibold tracking-tight text-gray-900 sm:text-balance sm:text-5xl">Proven by a Global Community</p>
-{% set countries = data.countries %}
+        <p class="mt-6 text-lg text-center font-light text-gray-600">With ThreeFold, individuals, organizations, communities, countries, and network states deploy their own sovereign infrastructure. The ThreeFold Grid has been live and operational since 2017. Version 3.14 is live on Mainnet</p>
-{% endif %}
+    </div>
-<style>
+    <div class="relative mx-auto mt-10">
-    .bg-map {
+        <div class="text-center rounded lg:px-6 mx-auto">
-        background-color: #EAE8E3;
+            <div class="items block lg:flex lg:flex-wrap justify-center items-center animate-pulse">
-    }
+                <!-- capacity -->
-</style>
+                <div class="tooltip item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
-<div class="bg-map pb-24">
+                    <span class="tooltiptext">The total amount of storage (SSD, HDD, & RAM) on the grid. 1 petabyte equals roughly 1 million gigabytes.</span>
-    <div class="relative max-w-7xl mx-auto">
+                    <img class="mx-auto p-4 fade-image" src="images/V3-08.png" width="130" alt="">
-        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 ">
+                    <div id="capacity" class="leading-none font-extrabold text-xl">19.10 PB</div>
-            <div class=" overflow-hidden">
+                    <span class="block text-md mt-1 font-normal capitalize">Capacity</span>
-                <div class="px-2 py-16">
+                </div>
-                    <div class="flex items-start">
+                <!-- cores -->
-                        <div class="flex-shrink-0">
+                <div class="tooltip item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
-                            <img src="/images/node_icon.png"  width="65" alt="">
+                    <span class="tooltiptext">The total number of Central Processing Unit cores (compute power) available on the grid.</span>
-                        </div>
+                    <img class="mx-auto p-4 fade-image" src="images/V3-11.png" width="130" alt="">
-                        <div class="ml-5 w-0 flex-1 pt-3">
+                    <div id="cores" class="leading-none font-extrabold text-xl">46,934</div>
-                            <dl>
+                    <span class="block text-md mt-2 font-normal capitalize">Cores</span>
-                                <dd class="flex items-baseline mb-5 ">
+                </div>
-                                    <div class="text-6xl advance leading-8 font-extrabold text-gray-900">
+                <!-- Nodes -->
-                                        {{ nodes }}
+                <div class="tooltip item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
-                                    </div>
+                    <span class="tooltiptext">The total number of nodes on the grid. A node is a computer server 100% dedicated to the network.</span>
-                                </dd>
+                    <img class="mx-auto p-4 fade-image" src="images/V3-09.png" width="130" alt="">
-                                <dt class="text-2xl leading-8 uppercase font-medium text-gray-900 truncate">
+                    <div id="nodes" class="leading-none font-extrabold text-xl">1596</div>
-                                    freeflow nodes <br />deployed
+                    <span class="block text-md mt-2 font-normal capitalize">Nodes</span>
-                                </dt>
+                </div>
-                            </dl>
+                <!-- countries -->
-                        </div>
+                <div class="tooltip item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
-                    </div>
+                    <span class="tooltiptext">The total number of countries where at least one node is connected and operational.</span>
+                    <img class="mx-auto p-4 fade-image" src="images/V3-10.png" width="130" alt="">
+                    <div id="countries" class="leading-none font-extrabold text-xl">41</div>
+                    <span class="block text-md mt-2 font-normal capitalize">Countries</span>
+                </div>
+                <!-- farms -->
+                <div class="tooltip item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
+                    <span class="tooltiptext">The total number of farms on the grid. A farm is one or more nodes operated by the same entity / entities.</span>
+                    <img class="mx-auto p-4 fade-image" src="images/farm.png" width="130" alt="">
+                    <div id="farms" class="leading-none font-extrabold text-xl">900+</div>
+                    <span class="block text-md mt-2 font-normal capitalize">Farms</span>
                 </div>
             </div>
-            <div class=" overflow-hidden bg-no-repeat bg-center	bg-contain	text-center" style="{{styles}}">
+            <div class="mt-12 flex items-center justify-center gap-x-6 mb-24">
-                <div class="px-2 py-16">
+                <a href="#" class="rounded-xl bg-indigo-600 px-8 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Explore Grid Capacity</a>
-                    <div class="flex items-start">
+                <a href="#" class="text-sm/6 font-semibold text-gray-900">Learn more <span aria-hidden="true">→</span></a>
-                        <div class="ml-5 w-0 flex-1 pt-3">
-                            <dl>
-                                <dd class="flex items-baseline mb-5 ">
-                                    <div class="text-6xl advance leading-8 mx-auto font-extrabold text-gray-900">
-                                        {{ countries }}
-                                    </div>
-                                </dd>
-                                <dt class="text-2xl leading-8 uppercase font-medium text-gray-900 truncate">
-                                    countries <br />involved
-                                </dt>
-                            </dl>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class=" overflow-hidden">
-                <div class="px-2 py-16">
-                    <div class="flex items-start">
-                        <div class="flex-shrink-0">
-                            <img src="/images/capacity_icon.png" width="65" alt="">
-                        </div>
-                        <div class="ml-5 w-0 flex-1 pt-3">
-                            <dl>
-                                <dd class="flex items-baseline mb-5 ">
-                                    <div class="text-6xl advance leading-8 font-extrabold text-gray-900">
-                                        {{ capacity | round() }}TB
-                                    </div>
-                                </dd>
-                                <dt class="text-2xl leading-8 uppercase font-medium text-gray-900 truncate">
-                                    capacity <br />generated
-                                </dt>
-                            </dl>
-                        </div>
-                    </div>
-                </div>
             </div>
         </div>
     </div>
-</div>
+</section>
+
+<style>
+    dd {
+        display: inline-block;
+        margin: auto;
+        border-radius: 50%;
+        line-height: 100px;
+    }
+
+    .bg-green {
+        background-color: #70dfc9;
+    }
+
+    .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;
+    }
+
+ 
+
+/* Tooltip container */
+.tooltip {
+  position: relative;
+  display: inline-block;
+  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
+}
+
+/* Tooltip text */
+.tooltip .tooltiptext {
+  font-size: 14px;
+  visibility: hidden;
+  width: 250px;
+  background-color: black;
+  color: #fff;
+  text-align: center;
+  padding: 5px 10px;
+  border-radius: 4px;
+  font-weight: 200;
+ 
+  /* Position the tooltip text - see examples below! */
+  position: absolute;
+  z-index: 1;
+  bottom: -50px;
+  right: -60px;
+}
+
+/* Show the tooltip text when you mouse over the tooltip container */
+.tooltip:hover .tooltiptext {
+  visibility: visible;
+}
+
+@media (max-width: 480px) {
+    .tooltip .tooltiptext {
+        position: absolute;
+  z-index: 1;
+  bottom: -50px;
+  right: 0px !important;
+    }
+
+}
+
+@keyframes fade {
+    0%, 100% {
+        opacity: 0.5;
+    }
+    50% {
+        opacity: 1;
+    }
+    
+}
+
+.fade-image {
+    animation: fade 3s infinite;
+}
+
+</style>
+
+
+
+ 
+  
+
+    
+   

templates/shortcodes/grid_stats_expand.html

@@ -0,0 +1,82 @@
+{% set styles = "background-image: url('V3.png');" %}
+{% set data = load_data(url="https://gridproxy.grid.tf/stats?status=up", required=false, format="json") %}
+{% if data %}
+{% set capacity = (data.totalHru + data.totalSru) / 1024 / 1024 / 1024 / 1024 / 1024 %}
+{% set nodes = data.nodes %}
+  {% set countries = data.countries %}
+  {% set cores = data.totalCru %}
+{% endif %}
+
+{% if data %}
+<section class="px-2 h-auto bg-center lg:py-28 p-12 bg-cover bg-no-repeat" style="{{styles}}">
+    <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-4 lg:gap-8">
+                
+
+                <!-- capacity -->
+            <div class="flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4">
+                    <img class="mx-auto p-4" src="V3-08.png" width="150" alt="">
+                <div class="leading-none font-extrabold text-3xl">
+                    {{ capacity | round(precision=2) }}PB
+                    <span class="block text-lg mt-4 font-normal capitalize">capacity</span>
+                </div>
+            </div>
+                
+
+                <!-- Nodes -->
+            <div class="flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4">
+                    <img class="mx-auto p-4" src="V3-09.png" width="150" alt="">
+                <div class="leading-none font-extrabold text-3xl">
+                    {{ nodes }}
+                    <span class="block text-lg mt-4 font-normal capitalize">nodes</span>
+                </div>
+            </div>
+                
+                
+
+                <!-- countries -->
+            <div class="flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4">
+                    <img class="mx-auto p-4" src="V3-10.png" width="150" alt="">
+                <div class="leading-none font-extrabold text-3xl">
+                    {{ countries }}
+                    <span class="block text-lg mt-4 font-normal capitalize">countries</span>
+                </div>
+            </div>
+
+              <!-- cores -->
+            <div class="flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4">
+                   <img class="mx-auto p-4" src="V3-11.png" width="150" alt="">
+                <div class="leading-none font-extrabold text-3xl">
+                {{ cores | num_format }}
+                <span class="block text-lg mt-4 font-normal capitalize">cores</span>
+                </div>
+            </div>
+
+ 
+            </div>
+            
+        <button><a href="https://dashboard.grid.tf/#/tf-grid/node-statistics/">Explore Grid Capacity</a></button>
+        <button><a href="/host">Become a Host</a></button>
+        </div>
+    </div>
+</section>
+{% endif %}
+<style>
+    dd {
+        display: inline-block;
+        margin: auto;
+        border-radius: 50%;
+        line-height: 100px;
+    }
+
+    .bg-green {
+        background-color: #70dfc9;
+    }
+
+    .bg-pink {
+        background-color: #ea1ff7;
+    }
+</style>