updates

.github/workflows/tf_update_dev.yml

@@ -1,46 +0,0 @@
-name: www2.threefold_io
-on: 
-  push:
-    branches: [ development ]
-
-jobs:
-  deploy:
-    name: Deploy
-    runs-on: ubuntu-latest
-    steps:
-    - name: pushing latest change on www2.threefold.io
-      uses: appleboy/ssh-action@master
-      with:
-        host: dev.threefold.io
-        username: webuser
-        key: ${{ secrets.TF_SECRET }}
-        port: 34022
-        script: |
-          cd websites/www2/www_threefold_io/
-          git log -1
-          git fetch
-          git reset --hard origin/development
-          sed -i "s/https:\/\/www.threefold.io/https:\/\/dev.threefold.io/g" config.toml
-          ./build.sh
-          
-  wait:
-    needs: deploy
-    name: Wait for Website Update
-    runs-on: ubuntu-latest
-    steps:
-    - name: Wait Period
-      id: wait-deploy
-      run: |
-        echo "Sleeping for 30"
-        sleep 30
-        
-  checklinks:
-    needs: wait
-    name: Check for Broken Links
-    runs-on: ubuntu-latest
-    steps:
-      - name: Check for Broken Links
-        id: link-report
-        uses: docker://ghcr.io/threefoldfoundation/website-link-checker:latest
-        with:
-          args: 'https://www2.threefold.io -w 404'

.github/workflows/tf_update_prod.yml

@@ -1,46 +0,0 @@
-name: www.threefold_io
-on: 
-  push:
-    branches: [ master ]
-
-jobs:
-  deploy:
-    name: Deploy
-    runs-on: ubuntu-latest
-    steps:
-    - name: pushing latest change on www.threefold.io
-      uses: appleboy/ssh-action@master
-      with:
-        host: www.threefold.io
-        username: root
-        key: ${{ secrets.TF_SECRET }}
-        port: 22
-        script: |
-          cd /opt/www_threefold_io/
-          git log -1
-          git fetch
-          git reset --hard origin/master
-          sed -i "s/https:\/\/dev.threefold.io/https:\/\/www.threefold.io/g" config.toml
-          ./build.sh
-          
-  wait:
-    needs: deploy
-    name: Wait for Website Update
-    runs-on: ubuntu-latest
-    steps:
-    - name: Wait Period
-      id: wait-deploy
-      run: |
-        echo "Sleeping for 30"
-        sleep 30
-        
-  checklinks:
-    needs: wait
-    name: Check for Broken Links
-    runs-on: ubuntu-latest
-    steps:
-      - name: Check for Broken Links
-        id: link-report
-        uses: docker://ghcr.io/threefoldfoundation/website-link-checker:latest
-        with:
-          args: 'https://www.threefold.io -w 404'

.github/workflows/update_dev2.yml

@@ -1,46 +0,0 @@
-name: www3.threefold_io
-on: 
-  push:
-    branches: [ development_sasha ]
-
-jobs:
-  deploy:
-    name: Deploy
-    runs-on: ubuntu-latest
-    steps:
-    - name: pushing latest change on www3.threefold.io
-      uses: appleboy/ssh-action@master
-      with:
-        host: www3.threefold.io
-        username: webuser
-        key: ${{ secrets.TF_SECRET }}
-        port: 34022
-        script: |
-          cd websites/tmp/www_threefold_io/
-          git log -1
-          git restore .
-          git pull
-          sed -i "s/https:\/\/dev.threefold.io/https:\/\/dev2.threefold.io/g" config.toml
-          bash build.sh
-          
-  wait:
-    needs: deploy
-    name: Wait for Website Update
-    runs-on: ubuntu-latest
-    steps:
-    - name: Wait Period
-      id: wait-deploy
-      run: |
-        echo "Sleeping for 30"
-        sleep 30
-        
-  checklinks:
-    needs: wait
-    name: Check for Broken Links
-    runs-on: ubuntu-latest
-    steps:
-      - name: Check for Broken Links
-        id: link-report
-        uses: docker://ghcr.io/threefoldfoundation/website-link-checker:latest
-        with:
-          args: 'https://www3.threefold.io -w 404'

.github/workflows/update_www3.yml

@@ -1,46 +0,0 @@
-name: www3.threefold_io
-on: 
-  push:
-    branches: [ 3.10.0 ]
-
-jobs:
-  deploy:
-    name: Deploy
-    runs-on: ubuntu-latest
-    steps:
-    - name: pushing latest change on www3.threefold.io
-      uses: appleboy/ssh-action@master
-      with:
-        host: www3.threefold.io
-        username: webuser
-        key: ${{ secrets.TF_SECRET }}
-        port: 34022
-        script: |
-          cd websites/www3/www_threefold_io/
-          git log -1
-          git restore .
-          git pull
-          sed -i "s/https:\/\/www.threefold.io/https:\/\/www3.threefold.io/g" config.toml
-          bash build.sh
-          
-  wait:
-    needs: deploy
-    name: Wait for Website Update
-    runs-on: ubuntu-latest
-    steps:
-    - name: Wait Period
-      id: wait-deploy
-      run: |
-        echo "Sleeping for 30"
-        sleep 30
-        
-  checklinks:
-    needs: wait
-    name: Check for Broken Links
-    runs-on: ubuntu-latest
-    steps:
-      - name: Check for Broken Links
-        id: link-report
-        uses: docker://ghcr.io/threefoldfoundation/website-link-checker:latest
-        with:
-          args: 'https://www3.threefold.io -w 404'

config.toml

@@ -6,12 +6,12 @@ title = "AIBOX"
 description = "Your Personal AI Powerhouse"
 
 # When set to "true", a feed is automatically generated.
-generate_feed = true
+#generate_feed = true
 
 # The filename to use for the feed. Used as the template filename, too.
 # Defaults to "atom.xml", which has a built-in template that renders an Atom 1.0 feed.
 # There is also a built-in template "rss.xml" that renders an RSS 2.0 feed.
-feed_filename = "atom.xml"
+#feed_filename = "atom.xml"
 
 # The number of articles to include in the feed. All items are included if
 # this limit is not set (the default).
@@ -51,8 +51,7 @@ external_links_no_referrer = true
 # For example, `...` into `…`, `"quote"` into `“curly”` etc
 smart_punctuation = true
 
-[build]
-not_found = "404.md"
+
 
 [[taxonomies]]
 name = "categories"

content/_index.md

@@ -1,8 +1,8 @@
 ---
 title: "AIBOX"
 description: "Meet AIBOX - Your Personal AI Powerhouse powered by ThreeFold. " # quotation marks to allow colons where used
-date: 2025-01-14T21:00:00-05:00
-updated: 2025-02-25T14:40:00-06:00
+#date: 2025-01-14T21:00:00-05:00
+#updated: 2025-02-25T14:40:00-06:00
 draft: false
 extra:
   author: ThreeFold
@@ -11,12 +11,10 @@ extra:
   subtitle: "Choose the box that's packed with the best features for your computing needs."
   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,7 +14,7 @@ extra:
 
 <br>
 
-###### [AIBOX Docs](https://threefold.info/aibox/docs/)
+###### [AIBox Docs](https://threefold.info/aibox/docs/)
 
 ###### [ThreeFold](https://docs.threefold.io/docs/introduction)
 

content/header/index.md

@@ -7,6 +7,7 @@ extra:
 
 ---
 
-- [Powered by ThreeFold]("about")
+- [Host a Box]("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
@@ -11,12 +11,10 @@ extra:
   subtitle: "Choose the box that's packed with the best features for your computing needs."
   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"

templates/index.html

@@ -3,10 +3,10 @@
 {% 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/coming_soon.html" %}
 {% include "partials/hero/faq.html" %}
-{% include "partials/hero/aihero10.html" %}
+{% include "partials/farmer/cta.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/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 
+          <br> 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, <br> running on <span class="font-semibold">v3.17.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:text-gray-300 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,11 +1,12 @@
-<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">
-        Own Your AI.  <br>Pre-Order<br>Now.
+      <h2 id="blinking4" class="lg:text-balance text-center lg:text-left items-start lg:text-[5rem] text-[3rem] font-normal tracking-tight text-black fade-in">
+        Own <br>
+        Your AI
       </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="mailto:info@threefold.io" 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  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:text-gray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 mb-4 lg:mb-0">
+          Register 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>

templates/partials/farmer/farmers.html

@@ -0,0 +1,72 @@
+<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-5xl text-pretty lg:text-xl text-lg font-light text-gray-800 fade-in">
+        Anyone can deploy AIBox (servers) from their homes or offices and participate in a decentralized alternative to corporate-owned data centers. 
+  <br>
+  <br>
+Starting this summer, farming is evolving. With the launch of the ThreeFold Marketplace, rewards will be based on actual usage. Users will also be able to rent unlisted GPUs directly from the network, unlocking new use cases and making decentralized compute power more accessible than ever.
+
+      </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 BOX
+              </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 an AIBox.</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 AIBox gets verified, registered and secured on the ThreeFold Blockchain. Farmers can then list their resources on the ThreeFold Marketplace, making them available directly to users.</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">Farmers earn rewards when their GPU resources are used through the Marketplace, enabling a fair and transparent peer-to-peer economy.
+                </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/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" 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>
+                    <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-300 hover:bg-gray-900">Register 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">Register 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="https://threefold.info/aibox/docs/" target="_blank" class="text-xl font-semibold text-black hover:text-gray-200">
+          <a href="/farmer" 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

@@ -1,22 +1,22 @@
-<div class="bg-transparent py-24 mb-10 mt-10">
-    <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-[6rem] text-[2.5rem] font-normal tracking-tight text-black fade-in">
-        Own Your AI.  <br>Pre-Order<br>Now.
-      </h2>
-      <div  class="mt-10 flex items-center 0 gap-x-6 lg:mt-0 lg:shrink-0 flex-wrap justify-center lg:justify-start">
-        <a  href="mailto:info@threefold.io" 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 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>Register
+    </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:text-gray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 mb-4 lg:mb-0">
+        Register 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 */
+/* Initial state: elements are invisible */
 .fade-in {
 opacity: 0;
 transition: opacity 1s ease-out;
@@ -30,30 +30,30 @@ opacity: 1;
 </style>
 
 <script>
-  // Get all the elements that need to be faded in
-  document.addEventListener('DOMContentLoaded', function() {
-      const h2 = document.getElementById("blinking4");
+// 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
+    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
-    }
-  });
+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
+threshold: 0.1 // Trigger when 10% of the element is in view
 });
 
 fadeInElements.forEach(element => {
-  observer.observe(element);
+observer.observe(element);
 });
 });
 

templates/partials/hero/aihero3.html

@@ -48,7 +48,7 @@
                 <br>Pre-built container images available for quick setup and deployment
                 <br>Web gateways allow external connections to VM containers
                 <br>
-                <br>Planned Q2 2025.
+                <br>Planned end of summer 2025.
             </div>
         </div>
     </div>
@@ -69,7 +69,7 @@
                 <br>
                 <br>By leveraging Mycelium Actors, we pave the way for Augmented Collective Intelligence.
                 <br>
-                <br>Planned for Q2 2025.
+                <br>Upcoming feature, stay tuned. 
             </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/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/coming_soon.html

@@ -0,0 +1,45 @@
+<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">AIBox is Coming Soon</h2>
+      <h3 class="mx-auto mt-12  text-pretty lg:text-xl text-lg font-semibold text-gray-900 fade-in">
+        The future of computing is almost here.         
+      </h3>
+      <p class="mx-auto mt-4 text-pretty lg:text-xl text-lg font-light text-gray-900 fade-in">We are preparing to launch AIBox, a powerful next-generation system designed to transform decentralized AI and edge computing. Built for performance, privacy, and autonomy, AIBox will enable users to contribute to the ThreeFold Grid and run AI workloads using their own hardware.
+      </p>
+      <p class="mx-auto mt-4 text-pretty lg:text-xl text-lg font-semibold text-gray-900 fade-in">Register and stay informed about launch details, <br> setup options, and how to participate.
+      </p>
+      <div  class="mt-10 flex items-center  gap-x-6 flex-wrap justify-center">
+        <a  href="https://www.aibox.threefold.io/signup/" 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-800 hover:text-gray-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 mb-4 lg:mb-0">
+          Register
+        </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>

templates/partials/hero/faq.html

@@ -94,7 +94,7 @@
                             :aria-expanded="expanded"
                             aria-controls="faqs-text-04"
                         >
-                            <span style="color: #000;">Can I use AI Box to generate revenue?</span>
+                            <span style="color: #000;">Can I use AIBox 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}" />
@@ -110,7 +110,7 @@
                         >
                         <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.
+                                Yes! AIBox supports resource-sharing options where you can rent out unused GPU power for inference, development, or training workloads. 
                             </p>
                         </div>
                     </div>
@@ -158,7 +158,7 @@
                             :aria-expanded="expanded"
                             aria-controls="faqs-text-06"
                         >
-                            <span style="color: #000;">How does AI Box handle cooling and power efficiency?</span>
+                            <span style="color: #000;">How does AIBox 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}" />
@@ -174,7 +174,7 @@
                         >
                         <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.
+                                AIBox is designed with superior thermal management and optimized power consumption, ensuring long-term efficiency and performance stability compared to DIY setups.
                             </p>
                         </div>
                     </div>