From ab9af6191d443f87314003990df1e2142b5513f9 Mon Sep 17 00:00:00 2001
From: sasha-astiadi <sasha@incubaid.com>
Date: Wed, 26 Feb 2025 02:43:00 +0800
Subject: [PATCH] ok

---
 _archive/team.html                       |  2 +-
 templates/layouts/about.html             |  2 +
 templates/partials/about/about2.html     | 41 ++++++++++++++++
 templates/partials/about/cta.html        | 60 ++++++++++++++++++++++++
 templates/partials/about/farmers.html    | 38 +++++++--------
 templates/partials/about/grid_stats.html | 14 +++---
 templates/shortcodes/grid_stats.html     |  3 +-
 7 files changed, 131 insertions(+), 29 deletions(-)
 create mode 100644 templates/partials/about/about2.html
 create mode 100644 templates/partials/about/cta.html

diff --git a/_archive/team.html b/_archive/team.html
index dcdad26..0df4673 100644
--- a/_archive/team.html
+++ b/_archive/team.html
@@ -63,7 +63,7 @@
           </div>
      </div>
      <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>
+        <a href="/people" class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm lg:text-md 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">Meet the Team</a>
       </div>
  </div>
     
diff --git a/templates/layouts/about.html b/templates/layouts/about.html
index bd84d3a..e30267c 100644
--- a/templates/layouts/about.html
+++ b/templates/layouts/about.html
@@ -4,5 +4,7 @@
 {% include "partials/about/about1.html" %}
 {% include "partials/about/grid_stats.html" %}
 {% include "partials/about/farmers.html" %}
+{% include "partials/about/about2.html" %}
+{% include "partials/about/cta.html" %}
 
 {% endblock content %}
\ No newline at end of file
diff --git a/templates/partials/about/about2.html b/templates/partials/about/about2.html
new file mode 100644
index 0000000..1347009
--- /dev/null
+++ b/templates/partials/about/about2.html
@@ -0,0 +1,41 @@
+<div class="relative isolate overflow-hidden bg-transparent">
+    <div class="px-6 pt-0 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-black lg:text-5xl text-4xl fade-in">We believe AI Needs to be Decentralized</h2>
+        <p class="mx-auto mt-12  text-pretty lg:text-xl text-lg font-light text-gray-900 fade-in">We are at the dawn of AI, a transformative force that will redefine how we live, work, and interact with technology. AI presents an incredible opportunity for humanity, however, as AI systems become more powerful, their control sits in the hands of a few corporations, raising serious concerns around privacy, bias, accessibility, and so on.
+        </p>
+        <p class="mx-auto mt-4 text-pretty lg:text-xl text-lg font-light text-gray-900 fade-in">Further, centralized cloud providers are bottlenecks, as AI compute demand is outpacing supply and training AI models is too expensive.
+
+        </p>
+        <p class="mx-auto mt-4  text-pretty lg:text-xl text-lg font-light text-gray-900 fade-in">We must not repeat mistakes of the past. Without decentralization, AI will remain controlled by a few corporations—limiting accessibility, innovation, and independence. To ensure AI benefits everyone, we must advocate for decentralized, open-source AI models that are transparent, ethical, and community-driven. And this can only happen on an infrastructure like ThreeFold.
+        </p>
+      </div>
+    </div>
+  </div>
+  
+  <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 */
+    }
+  </style>
+  
\ No newline at end of file
diff --git a/templates/partials/about/cta.html b/templates/partials/about/cta.html
new file mode 100644
index 0000000..49be647
--- /dev/null
+++ b/templates/partials/about/cta.html
@@ -0,0 +1,60 @@
+<div class="bg-transparent py-12 lg:pt-24 mb-10 pb-24">
+    <div class="mx-auto ring-1 shadow-2xl ring-black/5 py-12 rounded-2xl bg-white/5 max-w-7xl px-6 lg:flex lg:items-center lg:justify-between lg:px-20">
+      <h2 id="blinking4" class="lg:text-balance text-left items-start lg:text-[4rem] text-[1.5rem] font-normal tracking-tight text-black fade-in">
+        Own Your AI.  <br>Pre-Order<br>Now.
+      </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="/" target="_blank" class="fade-in rounded-2xl bg-black px-4 py-2.5 text-sm lg:text-md 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 mb-4 lg:mb-0">
+          Pre-order Now
+        </a>
+        <a href="/" class="text-sm/6 font-semibold text-gray-900">Learn more <span aria-hidden="true">→</span></a>
+      </div>
+      </div>
+    </div>
+</div>
+
+
+
+<style>
+  /* Initial state: elements are invisible */
+.fade-in {
+opacity: 0;
+transition: opacity 1s ease-out;
+}
+
+/* State when element is in view */
+.fade-in.visible {
+opacity: 1;
+}
+
+</style>
+
+<script>
+  // Get all the elements that need to be faded in
+  document.addEventListener('DOMContentLoaded', function() {
+      const h2 = document.getElementById("blinking4");
+
+      setInterval(() => {
+          h2.style.opacity = (h2.style.opacity == "1") ? "0.3" : "1";
+      }, 1000); // Blinks every 2 seconds
+// Target all elements with the 'fade-in' class
+const fadeInElements = document.querySelectorAll('.fade-in');
+
+const observer = new IntersectionObserver((entries, observer) => {
+  entries.forEach(entry => {
+    if (entry.isIntersecting) {
+      // Add 'visible' class to the element when it's in view
+      entry.target.classList.add('visible');
+      observer.unobserve(entry.target); // Stop observing after it fades in
+    }
+  });
+}, {
+  threshold: 0.1 // Trigger when 10% of the element is in view
+});
+
+fadeInElements.forEach(element => {
+  observer.observe(element);
+});
+});
+
+</script>
diff --git a/templates/partials/about/farmers.html b/templates/partials/about/farmers.html
index 6845c53..891cfa3 100644
--- a/templates/partials/about/farmers.html
+++ b/templates/partials/about/farmers.html
@@ -1,52 +1,49 @@
-<div class="bg-transparent pt-12 pb-6">
+<div class="bg-transparent lg:pt-24 pt-12 pb-12">
   <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-4xl leading-snug font-normal tracking-tight text-white capitalize">How it works</h2>
-      <p class="text-left my-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">
+      <h2 class="mx-auto fade-in text-left lg:text-5xl text-4xl leading-snug font-normal tracking-tight text-black capitalize">How it works</h2>
+      <p class="text-left my-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-800 fade-in">
         Regardless of technical expertise, anyone can deploy nodes (servers) from their homes or offices, and participate in a decentralized alternative to corporate-owned data centers – 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-4 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-8 lg:max-w-none lg:grid-cols-3">
-        <div class="fade-in-box flex flex-col p-8 rounded-2xl  bg-white/5">
-          <dt class="flex items-center gap-x-3 text-lg rounded-2xl font-semibold text-white">
+<section class="pb-12 lg:pb-24 bg-transparent">
+  <div class="max-w-6xl mx-4 lg:mx-12 xl:mx-auto">
+    <div class="mx-auto max-w-2xl  lg:max-w-none">
+      <dl class="grid max-w-xl grid-cols-1 gap-x-8  gap-y-8 lg:max-w-none lg:grid-cols-3">
+        <div class="fade-in-box flex flex-col p-8 rounded-2xl  bg-gray-50 ring-1 ring-black/5 py-6 shadow-md shadow-black/5">
+          <dt class="flex items-center gap-x-3 text-lg rounded-2xl font-semibold text-black">
             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="flex-auto leading-normal font-light text-gray-800 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-2xl  bg-white/5">
-          <dt class="flex items-center gap-x-3 text-lg rounded-2xl font-semibold text-white">
+        <div class="fade-in-box flex flex-col p-8 rounded-2xl  bg-gray-50 ring-1  ring-black/5 py-6 shadow-md shadow-black/5">
+          <dt class="flex items-center gap-x-3 text-lg rounded-2xl font-semibold text-black">
             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="flex-auto leading-normal font-light text-gray-800 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-2xl  bg-white/5">
-          <dt class="flex items-center gap-x-3 text-lg rounded-2xl font-semibold text-white">
+        <div class="fade-in-box flex flex-col p-8 rounded-2xl  bg-gray-50 ring-1 ring-black/5 py-6 shadow-md shadow-black/5">
+          <dt class="flex items-center gap-x-3 text-lg rounded-2xl font-semibold text-black">
             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 class="flex-auto leading-normal font-light text-gray-800 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/become-a-farmer" target="_blank" class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:bg-green hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 mt-8">Become a Farmer</a>
-      </div>
     </div>
       </dl>
     </div>
@@ -58,6 +55,7 @@
   .fade-in-box {
     opacity: 0;
     animation: fadeIn 0.6s ease-in-out forwards;
+    margin-top: 2.5rem;
   }
 
   /* Fading in each grid item with a slight delay */
diff --git a/templates/partials/about/grid_stats.html b/templates/partials/about/grid_stats.html
index 6c5df40..7193494 100644
--- a/templates/partials/about/grid_stats.html
+++ b/templates/partials/about/grid_stats.html
@@ -4,7 +4,7 @@
         <dl class="items grid grid-cols-1 gap-2 overflow-hidden rounded-2xl text-center sm:grid-cols-2 lg:grid-cols-4">
             <!-- ssd -->
           <div class="fade-in flex flex-col justify-center items-center bg-transparent p-3">
-            <div class="tooltip rounded-[1.5rem] ring-1  ring-black/5 py-6 shadow-md shadow-black/5">
+            <div class="tooltip rounded-[1.5rem] ring-1 bg-gray-50 ring-black/5 py-6 shadow-md shadow-black/5">
               <span class="tooltiptext">The total amount of storage (SSD, HDD, & RAM) on the grid.</span>
               <dt class="text-sm/6 font-light text-black">SSD CAPACITY</dt>
               <dd id="ssd" class="order-first text-3xl font-semibold tracking-tight text-black"></dd>
@@ -12,7 +12,7 @@
           </div>
             <!-- cores -->
             <div class="fade-in flex flex-col bg-transparent p-4">
-              <div class="tooltip rounded-[1.5rem] ring-1  ring-black/5 py-6 shadow-md shadow-black/5">
+              <div class="tooltip rounded-[1.5rem] ring-1 bg-gray-50 ring-black/5 py-6 shadow-md shadow-black/5">
               <span class="tooltiptext">The total number of Central Processing Unit cores (compute power) available on the grid.</span>
               <dt class="text-sm/6 font-light text-black">CORES</dt>
               <dd id="cores" class="order-first text-3xl font-semibold tracking-tight text-black"></dd>
@@ -20,7 +20,7 @@
             </div>
             <!-- Nodes -->
             <div class="fade-in flex flex-col bg-transparent p-4">
-              <div class="tooltip rounded-[1.5rem] ring-1  ring-black/5 py-6 shadow-md shadow-black/5">
+              <div class="tooltip rounded-[1.5rem] ring-1 bg-gray-50 ring-black/5 py-6 shadow-md shadow-black/5">
               <span class="tooltiptext">The total number of nodes on the grid. A node is a computer server 100% dedicated to the network.</span>
               <dt class="text-sm/6 font-light text-black">NODES</dt>
               <dd id="nodes" class="order-first text-3xl font-semibold tracking-tight text-black"></dd>
@@ -28,7 +28,7 @@
             </div>
             <!-- countries -->
             <div class="fade-in flex flex-col bg-transparent p-4">
-              <div class="tooltip rounded-[1.5rem] ring-1  ring-black/5 py-6 shadow-md shadow-black/5">
+              <div class="tooltip rounded-[1.5rem] ring-1 bg-gray-50  ring-black/5 py-6 shadow-md shadow-black/5">
               <span class="tooltiptext">The total number of countries where at least one node is connected and operational.</span>
               <dt class="text-sm/6 font-light text-black">COUNTRIES</dt>
               <dd id="countries" class="order-first text-3xl font-semibold tracking-tight text-black"></dd>
@@ -36,16 +36,16 @@
             </div>
           </dl>
       </div>
-    </div>
-    <div class="mt-10 flex items-center justify-center gap-x-8">
+    </div><div class="mt-12 lg:mt-16 flex flex-col lg:flex-row items-center justify-center gap-x-8">
       <a href="https://threefold.io"
       target="_blank"
         class="fade-in rounded-2xl bg-black px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:text-gray-800 hover:bg-green focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2">
         Visit  ThreeFold</a>
-      <a href="https://dashboard.grid.tf/#/tf-grid/node-statistics/" target="_blank"  class="fade-in text-base font-semibold text-black hover:text-gray-800 ">Explore Grid Capacity<span
+      <a href="https://dashboard.grid.tf/#/tf-grid/node-statistics/" target="_blank"  class="fade-in text-base font-semibold text-black hover:text-gray-800 lg:mt-0 mt-8">Explore Grid Capacity<span
           aria-hidden="true">→</span></a>
     </div>
   </div>
+    
   
   <script>
     document.addEventListener('DOMContentLoaded', function () {
diff --git a/templates/shortcodes/grid_stats.html b/templates/shortcodes/grid_stats.html
index 413dde9..9b71ceb 100644
--- a/templates/shortcodes/grid_stats.html
+++ b/templates/shortcodes/grid_stats.html
@@ -1,5 +1,5 @@
 {% set styles = "background-image: url('images/V3.png');" %}
-<section class="px-2 h-auto bg-center lg:py-40 p-12 bg-cover bg-no-repeat" style="{{styles}}">
+<section class="px-2 h-auto bg-center lg:py-40 p-12 bg-cover bg-no-repeat">
     <div class="relative mx-auto">
         <div class="text-center rounded lg:px-6 mt-10 lg:mt-0 mx-auto">
             {{body | markdown | safe }}
@@ -78,6 +78,7 @@
         </div>
     </div>
 </section>
+
 <style>
     dd {
         display: inline-block;