update

content/host/index.md

@@ -25,7 +25,7 @@ Regardless of technical knowledge, anyone can now become an Internet and cloud s
 
 <br>
 
-<button class="green">[Get A Node](/getnode)</button>
+<button class="green">[Get A Node](https://marketplace.3node.global/index.php)</button>
 <button class="blue_b">[Manual](https://manual.grid.tf/)</button>
 
 {% end %}

templates/index.html

@@ -5,6 +5,7 @@
 {% include "partials/home/banner.html" %}
 {% include "partials/home/grid_stats.html" %}
 {% include "partials/home/features.html" %}
+{% include "partials/home/web4.html" %}
 {% include "partials/home/cta.html" %}
 
 {% endblock content %}

templates/partials/header.html

@@ -107,7 +107,7 @@
                       </a>
                     </li> 
                   </ul> #}
-                    <a href="/getnode" class=" rounded-2xl bg-white px-4 py-1 text-sm font-semibold text-black shadow-sm hover:bg-gray-300 hover:text-gray-800">Get 3Nodes
+                    <a href="https://marketplace.3node.global/index.php?dispatch=companies.catalog" target="_blank" class=" rounded-2xl bg-white px-4 py-1 text-sm font-semibold text-black shadow-sm hover:bg-gray-300 hover:text-gray-800">Get 3Nodes
                     </a>
                 </div>
               </div>

templates/partials/home/web4.html

@@ -0,0 +1,61 @@
+<div class="bg-transparent relative isolate overflow-hidden py-24 mb-12">
+    <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-3xl font-bold tracking-tight text-white sm:text-4xl">WEB 4</h2>
+          <h2 class="fade-in text-balance text-4xl font-normal tracking-tight text-white sm:text-5xl">The Next Evolution of the Internet</h2>
+          <p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">Web 4 is the natural progression of the Internet, where humans and artificial intelligence work together to create a new paradigm designed to promote planetary well-being and ensure equal opportunities for all. Users are in 100% control of their data and no centralized services are needed.</p>
+          <p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">Blockchain was the first step to Web3 </p>
+          <p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">ThreeFold is the next step to Web4.</p>
+          <h2 class="fade-in mt-10 text-balance text-3xl font-semibold tracking-tight text-white sm:text-4xl blinking-effect">12.12.2024</h2>
+        </div>
+      </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 4s 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 */
+    }
+
+      
+    /* Apply the blinking animation to the link */
+    .blinking-effect {
+      animation: blink 3s infinite; /* Adjust the speed here (1.5s for slow blinking) */
+    }
+
+  </style>
+  
+