update matomo script

Merge branch 'development'
2025-03-19 23:57:12 +02:00 · 2025-03-19 23:55:50 +02:00 · 2025-03-06 12:20:17 +02:00 · 2025-03-06 12:19:25 +02:00 · 2025-03-06 12:11:09 +02:00 · 2025-03-06 12:00:14 +02:00
37 changed files with 1174 additions and 258 deletions
--- a/README.md
+++ b/README.md
@@ -1,13 +1,13 @@
-# **Mycelium Website**  
+# **AIBOX Website**  

-This repository hosts the code for **Mycelium's website**, including both the main and development branches.  
+This repository hosts the code for the **AIBOX website**, including both the main and development branches.  

 ## 🌍 **Branches**  
- **`main`** → Production website: [mycelium.threefold.io](https://mycelium.threefold.io)  
- **`dev`** → Development version: [www2.mycelium.threefold.io](https://www2.mycelium.threefold.io)  
+- **`main`** → Production website: [aibox.threefold.io](https://aibox.threefold.io)  
+- **`dev`** → Development version: [www2.aibox.threefold.io](https://www2.aibox.threefold.io)  

 ## 🚀 **Overview**  
-Mycelium is a decentralized networking and storage solution designed to integrate seamlessly with AI workloads, content delivery, and messaging. This repository contains the source code for the Mycelium website, built using **CSS, HTML, Tailwind, Markdown, and Zola**.  
+AIBOX is a personal AI machine with GPU that can also generate revenue by renting capacity to others. This repository contains the source code for the AIBOX website, built using **CSS, HTML, Tailwind, Markdown, and Zola**.  

 ## 🛠 **Installation & Running Locally**  
 ### **Prerequisites**  
@@ -17,8 +17,8 @@ Mycelium is a decentralized networking and storage solution designed to integrat

 ### **Clone the Repository**  
 ```sh
-git clone https://git.ourworld.tf/ourworld_web/www_mycelium.git
-cd www_mycelium
+git clone https://git.ourworld.tf/ourworld_web/www_aibox.git
+cd www_aibox
 ```

 ### **Install Dependencies**  
--- 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>
    
--- a/config.toml
+++ b/config.toml
@@ -1,5 +1,5 @@
 # The URL the site will be built for
-base_url = "https://www2.aibox.threefold.io/"
+base_url = "https://www.aibox.threefold.io/"
 # Change this to your own URL! Please note this variable **must** be uncommented .

 title = "AIBOX"
--- a/content/_index.md
+++ b/content/_index.md
@@ -9,14 +9,12 @@ extra:
  imgPath: home/tf.png
  title: "Pre-order Your AIBox"
  subtitle: "Choose the box that's packed with the best features for your computing needs."
-  subtitle2: "The AI boxes are delivered by our hardware partners and they define the final price & specifications. Each AI boxes becomes part of the ThreeFold grid and earns rewards."
+  subtitle2: "The AIBoxes are delivered by our hardware partners and they define the final price & specifications. Each AIBox becomes part of the ThreeFold grid and earns rewards."
  plans:
-    - name: "DIY"
+    - name: "Base"
      description: "Add your own GPU's"
      price: "1-1500"
      features:
-        - name: "GPU your choice, minimal AMD Radeon RX 7900 XT"
-          included: true
        - name: "64-128 GB Memory"
          included: true
        - name: "2-4 TB of SSD"
--- a/content/farmer/index.md
+++ b/content/farmer/index.md
@@ -0,0 +1,23 @@
+---
+title: "Become Farmer"
+description: "Meet AIBOX - Your Personal AI Powerhouse powered by ThreeFold."
+insert_anchor_links: "left"
+template: "layouts/farmer.html"
+extra:
+ author: AIBOX
+ imgPath: tf.png
+
+---
+
+
+<!--
+  This page is made by combining different 'section' (partial html pages) together. 
+  To edit the page content, please go to specific 'section' that you would like to edit (stored inside templates/partials folders).
+  To see the list of the section blocks in this page, add or remove some of the partial pages, 
+  go to: static/templates/layouts/index.html.
+
+HOMEPAGE (static/templates/layouts/about.html) contains:
+
+  1. Hero section: "templates/partials/about/about1.html
+  2. Hero section: "templates/partials/about/about2.html
+
--- a/content/footer/_index.md
+++ b/content/footer/_index.md
@@ -14,6 +14,8 @@ extra:

 <br>

+###### [AIBOX Docs](https://threefold.info/aibox/docs/)
+
 ###### [ThreeFold](https://docs.threefold.io/docs/introduction)

 ###### [Support](https://threefoldfaq.crisp.help/en/)
--- a/content/header/index.md
+++ b/content/header/index.md
@@ -7,6 +7,7 @@ extra:

 ---

-
+- [Become a farmer]("farmer")
+- [Docs]("https://threefold.info/aibox/docs/")


--- a/content/home/index.md
+++ b/content/home/index.md
@@ -1,6 +1,6 @@
 ---
 title: "Mycelium"
-description: "Mycelium is a decentralized networking and storage solution designed to integrate seamlessly with AI workloads, content delivery, and messaging. " # quotation marks to allow colons where used
+description: "Meet AIBOX - Your Personal AI Powerhouse powered by ThreeFold. " # quotation marks to allow colons where used
 date: 2018-09-14T21:00:00-05:00
 updated: 2021-02-20T14:40:00-06:00
 draft: false
@@ -9,14 +9,12 @@ extra:
  imgPath: home/tf.png
  title: "Pre-order Your AIBox"
  subtitle: "Choose the box that's packed with the best features for your computing needs."
-  subtitle2: "The AI boxes are delivered by our hardware partners and they define the final price & specifications. Each AI boxes becomes part of the ThreeFold grid and earns rewards."
+  subtitle2: "The AIBoxes are delivered by our hardware partners and they define the final price & specifications. Each AIBox becomes part of the ThreeFold grid and earns rewards."
  plans:
-    - name: "DIY"
+    - name: "Base"
      description: "Add your own GPU's"
      price: "1-1500"
      features:
-        - name: "GPU your choice, minimal AMD Radeon RX 7900 XT"
-          included: true
        - name: "64-128 GB Memory"
          included: true
        - name: "2-4 TB of SSD"
--- a/content/signup/index.md
+++ b/content/signup/index.md
@@ -0,0 +1,58 @@
+---
+title: "Sign Up"
+description: "Pre-register for AIBOX and become a part of a pioneering Web4 movement" # quotation marks to allow colons where used
+template: "layouts/signup.html"
+insert_anchor_links: "left"
+extra:
+ author: ThreeFold
+ imgPath: tf.png
+---
+
+
+
+
+
+
+
+
+
+
+<style>
+
+
+.rounded_img img {
+ border-radius: 8px;
+}
+
+
+.person img{
+ border-radius: 100%;
+ max-width:100px;
+ }
+
+
+.myscale{
+ transition: transform .5s;
+}
+
+
+.myscale:hover{
+ transform: scale(1.2);
+ background-color: whitesmoke;
+}
+
+
+.road_border{
+  
+     border-left: 1px solid rgb(156, 156, 156);
+
+
+   }
+
+
+ .white-gray{
+  color: #9f9f9f;
+}
+
+
+ </style>
--- a/content/signup/tf.png
+++ b/content/signup/tf.png
--- a/static/images/aibox8.jpg
+++ b/static/images/aibox8.jpg
--- a/static/images/aibox_farming.png
+++ b/static/images/aibox_farming.png
--- a/static/images/aibox_farming1.png
+++ b/static/images/aibox_farming1.png
--- a/static/images/aibox_farming2.png
+++ b/static/images/aibox_farming2.png
--- a/templates/index.html
+++ b/templates/index.html
@@ -3,9 +3,11 @@
 {% include "partials/hero/aihero1.html" %}
 {% include "partials/hero/aihero2.html" %}
 {% include "partials/hero/aihero3.html" %}
+{% include "partials/hero/aihero8.html" %}
 {% include "partials/hero/aihero4.html" %}
 {% include "partials/hero/aihero5.html" %}
 {% include "partials/hero/aihero6.html" %}
 {% include "partials/hero/aihero9.html" %}
+{% include "partials/hero/faq.html" %}
 {% include "partials/hero/aihero10.html" %}
 {% endblock content %}
--- a/templates/layouts/farmer.html
+++ b/templates/layouts/farmer.html
@@ -0,0 +1,10 @@
+{% extends "_default/base.html" %}
+{% block content %}
+
+{% include "partials/farmer/hero_section.html" %}
+{% include "partials/farmer/farmers.html" %}
+{% include "partials/farmer/show_images.html" %}
+{% include "partials/farmer/about1.html" %}
+{% include "partials/farmer/cta.html" %}
+
+{% endblock content %}
--- a/templates/layouts/signup.html
+++ b/templates/layouts/signup.html
@@ -0,0 +1,6 @@
+{% extends "_default/base.html" %}
+{% block content %}
+
+{% include "partials/form.html" %}
+
+{% endblock content %}
--- a/templates/partials/farmer/about1.html
+++ b/templates/partials/farmer/about1.html
@@ -0,0 +1,48 @@
+<div class="relative isolate overflow-hidden bg-transparent">
+    <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 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-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">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/#/tf-grid/node-statistics/" target="_blank" class="text-sm/6 font-semibold text-gray-900">Explore Grid Capacity <span aria-hidden="true">→</span></a>
+        </div>
+      </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>
+  
--- a/templates/partials/farmer/about2.html
+++ b/templates/partials/farmer/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>
+  
--- a/templates/partials/farmer/cta.html
+++ b/templates/partials/farmer/cta.html
@@ -0,0 +1,60 @@
+<div class="bg-transparent py-12 lg:pt-24 mb-10 pb-24 px-4">
+    <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-center lg:text-left items-start lg:text-[4rem] text-[2rem] 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="/signup" target="_blank" onclick="window.open(this.href, '_blank'); return false;" 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="https://threefold.info/aibox/docs/" target="_blank" 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>
--- a/templates/partials/farmer/farmers.html
+++ b/templates/partials/farmer/farmers.html
@@ -0,0 +1,68 @@
+<div class="bg-transparent pt-12 pb-12">
+  <div class="mx-auto max-w-7xl px-4 lg:max-w-7xl lg:px-8">
+    <div class="mx-auto max-w-2xl lg:max-w-7xl ">
+      <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 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="bg-transparent">
+      <div class="max-w-6xl mx-0 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-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-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-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-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-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>
+          </dl>
+        </div>
+      </div>
+    </section>
+</div>
+
+<style>
+  /* Fade-in animation for the grid items */
+  .fade-in-box {
+    opacity: 0;
+    animation: fadeIn 0.6s ease-in-out forwards;
+    margin-top: 2.5rem;
+  }
+
+  @keyframes fadeIn {
+    to {
+      opacity: 1;
+    }
+  }
+</style>
+
--- a/templates/partials/farmer/grid_stats.html
+++ b/templates/partials/farmer/grid_stats.html
@@ -0,0 +1,133 @@
+<div class="bg-transparent relative isolate overflow-hidden">
+    <div class="mx-auto max-w-7xl px-6 lg:px-8">
+      <div class="mx-auto max-w-2xl lg:max-w-none">
+        <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 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>
+            </div>
+          </div>
+            <!-- cores -->
+            <div class="fade-in flex flex-col bg-transparent p-4">
+              <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>
+            </div>
+            </div>
+            <!-- Nodes -->
+            <div class="fade-in flex flex-col bg-transparent p-4">
+              <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>
+            </div>
+            </div>
+            <!-- countries -->
+            <div class="fade-in flex flex-col bg-transparent p-4">
+              <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>
+            </div>
+            </div>
+          </dl>
+      </div>
+    </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 lg:mt-0 mt-8">Explore Grid Capacity<span
+          aria-hidden="true">→</span></a>
+    </div>
+  </div>
+    
+  
+  <script>
+    document.addEventListener('DOMContentLoaded', function () {
+      // Initialize the countUp for each of the numbers
+      new CountUp('ssd', 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 */
+    }
+
+    /* Tooltip container */
+
+.tooltip {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  background-color:white;
+}
+
+/* Tooltip text */
+.tooltip .tooltiptext {
+  font-size: 12px;
+  visibility: hidden;
+  background-color: rgb(26 26 26 / 90%);
+  color: #fff;
+  text-align: center;
+  padding: 5px 10px;
+  border-radius: 4px;
+ 
+  /* Position the tooltip text - see examples below! */
+  position: absolute;
+  z-index: 1;
+  bottom: -7px;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+  /* right: -60px; */
+}
+
+/* Show the tooltip text when you mouse over the tooltip container */
+.tooltip:hover .tooltiptext {
+  visibility: visible;
+}
+
+@media (max-width: 480px) {
+    .tooltip .tooltiptext {
+        position: absolute;
+  z-index: 1;
+  bottom: -7px !important;
+  right: 0px !important;
+  top: 0px !important;
+  left: 0px !important;
+    }
+
+}
+  </style>
+  
--- a/templates/partials/farmer/hero_section.html
+++ b/templates/partials/farmer/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>
--- a/templates/partials/farmer/show_images.html
+++ b/templates/partials/farmer/show_images.html
@@ -0,0 +1,55 @@
+<div class="relative isolate overflow-hidden bg-transparent">
+    <div class="px-6 pt-12 pb-12">
+      <div class="mx-auto max-w-7xl 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 project by ThreeFold, a team with over 10 years of experience 
+          building decentralized internet infrastructure.
+        </p> #}
+          <div class="fade-in-box mb-16 mx-auto text-center lg:flex lg:justify-center">
+            <img class="h-auto object-cover" src="/images/aibox_farming1.png" alt="AIBox Specifications">
+          </div>
+          <div class="fade-in-box mt-16 mx-auto text-center lg:flex lg:justify-center">
+            <img class="h-auto object-cover" src="/images/aibox_farming2.png" alt="AIBox Specifications">
+          </div>
+        {# <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>
+  
+  <style>
+    /* Define the fade-in animation */
+    @keyframes fadeIn {
+      0% {
+        opacity: 0;
+      }
+      100% {
+        opacity: 1;
+      }
+    }
+
+    .fade-in-box {
+      opacity: 0;
+      animation: fadeIn 0.6s ease-in-out forwards;
+      margin-top: 2.5rem;
+    }
+  
+    /* 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>
+  
--- a/templates/partials/form.html
+++ b/templates/partials/form.html
@@ -0,0 +1 @@
+<div class="py-24" data-tf-live="01JN3NGD20Z7TH1X28YVVG24Z3"></div><script src="//embed.typeform.com/next/embed.js"></script>
--- a/templates/partials/head.html
+++ b/templates/partials/head.html
@@ -47,58 +47,47 @@
      cookieconsent.run({ "notice_banner_type": "headline", "consent_type": "express", "palette": "light", "language": "en", "page_load_consent_levels": ["strictly-necessary"], "notice_banner_reject_button_hide": false, "preferences_center_close_button_hide": false, "website_name": "https://www.mycelium.threefold.io/", "website_privacy_policy_url": "https://library.threefold.me/info/legal/#/legal__privacypolicy" });
    });
    </script>
-    <!-- Google Tag Manager -->
-    <script>(function (w, d, s, l, i) {
-      w[l] = w[l] || []; w[l].push({
-        'gtm.start':
-          new Date().getTime(), event: 'gtm.js'
-      }); var f = d.getElementsByTagName(s)[0],
-        j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
-          'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
-    })(window, document, 'script', 'dataLayer', 'GTM-N7PNMFH');
-    </script>
-    <!-- End Google Tag Manager -->
-    <!-- Global site tag (gtag.js) - Google Analytics -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-100065546-1"></script>
-    <script>
-    window.dataLayer = window.dataLayer || [];
-    function gtag() { dataLayer.push(arguments); }
-    gtag('js', new Date());

-    gtag('config', 'UA-100065546-1');
-    </script>
    <!-- Matomo Tag Manager -->
-    <script>
-    var _mtm = window._mtm = window._mtm || [];
-    _mtm.push({ 'mtm.startTime': (new Date().getTime()), 'event': 'mtm.Start' });
-    var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0];
-    g.async = true; g.src = 'https://analytics.threefold.io/js/container_KIcuIdn4.js'; s.parentNode.insertBefore(g, s);
-    </script>
-    <!-- End Matomo Tag Manager -->
+<script>
+  var _mtm = window._mtm = window._mtm || [];
+  _mtm.push({'mtm.startTime': (new Date().getTime()), 'event': 'mtm.Start'});
+  (function() {
+    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
+    g.async=true; g.src='https://analytics.threefold.io/js/container_KsiljvY9.js'; s.parentNode.insertBefore(g,s);
+  })();
+</script>
+<!-- End Matomo Tag Manager -->
+
+
+    <!-- Matomo -->
+<script>
+  var _paq = window._paq = window._paq || [];
+  /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
+  _paq.push(['trackPageView']);
+  _paq.push(['enableLinkTracking']);
+  (function() {
+    var u="//analytics.threefold.io/";
+    _paq.push(['setTrackerUrl', u+'matomo.php']);
+    _paq.push(['setSiteId', '23']);
+    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
+    g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
+  })();
+</script>
+<!-- End Matomo Code -->
    <!-- Crisp -->
    <script type="text/plain" cookie-consent="tracking">
-    window.$crisp = [];
-    window.CRISP_WEBSITE_ID = "1a5a5241-91cb-4a41-8323-5ba5ec574da0";
-    (function () {
-        d = document;
-        s = d.createElement("script");
-        s.src = "https://client.crisp.chat/l.js";
-        s.async = 1;
-        d.getElementsByTagName("head")[0].appendChild(s);
-    })();
+        window.$crisp = [];
+        window.CRISP_WEBSITE_ID = "1a5a5241-91cb-4a41-8323-5ba5ec574da0";
+        (function () {
+            d = document;
+            s = d.createElement("script");
+            s.src = "https://client.crisp.chat/l.js";
+            s.async = 1;
+            d.getElementsByTagName("head")[0].appendChild(s);
+        })();
    </script>
-    <!-- Crisp without cookies -->
-    <!-- <script type="text/javascript" cookie-consent="tracking">
-    window.$crisp = [];
-    window.CRISP_WEBSITE_ID = "1a5a5241-91cb-4a41-8323-5ba5ec574da0";
-    (function () {
-      d = document;
-      s = d.createElement("script");
-      s.src = "https://client.crisp.chat/l.js";
-      s.async = 1;
-      d.getElementsByTagName("head")[0].appendChild(s);
-    })();
-  </script> -->
+  
    <!-- end of Crisp-->
    <!-- Required meta tags -->
    <meta charset="utf-8">
--- a/templates/partials/header.html
+++ b/templates/partials/header.html
@@ -1,23 +1,23 @@
 {%- set section = get_page(path="header/index.md") %}
 {% set header_items = section.content | safe | split(pat="<li>") %}

-<header id="header-container bg-white">
-    <div class="z-20 fixed top-0 left-0 right-0 bg-white lg:absolute w-full">
+<header id="header-container">
+    <div class="z-20 fixed top-0 left-0 right-0 bg-white l lg:absolute w-full">
        <div class="relative z-50">
-        <div class="bg-white mx-auto container flex z-50 justify-between items-center px-6 sm:px-4 md:px-6 py-4 lg:px-5 lg:justify-start space-x-10 sm:space-x-4 ">
+        <div class="mx-auto container flex z-50 justify-between items-center px-6 sm:px-4 md:px-6 py-4 lg:px-5 lg:justify-start space-x-10 sm:space-x-4 ">
            <div>
                <a href="{{get_url(path='/')}}" class="flex">
-                    <img class="w-36 h-auto" style="max-width: none;" src="{{ get_url(path=section.extra.logoPath)}}" alt="ThreeFold Logo" />
+                    <img class="w-36 h-auto" style="max-width: none;" src="{{ get_url(path=section.extra.logoPath)}}" alt="AIBOX Logo" />
                </a>
            </div>
            <div class="-mr-2 -my-2 lg:hidden">
-                <button id="hamburger-btn" type="button" class="bg-white inline-flex items-center justify-center p-2 border-gray-100 rounded-md text-gray-400  focus:outline-none focus:text-gray-500 transition duration-200 ease-in-out">
+                <button id="hamburger-btn" type="button" class="bg-black1 inline-flex items-center justify-center p-2 border-gray-100 rounded-md text-gray-400  focus:outline-none focus:text-gray-500 transition duration-200 ease-in-out">
                    <!-- Heroicon name: menu -->
                    <svg class="h-6 w-6 text-gray-100" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                    </svg>
                </button>
-            <button id="close-hamburger-btn" type="button" class="bg-white hidden lg:hidden items-center justify-center p-2 border-gray-100 rounded-md text-gray-400  focus:outline-none focus:text-gray-500 transition duration-250 ease-in-out">
+            <button id="close-hamburger-btn" type="button" class="bg-black1 hidden lg:hidden items-center justify-center p-2 border-gray-100 rounded-md text-gray-400  focus:outline-none focus:text-gray-500 transition duration-250 ease-in-out">
                <!-- Heroicon name: x -->
                <svg class="h-6 w-6 text-gray-100" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
@@ -36,7 +36,7 @@
                    {% set current = get_url(path=link_path[1]) ~ "/" %}
                    {% if header_label is containing("http") %}
                        {% if header_label is not containing("threefold") %}
-                        <a href="{{link_path[1]}}" target="_blank" class="text-lg py-3 leading-6 font-light text-pretty tracking-wide text-black focus:outline-none focus:text-gray-200 transition ease-in-out duration-150">
+                        <a href="{{link_path[1]}}" target="_blank" class="text-lg font-normal  py-3 leading-6 text-pretty tracking-normal text-gray-600 focus:outline-none focus:text-gray-700 transition ease-in-out duration-150">
                            {{link_label}}
                        </a>
                        {% endif %}
@@ -45,22 +45,25 @@
                            {{link_label}}
                          </a>
                      {% else %}
-                        <a href="{{ get_url(path=link_path[1])}}" class="text-lg py-3 leading-6 font-normal text-black focus:outline-none focus:text-gray-200 transition ease-in-out duration-150">
+                        <a href="{{ get_url(path=link_path[1])}}" class="text-lg py-3 leading-6 font-normal text-gray-600 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
                          {{link_label}}
                        </a>
                      {% endif %}
                {% else %}
                    <div class="relative">
                        {% set button_id = header_label ~ "-menu-btn" | slugify %}
-                    <button type="button" id="{{button_id}}" class="bg-transparent nav_btn py-3  text-black group inline-flex items-center space-x-2 text-lg leading-6 font-normal focus:outline-none transition ease-in-out duration-150">
+                    <button type="button" id="{{button_id}}" class="bg-black1 nav_btn py-3  text-white group inline-flex items-center space-x-2 text-lg leading-6 font-normal focus:outline-none transition ease-in-out duration-150">
                        <span>{{ header_label }}</span>
                        <div class="-rotate-90 transition-transform transform origin-center duration-200 ease-out"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#ffffff"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></div>
                    </button>
                    </div>
-
                {% endif %}  
            {% endif %}
            {% endfor %}
+            <a href="https://threefold.info/aibox/docs/" 
+                class="text-lg py-3 leading-6 font-normal text-pretty tracking-wide text-gray-600 focus:outline-none focus:text-gray-200 transition ease-in-out duration-150" target="_blank">
+                Docs
+                </a>
            </nav>

            <div class="hidden md:inline-block md:order-last">
@@ -107,7 +110,7 @@
                      </a>
                    </li> 
                  </ul> #}
-                    <a href="/" target="_blank" class="blinking-effect dashboard rounded-2xl bg-black px-4 p-2 text-sm font-semibold text-white shadow-sm hover:text-gray-800 hover:bg-stone-90">Get AIBox</a>
+                    <a href="/signup" target="_blank" onclick="window.open(this.href, '_blank'); return false;" class="blinking-effect dashboard rounded-2xl bg-black px-4 p-2 text-sm font-semibold text-white shadow-sm hover:text-gray-800 hover:bg-gray-900">Pre-Order Now</a>
                </div>
              </div>
            </div>
@@ -166,13 +169,13 @@
                                    </a>
                                    {% endif %}
                                {% else %}
-                                <a href="{{ get_url(path=link_path[1])}}" class="text-lg px-8 py-3 leading-6 font-normal text-black hover:text-black focus:outline-none focus:text-gray-100 transition ease-in-out duration-150">
+                                <a href="{{ get_url(path=link_path[1])}}" class="text-lg px-8 py-3 leading-6 font-normal text-gray-600 hover:text-gray-900 focus:outline-none focus:text-gray-100 transition ease-in-out duration-150">
                                    {{link_label}}
                                </a>
                                {% endif %}
                            {% else %}
                                {% set button_id = header_label ~ "-mobile-menu-btn" | slugify %}
-                                    <button style="background-color: transparent; border:none" type="button" id="{{button_id}}" class=" px-8 py-3 items-start text-left text-black group inline-flex space-x-2 text-lg leading-6 font-normal hover:text-gray-200 focus:outline-none focus:text-black transition ease-in-out duration-150">
+                                    <button style="background-color: transparent; border:none" type="button" id="{{button_id}}" class=" px-8 py-3 items-start text-left text-white group inline-flex space-x-2 text-lg leading-6 font-normal hover:text-gray-200 focus:outline-none focus:text-white transition ease-in-out duration-150">
                                        {{ header_label }}
                                        <div class="-rotate-90 transition-transform transform origin-center duration-200 ease-out"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#ffffff"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></div>
                                    </button>
@@ -196,8 +199,12 @@
                          {% include "partials/socialLinks.html" %}
                      </div> #}

-                      <div class="rounded-full border-2 my-4 border-gray-400 py-2 mx-4">
-                        <a href="/action" target="_blank" class="mt-2 rounded-md px-4 py-2.5 text-lg font-semibold text-black shadow-sm hover:text-gray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Join the Web4 Revolution</a>
+                      <div class="rounded-xl border-2 my-4 border-gray-400 py-2 mx-4">
+                        <a href="/signup" target="_blank" class="mt-2 rounded-md px-4 py-2.5 text-lg font-semibold text-white shadow-sm hover:text-gray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Pre-Order Now</a><br>
+                        <a href="https://threefold.info/aibox/docs/" 
+                        class="text-lg  px-3 py-6 leading-6 font-normal text-white hover:text-gray-200 focus:outline-none focus:text-gray-50 transition ease-in-out duration-150" target="_blank">
+                        Docs
+                        </a>
                      </div>
                    </nav>                    
                </div>
@@ -217,7 +224,8 @@
 }

 .active{
-  color: #c7c7c7 !important;
+  color: #3d3d3d !important;
+  font-weight:700 !important
 }
 .nav_btn:hover {
  color: #c7c7c7 !important;
--- a/templates/partials/hero/aihero1.html
+++ b/templates/partials/hero/aihero1.html
@@ -6,7 +6,7 @@
          <span id="slides" class="slides"></span>
        </h1>
        <div id="learn-more" class="lg:mt-10 mt-4 flex items-center gap-x-6"> 
-          <a href="#" class="text-xl font-semibold text-black hover:text-gray-200">
+          <a href="/farmers" target="_blank" class="text-xl font-semibold text-black hover:text-gray-200">
            Learn more <span aria-hidden="true">→</span>
          </a>
        </div>
--- a/templates/partials/hero/aihero10.html
+++ b/templates/partials/hero/aihero10.html
@@ -4,10 +4,10 @@
        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 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">
+        <a  href="/signup" target="_blank" onclick="window.open(this.href, '_blank'); return false;" 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>
+        <a href="https://threefold.info/aibox/docs/" target="_blank" class="text-sm/6 font-semibold text-gray-900">Learn more <span aria-hidden="true">→</span></a>
      </div>
      </div>
    </div>
--- a/templates/partials/hero/aihero5.html
+++ b/templates/partials/hero/aihero5.html
@@ -45,7 +45,7 @@
            paragraphs[index].classList.add("show");

            index = (index + 1) % paragraphs.length; // Loop back to the first paragraph
-            setTimeout(showNextParagraph, 4000); // Change paragraph every 4 seconds
+            setTimeout(showNextParagraph, 5000); // Change paragraph every 5 seconds
        }
  
        showNextParagraph();
--- a/templates/partials/hero/aihero6.html
+++ b/templates/partials/hero/aihero6.html
@@ -1,25 +1,27 @@
 <div class="fade-in">
    <div class="relative isolate">
-        <div class="mx-auto max-w-7xl px-6  lg:flex lg:items-center lg:gap-x-15 lg:px-8 py-12">
+        <div class="mx-auto max-w-7xl px-6 lg:flex lg:items-center lg:gap-x-15 lg:px-8 py-12">
            <div class="mx-auto max-w-2xl lg:mx-0 lg:flex-auto">
                <!-- Typing Text -->
-                <h1 class="fade-in mt-10 font-normal tracking-tight text-black lg:text-[6rem] text-[2.5rem]">What's Inside AIBox</h1>
-                
+                <h1 id="typing-text2" class="fade-in mt-10 font-normal tracking-tight text-black lg:text-[6rem] text-[2.5rem]">
+                </h1>
+
                <!-- Specification List -->
                <dl class="mt-10 px-10 max-w-xl lg:space-y-6 space-y-3 text-gray-900 lg:max-w-xl">
-                    <div class="relative pl-2"><dt class="fade-in-item font-light text-xl text-black">✓ ThreeFold Zero-OS</dt></div>
-                    <div class="relative pl-2"><dt class="fade-in-item font-light text-xl text-black">✓ ThreeFold Mycelium Network</dt></div>
-                    <div class="relative pl-2"><dt class="fade-in-item font-light text-xl text-black">✓ Powefull AMD CPU</dt></div>
-                    <div class="relative pl-2"><dt class="fade-in-item font-light text-xl text-black">✓ 64-128 GB Memory</dt></div>
-                    <div class="relative pl-2"><dt class="fade-in-item font-light text-xl text-black">✓ 2 x 2 TB SSD</dt></div>
-                    <div class="relative pl-2"><dt class="fade-in-item font-light text-xl text-black">✓ 7800 XTX GPU</dt></div>
-                    <div class="relative pl-2"><dt class="fade-in-item font-light text-xl text-black">✓ Watercooled GPU/CPU</dt></div>
-                    <div class="relative pl-2"><dt class="fade-in-item font-light text-xl text-black">✓ High Quality motherboard & power supply</dt></div>
+                    <div class="relative pl-2 fade-in-item"><dt class="font-light text-xl text-black">✓ ThreeFold Zero-OS</dt></div>
+                    <div class="relative pl-2 fade-in-item"><dt class="font-light text-xl text-black">✓ ThreeFold Mycelium Network</dt></div>
+                    <div class="relative pl-2 fade-in-item"><dt class="font-light text-xl text-black">✓ Powerful AMD CPU</dt></div>
+                    <div class="relative pl-2 fade-in-item"><dt class="font-light text-xl text-black">✓ 64-128 GB Memory</dt></div>
+                    <div class="relative pl-2 fade-in-item"><dt class="font-light text-xl text-black">✓ 2 x 2 TB SSD</dt></div>
+                    <div class="relative pl-2 fade-in-item"><dt class="font-light text-xl text-black">✓ 7800 XTX GPU</dt></div>
+                    <div class="relative pl-2 fade-in-item"><dt class="font-light text-xl text-black">✓ Watercooled GPU/CPU</dt></div>
+                    <div class="relative pl-2 fade-in-item"><dt class="font-light text-xl text-black">✓ High Quality motherboard & power supply</dt></div>
                </dl>
            </div>
+
            <!-- Image Section -->
            <div class="fade-in-image mt-8 lg:mt-24 lg:flex lg:justify-center lg:w-1/2">
-                <img class="w-full max-w-lg h-auto object-cover rounded-xl" src="/images/aibox_spec.jpg" alt="Mobile App Screenshot">
+                <img class="w-full max-w-lg h-auto object-cover rounded-xl" src="/images/aibox_spec.jpg" alt="AIBox Specifications">
            </div>
        </div>
    </div>
@@ -38,8 +40,6 @@
        opacity: 1;
        transform: translateY(0);
    }
-
-    
 </style>

 <!-- Script -->
@@ -48,49 +48,33 @@
        /*** Typing Effect ***/
        const text = "What's Inside AIBox";
        const textElement = document.getElementById("typing-text2");
-        let loopCount = 0;
-        const maxLoops = 1;
+        let index = 0;

-        function typeText(i, callback) {
-            if (i < text.length) {
-                textElement.textContent += text.charAt(i);
-                setTimeout(() => typeText(i + 1), 100);
-            }
-        }
-
-        function loopTyping() {
-            if (loopCount < maxLoops) {
-                typeText(0, () => {
-                    deleteText(() => {
-                        loopCount++;
-                        loopTyping();
-                    });
-                });
-            } else {
-                typeText(0, () => {}); // Final typing with no delete
+        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 index = 0;
+        let itemIndex = 0;

        function showNextItem() {
-            if (index < items.length) {
-                items[index].classList.add("show");
-                index++;
-                setTimeout(showNextItem, 1000);
+            if (itemIndex < items.length) {
+                items[itemIndex].classList.add("show");
+                itemIndex++;
+                setTimeout(showNextItem, 300); // Faster fade-in
            } else {
                image.classList.add("show");
            }
        }

        /*** Initialize Everything ***/
-        loopTyping();
-        showNextItem();
-
-        // Fade-in Image after text animations
-        setTimeout(() => image.classList.add("show"), 1000);
+        typeText();
+        setTimeout(showNextItem, 1500); // Delay to ensure text is typed first
    });
 </script>
--- a/templates/partials/hero/aihero7.html
+++ b/templates/partials/hero/aihero7.html
@@ -1,6 +1,6 @@
 <div class="bg-white py-12 fade-in-box">
    <div class="mx-auto max-w-4xl px-6 max-lg:text-center lg:max-w-7xl lg:px-8  fade-in-box">
-        <h2 id="typing-text2" class="fade-in text-balance font-normal tracking-tight text-black lg:text-[6rem] text-[2.5rem]">{{ section.extra.title | default(value="Pre-order Your AIBox") }}</h2>
+        <h3  class="text-balance font-normal tracking-tight text-black lg:text-[6rem] text-[2.5rem]">{{ section.extra.title | default(value="Pre-order Your AIBox") }}</h3>
        <p class="mt-6 max-w-2xl text-lg font-light text-pretty text-black max-lg:mx-auto sm:text-xl/8">{{ section.extra.subtitle | default(value="Choose the box that's packed with the best features for your computing needs.") }}</p>
        <p class="mt-6 max-w-2xl text-lg font-light text-pretty text-black max-lg:mx-auto sm:text-xl/10">{{ section.extra.subtitle2}}</p>
    </div>
@@ -80,44 +80,3 @@
    }
 </style>

-<script>
-    document.addEventListener("DOMContentLoaded", function () {
-        const textElement = document.getElementById("typing-text2");
-        let loopCount = 0;
-        const maxLoops = 5;
-
-        function typeText(i, callback) {
-            if (i < text.length) {
-                textElement.textContent += text.charAt(i);
-                setTimeout(() => typeText(i + 1, callback), 100);
-            } else {
-                setTimeout(callback, 1000);
-            }
-        }
-
-        function deleteText(callback) {
-            let currentText = textElement.textContent;
-            if (currentText.length > 0) {
-                textElement.textContent = currentText.substring(0, currentText.length - 1);
-                setTimeout(() => deleteText(callback), 50);
-            } else {
-                setTimeout(callback, 100);
-            }
-        }
-
-        function loopTyping() {
-            if (loopCount < maxLoops) {
-                typeText(0, () => {
-                    deleteText(() => {
-                        loopCount++;
-                        loopTyping();
-                    });
-                });
-            } else {
-                typeText(0, () => {}); // Final typing with no delete
-            }
-        }
-
-        loopTyping();
-    });
-</script>
--- a/templates/partials/hero/aihero8.html
+++ b/templates/partials/hero/aihero8.html
@@ -0,0 +1,38 @@
+<div class="bg-white fade-in lg:pt-24 pt-12 pb-4">
+    <div aria-hidden="true" class="relative items-center justify-center hidden lg:flex">
+      <img src="/images/aibox8.jpg" alt="AIBox" class="object-cover w-full md:w-3/4 lg:w-1/2" width="2432" height="1442">
+      <div class="absolute inset-0 bg-linear-to-t from-white"></div>
+    </div>
+  
+    <div class="relative mx-auto mt-4 max-w-7xl px-4 pb-16 sm:px-6 lg:px-8">
+      <div class="mx-auto max-w-2xl text-center lg:max-w-5xl">
+        <h2 class="text-balance font-normal tracking-tight text-black lg:text-[6rem] text-[2.5rem]">Push the Limits of AI—Your Way.</h2>
+        <p class="mt-8 fade-i lg:text-3xl text-xl leading-snug font-normal tracking-tight  text-gray-900"><span class="font-medium">AIBox</span> is built for those who think beyond limits—whether you're a hacker, AI researcher, or tech enthusiast, AIBox is your playground.</p>
+      </div>
+  
+      <dl class="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 sm:gap-y-16 lg:max-w-none lg:grid-cols-3 lg:gap-x-8">
+        <div class="border-t border-gray-200 pt-4">
+          <dt class="font-medium mt-2 lg:text-xl text-lg text-gray-900">For Developers & Hackers</dt>
+          <dd class="mt-2 lg:text-lg text-sm font-normal text-gray-900">Direct GPU programming with ROCm</dd>
+          <dd class="mt-1 lg:text-lg text-sm font-normal text-gray-900">Custom containerization support</dd>
+          <dd class="mt-1 lg:text-lg text-sm font-normal text-gray-900"> Full Linux kernel access</dd>
+          <dd class="mt-1 lg:text-lg text-sm font-normal text-gray-900">Next-gen P2P networking</dd>
+        </div>
+        <div class="border-t  border-gray-200 pt-4">
+          <dt class="font-medium mt-2 lg:text-xl text-lg text-gray-900">For AI Researchers</dt>
+          <dd class="mt-2 lg:text-lg text-sm font-normal text-gray-900">Support for popular ML frameworks (PyTorch, TensorFlow)</dd>
+          <dd class="mt-1 lg:text-lg text-sm font-normal text-gray-900">Large model training capability (up to 48GB VRAM)</dd>
+          <dd class="mt-1 lg:text-lg text-sm font-normal text-gray-900">Distributed training support</dd>
+          <dd class="mt-1 lg:text-lg text-sm font-normal text-gray-900">Dataset management tools</dd>
+        </div>
+        <div class="border-t border-gray-200 pt-4">
+          <dt class="font-medium mt-2 lg:text-xl text-lg text-gray-900">For Tech Enthusiasts</dt>
+          <dd class="mt-2 lg:text-lg text-sm font-normal text-gray-900">Water cooling management interface</dd>
+          <dd class="mt-1 lg:text-lg text-sm font-normal text-gray-900">Power consumption monitoring</dd>
+          <dd class="mt-1 lg:text-lg text-sm font-normal text-gray-900">Performance benchmarking tools</dd>
+          <dd class="mt-1 lg:text-lg text-sm font-normal text-gray-900">Resource allocation controls</dd>          
+        </div>
+      </dl>
+    </div>
+  </div>
+  
--- a/templates/partials/hero/aihero9.html
+++ b/templates/partials/hero/aihero9.html
@@ -1,6 +1,6 @@
-<div class="bg-white">
+<div class="bg-white pt-12">
  <div class="mx-auto max-w-4xl px-6 max-lg:text-center lg:max-w-7xl lg:px-8">
-      <h2 id="typing-text2" class="fade-in text-balance font-normal tracking-tight text-black lg:text-[6rem] text-[2.5rem]">{{ section.extra.title | default(value="Pre-order Your AIBox") }}</h2>
+      <h2 class="fade-in text-balance font-normal tracking-tight text-black lg:text-[6rem] text-[2.5rem]">{{ section.extra.title | default(value="Pre-order Your AIBox") }}</h2>
      <p class="mt-6 max-w-2xl text-lg font-light text-pretty text-black max-lg:mx-auto sm:text-xl/8">{{ section.extra.subtitle | default(value="Choose the box that's packed with the best features for your computing needs.") }}</p>
      <p class="mt-6 max-w-2xl text-lg font-light text-pretty text-black max-lg:mx-auto sm:text-xl/10">{{ section.extra.subtitle2}}</p>
  </div>
@@ -79,46 +79,3 @@
      }
  }
 </style>
-
-<script>
-  document.addEventListener("DOMContentLoaded", function () {
-      const text = "";
-      const textElement = document.getElementById("typing-text2");
-      let loopCount = 0;
-      const maxLoops = 5;
-
-      function typeText(i, callback) {
-          if (i < text.length) {
-              textElement.textContent += text.charAt(i);
-              setTimeout(() => typeText(i + 1, callback), 100);
-          } else {
-              setTimeout(callback, 1000);
-          }
-      }
-
-      function deleteText(callback) {
-          let currentText = textElement.textContent;
-          if (currentText.length > 0) {
-              textElement.textContent = currentText.substring(0, currentText.length - 1);
-              setTimeout(() => deleteText(callback), 50);
-          } else {
-              setTimeout(callback, 100);
-          }
-      }
-
-      function loopTyping() {
-          if (loopCount < maxLoops) {
-              typeText(0, () => {
-                  deleteText(() => {
-                      loopCount++;
-                      loopTyping();
-                  });
-              });
-          } else {
-              typeText(0, () => {}); // Final typing with no delete
-          }
-      }
-
-      loopTyping();
-  });
-</script>
--- a/templates/partials/hero/faq.html
+++ b/templates/partials/hero/faq.html
@@ -0,0 +1,286 @@
+
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+<script src="https://cdn.tailwindcss.com"></script>
+    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    fontFamily: {
+                        inter: ['Inter', 'sans-serif'],
+                    },
+                },
+            },
+        };
+    </script>
+    <main class="relative flex flex-col justify-center overflow-hidden">
+        <div class="w-full max-w-7xl mx-auto px-4 md:px-6 pt-12 mt-12 lg:mt-20">
+
+            <h1 class="lg:text-5xl text-4xl font-normal tracking-tight text-black">Frequently Asked Questions</h1>
+
+            <!-- Accordion component -->
+            <div class="divide-y divide-white/50 my-10">
+                <!-- Accordion item -->
+                <div x-data="{ expanded: false }" class="py-2">
+                    <h2>
+                        <button
+                            id="faqs-title-01"
+                            type="button"
+                            class="flex items-center justify-between w-full text-left font-semibold py-2 border-none"
+                            @click="expanded = !expanded"
+                            :aria-expanded="expanded"
+                            aria-controls="faqs-text-01"
+                        >
+                            <span style="color: #000;">What is AIBox?</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}" />
+                            </svg>
+                        </button>
+                    </h2>
+                    <div
+                        id="faqs-text-01"
+                        role="region"
+                        aria-labelledby="faqs-title-01"
+                        class="grid text-sm text-slate-200 overflow-hidden transition-all duration-300 ease-in-out"
+                        :class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
+                        >
+                        <div class="overflow-hidden">
+                            <p class="pb-3 text-black text-base font-light">
+                                AIBox is a self-hosted AI compute solution powered  by <a href="https://threefold.io" target="_blank"><span class="font-semibold">ThreeFold</span></a>. It allows users to run AI workloads efficiently, rent out GPU resources, and earn rewards—all without relying on expensive cloud providers.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+                <!-- Accordion item -->
+                <div x-data="{ expanded: false }" class="py-2">
+                    <h2>
+                        <button
+                            id="faqs-title-02"
+                            type="button"
+                            class="flex items-center justify-between w-full text-left font-semibold py-2 border-none"
+                            @click="expanded = !expanded"
+                            :aria-expanded="expanded"
+                            aria-controls="faqs-text-02"
+                        >
+                            <span style="color: #000;">How does AIBox compare to cloud solutions?</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}" />
+                            </svg>
+                        </button>
+                    </h2>
+                    <div
+                        id="faqs-text-02"
+                        role="region"
+                        aria-labelledby="faqs-title-02"
+                        class="grid text-sm text-gray-200 overflow-hidden transition-all duration-300 ease-in-out"
+                        :class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
+                        >
+                        <div class="overflow-hidden">
+                            <p class="pb-3 text-black text-base font-light">
+                                AIBox offers a lower total cost of ownership (TCO) compared to cloud GPUs, with potential savings of over 80% in the long run. It also provides full control over computing resources, avoiding unpredictable cloud billing.
+                            </div>
+                    </div>
+                </div> 
+                <!-- Accordion item -->
+                <div x-data="{ expanded: false }" class="py-2">
+                    <h2>
+                        <button
+                            id="faqs-title-04"
+                            type="button"
+                            class="flex items-center justify-between w-full text-left font-semibold py-2 border-none"
+                            @click="expanded = !expanded"
+                            :aria-expanded="expanded"
+                            aria-controls="faqs-text-04"
+                        >
+                            <span style="color: #000;">Can I use AI Box to generate revenue?</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}" />
+                            </svg>
+                        </button>
+                    </h2>
+                    <div
+                        id="faqs-text-04"
+                        role="region"
+                        aria-labelledby="faqs-title-04"
+                        class="grid text-sm text-gray-200 overflow-hidden transition-all duration-300 ease-in-out"
+                        :class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
+                        >
+                        <div class="overflow-hidden">
+                             <p class="pb-3 text-black text-base font-light">
+                                Yes! AIBox supports resource-sharing options where you can rent out unused GPU power for inference, development, or training workloads. Additionally, you can earn INCA token rewards through network participation.
+                            </p>
+                        </div>
+                    </div>
+                </div> 
+                <!-- Accordion item -->
+                <div x-data="{ expanded: false }" class="py-2">
+                    <h2>
+                        <button
+                            id="faqs-title-05"
+                            type="button"
+                            class="flex items-center justify-between w-full text-left font-semibold py-2 border-none"
+                            @click="expanded = !expanded"
+                            :aria-expanded="expanded"
+                            aria-controls="faqs-text-05"
+                        >
+                            <span style="color: #000;">What are the main use cases for AIBox?</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}" />
+                            </svg>
+                        </button>
+                    </h2>
+                    <div
+                        id="faqs-text-05"
+                        role="region"
+                        aria-labelledby="faqs-title-05"
+                        class="grid text-sm text-gray-200 overflow-hidden transition-all duration-300 ease-in-out"
+                        :class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
+                        >
+                        <div class="overflow-hidden">
+                             <p class="pb-3 text-black text-base font-light">
+                                AIBox is ideal for personal AI tasks and development, team-based shared resources, and commercial applications like AI-as-a-Service, model hosting, and dataset processing.
+                            </p>
+                        </div>
+                    </div>
+                </div> 
+                <!-- Accordion item -->
+                <div x-data="{ expanded: false }" class="py-2">
+                    <h2>
+                        <button
+                            id="faqs-title-06"
+                            type="button"
+                            class="flex items-center justify-between w-full text-left font-semibold py-2 border-none"
+                            @click="expanded = !expanded"
+                            :aria-expanded="expanded"
+                            aria-controls="faqs-text-06"
+                        >
+                            <span style="color: #000;">How does AI Box handle cooling and power efficiency?</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}" />
+                            </svg>
+                        </button>
+                    </h2>
+                    <div
+                        id="faqs-text-06"
+                        role="region"
+                        aria-labelledby="faqs-title-06"
+                        class="grid text-sm text-gray-200 overflow-hidden transition-all duration-300 ease-in-out"
+                        :class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
+                        >
+                        <div class="overflow-hidden">
+                             <p class="pb-3 text-black text-base font-light">
+                                AI Box is designed with superior thermal management and optimized power consumption, ensuring long-term efficiency and performance stability compared to DIY setups.
+                            </p>
+                        </div>
+                    </div>
+                </div> 
+                <!-- Accordion item -->
+                <div x-data="{ expanded: false }" class="py-2">
+                    <h2>
+                        <button
+                            id="faqs-title-07"
+                            type="button"
+                            class="flex items-center justify-between w-full text-left font-semibold py-2 border-none"
+                            @click="expanded = !expanded"
+                            :aria-expanded="expanded"
+                            aria-controls="faqs-text-07"
+                        >
+                            <span style="color: #000;">What is the break-even period for AIBox?</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}" />
+                            </svg>
+                        </button>
+                    </h2>
+                    <div
+                        id="faqs-text-07"
+                        role="region"
+                        aria-labelledby="faqs-title-07"
+                        class="grid text-sm text-gray-200 overflow-hidden transition-all duration-300 ease-in-out"
+                        :class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
+                        >
+                        <div class="overflow-hidden">
+                             <p class="pb-3 text-black text-base font-light">
+                                Depending on usage, AI Box can break even in as little as 3 months when factoring in revenue from GPU rentals and token rewards.
+                            </p>
+                        </div>
+                    </div>
+                </div>    
+                <!-- Accordion item -->
+                <div x-data="{ expanded: false }" class="py-2">
+                    <h2>
+                        <button
+                            id="faqs-title-07"
+                            type="button"
+                            class="flex items-center justify-between w-full text-left font-semibold py-2 border-none"
+                            @click="expanded = !expanded"
+                            :aria-expanded="expanded"
+                            aria-controls="faqs-text-07"
+                        >
+                            <span style="color: #000;">How does AIBox integrate with the ThreeFold network?</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}" />
+                            </svg>
+                        </button>
+                    </h2>
+                    <div
+                        id="faqs-text-07"
+                        role="region"
+                        aria-labelledby="faqs-title-07"
+                        class="grid text-sm text-gray-200 overflow-hidden transition-all duration-300 ease-in-out"
+                        :class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
+                        >
+                        <div class="overflow-hidden">
+                             <p class="pb-3 text-black text-base font-light">
+                                AIBox leverages ThreeFold’s Mycelium P2P network for decentralized computing, allowing seamless collaboration and participation in a sustainable AI ecosystem.
+                            </p>
+                        </div>
+                    </div>
+                </div>                   
+                <!-- Accordion item -->
+                <div x-data="{ expanded: false }" class="py-2">
+                <h2>
+                    <button
+                        id="faqs-title-07"
+                        type="button"
+                        class="flex items-center justify-between w-full text-left font-semibold py-2 border-none"
+                        @click="expanded = !expanded"
+                        :aria-expanded="expanded"
+                        aria-controls="faqs-text-07"
+                    >
+                        <span style="color: #000;">Is AIBox suitable for AI startups and businesses?</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}" />
+                        </svg>
+                    </button>
+                </h2>
+                <div
+                    id="faqs-text-07"
+                    role="region"
+                    aria-labelledby="faqs-title-07"
+                    class="grid text-sm text-gray-200 overflow-hidden transition-all duration-300 ease-in-out"
+                    :class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
+                    >
+                    <div class="overflow-hidden">
+                            <p class="pb-3 text-black text-base font-light">
+                                Absolutely! AIBox provides scalable AI compute at a fraction of cloud costs, making it an excellent choice for AI startups and businesses looking to optimize expenses and maintain control over their AI infrastructure.
+                        </p>
+                    </div>
+                </div>
+            </div>                                                                                              
+    </div>
+            <!-- End: Accordion component -->
+
+        </div>
+    </main>
+
+
+
+   
--- a/templates/partials/hero/pricing-hero.html
+++ b/templates/partials/hero/pricing-hero.html
@@ -1,6 +1,6 @@
 <div class="bg-white py-12 fade-in-box">
    <div class="mx-auto max-w-4xl px-6 max-lg:text-center lg:max-w-7xl lg:px-8  fade-in-box">
-        <h2 id="typing-text2" class="fade-in text-balance font-normal tracking-tight text-black lg:text-[6rem] text-[2.5rem]">{{ section.extra.title | default(value="Pre-order Your AIBox") }}</h2>
+        <h3  class="text-balance font-normal tracking-tight text-black lg:text-[6rem] text-[2.5rem]">{{ section.extra.title | default(value="Pre-order Your AIBox") }}</h3>
        <p class="mt-6 max-w-2xl text-lg font-light text-pretty text-black max-lg:mx-auto sm:text-xl/8">{{ section.extra.subtitle | default(value="Choose the box that's packed with the best features for your computing needs.") }}</p>
        <p class="mt-6 max-w-2xl text-lg font-light text-pretty text-black max-lg:mx-auto sm:text-xl/10">{{ section.extra.subtitle2}}</p>
    </div>
@@ -80,44 +80,3 @@
    }
 </style>

-<script>
-    document.addEventListener("DOMContentLoaded", function () {
-        const textElement = document.getElementById("typing-text2");
-        let loopCount = 0;
-        const maxLoops = 5;
-
-        function typeText(i, callback) {
-            if (i < text.length) {
-                textElement.textContent += text.charAt(i);
-                setTimeout(() => typeText(i + 1, callback), 100);
-            } else {
-                setTimeout(callback, 1000);
-            }
-        }
-
-        function deleteText(callback) {
-            let currentText = textElement.textContent;
-            if (currentText.length > 0) {
-                textElement.textContent = currentText.substring(0, currentText.length - 1);
-                setTimeout(() => deleteText(callback), 50);
-            } else {
-                setTimeout(callback, 100);
-            }
-        }
-
-        function loopTyping() {
-            if (loopCount < maxLoops) {
-                typeText(0, () => {
-                    deleteText(() => {
-                        loopCount++;
-                        loopTyping();
-                    });
-                });
-            } else {
-                typeText(0, () => {}); // Final typing with no delete
-            }
-        }
-
-        loopTyping();
-    });
-</script>
--- a/templates/shortcodes/grid_stats.html
+++ b/templates/shortcodes/grid_stats.html
@@ -0,0 +1,163 @@
+{% 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">
+    <div class="relative mx-auto">
+        <div class="text-center rounded lg:px-6 mt-10 lg:mt-0 mx-auto">
+            {{body | markdown | safe }}
+            <div class="items my-10 block lg:flex lg:flex-wrap justify-center items-center animate-pulse">
+                <!-- capacity -->
+                <div class="tooltip item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
+                    <span class="tooltiptext">The total amount of storage (SSD, HDD, & RAM) on the grid.</span>
+                    <img
+                        class="mx-auto p-4"
+                        src="images/V3-08.png"
+                        width="130"
+                        alt=""
+                    >
+                    <div id="capacity" class="leading-none font-extrabold text-xl"></div>
+                    <span class="block text-md mt-4 font-normal capitalize">capacity</span>
+                </div>
+                <!-- cores -->
+                <div class="tooltip item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
+                    <span class="tooltiptext">The total number of Central Processing Unit cores (compute power) available on the grid.</span>
+                    <img
+                        class="mx-auto p-4"
+                        src="images/V3-11.png"
+                        width="130"
+                        alt=""
+                    >
+                    <div id="cores" class="leading-none font-extrabold text-xl"></div>
+                    <span class="block text-md mt-4 font-normal capitalize">cores</span>
+                </div>
+                <!-- Nodes -->
+                <div class="tooltip item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
+                    <span class="tooltiptext">The total number of nodes on the grid. A node is a computer server 100% dedicated to the network.</span>
+                    <img
+                        class="mx-auto p-4"
+                        src="images/V3-09.png"
+                        width="130"
+                        alt=""
+                    >
+                    <div id="nodes" class="leading-none font-extrabold text-xl"></div>
+                    <span class="block text-md mt-4 font-normal capitalize">nodes</span>
+                </div>
+                <!-- countries -->
+                <div class="tooltip item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
+                    <span class="tooltiptext">The total number of countries where at least one node is connected and operational.</span>
+                    <img
+                        class="mx-auto p-4"
+                        src="images/V3-10.png"
+                        width="130"
+                        alt=""
+                    >
+                    <div id="countries" class="leading-none font-extrabold text-xl"></div>
+                    <span class="block text-md mt-4 font-normal capitalize">countries</span>
+                </div>
+                 <!-- farms -->
+                <div class="tooltip item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
+                    <span class="tooltiptext">The total number of farms on the grid. A farm is one or more nodes operated by the same entity / entities.</span>
+                    <img
+                        class="mx-auto p-4"
+                        src="images/farm.png"
+                        width="130"
+                        alt=""
+                    >
+                    <div id="farms" class="leading-none font-extrabold text-xl">900+</div>
+                    <span class="block text-md mt-4 font-normal capitalize">farms</span>
+                </div>
+            </div>
+            <button class="my-8 blue_b">
+                <a href="https://dashboard.grid.tf/#/tf-grid/node-statistics/" target="_blank">
+                    Explore Grid Capacity
+                </a>
+            </button>
+            {# <button class="my-8">
+                <a href="/host" target="_self">
+                    Become a Cloud Provider
+                </a>
+            </button> #}
+        </div>
+    </div>
+</section>
+
+<style>
+    dd {
+        display: inline-block;
+        margin: auto;
+        border-radius: 50%;
+        line-height: 100px;
+    }
+
+    .bg-green {
+        background-color: #70dfc9;
+    }
+
+    .bg-pink {
+        background-color: #ea1ff7;
+    }
+
+    .blue_b{
+  
+        background-color:#2E83FF !important;
+        color: #fff !important;
+    
+      }
+      .blue_b a{
+         color: #fff !important;
+      }
+    
+    .blue_b:hover {
+      background-color:#5596f5 !important;
+    }
+
+ 
+
+/* Tooltip container */
+.tooltip {
+  position: relative;
+  display: inline-block;
+  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
+}
+
+/* Tooltip text */
+.tooltip .tooltiptext {
+  font-size: 14px;
+  visibility: hidden;
+  width: 250px;
+  background-color: black;
+  color: #fff;
+  text-align: center;
+  padding: 5px 10px;
+  border-radius: 4px;
+ 
+  /* Position the tooltip text - see examples below! */
+  position: absolute;
+  z-index: 1;
+  bottom: -50px;
+  right: -60px;
+}
+
+/* Show the tooltip text when you mouse over the tooltip container */
+.tooltip:hover .tooltiptext {
+  visibility: visible;
+}
+
+@media (max-width: 480px) {
+    .tooltip .tooltiptext {
+        position: absolute;
+  z-index: 1;
+  bottom: -50px;
+  right: 0px !important;
+    }
+
+}
+
+
+</style>
+
+
+
+ 
+  
+
+    
+
Author	SHA1	Message	Date
ehab-hassan	7f01271cd4	update matomo script	2025-03-19 23:57:12 +02:00
ehab-hassan	94267ca253	update matomo script	2025-03-19 23:55:50 +02:00
ehab-hassan	3093de1be0	Merge branch 'development'	2025-03-06 12:20:17 +02:00
ehab-hassan	9272b12392	made images in seperated section	2025-03-06 12:19:25 +02:00
ehab-hassan	adcadc6283	made images in seperated section	2025-03-06 12:11:09 +02:00
ehab-hassan	449b185dff	made images in seperated section	2025-03-06 12:00:14 +02:00
ehab-hassan	a1a8ac8993	update link name	2025-03-05 23:37:35 +02:00
ehab-hassan	9b2b39c983	update images artwork	2025-03-05 23:10:10 +02:00
ehab-hassan	44e619c696	update images artwork	2025-03-05 22:47:10 +02:00
ehab-hassan	e1f31fd6c3	update become farm page	2025-03-05 15:11:47 +02:00
samir	7ead706432	Update config.toml	2025-03-03 10:22:29 +00:00
sasha-astiadi	775201e592	REPLACE mycelium desc	2025-03-01 09:07:58 +08:00
sasha-astiadi	27938e590d	edit img	2025-02-28 20:14:47 +08:00
sasha-astiadi	6eab74c3d0	add new section	2025-02-28 20:10:17 +08:00
sasha-astiadi	c5679c3650	rm gpu rename diy	2025-02-28 18:53:09 +08:00
sasha-astiadi	2e43c0a183	replace email	2025-02-28 17:14:21 +08:00
sasha-astiadi	1ae8dae91a	edit header	2025-02-28 01:18:08 +08:00
sasha-astiadi	37132b7489	edit the speed o	2025-02-27 22:17:31 +08:00
sasha-astiadi	e27571522f	form	2025-02-27 21:20:27 +08:00
sasha-astiadi	316ccf46bd	add form	2025-02-27 21:20:23 +08:00
sasha-astiadi	5c18edc9bf	ok	2025-02-27 20:56:00 +08:00
sasha-astiadi	90f69f4808	fix text animation	2025-02-27 20:51:03 +08:00
sasha-astiadi	f077f3993a	replace ai boxes	2025-02-26 23:39:25 +08:00
sasha-astiadi	5477c7d200	add mailto	2025-02-26 23:37:08 +08:00
sasha-astiadi	35674b6d39	add docs	2025-02-26 23:34:54 +08:00
sasha-astiadi	dfea2619cf	edit faq	2025-02-26 23:32:17 +08:00
sasha-astiadi	ee6c7b1359	edit	2025-02-26 23:31:17 +08:00
sasha-astiadi	ba4bc43358	edit size	2025-02-26 02:44:58 +08:00
sasha-astiadi	4e7cc9b766	Merge branch 'development' of https://git.ourworld.tf/sashaastiadi/www_aibox into development	2025-02-26 02:43:03 +08:00
sasha-astiadi	ab9af6191d	ok	2025-02-26 02:43:00 +08:00
scott	d51328349e	Change myceliums -> aibox	2025-02-25 18:17:35 +00:00
sasha-astiadi	d94c74ee5f	edit header	2025-02-26 02:03:37 +08:00
sasha-astiadi	6c80a0f7f4	grid ststs	2025-02-26 02:03:31 +08:00
sasha-astiadi	2fc16c0675	new	2025-02-26 02:03:22 +08:00
sasha-astiadi	5f9c98e1b5	change links	2025-02-26 02:02:48 +08:00
				`@@ -0,0 +1 @@`
				`<div class="py-24" data-tf-live="01JN3NGD20Z7TH1X28YVVG24Z3"></div><script src="//embed.typeform.com/next/embed.js"></script>`