update why page

templates/layouts/why.html

@@ -3,8 +3,9 @@
 
 {% include "partials/why/hero.html" %}
 {% include "partials/why/reason.html" %}
+{% include "partials/why/ai_decentralized.html" %}
+{% include "partials/why/web4.html" %}
 {% include "partials/why/timeline.html" %}
-{% include "partials/why/matters.html" %}
 {% include "partials/why/values.html" %}
 {% include "partials/why/team.html" %}
 {% include "partials/home/cta.html" %}

templates/partials/home/use_cases.html

@@ -26,8 +26,8 @@
             <p class="text-lg font-semibold text-white mb-2">Available Today</p>
 
             <ul class="flex justify-center fade-in">
-              <li class="mr-8"><a href="https://dashboard.grid.tf/#/tf-grid/node-statistics/" class="hover:text-gray-300 focus-visible:outline focus-visible:outline-offset-2" target="_blank">TFT Dashboard</a></li>
+              <li class="mr-8"><a href="https://dashboard.grid.tf/#/tf-grid/node-statistics/" class="text-white hover:text-gray-300" target="_blank">TFT Dashboard</a></li>
-              <li><a href="https://manual.grid.tf/" class="hover:text-gray-300 focus-visible:outline focus-visible:outline-offset-2" target="_blank">2TFT Manual</a></li>
+              <li><a href="https://manual.grid.tf/" class="text-white hover:text-gray-300" target="_blank">2TFT Manual</a></li>
             </ul>
           </dd>
         </div>
@@ -44,7 +44,7 @@
             <p class="text-lg font-semibold text-white mb-2">Coming Soon</p>
 
             <div class="fade-in">
-              <a href="" class="hover:text-gray-300 focus-visible:outline focus-visible:outline-offset-2" target="_blank">Mycelium</a>
+              <a href="" class="text-white hover:text-gray-300" target="_blank">Mycelium</a>
             </div>
           </dd>
         </div>
@@ -62,7 +62,7 @@
             <p class="text-lg font-semibold text-white mb-2">Coming Soon</p>
 
             <div class="fade-in">
-              <a href="" class="hover:text-gray-300 focus-visible:outline focus-visible:outline-offset-2" target="_blank">Website</a>
+              <a href="" class="text-white hover:text-gray-300" target="_blank">Website</a>
             </div>
           </dd>
         </div>

templates/partials/why/ai_decentralized.html

@@ -0,0 +1,40 @@
+<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="fade-in text-balance text-4xl font-normal tracking-tight text-white lg:text-5xl">AI needs to be decentralized</h2>
+        <p class="fade-in mt-6 text-lg lg:text-xl font-light text-gray-200">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.
+            <br>
+            <br>
+          Further, centralized cloud providers are bottlenecks, as AI compute demand is outpacing supply and training AI models is too expensive.
+          <br>
+          <br>
+          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>
+  
+  <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>
+  

templates/partials/why/team.html

@@ -3,9 +3,9 @@
       <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 lg:text-5xl">Founded by Internet 1.0 Pioneers<br>and All of You</h2>
-          <p class="mx-auto mb-10 mt-6 max-w-4xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">The founders have been working on Internet technology since the early days,<br>when it was a decentralized, peer-to-peer network.<br>ThreeFold's aim is to help bring that vision to life once more. <br>More than 50 full-time active developers support the project.</p>
+          <p class="mx-auto mb-10 mt-6 max-w-4xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">The founders have been working in Internet technology since its early days when it operated as a decentralized, peer-to-peer network. ThreeFold is an open-source movement driven by a dedicated team and a vibrant community of contributors helping to bring our shared vision to life. 
+            <br>The project is supported by over 50 full-time active developers.</p>
         </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>
       </div>

templates/partials/why/timeline.html

@@ -3,7 +3,7 @@
         <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 lg:text-5xl">ThreeFold’s Journey</h2>
-                <p class="fade-in mx-auto mt-6 lg:mb-1 mb-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200">The pivotal milestones that have shaped Threefold's growth and innovation, driving us towards a sustainable, decentralized future.</p>
+                <p class="fade-in mx-auto mt-6 lg:mb-1 mb-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200">Over the past decades, we’ve tackled complex challenges in areas such as data storage, secure overlay networking, and autonomous cloud security. With significant experience in Internet and Cloud and a strong vision for the future, these pivotal milestones have shaped our growth and drive us towards a better digital future.</p>
             </div>
         </div>
     </div>
@@ -24,9 +24,11 @@
             </div>
             <div class="font-semibold text-lg text-gray-200 mb-2">Creation of Core Technology</div>
             <div class="text-gray-200 font-light">
-                10+ years of Development
+                <ul style="list-style: disc;">
-                <br>Built decentralized, autonomous, edge internet technology
+                    <li>10+ years of Development.</li>
-                <br>50m dollars invested by founders, community, and TF Tech investors
+                    <li>Built decentralized, autonomous, edge internet technology</li>
+                    <li>50m dollars invested by founders, community, and TF Tech investors.</li>
+                </ul>
             </div>
         </div>
     </div>
@@ -44,13 +46,15 @@
             </div>
             <div class="font-semibold text-lg text-white mb-2">Global Proof Of Concept</div>
             <div class="text-gray-200 font-light">
-                Open Source Development
+                <ul style="list-style: disc;">
-                <br>50+ Countries
+                    <li>Open Source Development.</li>
-                <br>50,000+ Cores
+                    <li>50+ Countries.</li>
-                <br>25,000,000 GB of Storage
+                    <li>50,000+ Cores.</li>
-                <br>Thousands of enthusiasts actively engage with and contribute to the evolution of the ThreeFold Network.
+                    <li>25,000,000 GB of Storage</li>
-                <br>Decentralized reliable compute, network and storage layer for Web 2-3
+                    <li>Thousands of enthusiasts actively engage with and contribute to the evolution of the ThreeFold Network.</li>
-                <br>Commitments from wonderful projects to build on top of us.
+                    <li>Decentralized reliable compute, network and storage layer for Web 2-3.</li>
+                    <li>Commitments from wonderful projects to build on top of us.</li>
+                </ul>
             </div>
         </div>
     </div>
@@ -64,16 +68,18 @@
         </div>
         <div class="fade-in w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white/5 p-4 rounded-2xl shadow">
             <div class="flex items-center justify-between space-x-2 mb-1">
-                <div class="font-medium text-white">2025</div>
+                <div class="font-medium text-white">Current Phase – 2025</div>
             </div>
-            <div class="font-semibold text-lg text-white mb-2">ThreeFold Web4</div>
+            <div class="font-semibold text-lg text-white mb-2">Decentralized AI and Web4</div>
             <div class="text-gray-200 font-light">
-                Introduce a Web4 Phone & Router
+                Q1 & Q2:
-                <br>Web4 smart contracts for the Web3 world.                
+                <ul style="list-style: disc;">
-                <br>Expand the network to +1 Million Nodes
+                    <li>Introduce 3Phone & 3Router.</li>
-                <br>Quantum Safe Compute, Storage & Network for agent centric Web4.
+                    <li>Introduce decentralized AI infrastructure and capabilities.</li>
-                <br>Build a network of commercial farmers for optimal performance and uptime
+                    <li>Expand the network considerably./li>
-
+                    <li>Build a network of commercial farmers for optimal performance and uptime.</li>
+                    <li>Continue Web4 expansion through delivery of 3Phone and 3Router.</li>
+                </ul>
             </div>
         </div>
     </div>
@@ -91,9 +97,11 @@
             </div>
             <div class="font-semibold text-lg text-gray-400 mb-2">Autonomy for All</div>
             <div class="text-gray-400 font-light">
-                An upgraded Internet for Billions.
+                <ul style="list-style: disc;">
-                <br>A planet and people first hybrid of Humans and Machines deliver
+                    <li>An upgraded Internet for Billions.</li> 
-                <br>on the promise of Augmented Collective Intelligence
+                    <li>A planet-and-people-first hybrid of Humans and machines delivers on the promise of Augmented Collective Intelligence.</li> 
+                </ul>
+                <br>
             </div>
         </div>
     </div>

templates/partials/why/web4.html

@@ -0,0 +1,38 @@
+<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-7xl">
+        <h2 class="fade-in text-balance text-4xl font-normal tracking-tight text-white lg:text-5xl">Web4 is the vision</h2>
+        <p class="fade-in mt-6 text-lg lg:text-xl font-light text-gray-200">Web4 is the next evolution of the Internet – built on decentralization and collaboration between humans and machines. It is a more sustainable, autonomous system where people have control over their data, leveraging decentralized infrastructure (3Nodes) and AI-powered assistants – and enables privacy and security through secure 3Phones and smart routers.
+          <br>
+          <br>
+          The Decentralized Cloud was the base layer to create Web4.
+        </p>
+    </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>
+