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

content/footer/_index.md

@@ -5,7 +5,7 @@ insert_anchor_links: "left"
 template: "partials/footer.html"
 extra:
   logoPath: "images/new_logo_tft.png"
-  socialLinks: { Github: "https://github.com/threefoldfoundation", Github2: "https://github.com/threefoldtech", Twitter: "https://twitter.com/threefold_io", Telegram: "https://t.me/threefoldnews"  }
+  socialLinks: { Twitter: "https://twitter.com/threefold_io", Telegram: "https://t.me/threefoldnews", Github: "https://github.com/threefoldfoundation", Github2: "https://github.com/threefoldtech"}
 ---
 
 {% row(style="lean") %}
@@ -16,7 +16,7 @@ extra:
 
 ###### [Learn](https://manual.grid.tf/)
 
-###### [Host (Farm)](/host)
+###### [Host (Farm)](https://docs.threefold.io/docs/nodes/guides/create_farm)
 
 ###### [Dashboard](https://dashboard.grid.tf/)
 
@@ -26,7 +26,7 @@ extra:
 
 |||
 
-##### <span class="text-gray-100">TALK TO HUMANS</span>
+##### <span class="text-gray-100">COMMUNITY</span>
 
 <br>
 
@@ -46,7 +46,7 @@ extra:
 
 <br>
 
-<h6><a target="_self" onclick="window.location.href='/about'">About</a></h6>
+<h6><a target="_self" onclick="window.location.href='/about'">Why</a></h6>
 
 <h6><a target="_self" onclick="window.location.href='/blog'">Blog</a></h6>
 

content/header/index.md

@@ -9,7 +9,7 @@ extra:
 
 - [Why]("/about")
 - [What]("/solutions")
-- [12.12.24]("")
+- [12.12.24]("/action")
 - Info
 
 
@@ -45,9 +45,9 @@ extra:
 
 |||
 
-<button class="dropdown" onclick="openInNewTab('https&#58;//manual.grid.tf/')">
+<button class="dropdown" onclick="openInNewTab('https&#58;//https://docs.threefold.io/')">
 
-[Documentation](https://manual.grid.tf)
+[Documentation](https://docs.threefold.io/)
 <br>
 <p class="text-sm">Explore the Documentation</p>
 

templates/index.html

@@ -4,6 +4,7 @@
 {% include "partials/home/hero.html" %}
 {% include "partials/home/banner.html" %}
 {% include "partials/home/grid_stats.html" %}
+{% include "partials/home/farmers.html" %}
 {% include "partials/home/features.html" %}
 {% include "partials/home/web4.html" %}
 {% include "partials/home/faq.html" %}

templates/layouts/action.html

@@ -2,6 +2,8 @@
 {% block content %}
 
 {% include "partials/action/banner.html" %}
-{% include "partials/action/hero.html" %}
+{% include "partials/action/announcements.html" %}
+{% include "partials/action/action.html" %}
+{% include "partials/action/cta.html" %}
 
 {% endblock content %}

templates/layouts/solutions.html

@@ -2,7 +2,7 @@
 {% block content %}
 
 {% include "partials/solutions/hero.html" %}
-{% include "partials/solutions/whatyoucando.html" %}
+{% include "partials/solutions/what.html" %}
 {% include "partials/solutions/portfolio.html" %}
 {% include "partials/home/cta.html" %}
 {% endblock content %}

templates/layouts/why.html

@@ -4,9 +4,10 @@
 {% include "partials/why/hero.html" %}
 {% include "partials/why/reason.html" %}
 {% include "partials/why/timeline.html" %}
+{% include "partials/why/matters.html" %}
 {% include "partials/why/values.html" %}
 {% include "partials/why/team.html" %}
-{% include "partials/why/matters.html" %}
+{% include "partials/why/impact.html" %}
 {% include "partials/home/cta.html" %}
 
 {% endblock content %}

templates/partials/action/action.html

@@ -0,0 +1,95 @@
+<div class="relative isolate overflow-hidden bg-transparent text-white pt-12 pb-32">
+    <div class="mx-auto max-w-7xl px-6 lg:px-8">
+        <div class="relative grid lg:grid-cols-12 lg:gap-8">
+            <!-- Left Content -->
+            <div class="lg:col-span-7">
+                <div class="mx-auto max-w-2xl lg:mx-0">
+                    <h1 class="fade-in text-balance text-4xl font-normal tracking-tight text-white sm:text-5xl">When 3 Becomes 4</h1>
+                    <p class="fade-in mt-6 text-lg font-light text-white">
+                    The Internet is a Trillion USD business and we want to make sure this Internet is built and owned by all of us—An Internet created by Everyone for Everyone. <br><br>
+                    Web4 is the logical evolution of the Internet and opens the door for Machines & Humans to create together a new form of Intelligence with respect for the Planet & People.<br><br>
+                    ThreeFold has been working on this vision for more than 10 years <br><br>
+                    and is now ready to announce our next steps on December 12, 2024. 
+                    </p>
+                </div>
+            </div>
+
+           <!-- Right Blockquote -->
+           <div class="lg:col-span-5">
+            <figure class=" mt-6   pl-8">
+                <blockquote class=" text-2xl text-white fade-in font-semibold">
+                    <p class="text-2xl text-white font-semibold">We believe actions are more important than words. <br><br>
+                        This page is in black & white, to let YOU be the color of the future of the internet.
+                    </p>
+                </blockquote>
+                <br>
+                <div class="inline-flex blinking-effect items-center gap-2 fade-in ">
+                    <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="50" height="50" viewBox="0,0,256,256" style="cursor: pointer;">
+                        <g fill="#ffffff" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal">
+                            <g transform="translate(210.55757,-34.78313) rotate(65) scale(5.12,5.12)">
+                                <path d="M14.78125,5c-0.03125,0.00781 -0.0625,0.01953 -0.09375,0.03125c-0.04297,0.01953 -0.08594,0.03906 -0.125,0.0625c-0.01172,0 -0.01953,0 -0.03125,0c-0.01953,0.00781 -0.04297,0.01953 -0.0625,0.03125c-0.01172,0.01172 -0.01953,0.01953 -0.03125,0.03125c-0.01172,0.01172 -0.01953,0.01953 -0.03125,0.03125c-0.03125,0.01953 -0.0625,0.03906 -0.09375,0.0625c-0.02344,0.01953 -0.04297,0.03906 -0.0625,0.0625c-0.01172,0.01953 -0.02344,0.04297 -0.03125,0.0625c-0.03516,0.03906 -0.06641,0.08203 -0.09375,0.125c-0.01172,0.01172 -0.01953,0.01953 -0.03125,0.03125c0,0.01172 0,0.01953 0,0.03125c-0.01172,0.01953 -0.02344,0.04297 -0.03125,0.0625c-0.01172,0.01172 -0.01953,0.01953 -0.03125,0.03125c0,0.01953 0,0.04297 0,0.0625c-0.01172,0.03906 -0.02344,0.08203 -0.03125,0.125c0,0.03125 0,0.0625 0,0.09375c0,0.01172 0,0.01953 0,0.03125c0,0.01172 0,0.01953 0,0.03125c-0.00391,0.05078 -0.00391,0.10547 0,0.15625v32.84375c0.00391,0.39844 0.24219,0.75781 0.60938,0.91406c0.36328,0.15625 0.78906,0.07813 1.07813,-0.19531l7.25,-6.8125l5.84375,13.5c0.10938,0.24609 0.3125,0.44141 0.56641,0.53516c0.25391,0.09375 0.53516,0.08203 0.77734,-0.03516l4.375,-2c0.49609,-0.22656 0.71875,-0.8125 0.5,-1.3125l-6.09375,-13.3125l10.1875,-0.875c0.40234,-0.02734 0.75,-0.29297 0.88281,-0.67578c0.12891,-0.38281 0.01563,-0.80859 -0.28906,-1.07422l-23.84375,-22.21875c-0.04687,-0.05859 -0.09766,-0.10937 -0.15625,-0.15625c-0.03906,-0.04687 -0.07812,-0.08594 -0.125,-0.125c-0.01172,0 -0.01953,0 -0.03125,0c-0.01953,-0.02344 -0.03906,-0.04297 -0.0625,-0.0625c-0.01172,0 -0.01953,0 -0.03125,0c-0.05078,-0.02344 -0.10156,-0.04687 -0.15625,-0.0625c-0.01172,0 -0.01953,0 -0.03125,0c-0.01953,-0.01172 -0.04297,-0.02344 -0.0625,-0.03125c-0.01172,0 -0.01953,0 -0.03125,0c-0.01953,0 -0.04297,0 -0.0625,0c-0.01172,0 -0.01953,0 -0.03125,0c-0.01953,0 -0.04297,0 -0.0625,0c-0.01172,0 -0.01953,0 -0.03125,0c-0.03125,0 -0.0625,0 -0.09375,0c-0.03125,0 -0.0625,0 -0.09375,0zM16,8.28125l20.6875,19.3125l-9.375,0.8125c-0.32031,0.03125 -0.60547,0.21484 -0.76562,0.49609c-0.16406,0.27734 -0.17969,0.61719 -0.04687,0.91016l6.28125,13.6875l-2.5625,1.15625l-6,-13.84375c-0.12891,-0.29687 -0.39062,-0.51562 -0.70703,-0.58203c-0.31641,-0.07031 -0.64844,0.01953 -0.88672,0.23828l-6.625,6.21875z"></path>
+                            </g>
+                        </g>
+                    </svg>
+                    <a href="action.html" class="text-balance text-3xl font-semibold tracking-tight text-white sm:text-4xl">12.12.2024</a>
+                </div>                                   
+            </figure>
+        </div>
+    </div>
+</div>
+</div>
+
+
+
+
+
+<style>
+ /* Apply the blinking animation to the link */
+ .blinking-effect {
+  animation: blink 2s infinite; /* Adjust the speed here (1.5s for slow blinking) */
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes blink {
+0% {
+  opacity: 1;
+}
+50% {
+  opacity: 0.4;
+}
+100% {
+  opacity: 1;
+}
+}
+
+.blockquote::before {
+    content: open-quote;
+    font-size: 4rem;
+    position: absolute;
+    top: -1rem;
+    left: -1rem;
+    color: #ffffff;
+}
+
+.inline-flex {
+display: flex;
+align-items: center;
+}
+
+.items-center {
+justify-content: center;
+}
+
+.gap-2 {
+gap: 0.5rem; /* Adjust the gap size as needed */
+}
+
+</style>

templates/partials/action/announcements.html

@@ -0,0 +1,59 @@
+<div class="bg-transparent fade-in pb-24 flex items-center justify-center min-h-screen">
+    <div class="mx-auto max-w-7xl px-6 lg:px-8">
+        <div class="mx-auto max-w-2xl lg:max-w-7xl items-center text-center">
+            <p class="fade-in mx-auto mb-12 text-pretty lg:text-4xl text-3xl font-medium text-gray-200">All Things Web 4</p>
+        </div>
+        <div class="-mx-6 grid grid-cols-2 gap-2 overflow-hidden sm:mx-0 sm:rounded-2xl md:grid-cols-3">
+            <div class="grid-item bg-white/5 p-6 sm:p-10">
+                <h2 class="text-white lg:text-3xl text-2xl text-center font-semibold">Web 4 Infrastructure</h2>
+            </div>
+            <div class="grid-item bg-white/5 p-6 sm:p-10">
+                <h2 class="text-white lg:text-3xl text-2xl text-center font-semibold">Web 4 Phone & Routers</h2>
+            </div>
+            <div class="grid-item bg-white/5 p-6 sm:p-10">
+                <h2 class="text-white lg:text-3xl text-2xl text-center font-semibold">Human + Machine Agents</h2>
+            </div>
+            <div class="grid-item bg-white/5 p-6 sm:p-10">
+                <h2 class="text-white lg:text-3xl text-2xl text-center font-semibold">Sovereign Digital Economic Zone</h2>
+            </div>
+            <div class="grid-item bg-white/5 p-6 sm:p-10">
+                <h2 class="text-white lg:text-3xl text-2xl text-center font-semibold">Web 4 Dev Tools</h2>
+            </div>
+            <div class="grid-item bg-white/5 p-6 sm:p-10">
+                <h2 class="text-white lg:text-3xl text-2xl text-center font-semibold">Web 4 Digital Currency</h2>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+    // JavaScript to control the blinking effect
+    const items = document.querySelectorAll('.grid-item');
+    let currentIndex = 0;
+
+    function blinkItem() {
+        // Remove the 'blink' class from all items
+        items.forEach(item => item.classList.remove('blink'));
+
+        // Add the 'blink' class to the current item
+        items[currentIndex].classList.add('blink');
+
+        // Move to the next item in a clockwise manner
+        currentIndex = (currentIndex + 1) % items.length;
+    }
+
+    // Start the blinking effect
+    setInterval(blinkItem, 1000); // Change every second
+</script>
+
+<style>
+    /* CSS for the blinking effect */
+    .blink {
+        animation: blink-animation 1s infinite;
+    }
+
+    @keyframes blink-animation {
+        0%, 100% { background-color: rgba(255, 255, 255, 0.1); }
+        50% { background-color: rgba(255, 255, 255, 0.5); }
+    }
+</style>

templates/partials/action/banner.html

@@ -1,9 +1,12 @@
-<div class="bg-transparent pt-32 flex justify-center items-center">
+<div class="pt-16 bg-transparent h-screen flex flex-col justify-start items-center">
-    <div class="mx-auto max-w-7xl px-4 lg:px-6">
+    <div>
         <img 
-        class="object-contain w-full lg:w-[100%] max-w-[100%]" 
+        class="object-contain w-[100%] max-w-[100%]" 
-        src="images/gif2.gif" 
+        src="/images/mycel2.gif" 
         alt="TF">
     </div>
-  </div>
+    <div class="text-center">
-  
+        <h2 class="text-balance font-normal tracking-tight text-white lg:text-6xl text-4xl fade-in">Save the Date</h2>
+        <p class="fade-in mx-auto mt-4 max-w-3xl text-pretty lg:text-4xl text-3xl font-medium text-gray-200 fade-in">12.12.24</p>
+    </div>
+</div>

templates/partials/action/cta.html

@@ -0,0 +1,54 @@
+<div class="bg-transparent">
+    <div class="mx-auto rounded-2xl bg-white/5 max-w-7xl px-6 py-12 lg:flex lg:items-center lg:justify-between lg:px-20">
+      <h2 class="lg:text-balance leading-tight text-left items-start  font-normal tracking-tight text-white lg:text-5xl text-3xl fade-in">
+        Become the Color<br/>
+        of the Future of Internet <br/>on 12.12.2024.
+      </h2>
+      <div class="mt-10 flex items-center 0 gap-x-6 lg:mt-0 lg:shrink-0 flex-wrap justify-center lg:justify-start">
+        <a href="https://t.me/threefoldnews" target="_blank" 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 mb-4 lg:mb-0">
+          Telegram
+        </a>
+        <a href="javascript:;" onclick="ml_account('webforms', '3562741', 'n7q9l7', 'show')" class="fade-in rounded-2xl bg-black px-4 py-2.5 text-sm font-semibold text-white 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 mb-4 lg:mb-0">
+          Newsletter
+        </a>
+      </div>
+    </div>
+</div>
+
+<style>
+  .bg-black {
+    background-color: #000;
+  }
+
+  @keyframes fadeIn {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+
+  .fade-in {
+    animation: fadeIn 4s ease-in-out forwards;
+  }
+
+  h2 {
+    animation-delay: 0.5s;
+  }
+
+  p {
+    animation-delay: 1s;
+  }
+
+  .blockquote::before {
+    content: open-quote;
+    font-size: 4rem;
+    position: absolute;
+    top: -1rem;
+    left: -1rem;
+    color: #ffffff;
+  }
+
+
+</style>

templates/partials/cta.html

@@ -0,0 +1,14 @@
+<div class="bg-transparent">
+    <div class="mx-auto rounded-2xl bg-white/5 max-w-7xl px-6 py-12 lg:flex lg:items-center lg:justify-between lg:px-20">
+      <h2 class="lg:text-balance text-left items-start  font-normal tracking-tight text-white lg:text-5xl text-3xl fade-in">
+        Build the <br>Internet of Tomorrow, <br>Today.
+      </h2>
+      <div class="mt-10 flex items-center 0 gap-x-6 lg:mt-0 lg:shrink-0 flex-wrap justify-center lg:justify-start">
+        <a href="https://docs.threefold.io/" target="_blank" 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 mb-4 lg:mb-0">
+          Dive Deeper
+        </a>
+        
+      </div>
+    </div>
+</div>
+

templates/partials/header.html

@@ -107,7 +107,7 @@
                       </a>
                     </li> 
                   </ul> #}
-                    <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>
+                    <a href="https://docs.threefold.io/docs/nodes/get_nodes" 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/faq.html

@@ -31,7 +31,7 @@
                             :aria-expanded="expanded"
                             aria-controls="faqs-text-01"
                         >
-                            <span class="text-xl">Is this a separate new Internet?</span>
+                            <span>Is this a separate new Internet?</span>
                             <svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
                                 <rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
                                 <rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
@@ -46,7 +46,7 @@
                         :class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
                         >
                         <div class="overflow-hidden">
-                            <p class="pb-3 text-gray-300 text-lg">
+                            <p class="pb-3 text-gray-300 text-base font-light">
                                 No, ThreeFold is a complementary Internet and works alongside the current Internet. It allows you to continue accessing and interacting with the current Internet while offering additional capabilities.
                             </p>
                         </div>
@@ -78,7 +78,7 @@
                         :class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
                         >
                         <div class="overflow-hidden">
-                            <p class="pb-3 text-gray-300 text-lg">
+                            <p class="pb-3 text-gray-300 text-base font-light">
                                 The Internet has become fragile and overly centralized. Issues like authenticity, privacy, security, and sustainability necessitate a fundamental new approach to rebuild its foundation.
                             </p>
                         </div>
@@ -110,8 +110,8 @@
                         :class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
                         >
                         <div class="overflow-hidden">
-                            <p class="pb-3 text-gray-300 text-lg">
+                            <p class="pb-3 text-gray-300 text-base  font-light">
-                                For over 30 years, we’ve worked toward this vision. ThreeFold is the culmination of our journey, offering a fully operational product and a growing community of users, farmers, and partners. This is real and here to stay.
+                                For over 30 years, we’ve worked toward this vision. ThreeFold is the culmination of our journey, offering a fully operational product and a growing community of users, farmers, and partners. This is real and we are here to stay.
                             </p>
                         </div>
                     </div>
@@ -142,7 +142,7 @@
                         :class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
                         >
                         <div class="overflow-hidden">
-                             <p class="pb-3 text-gray-300 text-lg">
+                             <p class="pb-3 text-gray-300 text-base font-light">
                                 TFT is our token which was used to build generation 1, 2 and 3 of the ThreeFold Grid of capacity. TFT is the reward for our loyal community. There can never be more than 1 billion TFT. We are now building generation 4 of the ThreeFold Grid of capacity and we need a new token to build this new generation. There will never be more than 3 billion INCA. Our partners will start selling new ThreeFold Nodes end Nov 2024 with a new reward scheme and ready to grow to millions of nodes.
                             </p>
                         </div>
@@ -174,7 +174,7 @@
                         :class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
                         >
                         <div class="overflow-hidden">
-                             <p class="pb-3 text-gray-300 text-lg">
+                             <p class="pb-3 text-gray-300 text-base font-light">
                                 You can participate by becoming a farmer, a user, a partner or by developing a web4 app. Provide capacity to the ThreeFold Grid, Use capacity, build solutions, develop applications for Web4, and many more.
                             </p>
                         </div>
@@ -206,7 +206,7 @@
                         :class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
                         >
                         <div class="overflow-hidden">
-                             <p class="pb-3 text-gray-300 text-lg">
+                             <p class="pb-3 text-gray-300 text-base font-light">
                                 Web4 is our evolution towards a decentralized, user-controlled, and secure Internet that respects privacy and minimizes environmental impact.
                             </p>
                         </div>
@@ -238,7 +238,7 @@
                         :class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
                         >
                         <div class="overflow-hidden">
-                             <p class="pb-3 text-gray-300 text-lg">
+                             <p class="pb-3 text-gray-300 text-base font-light">
                                 No, we are NOT blockchain. We are using our own technology: Zero State technology combined with Quantum Safe Internetworking.
                             </p>
                         </div>

templates/partials/home/farmers.html

@@ -0,0 +1,82 @@
+<div class="bg-transparent pt-12 pb-6">
+  <div class="mx-auto max-w-7xl px-6 lg:max-w-7xl lg:px-8">
+    <div class="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
+      <h2 class="mx-auto fade-in text-left lg:text-5xl text-2xl leading-snug font-normal tracking-tight text-white">Powering the Grid Together</h2>
+      <p class="text-left mt-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">
+        Regardless of technical expertise, anyone can now provide data, network, and cloud resources to where they’re needed most while earning rewards for their contributions. We call this process "farming”. 
+      </p>
+</div>
+<section class="pb-32 bg-transparent">
+  <div class="max-w-6xl mx-8 md:mx-10 lg:mx-20 xl:mx-auto">
+    <div class="mx-auto max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-none">
+      <dl class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none lg:grid-cols-3">
+        <div class="fade-in-box flex flex-col p-8 rounded rounded-2xl bg-white/5">
+          <dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-white">
+            1. HOST A NODE
+          </dt>
+          <dd class="mt-4 flex flex-auto flex-col">
+            <p class="flex-auto leading-normal font-light text-gray-200 text-md">All you need to get started is a modern computer, electricity and network. Once booted with Zero OS, a computer becomes a ThreeFold Node.</p>
+            <p class="mt-6">
+            </p>
+          </dd>
+        </div>
+        <div class="fade-in-box flex flex-col p-8 rounded rounded-2xl bg-white/5">
+          <dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-white">
+            2. OFFER CAPACITY
+          </dt>
+          <dd class="mt-4 flex flex-auto flex-col">
+            <p class="flex-auto leading-normal font-light text-gray-200 text-md">The capacity of the node gets verified and registered in the ThreeFold Blockchain, securing access to a decentralized autonomous cloud for users and communities.</p>
+            <p class="mt-6">
+            
+            </p>
+          </dd>
+        </div>
+        <div class="fade-in-box flex flex-col p-8 rounded rounded-2xl bg-white/5">
+          <dt class="flex items-center gap-x-3 text-base/7 rounded-2xl font-semibold text-white">
+            3. EARN REWARDS
+          </dt>
+          <dd class="mt-4 flex flex-auto flex-col">
+            <p class="flex-auto leading-normal font-light text-gray-200 text-md">After your node is set up and verified, you’ll be rewarded for the capacity that you provide to the ThreeFold Grid.
+            </p>
+            <p class="mt-6">
+              
+            </p>
+          </dd>
+        </div>
+      </div>
+      <div class="mt-12 flex items-center justify-center gap-x-6">
+        <a href="https://docs.threefold.io/docs/category/nodes" target="_blank" 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 mt-8">Become a Farmer</a>
+      </div>
+    </div>
+      </dl>
+    </div>
+  </div>
+</section>
+
+<style>
+  /* Fade-in animation for the grid items */
+  .fade-in-box {
+    opacity: 0;
+    animation: fadeIn 0.6s ease-in-out forwards;
+  }
+
+  /* Fading in each grid item with a slight delay */
+  .fade-in-box:nth-child(1) { animation-delay: 0s; }
+  .fade-in-box:nth-child(2) { animation-delay: 0.2s; }
+  .fade-in-box:nth-child(3) { animation-delay: 0.4s; }
+  .fade-in-box:nth-child(4) { animation-delay: 0.6s; }
+  .fade-in-box:nth-child(5) { animation-delay: 0.8s; }
+  .fade-in-box:nth-child(6) { animation-delay: 1s; }
+  .fade-in-box:nth-child(7) { animation-delay: 1.2s; }
+  .fade-in-box:nth-child(8) { animation-delay: 1.4s; }
+  .fade-in-box:nth-child(9) { animation-delay: 1.6s; }
+  .fade-in-box:nth-child(10) { animation-delay: 1.8s; }
+  .fade-in-box:nth-child(11) { animation-delay: 2s; }
+  .fade-in-box:nth-child(12) { animation-delay: 2.2s; }
+
+  @keyframes fadeIn {
+    to {
+      opacity: 1;
+    }
+  }
+</style>

templates/partials/home/features.html

@@ -5,7 +5,7 @@
       </h2>
       <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 not a protocol. We’ve developed foundational technology that runs directly on bare metal (the hardware).</p>
       <p class="mx-auto mt-4 mb-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">ThreeFold is likely the only active project with a truly scalable solution addressing the Internet and Cloud’s core components: <b>Data, Cloud, and Network</b>.</p>
-      <a href="#" class="fade-in lg:text-xl text-base tracking-normal font-medium pt-6 text-white hover:text-gray-400 blinking-effect">Discover Products <span aria-hidden="true">→</span></a>
+      <a href="#" class="fade-in lg:text-xl text-base tracking-normal font-medium pt-6 text-white hover:text-gray-400 blinking-effect">Discover How It Works <span aria-hidden="true">→</span></a>
     </div>
     <div class="lg:px-16 fade-in"> <!-- Added padding to the right side for more spacing -->
       <dl class="grid grid-cols-1 mx-auto gap-x-8 sm:grid-cols-2 gap-y-10">

templates/partials/home/web4.html

@@ -6,7 +6,7 @@
           <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>
+          <p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-base font-bold text-gray-200 fade-in">ThreeFold is the next step to Web4.</p>
           <br>
           <br>
           <div class="inline-flex items-center gap-2 fade-in blinking-effect">

templates/partials/icons/twitterx.html

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" class="mt-2 h-8 w-8 bi bi-twitter-x" viewBox="0 0 24 24">
+  <path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865z"/>
+</svg>

templates/partials/socialLinks.html

@@ -18,7 +18,7 @@
         {% elif key == "LinkedIn" %}
         {% include "partials/icons/svgLinkedInIcon.html" %}
         {% elif key == "Twitter" %}
-        {% include "partials/icons/svgTwitterIcon.html" %}
+        {% include "partials/icons/twitterx.html" %}
         {% elif key == "Dribbble" %}
         {% include "partials/icons/svgDribbbleIcon.html" %}
         {% elif key == "Telegram" %}

templates/partials/solutions/hero.html

@@ -6,7 +6,7 @@
         <p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-base font-medium text-gray-200 fade-in">ThreeFold can be used by any Web2, Web3, AI, or Edge IT workload.
         </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">Dive Deeper</a>
+          <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">Dive Deeper - Read our docs</a>
         f  
       </div>
     </div>

templates/partials/solutions/portfolio.html

@@ -3,7 +3,7 @@
     <div class="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
       <h2 class="mx-auto fade-in text-left lg:text-5xl text-2xl leading-snug font-normal tracking-tight text-white">What We’ve Built</h2>
       <p class="text-left mt-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">
-        At ThreeFold, we've created products that embody innovation, authenticity, and simplicity. Each solution is crafted to empower individuals and communities, blending cutting-edge technology with practical usability. Explore how our creations are shaping a more open and connected future.
+        At ThreeFold, we've created products that embody innovation, authenticity, and simplicity. Each solution is crafted to empower individuals and communities, blending cutting-edge technology with practical usability.
       </p>
     </div>
   </div>

templates/partials/solutions/what.html

@@ -0,0 +1,82 @@
+<div class="bg-transparent">
+    <div class="mx-auto grid max-w-2xl grid-cols-1 items-center gap-x-16 gap-y-16 px-8 pt-12 mt-12 pb-24 lg:max-w-7xl lg:grid-cols-2 lg:px-8">
+      <div class="max-w-3xl px-16 pb-12">
+        <h2 class="fade-in text-balance lg:text-4xl text-2xl leading-snug font-normal tracking-tight text-white sm:text-5xl">What You Can Do With It
+        </h2>
+        <p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">Today, ThreeFold is primarily focused on empowering developers to create innovative cloud solutions.</p>
+        <p class="mx-auto mt-4 mb-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">On 12-12-24, we will unveil exciting news about how Web4 will soon become accessible to everyone, opening up endless possibilities for all users.</p>
+        <a href="/action" class="fade-in lg:text-4xl text-base tracking-normal font-medium pt-6 text-white hover:text-gray-400 blinking-effect"><span aria-hidden="true">→ </span>12.12.24</a>
+      </div>
+      <div class="lg:px-16 fade-in"> <!-- Added padding to the right side for more spacing -->
+        <dl class="fade-in grid grid-cols-1 mx-auto gap-x-8 sm:grid-cols-2 gap-y-10">
+          <div class="">
+            <dt class="font-medium text-gray-200">Communicate securely</dt>
+            <dd class="mt-1 font-light text-gray-400 text-sm mb-4">Experience end-to-end encrypted communication in the shortest possible path, ensuring messages remain private and unalterable—even during disasters.</dd> 
+          </div>
+          <div class="">
+            <dt class="font-medium text-gray-200">Store effortlessly</dt>
+            <dd class="mt-1 ont-light text-gray-400 text-sm mb-4">Securely share and store information with ease, scaling seamlessly from personal use to billions of users. </dd>
+          </div>
+          <div class="">
+            <dt class="font-medium text-gray-200">Restore authenticity</dt>
+            <dd class="font-light text-gray-400 text-sm mb-4">Determine which information can be trusted, bringing clarity and confidence back to the digital space. </dd>
+         </div>
+         <div class="">
+            <dt class="font-medium text-gray-200">Unlock limitless insights</dt>
+            <dd class="font-light text-gray-400 text-sm mb-4">Discover, analyze, and find information with no boundaries, aided by a powerful personal AI assistant. </dd>
+         </div>
+         <div class="">
+            <dt class="font-medium text-gray-200">Streamline your interactions</dt>
+            <dd class="font-light text-gray-400 text-sm mb-4">Keep track of all your connections and simplify your life with an AI that optimizes your daily tasks and interactions. </dd>
+         </div>
+         <div class="">
+            <dt class="font-medium text-gray-200">Take control of your digital presence</dt>
+            <dd class="font-light text-gray-400 text-sm mb-4">Own and manage your data, identity, and interactions across platforms, ensuring transparency and sovereignty in the digital world.</dd>
+         </div>
+        </dl>
+      </div>
+    </div>
+  </div>
+  
+  <style>
+    /* Define the slow blinking 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 */
+      }
+      
+    @keyframes blink {
+      0% {
+        opacity: 1;
+      }
+      50% {
+        opacity: 0.4;
+      }
+      100% {
+        opacity: 1;
+      }
+    }
+  
+    /* Apply the blinking animation to the link */
+    .blinking-effect {
+      animation: blink 3s infinite; /* Adjust the speed here (1.5s for slow blinking) */
+    }
+  </style>

templates/partials/why/hero.html

@@ -1,7 +1,7 @@
 <div class="relative isolate overflow-hidden bg-transparent">
     <div class="px-6 lg:pt-32 mt-12 pt-24 lg:pb-24 pb-12 sm:px-6 lg:px-8">
       <div class="mx-auto max-w-4xl text-center">
-        <h2 class="text-balance font-normal tracking-tight text-white lg:text-6xl text-3xl fade-in">We are building a New Internet</h2>
+        <h2 class="text-balance font-normal tracking-tight text-white lg:text-6xl text-3xl fade-in">Internet needs an Upgrade</h2>
         <p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">The Internet brings the world together, yet much of it is now concentrated in the hands of a few powerful corporations. This wasn't its original purpose. The Internet was envisioned as a decentralized, open space—a tool for freedom, collaboration, and equal access for all.</p>
         <p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-base font-medium text-gray-200 fade-in">ThreeFold has invented a new Data, Network  and Cloud system<br> 
           as an Engine for an Upgraded Internet.</p>

templates/partials/why/impact.html

@@ -0,0 +1,44 @@
+<div class="bg-transparent fade-in">
+    <div class="mx-auto max-w-2xl px-4 py-24 sm:px-6 sm:py-32 lg:max-w-7xl lg:px-8">
+      <div class="mx-auto max-w-3xl text-center">
+        <h2 class="fade-in text-balance text-4xl font-normal tracking-tight text-white sm:text-5xl">Real-World Impact</h2>
+        <p class="mx-auto mb-10 mt-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">ThreeFold’s technological infrastructure will empower many projects and initiatives across sectors. Here are two key projects:
+        </p>
+      </div>
+  
+      <div class="mt-12 space-y-16">
+        <div class="bg-transparent py-10">
+            <div class="mx-auto max-w-7xl px-6 lg:grid lg:items-center lg:grid-cols-12 lg:gap-x-8">
+              <!-- Text Section -->
+              <div class="lg:col-span-5 align-middle pr-4">
+                <h3 class="text-2xl font-medium text-white">OurWorld FreeZone</h3>
+                <p class="mt-2 text-base font-light text-gray-200 mx-auto pr-4">
+                    ThreeFold is working with the Zanzibar Communication Corporation (ZICTIA), on behalf of the Zanzibar government, to create the world’s first 100% Digital Free Zone – accessible and affordable for all. <br><br>The announcement was made August 2023, and progress has been ongoing behind the scenes since then. 
+                    Updates expected Q4 2024.                    
+                </p>
+              </div>
+              <!-- Image Section -->
+              <div class="lg:col-span-7">
+                <img 
+                  src="/images/freezone.gif" 
+                  alt="" 
+                  class=" w-full rounded-lg bg-gray-100 object-fit">
+              </div>
+            </div>
+          </div>
+          
+        <div class="flex flex-col-reverse lg:grid lg:grid-cols-12 lg:items-center lg:gap-x-8">
+          <div class="mt-6 lg:col-span-5 lg:col-start-8 lg:row-start-1 lg:mt-0 pr-4">
+            <h3 class="text-2xl font-medium text-white">Tanzanian Sovereign Internet</h3>
+            <p class="mt-2 text-base font-light text-gray-200 pr-4">
+
+                In January 2024, ThreeFold announced in collaboration with The ICT Commission of Tanzania and Holochain a collaboration to deploy sovereign Internet in Tanzania, along with the introduction of coding academies and innovation hubs. <br><br> The Dunia Yetu cooperative is being set up and efforts will ramp up in 2025.</p>
+          </div>
+          <div class="flex-auto lg:col-span-7 lg:col-start-1 lg:row-start-1">
+            <img src="/images/tanzania.gif" alt="" class="w-full rounded-lg bg-gray-100 object-fill">
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  

templates/partials/why/team.html

@@ -3,18 +3,18 @@
       <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">The Team Behind ThreeFold</h2>
-          <p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-3xl text-2xl font-medium text-gray-200 fade-in">Founded by Internet Pioneers 1.0</p>
+          <p class="mx-auto mt-4 max-w-3xl text-pretty lg:text-2xl text-xl font-medium text-gray-200 fade-in">Founded by Internet Pioneers 1.0</p>
-          <p class="mx-auto mb-10 mt-6 max-w-3xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">We are a dedicated group committed to advancing a new digital era. Some of us have been working on Internet technology since the early days, when it was a decentralized network. We aim to help bring that vision to life once more. Beyond those below, we have more than 50 engineers, developers, and other team members supporting the project.</p>
+          <p class="mx-auto mb-10 mt-6 max-w-4xl text-pretty lg:text-xl text-base font-light text-gray-200 fade-in">We are a dedicated group committed to advancing a new digital era. Some of us have been working on Internet technology since the early days, when it was a decentralized network. We aim to help bring that vision to life once more. Beyond those below, we have more than 50 engineers, developers, and other team members supporting the project.</p>
         </div>
 
         <div class="mt-12 grid grid-cols-1 gap-x-4 lg:gap-y-10 lg:gap-x-8 lg:grid-cols-4 gap-y-0">
 
             <!-- Team Member -->
-            <div class="group relative">
+            <div class="group relative fade-in">
               <div class="h-56 w-full overflow-hidden rounded-md bg-gray-200 group-hover:opacity-75 lg:h-72 xl:h-80">
-                <img src="/images/kristof_de_spiegeleer.jpeg" alt="kristof_de_spiegeleer" class="size-full object-cover">
+                <img src="/images/kds.gif" alt="kristof_de_spiegeleer" class="size-full object-cover">
               </div>
-              <h3 class="mt-4 text-2xl text-white">
+              <h3 class="mt-4 text-xl font-semibold text-white">
                   Kristof de Spiegeleer
               </h3>
               <p class="text-sm text-gray-300">Co-founder & CEO</p>
@@ -23,11 +23,11 @@
             </div>
 
             <!-- Team Member -->
-              <div class="group relative">
+              <div class="group relative fade-in">
                 <div class="h-56 w-full overflow-hidden rounded-md bg-gray-200 group-hover:opacity-75 lg:h-72 xl:h-80">
-                  <img src="/images/people/adnan_fatayerji.jpg" alt="adnan_fatayerji" class="size-full object-cover">
+                  <img src="/images/adnan.gif" alt="adnan_fatayerji" class="size-full object-cover">
                 </div>
-                <h3 class="mt-4 text-2xl text-white">
+                <h3 class="mt-4 text-xl font-semibold text-white">
                     Adnan Fatayerji
                 </h3>
                 <p class="text-sm text-gray-300">Co-founder</p>
@@ -36,11 +36,11 @@
               </div>
 
                 <!-- Team Member -->
-              <div class="group relative">
+              <div class="group relative fade-in">
                 <div class="h-56 w-full overflow-hidden rounded-md bg-gray-200 group-hover:opacity-75 lg:h-72 xl:h-80">
-                  <img src="/images/people/jan_de_landtsheer.jpeg" alt="jan_de_landtsheer" class="size-full object-cover">
+                  <img src="/images/jan.gif" alt="jan_de_landtsheer" class="size-full object-cover">
                 </div>
-                <h3 class="mt-4 text-2xl text-white">
+                <h3 class="mt-4 text-xl font-semibold text-white">
                     Jan De Landtsheer
                 </h3>
                 <p class="text-sm text-gray-300">Co-founder & CTO</p>
@@ -49,11 +49,11 @@
               </div>
                   
                     <!-- Team Member -->
-              <div class="group relative">
+              <div class="group relative fade-in">
                 <div class="h-56 w-full overflow-hidden rounded-md bg-gray-200 group-hover:opacity-75 lg:h-72 xl:h-80">
-                  <img src="/images/people/florian_fournier.jpeg" alt="florian_fournier" class="size-full object-cover">
+                  <img src="/images/flo.gif" alt="florian_fournier" class="size-full object-cover">
                 </div>
-                <h3 class="mt-4 text-2xl text-white">
+                <h3 class="mt-4 text-xl font-semibold text-white">
                     Florian Fournier
                 </h3>
                 <p class="text-sm text-gray-300">Co-founder & CMO</p>
@@ -62,7 +62,7 @@
               </div>
           </div>
      </div>
-     <div class="mt-12 flex items-center justify-center gap-x-6">
+     <div class="mt-8 flex items-center justify-center gap-x-6 fade-in">
         <a href="/people" 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">Meet the Team</a>
       </div>
  </div>