update matomo script

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"

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"

content/farmer/index.md

@@ -1,8 +1,8 @@
 ---
-title: "About AIBOX"
+title: "Become Farmer"
 description: "Meet AIBOX - Your Personal AI Powerhouse powered by ThreeFold."
 insert_anchor_links: "left"
-template: "layouts/about.html"
+template: "layouts/farmer.html"
 extra:
  author: AIBOX
  imgPath: tf.png

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/)

content/header/index.md

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

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"

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>

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 %}

templates/layouts/about.html

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

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 %}

templates/layouts/signup.html

@@ -0,0 +1,6 @@
+{% extends "_default/base.html" %}
+{% block content %}
+
+{% include "partials/form.html" %}
+
+{% endblock content %}

templates/partials/about/farmers.html

@@ -1,80 +0,0 @@
-<div class="bg-transparent lg:pt-24 pt-12 pb-12">
-  <div class="mx-auto max-w-7xl px-6 lg:max-w-7xl lg:px-8">
-    <div class="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
-      <h2 class="mx-auto fade-in text-left lg:text-5xl text-4xl leading-snug font-normal tracking-tight text-black capitalize">How it works</h2>
-      <p class="text-left my-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-800 fade-in">
-        Regardless of technical expertise, anyone can deploy nodes (servers) from their homes or offices, and participate in a decentralized alternative to corporate-owned data centers – while earning rewards for their contributions. We call this process “farming.”
-      </p>
-  </div>
-<section class="pb-12 lg:pb-24 bg-transparent">
-  <div class="max-w-6xl mx-4 lg:mx-12 xl:mx-auto">
-    <div class="mx-auto max-w-2xl  lg:max-w-none">
-      <dl class="grid max-w-xl grid-cols-1 gap-x-8  gap-y-8 lg:max-w-none lg:grid-cols-3">
-        <div class="fade-in-box flex flex-col p-8 rounded-2xl  bg-gray-50 ring-1 ring-black/5 py-6 shadow-md shadow-black/5">
-          <dt class="flex items-center gap-x-3 text-lg rounded-2xl font-semibold text-black">
-            1. HOST A NODE
-          </dt>
-          <dd class="mt-4 flex flex-auto flex-col">
-            <p class="flex-auto leading-normal font-light text-gray-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>
-
-<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;
-  }
-
-  /* Fading in each grid item with a slight delay */
-  .fade-in-box:nth-child(1) { animation-delay: 0s; }
-  .fade-in-box:nth-child(2) { animation-delay: 0.2s; }
-  .fade-in-box:nth-child(3) { animation-delay: 0.4s; }
-  .fade-in-box:nth-child(4) { animation-delay: 0.6s; }
-  .fade-in-box:nth-child(5) { animation-delay: 0.8s; }
-  .fade-in-box:nth-child(6) { animation-delay: 1s; }
-  .fade-in-box:nth-child(7) { animation-delay: 1.2s; }
-  .fade-in-box:nth-child(8) { animation-delay: 1.4s; }
-  .fade-in-box:nth-child(9) { animation-delay: 1.6s; }
-  .fade-in-box:nth-child(10) { animation-delay: 1.8s; }
-  .fade-in-box:nth-child(11) { animation-delay: 2s; }
-  .fade-in-box:nth-child(12) { animation-delay: 2.2s; }
-
-  @keyframes fadeIn {
-    to {
-      opacity: 1;
-    }
-  }
-</style>

templates/partials/farmer/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/#/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>
+</div>
   
   <style>
     /* Define the fade-in animation */

templates/partials/farmer/cta.html

@@ -1,13 +1,13 @@
-<div class="bg-transparent py-12 lg:pt-24 mb-10 pb-24">
+<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-left items-start lg:text-[4rem] text-[2rem] font-normal tracking-tight text-black fade-in">
+      <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="/" 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">
+        <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>

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>
+

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>

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>
+  

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>

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">

templates/partials/header.html

@@ -7,7 +7,7 @@
         <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">
@@ -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 font-normal  py-3 leading-6 text-pretty tracking-normal text-black focus:outline-none focus:text-gray-700 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,7 +45,7 @@
                             {{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-900 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 %}
@@ -57,10 +57,13 @@
                         <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="/signup" 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-gray-900">Pre-Order Now</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,7 +169,7 @@
                                     </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-gray-900 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 %}
@@ -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="/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">Participate in Web4</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;

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>

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>

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();

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>

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>

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>
+  

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>

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>
+
+
+
+   

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>