Merge branch 'development_sasha' of https://github.com/threefoldfoundation/www_threefold_io into development_sasha

content/header/index.md

@@ -8,7 +8,7 @@ extra:
 ---
 
 - [Why]("/about")
-- [Products]("/products")
+- [Products]("/solutions")
 - Info
 
 

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 %}

content/solutions/index.md

@@ -1,7 +1,7 @@
 ---
-title: "Products"
-description: "ThreeFold's products." # quotation marks to allow colons where used
-template: "layouts/products.html"
+title: "Solutions"
+description: "ThreeFold's Solutions." # quotation marks to allow colons where used
+template: "layouts/solutions.html"
 insert_anchor_links: "left"
 extra:
  author: Your name here

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/layouts/products.html

@@ -1,7 +0,0 @@
-{% extends "_default/base.html" %}
-{% block content %}
-
-{% include "partials/products/hero.html" %}
-{% include "partials/products/portfolio.html" %}
-{% include "partials/home/cta.html" %}
-{% endblock content %}

templates/layouts/solutions.html

@@ -0,0 +1,7 @@
+{% extends "_default/base.html" %}
+{% block content %}
+
+{% include "partials/solutions/hero.html" %}
+{% include "partials/solutions/portfolio.html" %}
+{% include "partials/home/cta.html" %}
+{% endblock content %}

templates/partials/header.html

@@ -107,8 +107,7 @@
                       </a>
                     </li> 
                   </ul> #}
-                    <a href="/getnode" class=" rounded-full px-4 py-2 text-sm font-semibold border border-gray-50 text-white shadow-sm  hover:text-gray-300">Get 3Nodes
-                    </a>
+                    <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>
             </div>

templates/partials/home/hero.html

@@ -6,7 +6,7 @@
         <p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">That's <span class="font-semibold">ThreeFold.</span></p>
         <div class="mt-12 flex items-center justify-center gap-x-6">
           <a href="https://docs.threefold.io" class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:bg-gray-200 hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-offset-2">Get Started</a>
-          <a href="/products" target="_blank" class=" fade-in text-sm/6 font-semibold text-white hover:text-gray-400">See Solutions <span aria-hidden="true">→</span></a>
+          <a href="/solutions" target="_blank" class=" fade-in text-sm/6 font-semibold text-white hover:text-gray-400">See Solutions <span aria-hidden="true">→</span></a>
         </div>
       </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>
+  
+