update become farm page

content/header/index.md

@@ -7,7 +7,7 @@ extra:
 
 ---
 
-- [Powered by __ThreeFold__]("about")
+- [Become a farmer]("about")
 - [Docs]("https://threefold.info/aibox/docs/")
 
 

templates/layouts/about.html

@@ -1,10 +1,9 @@
 {% extends "_default/base.html" %}
 {% block content %}
 
-{% include "partials/about/about1.html" %}
-{% include "partials/about/grid_stats.html" %}
+{% include "partials/about/hero_section.html" %}
 {% include "partials/about/farmers.html" %}
-{% include "partials/about/about2.html" %}
+{% include "partials/about/about1.html" %}
 {% include "partials/about/cta.html" %}
 
 {% endblock content %}

templates/partials/about/about1.html

@@ -2,17 +2,23 @@
     <div class="px-6 mt-12 lg:pt-16 pt-12 pb-12 sm:px-6 lg:px-8">
       <div class="mx-auto max-w-3xl text-center">
         <h2 class="text-balance font-normal tracking-tight text-black lg:text-6xl text-4xl fade-in">Powered by ThreeFold</h2>
-        <p class="mx-auto mt-12  text-pretty lg:text-xl text-lg font-light text-gray-900 fade-in"><span class="font-semibold">AIBOX</span> is a development by the team at ThreeFold, building decentralized Internet infrastructure for 10+ years.
+        <p class="mx-auto mt-12  text-pretty lg:text-xl text-lg font-light text-gray-900 fade-in"><span class="font-semibold">AIBOX</span> is a project by ThreeFold, a team with over 10 years of experience 
+          building decentralized internet infrastructure.
         </p>
-        <p class="mx-auto mt-4 text-pretty lg:text-xl text-lg font-medium text-black fade-in">Internet infrastructure for everyone, by everyone, everywhere.
+        <p class="mx-auto mt-4 text-pretty lg:text-xl text-lg font-light text-gray-900 fade-in">ThreeFold empowers individuals and organizations to share compute, storage, 
+          and network resources on the ThreeFold Grid—creating a truly decentralized and autonomous internet.
         </p>
-        <p class="mx-auto mt-4 text-pretty lg:text-xl text-lg font-light text-gray-900 fade-in">ThreeFold enables individuals and organizations to contribute compute, storage, and network resources to the ThreeFold Grid, forming the foundation for a truly decentralized and autonomous Internet.
-        </p>
-        <p class="mx-auto mt-4  text-pretty lg:text-xl text-lg font-light text-gray-900 fade-in">Today, a Proof-of-Concept Network is live worldwide, running on v3.15.0 technology.
+        <p class="mx-auto mt-4  text-pretty lg:text-xl text-lg font-light text-gray-900 fade-in">Today, our <span class="font-semibold">Proof-of-Concept Network</span> is live globally, running on <span class="font-semibold">v3.15.0</span> technology.
         </p>
+        <div  class="mt-10 flex items-center  gap-x-6 flex-wrap justify-center">
+          <a  href="https://threefold.io/" 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">
+            Visit ThreeFold
+          </a>
+          <a href="https://dashboard.grid.tf/" target="_blank" class="text-sm/6 font-semibold text-gray-900">Explore Grid Capacity <span aria-hidden="true">→</span></a>
+        </div>
       </div>
     </div>
-  </div>
+</div>
   
   <style>
     /* Define the fade-in animation */

templates/partials/about/farmers.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-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.”
+        Regardless of technical expertise, anyone can deploy AIBOX (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-12 lg:pb-24 bg-transparent">

templates/partials/about/hero_section.html

@@ -0,0 +1,69 @@
+<div class="fade-in lg:h-screen flex justify-center items-center">
+  <div class="isolate">
+      <div class="mx-auto text-center max-w-7xl px-6 lg:px-8 py-12">
+          
+
+          <!-- Image Section -->
+          <div class="fade-in-image mx-auto text-center lg:flex lg:justify-center">
+              <img class="h-auto object-cover rounded-xl" src="/images/aibox_farming.png" alt="AIBox Specifications">
+          </div>
+          <div class="mx-auto lg:mx-0 lg:flex-auto">
+            <!-- Typing Text -->
+            <h1 id="typing-text2" class="mt-6 fade-in font-normal tracking-tight text-black lg:text-[5rem] text-[2.5rem]">
+            </h1>          
+        </div>
+      </div>
+  </div>
+</div>
+
+<!-- Styles -->
+<style>
+  /* Fade-in for Text & Image */
+  .fade-in-item, .fade-in-image {
+      opacity: 0;
+      transform: translateY(10px);
+      transition: opacity 1s ease-out, transform 1s ease-out;
+  }
+
+  .fade-in-item.show, .fade-in-image.show {
+      opacity: 1;
+      transform: translateY(0);
+  }
+</style>
+
+<!-- Script -->
+<script>
+  document.addEventListener("DOMContentLoaded", function () {
+      /*** Typing Effect ***/
+      const text = "Own Your AI GPU & Share Capacity";
+      const textElement = document.getElementById("typing-text2");
+      let index = 0;
+
+      function typeText() {
+          if (index < text.length) {
+              textElement.textContent += text.charAt(index);
+              index++;
+              setTimeout(typeText, 100);
+          }
+      }
+
+      /*** Fade-in Items One by One ***/
+      const items = document.querySelectorAll(".fade-in-item");
+      const image = document.querySelector(".fade-in-image");
+      let itemIndex = 0;
+
+      function showNextItem() {
+          if (itemIndex < items.length) {
+              items[itemIndex].classList.add("show");
+              itemIndex++;
+              setTimeout(showNextItem, 300); // Faster fade-in
+          } else {
+              image.classList.add("show");
+          }
+      }
+
+      /*** Initialize Everything ***/
+      typeText();
+      setTimeout(showNextItem, 1500); // Delay to ensure text is typed first
+  });
+</script>