edi dark

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_dark.png"
   socialLinks: { Github: "https://github.com/ourworldfreezone", Twitter: "https://twitter.com/threefold_io", Telegram: "https://t.me/threefoldnews"  }
 ---
 
@@ -56,5 +56,11 @@ cursor: pointer;
 
   }
 
+  .bg-dark {
+    background: rgb(15,15,15);
+    background: linear-gradient(0deg, rgba(15,15,15,1) 0%, rgba(21,22,22,1) 50%, rgba(15,15,15,1) 100%);
+  }
+
+
   </style>
   

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_dark.png"
   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

@@ -10,17 +10,21 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+
 /* Custom CSS for header partial */
 .backdrop-blur {
   -webkit-backdrop-filter: blur(40px);
 }
 
 * {
-  font-family: "CercoDEMO", sans-serif;
+  font-family: "Inter", sans-serif;
 }
 
 a {
-  font-family: "CercoDEMO", sans-serif;
+  font-family: "Inter", sans-serif;
 }
 
 .bg-semi-white {
@@ -97,7 +101,7 @@ img[src*="#tft_img"] {
   }
   p {
     @apply text-lg lg:text-xl leading-tight tracking-normal font-normal;
-    font-family: "CercoDEMO", sans-serif;
+    font-family: "Inter", sans-serif;
   }
   blockquote {
     @apply border-l-4 border-gray-400 mx-2 my-2 p-2;
@@ -404,3 +408,7 @@ header #menu button a{
   px-0
 }
 
+.bg-dark {
+  background: rgb(15,15,15);
+  background: radial-gradient(circle, rgba(15,15,15,1) 0%, rgb(12, 0, 30) 50%, rgba(15,15,15,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%);
+}

css/output.css

@@ -1796,7 +1796,7 @@ p {
 }
 
 p {
-  font-family: "CercoDEMO", sans-serif;
+  font-family: "Inter", sans-serif;
 }
 
 blockquote {
@@ -2542,7 +2542,7 @@ button {
 }
 
 .max-h-12 {
-  max-height: 3rem;
+  max-height: 3.5rem;
 }
 
 .max-h-80 {
@@ -4180,11 +4180,11 @@ button {
 }
 
 * {
-  font-family: "CercoDEMO", sans-serif;
+  font-family: "Inter", sans-serif;
 }
 
 a {
-  font-family: "CercoDEMO", sans-serif;
+  font-family: "Inter", sans-serif;
 }
 
 .bg-semi-white {

output.css

@@ -40,7 +40,7 @@ span.ge {
 
 pre,
 code {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-family: "Inter", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
 
 code {
@@ -1495,7 +1495,7 @@ p {
 }
 
 p {
-  font-family: "CercoDEMO", sans-serif;
+  font-family: "Inter", sans-serif;
 }
 
 blockquote {
@@ -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);
 }
@@ -4251,11 +4253,11 @@ details[open] > summary::after {
 }
 
 * {
-  font-family: "CercoDEMO", sans-serif;
+  font-family: "Inter", sans-serif;
 }
 
 a {
-  font-family: "CercoDEMO", sans-serif;
+  font-family: "Inter", sans-serif;
 }
 
 .bg-semi-white {

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

@@ -4,15 +4,46 @@ module.exports = {
   safelist: [
     {
       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)/,
-        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: [],
+      },
-}
+      fontFamily: {
+        sans: ['Inter', 'sans-serif'],
+      },
+    }, // End of extend
+  }, // **Added closing brace for theme here**
+  plugins: [
+    require('@tailwindcss/aspect-ratio'),
+  ],
+};

templates/_default/base.html

@@ -5,11 +5,19 @@
 
 <body>
 
-  <div id="content" class="py-12 md:py-16 lg:py-18 overflow-hidden">
+  <div id="content" class="overflow-hidden bg-dark">
     {% block content %}{% endblock %}
   </div>
     {% include "partials/footer.html" %}
   <script type="text/javascript" src="{{ get_url(path='js/custom.js')}}"></script>
 </body>
 
+<style>
+.bg-dark {
+  background: rgb(15,15,15);
+  background: radial-gradient(circle, rgba(15,15,15,1) 0%, rgb(12, 0, 30) 50%, rgba(15,15,15,1) 100%);
+}
+
+</style>
+
 </html>

templates/index.html

@@ -4,23 +4,7 @@
 <!-- home page template, has a banner and rows of page summaries -->
 
 {% include "partials/hero.html" %}
-
+{% include "partials/logos2.html" %}
-
+{% include "partials/simple_stats.html" %}
-
+{% include "partials/features.html" %}
-<div>
-    {% set page = get_page(path="home/index.md") %}
-    {{page.content | safe}}
-</div>
-
-{% include "partials/about1.html" %}
-
-{% include "partials/about.html" %}
-
-{% include "partials/feature.html" %}
-
-{% include "partials/benefits.html" %}
-
-{% include "partials/blogs.html" %}
-{% include "partials/presale.html" %}
-{% include "partials/faq.html" %}
 {% endblock content %}

templates/layouts/hero.html

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

templates/partials/about.html

@@ -1,5 +1,5 @@
-<div class="relative isolate overflow-hidden bg-white lg:py-24 py-16">
+<div class="relative isolate overflow-hidden bg-transparent lg:py-24 py-16">
-  <div class="mx-auto max-w-7xl px-6 bg-white">
+  <div class="mx-auto max-w-7xl px-6 bg-transparent">
     <div class="mx-auto max-w-2xl lg:mx-0">
       <h2 class="text-base font-semibold leading-8 text-blue-600">FEATURES</h2>
       <p class="mt-2 text-2xl font-bold tracking-tight text-black sm:text-4xl">🌍 Why Choose a Digital FreeZone</p>

templates/partials/features.html

@@ -0,0 +1,74 @@
+<div class="bg-transparent pb-24">
+    <div class="mx-auto max-w-7xl px-6 lg:max-w-7xl lg:px-8">
+        <div class="max-w-7xl lg:max-w-2xl text-left">
+            <h2 class="text-xl font-normal tracking-wide text-indigo-200">THREEFOLD DIFFERENCE</h2>
+            <p class="mt-4 text-pretty text-4xl font-semibold tracking-tight text-white sm:text-balance sm:text-5xl">A ground-up Approach</p>
+            <p class="mt-6 mb-4 text-lg max-w-2xl font-light text-gray-200">ThreeFold is not a protocol. We’ve developed foundational technology that runs directly on bare metal (the hardware). ThreeFold is likely the only active project with a truly scalable solution addressing the Internet and Cloud’s core bottlenecks: data, cloud, and network.</p>
+            <a href="#" class="text-sm font-semibold text-white">Learn more <span aria-hidden="true">→</span></a>
+        </div>
+        <div class="mt-10 grid grid-cols-1 sm:grid-cols-3 gap-6 sm:gap-x-8 sm:mt-16">
+            <!-- Card 1 -->
+            <div class="relative p-4 bg-white shadow-lg rounded-lg transform opacity-0 scale-95 transition-all duration-700 ease-out fade-in">
+                <img class="h-70 w-full object-cover object-center rounded-t-lg" src="images/security.png" alt="">
+                <div class="p-6">
+                    <h3 class="text-sm font-light text-indigo-600">SECURITY</h3>
+                    <p class="mt-2 text-lg font-medium tracking-tight text-gray-950">Unbreakable Data</p>
+                    <p class="mt-2 text-sm font-light text-gray-600">Data cannot be compromised and always remains private, owned by you. A scalable system, to the planetary level. Can be distributed and stored in ways which are at least 10x more efficient and orders of magnitude more secure and reliable.</p>
+                </div>
+            </div>
+            <!-- Card 2 -->
+            <div class="relative p-4 bg-white shadow-lg rounded-lg transform opacity-0 scale-95 transition-all duration-700 ease-out fade-in">
+                <img class="h-70 w-full object-cover object-center rounded-t-lg" src="images/efficiency.png" alt="">
+                <div class="p-6">
+                    <h3 class="text-sm font-light text-indigo-600">EFFICIENCY</h3>
+                    <p class="mt-2 text-lg font-medium tracking-tight text-gray-950">Autonomous Cloud</p>
+                    <p class="mt-2 text-sm font-light text-gray-600">Self-healing and self-driving cloud based on an efficient and secure operating system runs directly on the hardware. Can run any Web 2, Web 3, or AI workload at the edge of the Internet, with more scalability and reliability.</p>
+                </div>
+            </div>
+            <!-- Card 3 -->
+            <div class="relative p-4 bg-white shadow-lg rounded-lg transform opacity-0 scale-95 transition-all duration-700 ease-out fade-in">
+                <img class="h-70 w-full object-cover object-center rounded-t-lg" src="images/map.png" alt="">
+                <div class="p-6">
+                    <h3 class="text-sm font-light text-indigo-600">PRIVACY</h3>
+                    <p class="mt-2 text-lg font-medium tracking-tight text-gray-950">P2P Network</p>
+                    <p class="mt-2 text-sm font-light text-gray-600">End-to-end encrypted overlay network, always looking for the shortest possible path between participants. Logical Internet address securely linked to a private key. Unlimited scale and performance optimizations.</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<style>
+@keyframes fadeIn {
+    0% {
+        opacity: 0;
+        transform: scale(0.95);
+    }
+    100% {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+.fade-in {
+    animation: fadeIn 1s forwards;
+}
+
+.fade-in:nth-child(1) {
+    animation-delay: 0.3s;
+}
+
+.fade-in:nth-child(2) {
+    animation-delay: 0.5s;
+}
+
+.fade-in:nth-child(3) {
+    animation-delay: 0.7s;
+}
+
+/* Hover animation */
+.relative:hover {
+    transform: scale(1.0);
+    transition: transform 0.3s ease-in-out;
+}
+</style>

templates/partials/footer.html

@@ -1,12 +1,12 @@
 {%- set section = get_section(path="footer/_index.md") %}
 {%- set logoPath = section.extra.logoPath %}
 
-<div class="border-t border-gray-200"></div>
+<div class="bg-dark"></div>
 <footer>
-  <div class="max-w-screen-2xl mx-auto lg:py-4 py-4 sm:px-6 lg:px-8">
+  <div class="max-w-screen-2xl bg-dark 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_dark.png" alt="logo" />
       </div>
       <p data-v-14efe4a7="" class="text-base leading-6 text-gray-400 mb-4">
         © 2024 OurWorld Holdings, All rights reserved.
@@ -16,3 +16,10 @@
       </p>
     </div>
 </footer>
+
+<style>
+  .bg-dark {
+    background: rgb(15,15,15);
+    background: linear-gradient(0deg, rgba(15,15,15,1) 0%, rgba(21,22,22,1) 50%, rgba(15,15,15,1) 100%);
+  }
+</style>

templates/partials/header.html

@@ -10,22 +10,22 @@
 {% 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 w-screen' ~ header_class}}">
-            <div class="relative z-50 shadow">
+            <div class="relative z-50">
-            <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 class="mx-auto flex z-50 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">
-                    <button id="hamburger-btn" class="menu-mobile inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2">
+                    <button id="hamburger-btn" class="menu-mobile inline-flex items-center justify-center p-2 rounded-md text-white hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2">
                         <!-- Heroicon name: menu -->
                         <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                         </svg>
                     </button>
-                <button id="close-hamburger-btn" class="menu-mobile lg:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2">
+                <button id="close-hamburger-btn" class="menu-mobile lg:hidden inline-flex items-center justify-center p-2 rounded-md text-white hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2">
                     <!-- Heroicon name: x -->
                     <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
@@ -36,7 +36,7 @@
                     <nav class="flex space-x-10">    
                     {% for page in section.pages %}
                     {% if page.extra.menu %} {% continue %} {% endif %}
-                        <a href="{{page.permalink}}" class="text-lg leading-6 text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
+                        <a href="{{page.permalink}}" class="text-lg leading-6 text-white focus:outline-none focus:text-white transition ease-in-out duration-150 mt-0">
                             {{page.title}}test
                         </a>
                         <div class="relative">
@@ -46,7 +46,7 @@
                         {% if subsection == "footer/_index.md" %} {% continue %} {% endif %}                        
                         {% set button_id = subsection ~ "-menu-btn" | slugify %}
                         <div class="relative">
-                        <button type="button" id="{{button_id}}" class="nav_btn text-gray-900 group inline-flex items-center space-x-2 text-lg leading-6 hover:text-blue-300 focus:outline-none transition ease-in-out duration-150">
+                        <button type="button" id="{{button_id}}" class="nav_btn text-white group inline-flex items-center space-x-2 text-lg leading-6 hover:text-blue-300 focus:outline-none transition ease-in-out duration-150">
                             <span>{{ subsection }}</span>
                             <div class="-rotate-90 transition-transform"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></div>
                         </button>
@@ -61,7 +61,7 @@
         {% set submenu_id = subsection ~ "-menu" | slugify %}
     <nav>
         <div id="{{submenu_id}}" class="mt-16 sm:mt-0 md:mt-0 lg:mt-0 xl:mt-0 2xl:mt-0 z-30 absolute inset-x-0 transform shadow-lg lg:backdrop-blur xl:backdrop-blur transition duration-200 ease-in opacity-0 -translate-y-1 hidden">
-            <div class="bg-white lg:bg-semi-white md:bg-semi-white xl:bg-semi-white">
+            <div class="bg-transparent lg:bg-semi-white md:bg-semi-white xl:bg-semi-white">
                 <div class="mx-8 lg:mx-20 xl:mx-20 px-6 py-4 sm:p-6 md:p-8 lg:p-12 xl:p-12">
                 {{subsection | safe }}
                 </div>
@@ -85,14 +85,14 @@
             -->
         <div id="hamburger" class="hidden fixed mt-16 z-20 top-0 inset-x-0 transition transform origin-top-right lg:hidden">
             <div>
-                <div class="shadow-xs h-screen bg-white divide-y-2 divide-gray-50">
+                <div class="shadow-xs h-screen bg-transparent divide-y-2 divide-gray-50">
                     <div class="pb-6 sm:px-12 md:px-16 lg:px-20 space-y-6 sm:space-y-8 sm:pb-8 max-h-screen overflow-y-auto">
     
                         <nav class="flex flex-col justify-around pb-12">
                         {% for page in section.pages %}
                             {% if page.relative_path == "home/index.md" %} {% continue %} {% endif %}
                             {% if page.extra.menu %} {% continue %} {% endif %}
-                            <a href="{{page.permalink}}" class="text-lg px-8 py-3 leading-6 font-normal text-gray-900 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
+                            <a href="{{page.permalink}}" class="text-lg px-8 py-3 leading-6 font-normal text-white hover:text-white focus:outline-none focus:text-white transition ease-in-out duration-150">
                                 {{page.title}}
                             </a>
                             <hr/>
@@ -102,7 +102,7 @@
                             {% set button_id = subsection ~ "-mobile-menu-btn" | slugify %}
                             {% set menu_id = subsection ~ "-mobile-menu" | slugify %}
 
-                            <button type="button" id="{{button_id}}" class="menu-mobile flex px-8 py-3 items-start text-left text-gray-900 group lg:inline-flex space-x-2 text-lg leading-6 font-normal hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
+                            <button type="button" id="{{button_id}}" class="menu-mobile flex px-8 py-3 items-start text-left text-white group lg:inline-flex space-x-2 text-lg leading-6 font-normal hover:text-white transition ease-in-out duration-150">
                                 <span>{{ subsection }}</span>
                                 <div class="-rotate-90 transition-transform"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></div>
                             </button>
@@ -118,7 +118,7 @@
                         <div class="mx-8 mt-8">
                             <div class="space-y-8 lg:max-w-lg xl:max-w-lg lg:mr-8 lg:mb-8 xl:col-span-1">
                               <img class="w-48 h-auto" src="{{logo_path}}" alt="Company name" />
-                              <p class="text-gray-500 text-base leading-6 ">
+                              <p class="text-white text-base leading-6 ">
                                 {{section.description}}
                               </p>
                           </div>

templates/partials/header_custom.html

@@ -1,29 +1,19 @@
-<!--
+<header id="header-container" class="bg-inherit">
-  Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
+    <div class="z-10 bg-dark1 w-screen">
-  Read the documentation to get started: https://tailwindui.com/documentation
+        <div class="relative z-50">
---><!-- This example requires Tailwind CSS v1.4.0+ -->
+            <div class="mx-auto flex z-50 bg-transparent justify-between items-center pl-6 pr-2 md:pl-0 md:pr-0 lg:py-5 sm:px-8 md:px-12 py-2 lg:px-20 lg:justify-start lg:space-x-20">
-
-{%- set section = get_section(path="header/_index.md") %}
-{% set header_items = section.content | safe | split(pat="<li>") %}
-
-<header id="header-container">
-    <div class="z-10 bg-white fixed w-screen">
-        <div class="relative z-50 shadow">
-        <div class="mx-auto flex z-50 shadow justify-between items-center pl-6 pr-2 md:pl-0 md:pr-0 lg:py-5 sm:px-8 md:px-12 py-2 lg:px-20 lg:justify-start lg:space-x-20">
                 <div>
                     <a href="/" class="flex">
                         <img class="w-48 h-auto sm:w-15" src="{{section.extra.logoPath}}" alt="ODFZ Logo" />
                     </a>
                 </div>
                 <div class="-mr-2 -my-2 lg:hidden">
-                <button id="hamburger-btn" class="menu-mobile inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2">
+                    <button id="hamburger-btn" class="menu-mobile inline-flex items-center justify-center p-2 rounded-md text-white hover:text-gray-200 hover:bg-gray-800 focus:outline-none transition duration-150 ease-in-out my-2">
-                    <!-- Heroicon name: menu -->
                         <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                         </svg>
                     </button>
-            <button id="close-hamburger-btn" class="menu-mobile hidden inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2">
+                    <button id="close-hamburger-btn" class="menu-mobile hidden inline-flex items-center justify-center p-2 rounded-md text-white hover:text-gray-500 hover:bg-gray-700 focus:outline-none transition duration-150 ease-in-out my-2">
-                <!-- Heroicon name: x -->
                         <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                         </svg>
@@ -31,7 +21,6 @@
                 </div>
                 <div class="hidden lg:flex-1 lg:flex lg:items-center lg:justify-end lg:space-x-12">
                     <nav class="flex space-x-10">
-
                         {% for header_item in header_items %}
                         {% if not loop.first %}
                             {% set header_arr = header_item | split(pat="</li>") %}
@@ -39,105 +28,50 @@
                             {% if '<a' in header_label %}
                                 {% set link_label = header_label | striptags %}
                                 {% set link_path = header_label | split(pat="%22") | safe %}
-        <a href="{{link_path[1]}}" class="text-lg leading-6 font-medium text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
+                                <a href="{{link_path[1]}}" class="text-lg leading-6 font-medium text-white hover:text-gray-300 transition ease-in-out duration-150 mt-0">
                                     {{link_label}}
                                 </a>
                             {% else %}
                                 <div class="relative">
                                     {% set button_id = header_label ~ "-menu-btn" | slugify %}
-        <button  id="{{button_id}}" class="nav_btn font-medium text-gray-900 group inline-flex items-center space-x-2 text-lg leading-6 hover:text-blue-300 focus:outline-none transition ease-in-out duration-150">
+                                    <button id="{{button_id}}" class="nav_btn font-medium text-white group inline-flex items-center space-x-2 text-lg leading-6 hover:text-blue-300 focus:outline-none transition ease-in-out duration-150">
                                         <span>{{ header_label }}</span>
-            <div class="-rotate-90 transition-transform"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></div>
+                                        <div class="-rotate-90 transition-transform">
+                                            <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#ffffff"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg>
+                                        </div>
                                     </button>
                                 </div>
-
                             {% endif %}  
                         {% endif %}
                         {% endfor %}
                     </nav>
+                </div>
+            </div>
+        </div>
         
-
-            </div>
-        </div>
-        </div>
         {% for header_item in header_items %}
         {% if not loop.first %}
             {% set header_arr = header_item | split(pat="</li>") %}
             {% set header_label = header_arr[0] %}
             {% set header_menu = header_arr[1] %}
             {% set menu_id = header_label ~ "-menu" | slugify %}
-
             <nav>
-    <div id="{{menu_id}}" class="mt-16 sm:mt-0 md:mt-0 lg:mt-0 xl:mt-0 2xl:mt-0 z-30 absolute inset-x-0 transform shadow-lg lg:backdrop-blur xl:backdrop-blur transition duration-200 ease-in opacity-0 -translate-y-1 hidden">
+                <div id="{{menu_id}}" class="mt-16 sm:mt-0 md:mt-0 lg:mt-0 xl:mt-0 2xl:mt-0 z-30 absolute inset-x-0 transform lg:backdrop-blur xl:backdrop-blur transition duration-200 ease-in opacity-0 -translate-y-1 hidden">
-        <div class="bg-white lg:bg-semi-white md:bg-semi-white xl:bg-semi-white">
+                    <div class="bg-gray-800 lg:bg-gray-900 md:bg-gray-900 xl:bg-gray-900">
-            <div class="mx-8 lg:mx-20 xl:mx-20 px-6 py-4 sm:p-6 md:p-8 lg:p-12 xl:p-12">
+                        <div class="mx-8 lg:mx-20 xl:mx-20 px-6 py-4 sm:p-6 md:p-8 lg:p-12 xl:p-12 text-white">
                             {{header_menu | safe }}
                         </div>
                     </div>            
                 </div>
             </nav>
-
-
         {% endif %}
         {% endfor %}
-
-    
-        <!--
-        Mobile menu, show/hide based on mobile menu state.
-    
-        Entering: "duration-200 ease-out"
-            From: "opacity-0 scale-95"
-            To: "opacity-100 scale-100"
-        Leaving: "duration-100 ease-in"
-            From: "opacity-100 scale-100"
-            To: "opacity-0 scale-95"
-        -->
-    <div id="hamburger" class="hidden fixed mt-28 z-20 top-0 inset-x-0 transition transform origin-top-right lg:hidden">
-            <div class="shadow-xs h-screen bg-white divide-y-2 divide-gray-50">
-                <div class="pb-6 sm:px-12 md:px-16 lg:px-20 space-y-6 sm:space-y-8 sm:pb-8 max-h-screen overflow-y-auto">
-                    <nav class="flex flex-col justify-around pb-12 pt-2">
-                    {% for header_item in header_items %}
-                        {% if not loop.first %}
-                            {% set header_arr = header_item | split(pat="</li>") %}
-                            {% set header_label = header_arr[0] %}
-                            {% if '<a' in header_label %}
-                                {% set link_label = header_label | striptags %}
-                                {% set link_path = header_label | split(pat="%22") | safe%}
-                                <a href="{{link_path[1]}}" class="text-lg px-8 py-3 leading-6 font-normal text-gray-900 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
-                                    {{link_label}}
-                                </a>
-                            {% else %}
-                                {% set button_id = header_label ~ "-mobile-menu-btn" | slugify %}
-                                    <button type="button" id="{{button_id}}" class="menu-mobile my-0 px-8 py-3 items-start text-left text-gray-900 group inline-flex space-x-2 text-lg leading-6 font-normal hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
-                                        <span>{{ header_label }}</span>
-                                        <div class="-rotate-90 transition-transform"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></div>
-                                    </button>
-                                    {% set menu_id = header_label ~ "-mobile-menu" | slugify %}
-                                    <div id="{{menu_id}}" class="z-50 leading-3 pl-9 pt-6 pb-4 inset-x-0 text-sm transform duration-200 ease-in opacity-0 -translate-y-1 hidden">
-                                        {{ header_arr[1] | safe }}
     </div>
-                    
-                            {% endif %}
-                            <hr/>
-                        {% endif %}
-                    {% endfor %}
-                    {% if "footer/_index.md" in subsections_str %}
-                    {% set section = get_section(path="footer/_index.md")%}
-                    {% set logoPath = section.extra.logoPath %}
-                    <div class="mx-8 my-2">
-                        {# <div class="space-y-8 lg:max-w-lg xl:max-w-lg lg:mr-8 lg:mb-8 xl:col-span-1">
-                          <img class="w-48 h-auto" src="{{logoPath}}" alt="Company name" />
-                          <p class="text-gray-500 text-base leading-6 ">
-                            {{section.description}}
-                          </p>
-                      </div> #}
-                    {% endif %}
-                    </nav>                    
-                </div>
-            
-        </div>
-        
-    </div>
-
-
 </header>
+
+<style>
+    .bg-dark1 {
+      background: rgb(15,15,15,1);
+      
+    }
+  </style>

templates/partials/hero.html

@@ -1,56 +1,39 @@
-<div class="relative isolate overflow-hidden h-screen bg-white">
+<div class="relative isolate overflow-hidden bg-transparent">
-  <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="px-6 pt-32 pb-24 sm:px-6 lg:px-8">
-    <div class="text-center">
+    <div class="mx-auto max-w-4xl text-center">
-      <img src="./images/logo.svg"
+      <h2 class="text-balance lg:text-6xl font-normal tracking-tight text-white text-5xl fade-in">A Self-Healing Data, Network and Cloud Platform</h2>
-     alt="Hero Image"
+      <p class="mx-auto mt-6 max-w-3xl text-pretty text-xl font-light text-gray-200 fade-in">Imagine a system built to scale to a planetary level, seamlessly compatible with AI, Cloud, Web2, Web3, and Edge IT workloads. A system that is resilient to unforeseen events, provides 100% uptime, and enables any machine and human to communicate over the shortest, most direct path possible.</p>
-     width="210"
+      <p class="mx-auto mt-6 max-w-3xl text-pretty text-xl font-light text-gray-200 fade-in">That's <span class="font-semibold">ThreeFold.</span></p>
-     height="210"
+      <div class="mt-12 flex items-center justify-center gap-x-6">
-     class="mx-auto rounded-md">
+        <a href="#" class="rounded-md bg-blue-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Get started</a>
-
+        <a href="#" class="text-sm/6 font-semibold text-white">Learn more <span aria-hidden="true">→</span></a>
-      <p class="text-base font-semibold leading-7 text-blue-600">WELCOME TO</p>
-        <div class="max-w-4xl">
-         <h1 class="mt-4 text-3xl lg:text-5xl font-bold leading-8 tracking-tight text-black mb-4">OurWorld Digital Freezone</h1>
-        </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 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>
 </div>
 
 <style>
-  html, body {
+  /* Define the fade-in animation */
-    margin: 0;
+  @keyframes fadeIn {
-    height: 100%;
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
   }
 
-  .relative.isolate.overflow-hidden.h-screen {
+  /* Apply the fade-in animation to elements with the 'fade-in' class */
-    height: 100vh;
+  .fade-in {
-  }
+    animation: fadeIn 4s ease-in-out forwards; /* Adjust the duration (2s) to make it slower or faster */
-
-
-  /* Custom styles for smaller font, margin adjustments, and line spacing for mobile */
-  @media (max-width: 640px) {
-    h1 {
-      font-size: 2rem; /* Smaller font for mobile */
   }
 
+  /* Optional: Delay the animation for a more staggered effect */
   h2 {
-      font-size: 1.25rem; /* Smaller font for mobile */
+    animation-delay: 0.5s; /* Delay for header */
   }
 
   p {
-      font-size: 1rem; /* Smaller font for mobile */
+    animation-delay: 1s; /* Delay for paragraphs */
-      margin-left: 1rem; /* Margin left for mobile */
-      margin-right: 1rem; /* Margin right for mobile */
-      line-height: 1.5; /* Smaller line spacing */
-    }
   }
 </style>

templates/partials/logos.html

@@ -1,4 +1,4 @@
-<div class="bg-white py-4 lg:py-10 fixed w-screen">
+<div class="bg-white my-24 fixed w-screen">
     <div class="mx-auto max-w-7xl px-6 lg:px-8">
       <div class="grid grid-cols-2 gap-8 sm:grid-cols-3 lg:grid-cols-6 items-center">
         <img class="max-h-12 w-full object-contain" src="images/brand1.png" alt="Brand 1">

templates/partials/logos2.html

@@ -0,0 +1,42 @@
+<div class="bg-transparent lg:py-12 overflow-hidden">
+    <div class="flex space-x-8 animate-scroll">
+        <!-- First set of logos -->
+        <img class="object-contain" src="images/logos/sikana.png" alt="Transistor" width="158" height="48">
+        <img class="object-contain" src="images/logos/ict.png" alt="Reform" width="158" height="48">
+        <img class="object-contain" src="images/logos/znz.png" alt="Tuple" width="158" height="48">
+        <img class="object-contain" src="images/logos/social.png" alt="SavvyCal" width="158" height="48">
+        <img class="object-contain" src="images/logos/holo.png" alt="Statamic" width="158" height="48">
+        <img class=" object-contain" src="images/logos/freezone.png" alt="Statamic" width="158" height="48">
+        <img class=" object-contain" src="images/logos/vverse.png" alt="Statamic" width="158" height="48">
+        <img class="object-contain" src="images/logos/veverse.png" alt="Statamic" width="158" height="48">
+        <img class="object-contain" src="images/logos/zictia.png" alt="Statamic" width="158" height="48">
+
+                <!-- First set of logos -->
+                <img class="object-contain" src="images/logos/sikana.png" alt="Transistor" width="158" height="48">
+                <img class="object-contain" src="images/logos/ict.png" alt="Reform" width="158" height="48">
+                <img class="object-contain" src="images/logos/znz.png" alt="Tuple" width="158" height="48">
+                <img class="object-contain" src="images/logos/social.png" alt="SavvyCal" width="158" height="48">
+                <img class="object-contain" src="images/logos/holo.png" alt="Statamic" width="158" height="48">
+                <img class=" object-contain" src="images/logos/freezone.png" alt="Statamic" width="158" height="48">
+                <img class=" object-contain" src="images/logos/vverse.png" alt="Statamic" width="158" height="48">
+                <img class="object-contain" src="images/logos/veverse.png" alt="Statamic" width="158" height="48">
+                <img class="object-contain" src="images/logos/zictia.png" alt="Statamic" width="158" height="48">
+
+    </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 30s linear infinite;
+    gap: 2rem;
+    width: max-content;
+}
+</style>

templates/partials/simple_stats.html

@@ -0,0 +1,72 @@
+<div class="bg-transparent py-24 sm:py-32">
+    <div class="mx-auto max-w-7xl px-6 lg:px-8">
+      <div class="mx-auto max-w-2xl lg:max-w-none">
+        <div class="text-center">
+          <h2 class="fade-in text-balance text-4xl font-normal tracking-tight text-white sm:text-5xl">Proven by a Global Community</h2>
+          <p class="fade-in mt-4 max-w-4xl mx-auto text-lg/8 font-light text-gray-300">With ThreeFold, individuals, organizations, communities, countries, and network states deploy their own sovereign infrastructure. The ThreeFold Grid has been live and operational since 2017.</p>
+          <p class="fade-in mt-4 max-w-4xl mx-auto text-lg/8 font-medium text-gray-300">Version 3.14 is live on Mainnet.</p>
+        </div>
+        <dl class="mt-16 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6 lg:gap-8 overflow-hidden rounded-2xl text-center">
+          <div class="fade-in flex flex-col bg-white/5 p-8 rounded-lg">
+            <dt class="text-sm/6 mt-1 font-light text-gray-300">CAPACITY</dt>
+            <dd class="order-first text-3xl font-semibold tracking-tight text-white" id="capacity">19,10 PB</dd>
+          </div>
+          <div class="fade-in flex flex-col bg-white/5 p-8 rounded-lg">
+            <dt class="text-sm/6 font-light mt-1 text-gray-300">CORES</dt>
+            <dd class="order-first text-3xl font-semibold tracking-tight text-white" id="cores">46,934</dd>
+          </div>
+          <div class="fade-in flex flex-col bg-white/5 p-8 rounded-lg">
+            <dt class="text-sm/6 font-light mt-1 text-gray-300">NODES</dt>
+            <dd class="order-first text-3xl font-semibold tracking-tight text-white" id="nodes">1596</dd>
+          </div>
+          <div class="fade-in flex flex-col bg-white/5 p-8 rounded-lg">
+            <dt class="text-sm/6 font-light mt-1 text-gray-300">COUNTRIES</dt>
+            <dd class="order-first text-3xl font-semibold tracking-tight text-white" id="countries">40+</dd>
+          </div>
+          <div class="fade-in flex flex-col bg-white/5 p-8 rounded-lg">
+            <dt class="text-sm/6 font-light mt-1 text-gray-300">FARMS</dt>
+            <dd class="order-first text-3xl font-semibold tracking-tight text-white" id="farms">900+</dd>
+          </div>
+        </dl>
+      </div>
+    </div>
+  </div>
+  
+  <script>
+    document.addEventListener('DOMContentLoaded', function () {
+      // Initialize the countUp for each of the numbers
+      new CountUp('capacity', 0, 1910, 0, 2.5).start();
+      new CountUp('cores', 0, 46934, 0, 2.5).start();
+      new CountUp('nodes', 0, 1596, 0, 2.5).start();
+      new CountUp('countries', 0, 40, 0, 2.5).start();
+      new CountUp('farms', 0, 900, 0, 2.5).start();
+    });
+  </script>
+  
+
+<style>
+    /* Define the fade-in animation */
+    @keyframes fadeIn {
+      0% {
+        opacity: 0;
+      }
+      100% {
+        opacity: 1;
+      }
+    }
+  
+    /* Apply the fade-in animation to elements with the 'fade-in' class */
+    .fade-in {
+      animation: fadeIn 20s ease-in-out forwards; /* Adjust the duration (2s) to make it slower or faster */
+    }
+  
+    /* Optional: Delay the animation for a more staggered effect */
+    h2 {
+      animation-delay: 0.5s; /* Delay for header */
+    }
+  
+    p {
+      animation-delay: 1s; /* Delay for paragraphs */
+    }
+  </style>
+  

templates/partials/slider.html

@@ -0,0 +1,88 @@
+<!--
+  This example requires some changes to your config:
+  
+  ```
+  // tailwind.config.js
+  module.exports = {
+    // ...
+    plugins: [
+      // ...
+      require('@tailwindcss/aspect-ratio'),
+    ],
+  }
+  ```
+-->
+<div class="bg-white">
+    <section aria-labelledby="features-heading" class="mx-auto max-w-7xl py-32 sm:px-2 lg:px-8">
+      <div class="mx-auto max-w-2xl px-4 lg:max-w-none lg:px-0">
+        <div class="max-w-3xl">
+          <h2 id="features-heading" class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">Collaboration, Innovation, Evolution</h2>
+          <p class="mt-4 font-light text-gray-700">ThreeFold’s technological infrastructure will empower many projects and initiatives across sectors. Here are two key projects.</p>
+        </div>
+  
+        <div class="mt-4">
+          <div class="-mx-4 flex overflow-x-auto sm:mx-0">
+            <div class="flex-auto border-b border-gray-200 px-4 sm:px-0">
+              <div class="-mb-px flex space-x-10" aria-orientation="horizontal" role="tablist">
+                <!-- Current: "border-indigo-500 text-indigo-600", Default: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700" -->
+                <button id="features-tab-2" class="whitespace-nowrap border-b-2 border-transparent bg-transparent py-6 text-lg font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700" aria-controls="features-panel-2" role="tab" type="button">Material</button>
+                <button id="features-tab-3" class="whitespace-nowrap border-b-2 border-transparent py-6 bg-transparent text-lg font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700" aria-controls="features-panel-3" role="tab" type="button">Considerations</button>
+              </div>
+            </div>
+          </div>
+  
+          <div id="features-panel-2" class="space-y-16 pt-10 lg:pt-16" aria-labelledby="features-tab-2" role="tabpanel" tabindex="0">
+            <div class="flex flex-col-reverse lg:grid lg:grid-cols-12 lg:gap-x-8">
+              <div class="mt-6 lg:col-span-5 lg:mt-0">
+                <h3 class="text-lg font-medium text-gray-900">Natural wood options</h3>
+                <p class="mt-2 text-sm text-gray-500">Organize has options for rich walnut and bright maple base materials. Accent your desk with a contrasting material, or match similar woods for a calm and cohesive look. Every base is hand sanded and finished.</p>
+              </div>
+              <div class="lg:col-span-7">
+                <div class="aspect-h-1 aspect-w-2 overflow-hidden rounded-lg bg-gray-100 sm:aspect-h-2 sm:aspect-w-5">
+                  <img src="https://tailwindui.com/plus/img/ecommerce-images/product-feature-06-detail-02.jpg" alt="Walnut organizer base with pen, sticky note, phone, and bin trays, next to modular drink coaster attachment." class="object-cover object-center">
+                </div>
+              </div>
+            </div>
+          </div>
+          <div id="features-panel-3" class="space-y-16 pt-10 lg:pt-16" aria-labelledby="features-tab-3" role="tabpanel" tabindex="0">
+            <div class="flex flex-col-reverse lg:grid lg:grid-cols-12 lg:gap-x-8">
+              <div class="mt-6 lg:col-span-5 lg:mt-0">
+                <h3 class="text-lg font-medium text-gray-900">Helpful around the home</h3>
+                <p class="mt-2 text-sm text-gray-500">Our customers use Organize throughout the house to bring efficiency to many daily routines. Enjoy Organize in your workspace, kitchen, living room, entry way, garage, and more. We can&#039;t wait to see how you&#039;ll use it!</p>
+              </div>
+              <div class="lg:col-span-7">
+                <div class="aspect-h-1 aspect-w-2 overflow-hidden rounded-lg bg-gray-100 sm:aspect-h-2 sm:aspect-w-5">
+                  <img src="https://tailwindui.com/plus/img/ecommerce-images/product-feature-06-detail-03.jpg" alt="Walnut organizer base with white polycarbonate trays in the kitchen with various kitchen utensils." class="object-cover object-center">
+                </div>
+              </div>
+            </div>
+        </div>
+      </div>
+    </section>
+  </div>
+  
+  <script>
+    document.addEventListener("DOMContentLoaded", function () {
+      const tabs = document.querySelectorAll('[role="tab"]');
+      const tabPanels = document.querySelectorAll('[role="tabpanel"]');
+  
+      tabs.forEach(tab => {
+        tab.addEventListener("click", () => {
+          // Remove active classes from all tabs and panels
+          tabs.forEach(t => {
+            t.classList.remove("border-indigo-500", "text-indigo-600");
+            t.classList.add("border-transparent", "text-gray-500", "hover:border-gray-300", "hover:text-gray-700");
+          });
+          tabPanels.forEach(panel => panel.classList.add("hidden"));
+  
+          // Add active classes to clicked tab and associated panel
+          tab.classList.add("border-indigo-500", "text-indigo-600");
+          tab.classList.remove("border-transparent", "text-gray-500", "hover:border-gray-300", "hover:text-gray-700");
+  
+          const panelId = tab.getAttribute("aria-controls");
+          document.getElementById(panelId).classList.remove("hidden");
+        });
+      });
+    });
+  </script>
+  

templates/shortcodes/grid_stats.html

@@ -1,78 +1,156 @@
-{% 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-transparent 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) %}
+        <div class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80" aria-hidden="true">
-{% set nodes = data.nodes %}
+            <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>
-{% set countries = data.countries %}
+          </div>
-{% endif %}
+        <h2 class="text-xl text-center font-normal tracking-wide text-indigo-600">LIVE AND OPERATIONAL</h2>
+        <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>
+        <p class="mt-6 text-lg text-center font-light text-gray-700">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>
+    </div>
+    <div class="relative mx-auto mt-10">
+        <div class="text-center rounded lg:px-6 mx-auto">
+            <div class="items block lg:flex lg:flex-wrap justify-center items-center animate-pulse">
+                <!-- capacity -->
+                <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 amount of storage (SSD, HDD, & RAM) on the grid. 1 petabyte equals roughly 1 million gigabytes.</span>
+                    <img class="mx-auto p-4 fade-image" src="images/V3-081.png" width="130" alt="">
+                    <div id="capacity" class="leading-none font-extrabold text-xl">19.10 PB</div>
+                    <span class="block text-md mt-1 font-normal capitalize">Capacity</span>
+                </div>
+                <!-- cores -->
+                <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 Central Processing Unit cores (compute power) available on the grid.</span>
+                    <img class="mx-auto p-4 fade-image" src="images/V3-112.png" width="130" alt="">
+                    <div id="cores" class="leading-none font-extrabold text-xl">46,934</div>
+                    <span class="block text-md mt-2 font-normal capitalize">Cores</span>
+                </div>
+                <!-- Nodes -->
+                <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 nodes on the grid. A node is a computer server 100% dedicated to the network.</span>
+                    <img class="mx-auto p-4 fade-image" src="images/V3-091.png" width="130" alt="">
+                    <div id="nodes" class="leading-none font-extrabold text-xl">1596</div>
+                    <span class="block text-md mt-2 font-normal capitalize">Nodes</span>
+                </div>
+                <!-- countries -->
+                <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 countries where at least one node is connected and operational.</span>
+                    <img class="mx-auto p-4 fade-image" src="images/V3-102.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/v3-131.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="mt-12 flex items-center justify-center gap-x-6 mb-24">
+                <a href="#" class="rounded-xl bg-indigo-600 px-5 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>
+                <a href="#" class="text-sm/6 font-semibold text-gray-900">Learn more <span aria-hidden="true">→</span></a>
+            </div>
+            <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>
+</section>
+
 <style>
-    .bg-map {
+    dd {
-        background-color: #EAE8E3;
+        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.7;
+    }
+    50% {
+        opacity: 1;
+    }
+    
+}
+
+.fade-image {
+    animation: fade 3s infinite;
+}
+
 </style>
-<div class="bg-map pb-24">
+
-    <div class="relative max-w-7xl mx-auto">
+
-        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 ">
+
-            <div class=" overflow-hidden">
+ 
-                <div class="px-2 py-16">
+  
-                    <div class="flex items-start">
+
-                        <div class="flex-shrink-0">
+    
-                            <img src="/images/node_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">
-                                        {{ nodes }}
-                                    </div>
-                                </dd>
-                                <dt class="text-2xl leading-8 uppercase font-medium text-gray-900 truncate">
-                                    freeflow nodes <br />deployed
-                                </dt>
-                            </dl>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class=" overflow-hidden bg-no-repeat bg-center	bg-contain	text-center" style="{{styles}}">
-                <div class="px-2 py-16">
-                    <div class="flex items-start">
-                        <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>

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>