update

.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'

README.md

@@ -1,13 +1,13 @@
-# **Mycelium Website**  
+# **AIBOX Website**  
 
-This repository hosts the code for **Mycelium's website**, including both the main and development branches.  
+This repository hosts the code for the **AIBOX website**, including both the main and development branches.  
 
 ## 🌍 **Branches**  
-- **`main`** → Production website: [mycelium.threefold.io](https://mycelium.threefold.io)  
-- **`dev`** → Development version: [www2.mycelium.threefold.io](https://www2.mycelium.threefold.io)  
+- **`main`** → Production website: [aibox.threefold.io](https://aibox.threefold.io)  
+- **`dev`** → Development version: [www2.aibox.threefold.io](https://www2.aibox.threefold.io)  
 
 ## 🚀 **Overview**  
-Mycelium is a decentralized networking and storage solution designed to integrate seamlessly with AI workloads, content delivery, and messaging. This repository contains the source code for the Mycelium website, built using **CSS, HTML, Tailwind, Markdown, and Zola**.  
+AIBOX is a personal AI machine with GPU that can also generate revenue by renting capacity to others. This repository contains the source code for the AIBOX website, built using **CSS, HTML, Tailwind, Markdown, and Zola**.  
 
 ## 🛠 **Installation & Running Locally**  
 ### **Prerequisites**  
@@ -17,8 +17,8 @@ Mycelium is a decentralized networking and storage solution designed to integrat
 
 ### **Clone the Repository**  
 ```sh
-git clone https://git.ourworld.tf/ourworld_web/www_mycelium.git
-cd www_mycelium
+git clone https://git.ourworld.tf/ourworld_web/www_aibox.git
+cd www_aibox
 ```
 
 ### **Install Dependencies**  

_archive/team.html

@@ -1,69 +0,0 @@
-<div class="bg-transparent relative isolate overflow-hidden py-12">
-    <div class="mx-auto max-w-7xl px-6 lg:px-8">
-      <div class="mx-auto max-w-2xl lg:max-w-none">
-        <div class="text-center">
-          <h2 class="fade-in text-balance text-4xl font-normal tracking-tight text-black lg:text-5xl">The Team Behind ThreeFold</h2>
-          <p class="mx-auto mt-4 max-w-3xl text-pretty lg:text-2xl text-xl font-medium text-gray-200 fade-in">Founded by Internet Pioneers 1.0</p>
-          <p class="mx-auto mb-10 mt-6 max-w-4xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">We are a dedicated group committed to advancing a new digital era. Some of us have been working on Internet technology since the early days, when it was a decentralized network. We aim to help bring that vision to life once more. Beyond those below, we have more than 50 engineers, developers, and other team members supporting the project.</p>
-        </div>
-
-        <div class="mt-12 grid grid-cols-1 gap-x-4 lg:gap-y-10 lg:gap-x-8 lg:grid-cols-4 gap-y-0">
-
-            <!-- Team Member -->
-            <div class="group relative fade-in mb-8">
-              <div class="h-56 w-full overflow-hidden rounded-md bg-gray-200 group-hover:opacity-75 lg:h-72 xl:h-80">
-                <img src="/images/kds.png" alt="kristof_de_spiegeleer" class="size-full object-cover">
-              </div>
-              <h3 class="mt-4 text-xl font-semibold text-black">
-                  Kristof de Spiegeleer
-              </h3>
-              <p class="text-md text-gray-300">Co-founder & CEO</p>
-              <p class="mt-1 text-sm font-light  text-black">
-                Serial entrepreneur with 30 years of experience in Internet infrastructure and cloud technology. Passionate about tech for good. +600m $ exits.</p>
-            </div>
-
-            <!-- Team Member -->
-              <div class="group relative fade-in mb-8">
-                <div class="h-56 w-full overflow-hidden rounded-md bg-gray-200 group-hover:opacity-75 lg:h-72 xl:h-80">
-                  <img src="/images/adnan.png" alt="adnan_fatayerji" class="size-full object-cover">
-                </div>
-                <h3 class="mt-4 text-xl font-semibold text-black">
-                    Adnan Fatayerji
-                </h3>
-                <p class="text-md text-gray-300">Co-founder</p>
-                <p class="mt-1 text-sm font-light  text-black">
-                  Tech entrepreneur with multiple exits. Based in Dubai for 20 years. Head of Partnerships and Business Development..</p>
-              </div>
-
-                <!-- Team Member -->
-              <div class="group relative fade-in mb-8">
-                <div class="h-56 w-full overflow-hidden rounded-md bg-gray-200 group-hover:opacity-75 lg:h-72 xl:h-80">
-                  <img src="/images/jan.png" alt="jan_de_landtsheer" class="size-full object-cover">
-                </div>
-                <h3 class="mt-4 text-xl font-semibold text-black">
-                    Jan De Landtsheer
-                </h3>
-                <p class="text-md text-gray-300">Co-founder & CTO</p>
-                <p class="mt-1 text-sm font-light  text-black">
-                  Engineer with 40+ years of experience in deep tech, networking, cloud and storage.</p>
-              </div>
-                  
-                    <!-- Team Member -->
-              <div class="group relative fade-in mb-8">
-                <div class="h-56 w-full overflow-hidden rounded-md bg-gray-200 group-hover:opacity-75 lg:h-72 xl:h-80">
-                  <img src="/images/flo.png" alt="florian_fournier" class="size-full object-cover">
-                </div>
-                <h3 class="mt-4 text-xl font-semibold text-black">
-                    Florian Fournier
-                </h3>
-                <p class="text-md text-gray-300">Co-founder & CMO</p>
-                <p class="mt-1 text-sm font-light  text-black">
-                  Ex Apple marketing director, serial entrepreneur living between Africa and Latin America.</p>
-              </div>
-          </div>
-     </div>
-     <div class="mt-8 flex items-center justify-center gap-x-6 fade-in">
-        <a href="/people" class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:bg-gray-200 hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-offset-2">Meet the Team</a>
-      </div>
- </div>
-    

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,22 +1,20 @@
 ---
 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
   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

@@ -0,0 +1,134 @@
+---
+title: "Become Farmer"
+description: "Meet AIBOX - Your Personal AI Powerhouse powered by ThreeFold."
+insert_anchor_links: "left"
+template: "page.html"
+extra:
+ author: AIBOX
+ imgPath: tf.png
+
+---
+<!-- section 1 (Hero) -->
+
+{{ hero_with_image(
+    image_src="/images/aibox_farming.png",
+    image_alt="AIBox Specifications"
+)}}
+
+<!----------------------------------------------------------------------------------------->
+
+<!-- section 2 (How it works)-->
+
+<div class="container mx-auto lg:max-w-7xl lg:py-24 py-12 px-4 lg:px-0">
+ <div class="mx-auto max-w-2xl px-4 lg:max-w-7xl ">
+
+## How It Works
+
+<br>
+
+Anyone can deploy AIBox (servers) from their homes or offices and participate in a decentralized alternative to corporate-owned data centers.
+
+<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.
+
+</div>
+
+<div class="max-w-7xl mx-4 md:mx-10 lg:mx-20 mt-4 lg:mt-10 xl:mx-auto px-4">
+  
+<dl class="grid max-w-xl grid-cols-1 gap-x-6 gap-y-8 lg:max-w-none lg:grid-cols-3">
+
+{{ farm_steps(
+    image_src="",
+    image_alt="",
+    title="1. HOST A BOX",
+    description="All you need to get started is a modern computer, electricity and network. Once booted with Zero OS, a computer becomes an AIBox."    
+) }}
+
+{{ farm_steps(
+    image_src="",
+    image_alt="",
+    title="2. OFFER CAPACITY",
+    description="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."    
+) }}
+
+{{ farm_steps(
+    image_src="",
+    image_alt="",
+    title="3. EARN REWARDS",
+    description="Farmers earn rewards when their GPU resources are used through the Marketplace, enabling a fair and transparent peer-to-peer economy."    
+) }}
+
+</dl>
+</div>
+</div>
+
+
+<!----------------------------------------------------------------------------------------->
+
+
+<!-- section 3 (im,ages)-->
+
+<div class="container mx-auto lg:max-w-7xl lg:py-24 pb-12 px-4">
+
+![AIBox Specifications](/images/aibox_farming1.png)
+
+<br>
+
+![AIBox Specifications](/images/aibox_farming2.png)
+
+</div>
+
+
+<!----------------------------------------------------------------------------------------->
+
+<!-- Section 4 (Coming Soon) -->
+
+<div class="lg:max-w-5xl text-center container mx-auto px-6 lg:px-8 lg:py-24 py-12">
+
+## Powered by ThreeFold
+
+<div class="max-w-3xl mx-auto">
+<br>
+
+**AIBox** is a project by ThreeFold, a team with over 10 years of experience building decentralized internet infrastructure.
+
+<br>
+
+ThreeFold empowers individuals and organizations to share compute, storage, and network resources on the ThreeFold Grid, creating a truly decentralized and autonomous internet.
+
+<br>
+
+Today, our **Proof-of-Concept Network** is live globally, running on **v3.17.0** technology.
+
+
+ <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>
+
+
+
+<!----------------------------------------------------------------------------------------->
+
+
+<!-- section 5 Cta -->
+
+{{ cta(
+    title_1="Own",
+    title_2="Your AI",
+    title_3="",  
+    button_text_1="Register Now",
+    button_link_1="/signup",
+    button_text_2="",
+    button_link_2="",
+    button_text_3="Learn More",
+    button_link_3="https://threefold.info/aibox/docs/"
+) }}
+

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:
 
 ---
 
-
+- [Host a Box]("farmer")
+- [Docs]("https://threefold.info/aibox/docs/")
 
 

content/home/index.md

@@ -1,88 +1,353 @@
 ---
-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
-date: 2018-09-14T21:00:00-05:00
-updated: 2021-02-20T14:40:00-06:00
+title: "Pre-order Your AIBox"
+description: "Meet AIBOX - Your Personal AI Powerhouse powered by ThreeFold. " # quotation marks to allow colons where used
 draft: false
 extra:
   author: ThreeFold
-  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."
-  plans:
-    - name: "DIY"
-      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"
-          included: true
-        - name: "Integrated Mycelium"
-          included: true
-        - name: "Zero-OS"
-          included: false
-      rewards:
-        - name: "Proof of Capacity: between 500 and 2000 INCA per month depending on chosen GPU"
-        - name: "Proof of Utilization: 80% of INCA Revenue"
-    - name: "1 GPU"
-      description: "Enough for smaller but smart models and Smart Agents."
-      price: "2-2500"
-      features:
-        - name: "1x AMD Radeon RX 7900 XTX"
-          included: true
-        - name: "64-128 GB Memory"
-          included: true
-        - name: "2-4 TB of SSD"
-          included: true
-        - name: "Integrated Mycelium"
-          included: true
-        - name: "Zero-OS"
-          included: false
-      rewards:
-        - name: "Proof of Capacity: 1000 INCA per month"
-        - name: "Proof of Utilization: 80% of INCA Revenue"
-
-
-    - name: "2 GPU"
-      description: "Support for 48 GB models, a lot of power in your hands."
-      price: "4-5000"
-      features:
-        - name: "2x AMD Radeon RX 7900 XTX"
-          included: true
-        - name: "64-128 GB Memory"
-          included: true
-        - name: "2-4 TB of SSD"
-          included: true
-        - name: "Integrated Mycelium"
-          included: true
-        - name: "Zero-OS"
-          included: false
-      rewards:
-        - name: "Proof of Capacity: 2000 INCA per month"
-        - name: "Proof of Utilization: 80% of INCA Revenue"
-
-
-
+  imgPath: home/tf.png 
 ---
 
-<!--
-  This page is made by combining different 'section' (partial html pages) together. 
-  To edit the page content, please go to specific 'section' that you would like to edit (stored inside templates/partials folders).
-  To see the list of the section blocks in this page, add or remove some of the partial pages, 
-  go to: static/templates/layouts/index.html.
 
-HOMEPAGE (static/templates/layouts/index.html) contains:
+<!-- Section 1 (Hero_animation_1) -->
 
-  1. Hero section: "templates/partials/hero/myhero.html
-  2. About section: "templates/partials/hero/myhero1.html"
-  3. How it works section: "templates/partials/hero/myhero3.html"
-  4. whats new section: "templates/partials/hero/myhero5.html
-  5. benefits section: "templates/partials/hero/myhero2.html"
-  6. faq section: "templates/partials/hero/myhero6.html"
-  7. cta section: "templates/partials/hero/myhero7.html"
+{{ hero_animation(
+    title="Your",
+    title_part_1="Personal AI Powerhouse.",
+    title_part_2="Smart GPU, Your Rules.",
+    title_part_3="True Digital Playground.",
+    title_part_4="Gateway to AI freedom.",
+    title_part_5="Personal AIBox.",
+    image_src="/images/aibox6.jpg",
+    image_alt="AI Box",
+    button_text="Learn more",
+    button_link="/farmer"
+)}}
 
--->
+
+<!----------------------------------------------------------------------------------------->
+
+<!-- section 2 (How it works)-->
+
+<div class="container mx-auto lg:max-w-7xl lg:pb-24 pb-12 px-4 lg:px-0">
+ <div class="mx-auto max-w-2xl px-4 lg:max-w-7xl ">
+
+{{ animated_header(
+    header="Take Control of Your AI Future"
+)}}
+
+<br>
+
+### Meet **AIBox** – a powerful and personalized AI experience, without limitations.
+
+</div>
+
+<div class="max-w-7xl mx-4 md:mx-10 lg:mx-20 mt-4 lg:mt-10 xl:mx-auto px-4">
+  
+<dl class="grid max-w-xl grid-cols-1 gap-x-6 gap-y-8 lg:max-w-none lg:grid-cols-3">
+
+{{ farm_steps(
+    image_src="/images/gpu.png",
+    image_alt="GPU",
+    title="Own Your AI GPU, Maximize Your Potential",
+    description="AI is transforming the world, but centralized AI infrastructure comes with limitations – high costs, privacy concerns, and lack of control. AI BOX empowers you to take back ownership of your AI journey by providing a personal AI GPU that’s always within reach."    
+) }}
+
+{{ farm_steps(
+    image_src="/images/Share.png",
+    image_alt="Share",
+    title="Share Your Capacity, Share the Cost",
+    description="By renting out unused capacity to your friends and others, you can generate revenue while still enjoying full control over your hardware. This empowers AI enthusiasts, developers, and researchers to share the cost of their own AI endeavors."    
+) }}
+
+{{ farm_steps(
+    image_src="/images/Decentralized.png",
+    image_alt="Decentralized",
+    title="Decentralized AI for a Better Future",
+    description="The future of AI shouldn’t be locked in the hands of a few corporations. AI BOX enables distributed AI computing, allowing individuals to train, fine-tune, and deploy models without relying on centralized cloud providers. This ensures that AI remains accessible, private, and under your control."    
+) }}
+
+</dl>
+</div>
+</div>
+
+
+<!----------------------------------------------------------------------------------------->
+
+<!-- Section 3 (timeline) -->
+
+<div class="mx-auto max-w-7xl px-4 lg:px-8 lg:py-24 py-12">
+<div class="mx-auto max-w-4xl text-center">
+
+   ## What Can You Do<br> with an **AIBox**
+
+</div>
+
+{{ timeline(
+  subtitle_1="",
+  title_1="Run AI Models with Full Control",
+  point_1_1="Execute AI models directly on your dedicated GPU.",
+  point_1_2="Decide which models are allowed to run on your AI BOX.",
+  point_1_3="Reserve 100% of your GPU resources anytime for your own experimentation",
+
+  subtitle_2="",
+  title_2="Rent Out Virtual Machines (CloudSlices)",
+  point_2_1="Slice your hardware into a maximum of 8 Virtual Machines.",
+  point_2_2="Control GPU allocation: 0, 1, or 2 GPUs per VM (no oversubscription).",
+  point_2_3="Users can connect or disconnect GPUs as needed, with owner permissions.",
+  point_2_4="Each VM is securely connected to Mycelium (P2P overlay network), ensuring efficient communication.",
+  point_2_5="Pre-built container images available for quick setup and deployment.",
+  point_2_6="Web gateways allow external connections to VM containers.",
+  paragraph_2_1="Planned end of summer 2025.",
+
+  subtitle_3="",
+  title_3="Mycelium Actors",
+  point_3_1="Become a host for Mycelium Actors and contribute to the Mycelium network.",
+  point_3_2="Mycelium Actors process jobs and generate rewards for their hosts.",
+  point_3_3="These jobs can range from AI requests (such as LLM processing) to higher-level functions like text-to-speech, website building, transcribing youtube video's, training a large language model, communicate ...",
+  paragraph_3_1="By leveraging Mycelium Actors, we pave the way for Augmented Collective Intelligence.",
+  paragraph_3_2="Upcoming feature, stay tuned."
+
+ ) }}
+
+</div>
+
+
+
+<!----------------------------------------------------------------------------------------->
+
+<!-- Section 4 (Push the Limits) -->
+
+<div class="mx-auto max-w-7xl px-4 lg:px-8 lg:py-24 py-12">
+<div class="product mx-auto mb-8 " style="width:60%">
+
+![aibox](/images/aibox8.jpg)
+    
+</div>
+
+<div class="mx-auto max-w-4xl text-center">
+
+   ## Push the Limits of <br>AI—Your Way.
+
+   <br>
+
+   ### **AIBox** is built for those who think beyond limits. Whether you're a hacker, AI researcher, or tech enthusiast, AIBox is your playground.
+
+</div>
+
+
+<div class="mx-auto mt-10 grid max-w-2xl grid-cols-1 gap-x-6 gap-y-10 lg:max-w-none lg:grid-cols-3 lg:gap-x-10">
+
+
+<div class="p-2 lg:p-6">
+
+#### For Developers & Hackers
+
+<div class="border-t  border-gray-300 py-4">
+
+- Direct GPU programming with ROCm
+- Custom containerization support
+- Full Linux kernel access
+- Next-gen P2P networking
+
+</div> 
+</div>
+
+<div class="p-2 lg:p-6">
+
+#### For AI Researchers
+
+<div class="border-t  border-gray-300 py-4">
+
+- Support for popular ML frameworks (PyTorch, TensorFlow)
+- Large model training capability (up to 48GB VRAM)
+- Distributed training support
+- Dataset management tools
+
+</div> 
+</div>
+
+<div class="p-2 lg:p-6">
+
+#### For Tech Enthusiasts
+
+<div class="border-t border-gray-300 py-4">
+
+- Water cooling management interface
+- Power consumption monitoring
+- Performance benchmarking tools
+- Resource allocation controls 
+        
+</div>       
+</div>
+</div>
+</div>
+</div>
+
+<!----------------------------------------------------------------------------------------->
+
+<!-- Section 5 (Push the Limits) -->
+
+<div class="mx-auto max-w-7xl px-4 lg:px-8 lg:py-24 py-12 mb-10">
+
+<div class="typing px-6 mb-4">
+
+## Why Decentralized<br> AI Matters...
+
+</div>
+
+<div class="mx-auto max-w-3xl">
+
+{{ animated_paragraph(
+    id="1",
+    description="Big tech companies dominate AI resources, often collecting and storing sensitive data while enforcing restrictive policies and pricing..."
+) }}
+
+{{ animated_paragraph(
+    id="2",
+    description="AI BOX empowers you to take back control, ensuring your data stays private and secure while giving you full sovereignty over your AI applications..."
+) }}
+
+{{ animated_paragraph(
+    id="3",
+    description="By decentralizing AI, you can break free from corporate gatekeeping, experiment without limits, and innovate on your terms..."
+) }}
+
+{{ animated_paragraph(
+    id="4",
+    description="As AI workloads continue to grow, self-hosted solutions like AI BOX provide a future-proof infrastructure, guaranteeing you always have cutting-edge computing power at your fingertips."
+) }}
+
+</div>
+</div>
+
+<!----------------------------------------------------------------------------------------->
+
+<!-- Section 6 (Coming Soon) -->
+
+<div class="lg:max-w-5xl text-center container mx-auto px-6 lg:px-8 lg:py-24 py-12">
+
+## AIBox is Coming Soon
+
+<br>
+
+### **The future of computing is almost here.**
+
+<br>
+
+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.
+
+<br>
+
+**Register and stay informed about launch details, <br>setup options, and how to participate.**
+
+<div class="lg:mt-10 mt-6">
+
+<a href="/signup" 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
+</a>
+
+</div>
+
+</div>
+
+
+<!----------------------------------------------------------------------------------------->
+
+<!-- Section 7 (FAQ) -->
+
+<div class="lg:max-w-7xl container mx-auto px-6 lg:px-8 lg:py-24 py-12">
+
+## Frequently Asked Questions
+
+<br>
+
+{{ accordion(
+    id_accordion="accordion1"
+    question="What is AIBox?",
+    description="AIBox is a self-hosted AI compute solution powered by ThreeFold. It allows users to run AI workloads efficiently, rent out GPU resources, and earn rewards—all without relying on expensive cloud providers."
+) }}
+
+{{ accordion(
+    id_accordion="accordion2"
+    question="How does AIBox compare to cloud solutions?",
+    description="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."
+) }}
+
+{{ accordion(
+    id_accordion="accordion3"
+    question="Can I use AIBox to generate revenue?",
+    description="Yes! AIBox supports resource-sharing options where you can rent out unused GPU power for inference, development, or training workloads"
+) }}
+
+{{ accordion(
+    id_accordion="accordion4"
+    question="What are the main use cases for AIBox?",
+    description="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."
+) }}
+
+{{ accordion(
+    id_accordion="accordion5"
+    question="How does AIBox handle cooling and power efficiency?",
+    description="AIBox is designed with superior thermal management and optimized power consumption, ensuring long-term efficiency and performance stability compared to DIY setups."
+) }}
+
+{{ accordion(
+    id_accordion="accordion6"
+    question="What is the break-even period for AIBox?",
+    description="Depending on usage, AI Box can break even in as little as 3 months when factoring in revenue from GPU rentals and token rewards."
+    )
+    }}
+
+{{ accordion(
+    id_accordion="accordion7"
+    question="How does AIBox integrate with the ThreeFold network?",
+    description="AIBox leverages ThreeFold’s Mycelium P2P network for decentralized computing, allowing seamless collaboration and participation in a sustainable AI ecosystem."
+    )
+    }}
+
+{{ accordion(
+    id_accordion="accordion8"
+    question="Is AIBox suitable for AI startups and businesses?",
+    description="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."
+    )
+    }}
+
+</div>
+
+<!-- -------------------------------------------------------------------------------------------------------- -->
+
+
+<!-- section 8 Cta -->
+
+{{ cta(
+    title_1="Own",
+    title_2="Your AI",
+    title_3="",  
+    button_text_1="Register Now",
+    button_link_1="/signup",
+    button_text_2="",
+    button_link_2="",
+    button_text_3="Learn More",
+    button_link_3="https://threefold.info/aibox/docs/"
+) }}
+
+
+<style>
+
+.typing {
+    display: inline-block;
+    overflow: hidden;
+    white-space: normal; /* Allows wrapping */
+    border-right: 4px solid black; /* Cursor effect */
+    animation: typing 3s steps(40, end) forwards, blink 0.75s step-end infinite;
+    max-width: 100%; /* Ensures text expands naturally */
+    word-break: break-word; /* Allows words to break onto a new line */
+  }
+
+@media (max-width: 480px) {
+  
+  .product {
+    width: 100% !important;
+  }
+
+</style>

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>

css/index.css

@@ -12,11 +12,6 @@
 
 @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
 
-.dashboard:hover {
-
-  background: #74ddc3 !important;
-}
-
 
 /* Custom CSS for header partial */
 .backdrop-blur {
@@ -40,11 +35,6 @@
   background-color: rgba(16,16,16,1);
 }
 
-.bg-transparent {
-  background-color: transparent;
-}
-
-
 
 /* Custom css allowing image styling in markdown */
 img[src*="#mx-auto"] {
@@ -262,43 +252,40 @@ background-color:#5596f5 !important;
 
 @layer components {
   h1 {
-    @apply text-4xl lg:text-6xl font-normal;
-    color: #ffffff;
+    @apply  lg:text-[7.37rem] text-[3rem] font-medium tracking-tight leading-tight ;
     font-family: "Inter", sans-serif !important;
   }
   h2 {
-    @apply text-3xl lg:text-4xl my-4 font-normal leading-none;
-    color: #ffffff;
+    @apply  lg:text-[5rem] text-[2.5rem] leading-[1.1] font-normal tracking-tight;
     font-family: "Inter", sans-serif !important;
   }
   h2 strong {
     @apply font-semibold;
   }
   h3 {
-    @apply text-2xl lg:text-3xl my-4 font-extralight;
-    color: #ffffff;
+    @apply lg:text-3xl text-xl leading-snug font-light tracking-tight;
     font-family: "Inter", sans-serif !important;
   }
   h3 strong {
     @apply font-normal;
   }
   h4 {
-    @apply text-xl lg:text-2xl font-normal tracking-wider;
+    @apply text-xl font-semibold my-2 tracking-wider;
     font-family: "Inter", sans-serif !important;
     
   }
   h5 {
     @apply text-lg my-1 tracking-normal font-medium;
     font-family: "Inter", sans-serif !important;
-    color: #fff !important
+   
   }
   h6 {
     @apply text-md not-italic font-normal my-1;
     font-family: "Inter", sans-serif !important;
   }
   p {
-    @apply text-lg;
-    color: #3d3d3d;
+    @apply lg:text-xl text-lg font-light text-gray-900;
+   
     font-family: "Inter", sans-serif !important;
   }
   blockquote {
@@ -591,9 +578,7 @@ header {
   display: none;
 }
 @media (min-width: 1024px){
-  h2 {
-    font-size: 3.5rem;
-  } 
+ 
   
 }
 

tailwind.config.js

@@ -5,26 +5,10 @@ module.exports = {
       './templates/**/*.html'
   ],
   safelist: [
-    {
-      pattern: /(-|)(ml|mr)-(4|8|12|16|20|24|28)/,
-      variants: [
-        'sm', 'md', 'lg', 
-        'first', 'first:sm', 'first:md', 'first:lg', 
-        'last', 'last:sm', 'last:md', 'last:lg'
-      ],
-    },
-    {
-      pattern: /(pt|pb)-(0)/,
-      variants: [
-        '!', 'lg', 
-        'first', 'first:sm', 'first:md', 'first:lg', 
-        'last', 'last:sm', 'last:md', 'last:lg'
-      ],
-    },
-    {
-      pattern: /bg-teal-(50|100|200|300|400|500|600|700|800|900)/,  // Added teal color safelist
-    }
-  ],
+    'lg:grid-cols-3',
+  'md:grid-cols-2',
+  'grid-cols-1',
+],
  
   important: true,
   theme: {

templates/_default/base.html

@@ -3,7 +3,7 @@
 {% include "partials/head.html" %}
 {% include "partials/header.html" %}
 
-<body class="bg-white">
+<body>
 
   <!-- Google Tag Manager (noscript) -->
   <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-N7PNMFH" height="0" width="0"
@@ -27,9 +27,9 @@
     // from: https://stackoverflow.com/a/4425214
     var links = document.links;
     var internal_hosts = [
-        'www.mycelium.threefold.io',
-        'mycelium.threefold.io',
-        'www2.mycelium.threefold.io',
+        'www.aibox.threefold.io',
+        'aibox.threefold.io',
+        'www2.aibox.threefold.io',
         'localhost',
         '127.0.0.1'
     ]
@@ -42,7 +42,7 @@
   <!-- End Twitter universal website tag code -->
 
   {% include "partials/header.html" %}
-  <div id="content" class="px-4 lg:px-0 pt-12 overflow-hidden">
+  <div id="content" class="pt-12 overflow-hidden">
     {% block content %}{% endblock %}
 
   </div>

templates/index.html

@@ -1,11 +1,11 @@
 {% extends "_default/base.html" %}
 {% block content %}
-{% include "partials/hero/aihero1.html" %}
-{% include "partials/hero/aihero2.html" %}
-{% include "partials/hero/aihero3.html" %}
-{% include "partials/hero/aihero4.html" %}
-{% include "partials/hero/aihero5.html" %}
-{% include "partials/hero/aihero6.html" %}
-{% include "partials/hero/aihero9.html" %}
-{% include "partials/hero/aihero10.html" %}
+
+
+<!-- home page template, has a banner and rows of page summaries -->
+<div>
+    {% set page = get_page(path="home/index.md") %}
+    {{page.content | safe}}
+</div>
+
 {% endblock content %}

templates/layouts/signup.html

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

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

@@ -1,23 +1,23 @@
 {%- set section = get_page(path="header/index.md") %}
 {% set header_items = section.content | safe | split(pat="<li>") %}
 
-<header id="header-container bg-white">
-    <div class="z-20 fixed top-0 left-0 right-0 bg-white lg:absolute w-full">
+<header id="header-container">
+    <div class="z-20 fixed top-0 left-0 right-0 bg-white l lg:absolute w-full">
         <div class="relative z-50">
-        <div class="bg-white mx-auto container flex z-50 justify-between items-center px-6 sm:px-4 md:px-6 py-4 lg:px-5 lg:justify-start space-x-10 sm:space-x-4 ">
+        <div class="mx-auto container flex z-50 justify-between items-center px-6 sm:px-4 md:px-6 py-4 lg:px-5 lg:justify-start space-x-10 sm:space-x-4 ">
             <div>
                 <a href="{{get_url(path='/')}}" class="flex">
-                    <img class="w-36 h-auto" style="max-width: none;" src="{{ get_url(path=section.extra.logoPath)}}" alt="ThreeFold Logo" />
+                    <img class="w-36 h-auto" style="max-width: none;" src="{{ get_url(path=section.extra.logoPath)}}" alt="AIBOX Logo" />
                 </a>
             </div>
             <div class="-mr-2 -my-2 lg:hidden">
-                <button id="hamburger-btn" type="button" class="bg-white inline-flex items-center justify-center p-2 border-gray-100 rounded-md text-gray-400  focus:outline-none focus:text-gray-500 transition duration-200 ease-in-out">
+                <button id="hamburger-btn" type="button" class="bg-black1 inline-flex items-center justify-center p-2 border-gray-100 rounded-md text-gray-400  focus:outline-none focus:text-gray-500 transition duration-200 ease-in-out">
                     <!-- Heroicon name: menu -->
                     <svg class="h-6 w-6 text-gray-100" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                     </svg>
                 </button>
-            <button id="close-hamburger-btn" type="button" class="bg-white hidden lg:hidden items-center justify-center p-2 border-gray-100 rounded-md text-gray-400  focus:outline-none focus:text-gray-500 transition duration-250 ease-in-out">
+            <button id="close-hamburger-btn" type="button" class="bg-black1 hidden lg:hidden items-center justify-center p-2 border-gray-100 rounded-md text-gray-400  focus:outline-none focus:text-gray-500 transition duration-250 ease-in-out">
                 <!-- Heroicon name: x -->
                 <svg class="h-6 w-6 text-gray-100" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
@@ -36,7 +36,7 @@
                     {% set current = get_url(path=link_path[1]) ~ "/" %}
                     {% if header_label is containing("http") %}
                         {% if header_label is not containing("threefold") %}
-                        <a href="{{link_path[1]}}" target="_blank" class="text-lg py-3 leading-6 font-light text-pretty tracking-wide text-black focus:outline-none focus:text-gray-200 transition ease-in-out duration-150">
+                        <a href="{{link_path[1]}}" target="_blank" class="text-lg font-normal  py-3 leading-6 text-pretty tracking-normal text-gray-600 focus:outline-none focus:text-gray-700 transition ease-in-out duration-150">
                             {{link_label}}
                         </a>
                         {% endif %}
@@ -45,22 +45,25 @@
                             {{link_label}}
                           </a>
                       {% else %}
-                        <a href="{{ get_url(path=link_path[1])}}" class="text-lg py-3 leading-6 font-normal text-black focus:outline-none focus:text-gray-200 transition ease-in-out duration-150">
+                        <a href="{{ get_url(path=link_path[1])}}" class="text-lg py-3 leading-6 font-normal text-gray-600 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
                           {{link_label}}
                         </a>
                       {% endif %}
                 {% else %}
                     <div class="relative">
                         {% set button_id = header_label ~ "-menu-btn" | slugify %}
-                    <button type="button" id="{{button_id}}" class="bg-transparent nav_btn py-3  text-black group inline-flex items-center space-x-2 text-lg leading-6 font-normal focus:outline-none transition ease-in-out duration-150">
+                    <button type="button" id="{{button_id}}" class="bg-black1 nav_btn py-3  text-white group inline-flex items-center space-x-2 text-lg leading-6 font-normal focus:outline-none transition ease-in-out duration-150">
                         <span>{{ header_label }}</span>
                         <div class="-rotate-90 transition-transform transform origin-center duration-200 ease-out"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#ffffff"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></div>
                     </button>
                     </div>
-
                 {% endif %}  
             {% endif %}
             {% endfor %}
+            <a href="https://threefold.info/aibox/docs/" 
+                class="text-lg py-3 leading-6 font-normal text-pretty tracking-wide text-gray-600 focus:outline-none focus:text-gray-200 transition ease-in-out duration-150" target="_blank">
+                Docs
+                </a>
             </nav>
 
             <div class="hidden md:inline-block md:order-last">
@@ -107,7 +110,7 @@
                       </a>
                     </li> 
                   </ul> #}
-                    <a href="/" target="_blank" class="blinking-effect dashboard rounded-2xl bg-black px-4 p-2 text-sm font-semibold text-white shadow-sm hover:text-gray-800 hover:bg-stone-90">Get AIBox</a>
+                    <a href="/signup" target="_blank" onclick="window.open(this.href, '_blank'); return false;" class="blinking-effect dashboard rounded-2xl bg-black px-4 p-2 text-sm font-semibold text-white shadow-sm hover:text-gray-300 hover:bg-gray-900">Register Now</a>
                 </div>
               </div>
             </div>
@@ -166,13 +169,13 @@
                                     </a>
                                     {% endif %}
                                 {% else %}
-                                <a href="{{ get_url(path=link_path[1])}}" class="text-lg px-8 py-3 leading-6 font-normal text-black hover:text-black focus:outline-none focus:text-gray-100 transition ease-in-out duration-150">
+                                <a href="{{ get_url(path=link_path[1])}}" class="text-lg px-8 py-3 leading-6 font-normal text-gray-600 hover:text-gray-900 focus:outline-none focus:text-gray-100 transition ease-in-out duration-150">
                                     {{link_label}}
                                 </a>
                                 {% endif %}
                             {% else %}
                                 {% set button_id = header_label ~ "-mobile-menu-btn" | slugify %}
-                                    <button style="background-color: transparent; border:none" type="button" id="{{button_id}}" class=" px-8 py-3 items-start text-left text-black group inline-flex space-x-2 text-lg leading-6 font-normal hover:text-gray-200 focus:outline-none focus:text-black transition ease-in-out duration-150">
+                                    <button style="background-color: transparent; border:none" type="button" id="{{button_id}}" class=" px-8 py-3 items-start text-left text-white group inline-flex space-x-2 text-lg leading-6 font-normal hover:text-gray-200 focus:outline-none focus:text-white transition ease-in-out duration-150">
                                         {{ header_label }}
                                         <div class="-rotate-90 transition-transform transform origin-center duration-200 ease-out"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#ffffff"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></div>
                                     </button>
@@ -196,8 +199,12 @@
                           {% include "partials/socialLinks.html" %}
                       </div> #}
 
-                      <div class="rounded-full border-2 my-4 border-gray-400 py-2 mx-4">
-                        <a href="/action" target="_blank" class="mt-2 rounded-md px-4 py-2.5 text-lg font-semibold text-black shadow-sm hover:text-gray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Join the Web4 Revolution</a>
+                      <div class="rounded-xl border-2 my-4 border-gray-400 py-2 mx-4">
+                        <a href="/signup" target="_blank" class="mt-2 rounded-md px-4 py-2.5 text-lg font-semibold text-white shadow-sm hover:text-gray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">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/aihero10.html

@@ -1,60 +0,0 @@
-<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="/" 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">
-          Pre-order Now
-        </a>
-        <a href="/" class="text-sm/6 font-semibold text-gray-900">Learn more <span aria-hidden="true">→</span></a>
-      </div>
-      </div>
-    </div>
-</div>
-
-
-
-<style>
-  /* Initial state: elements are invisible */
-.fade-in {
-opacity: 0;
-transition: opacity 1s ease-out;
-}
-
-/* State when element is in view */
-.fade-in.visible {
-opacity: 1;
-}
-
-</style>
-
-<script>
-  // Get all the elements that need to be faded in
-  document.addEventListener('DOMContentLoaded', function() {
-      const h2 = document.getElementById("blinking4");
-
-      setInterval(() => {
-          h2.style.opacity = (h2.style.opacity == "1") ? "0.3" : "1";
-      }, 1000); // Blinks every 2 seconds
-// Target all elements with the 'fade-in' class
-const fadeInElements = document.querySelectorAll('.fade-in');
-
-const observer = new IntersectionObserver((entries, observer) => {
-  entries.forEach(entry => {
-    if (entry.isIntersecting) {
-      // Add 'visible' class to the element when it's in view
-      entry.target.classList.add('visible');
-      observer.unobserve(entry.target); // Stop observing after it fades in
-    }
-  });
-}, {
-  threshold: 0.1 // Trigger when 10% of the element is in view
-});
-
-fadeInElements.forEach(element => {
-  observer.observe(element);
-});
-});
-
-</script>

templates/partials/hero/aihero3.html

@@ -1,122 +0,0 @@
-<div class="fade-in bg-transparent relative isolate overflow-hidden pt-12 pb-0">
-    <div class="mx-auto max-w-7xl px-6 lg:px-8 lg:pb-10 pb-0">
-        <div class="mx-auto max-w-2xl lg:max-w-4xl">
-            <div class="text-center">
-                <h2 id="blinking" class="fade-in text-balance font-normal tracking-tight text-black lg:text-[6rem] text-[2.5rem]">What Can You Do with an <span class="font-medium">AIBox</span></h2>
-            </div>
-        </div>
-    </div>
-</div>
-
-<div class="space-y-8 lg:py-12 py-6 mx-auto max-w-7xl relative before:absolute before:inset-0 before:ml-5 before:-translate-x-px md:before:mx-auto md:before:translate-x-0 before:h-full before:w-0.5 before:bg-gradient-to-b before:from-transparent before:via-slate-300 before:to-transparent">
-
-    <!-- Item #1 -->
-    <div class="fade-in relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active py-4">
-        <div class="flex items-center justify-center w-10 h-10 rounded-full border border-white bg-gray-600 text-white group-[.is-active]:bg-emerald-500 group-[.is-active]:text-emerald-50 shadow shrink-0 md:order-1 md:group-odd:-translate-x-1/2 md:group-even:translate-x-1/2">
-            <svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="12" height="10">
-                <path fill-rule="nonzero" d="M10.422 1.257 4.655 7.025 2.553 4.923A.916.916 0 0 0 1.257 6.22l2.75 2.75a.916.916 0 0 0 1.296 0l6.415-6.416a.916.916 0 0 0-1.296-1.296Z" />
-            </svg>
-        </div>
-        <div class="fade-in w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white/5 p-4 rounded-2xl shadow">
-            <div class="font-semibold text-lg text-black mb-2">Run AI Models with Full Control   </div>
-            <div class="text-gray-900 font-light">
-                
-                <br>Execute AI models directly on your dedicated GPU
-
-                <br>Decide which models are allowed to run on your AI BOX
-
-                <br>Reserve 100% of your GPU resources anytime for your own experimentation
-            </div>
-        </div>
-    </div>
-
-    <!-- Item #2 -->
-    <div class="fade-in relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active  py-4">
-        <div class="flex items-center justify-center w-10 h-10 rounded-full border border-white bg-gray-600 group-[.is-active]:bg-emerald-500 text-white group-[.is-active]:text-emerald-50 shadow shrink-0 md:order-1 md:group-odd:-translate-x-1/2 md:group-even:translate-x-1/2">
-            <svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="12" height="10">
-                <path fill-rule="nonzero" d="M10.422 1.257 4.655 7.025 2.553 4.923A.916.916 0 0 0 1.257 6.22l2.75 2.75a.916.916 0 0 0 1.296 0l6.415-6.416a.916.916 0 0 0-1.296-1.296Z" />
-            </svg>
-        </div>
-        <div class="fade-in w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white/5 p-4 rounded-2xl shadow">
-            <div class="font-semibold text-lg text-black mb-2">Rent Out Virtual Machines (CloudSlices)
-            </div>
-            <div class="text-gray-900 font-light">
-                Slice your hardware into a maximum of 8 Virtual Machines
-                <br>Control GPU allocation: 0, 1, or 2 GPUs per VM (no oversubscription)
-                <br>Users can connect or disconnect GPUs as needed, with owner permissions
-                <br>Each VM is securely connected to Mycelium (P2P overlay network), ensuring efficient communication       
-                <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.
-            </div>
-        </div>
-    </div>
-
-    <!-- Item #3 -->
-    <div class="fade-in relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active  py-4">
-        <div class="flex items-center justify-center w-10 h-10 rounded-full border border-white bg-gray-600 group-[.is-active]:bg-emerald-500 text-white group-[.is-active]:text-emerald-50 shadow shrink-0 md:order-1 md:group-odd:-translate-x-1/2 md:group-even:translate-x-1/2">
-            <svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="12" height="10">
-                <path fill-rule="nonzero" d="M10.422 1.257 4.655 7.025 2.553 4.923A.916.916 0 0 0 1.257 6.22l2.75 2.75a.916.916 0 0 0 1.296 0l6.415-6.416a.916.916 0 0 0-1.296-1.296Z" />
-            </svg>
-        </div>
-        <div class="fade-in w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white/5 p-4 rounded-2xl shadow">
-            <div class="font-semibold text-lg text-black mb-2">Mycelium Actors</div>
-            <div class="text-gray-900 font-light">
-                Become a host for Mycelium Actors and contribute to the Mycelium network.
-                <br>Mycelium Actors process jobs and generate rewards for their hosts.
-                <br>These jobs can range from AI requests (such as LLM processing) to higher-level functions like text-to-speech, website building, transcribing youtube video's, training a large language model, communicate ...
-                <br>
-                <br>By leveraging Mycelium Actors, we pave the way for Augmented Collective Intelligence.
-                <br>
-                <br>Planned for Q2 2025.
-            </div>
-        </div>
-    </div>
-</div>
-
-
-<style>
-    /* Initial state: elements are invisible */
-.fade-in {
-  opacity: 0;
-  transition: opacity 1s ease-out;
-}
-
-/* State when element is in view */
-.fade-in.visible {
-  opacity: 1;
-}
-
-</style>
-
-<script>
-    // Get all the elements that need to be faded in
-    document.addEventListener('DOMContentLoaded', function() {
-        const h2 = document.getElementById("blinking");
-
-        setInterval(() => {
-            h2.style.opacity = (h2.style.opacity == "1") ? "0.5" : "1";
-        }, 1500); // Blinks every 2 seconds
-  // Target all elements with the 'fade-in' class
-  const fadeInElements = document.querySelectorAll('.fade-in');
-
-  const observer = new IntersectionObserver((entries, observer) => {
-    entries.forEach(entry => {
-      if (entry.isIntersecting) {
-        // Add 'visible' class to the element when it's in view
-        entry.target.classList.add('visible');
-        observer.unobserve(entry.target); // Stop observing after it fades in
-      }
-    });
-  }, {
-    threshold: 0.1 // Trigger when 10% of the element is in view
-  });
-
-  fadeInElements.forEach(element => {
-    observer.observe(element);
-  });
-});
-
-</script>
-

templates/partials/hero/aihero4.html

@@ -1,32 +0,0 @@
-<div class="bg-white pt-12 lg:pt-24 pb-6">
-    <div class="mx-auto max-w-7xl px-6 lg:max-w-7xl lg:px-0">
-        <div class="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
-            <div class="max-w-3xl">
-                <h2 class="fade-in text-left lg:text-[6rem] text-[2.5rem] leading-[1.1] font-normal tracking-tight text-black typing">
-                    Why Decentralized AI Matters...
-                </h2>
-            </div> 
-        </div>
-    </div>
-</div>
-
-<style>
-  @keyframes typing {
-    from { max-width: 0 }
-    to { max-width: 100% }
-  }
-
-  @keyframes blink {
-    50% { border-color: transparent }
-  }
-
-  .typing {
-    display: inline-block;
-    overflow: hidden;
-    white-space: normal; /* Allows wrapping */
-    border-right: 4px solid black; /* Cursor effect */
-    animation: typing 3s steps(40, end) forwards, blink 0.75s step-end infinite;
-    max-width: 100%; /* Ensures text expands naturally */
-    word-break: break-word; /* Allows words to break onto a new line */
-  }
-</style>

templates/partials/hero/aihero5.html

@@ -1,53 +0,0 @@
-<div class="bg-white px-12 pb-24 lg:pb-16 mx-auto">
-    <div class="mx-auto max-w-3xl items-start pb-12">
-            <p id="1" class="fade-in-up text-left lg:text-3xl text-xl leading-snug font-light tracking-tight text-black px-10">
-                Big tech companies dominate AI resources, often collecting and storing sensitive data while enforcing restrictive policies and pricing...
-            </p>
-
-            <p id="2" class="fade-in-up text-left lg:text-3xl text-xl leading-snug font-light tracking-tight text-black">
-                AI BOX empowers you to take back control, ensuring your data stays private and secure while giving you full sovereignty over your AI applications...
-            </p>
-
-            <p id="3" class="fade-in-up text-left lg:text-3xl text-xl leading-snug font-light tracking-tight text-black">
-                By decentralizing AI, you can break free from corporate gatekeeping, experiment without limits, and innovate on your terms...
-            </p>
-
-            <p id="4" class="fade-in-up text-left lg:text-3xl text-xl leading-snug font-light tracking-tight text-black">
-                As AI workloads continue to grow, self-hosted solutions like AI BOX provide a future-proof infrastructure, guaranteeing you always have cutting-edge computing power at your fingertips.
-            </p>
-    </div>
-</div>
-
-<style>
-    .fade-in-up {
-        opacity: 0;
-        transform: translateY(20px);
-        position: absolute;
-        transition: opacity 1s ease-out, transform 1s ease-out;
-    }
-
-    .fade-in-up.show {
-        opacity: 1;
-        transform: translateY(0);
-    }
-</style>
-
-<script>
-    document.addEventListener("DOMContentLoaded", function () {
-        const paragraphs = document.querySelectorAll(".fade-in-up");
-        let index = 0;
-  
-        function showNextParagraph() {
-            paragraphs.forEach((p, i) => {
-                p.classList.remove("show");
-            });
-
-            paragraphs[index].classList.add("show");
-
-            index = (index + 1) % paragraphs.length; // Loop back to the first paragraph
-            setTimeout(showNextParagraph, 4000); // Change paragraph every 4 seconds
-        }
-  
-        showNextParagraph();
-    });
-</script>

templates/partials/hero/aihero6.html

@@ -1,96 +0,0 @@
-<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-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>
-                
-                <!-- 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>
-                </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">
-            </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 = "What's Inside AIBox";
-        const textElement = document.getElementById("typing-text2");
-        let loopCount = 0;
-        const maxLoops = 1;
-
-        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
-            }
-        }
-
-        /*** Fade-in Items One by One ***/
-        const items = document.querySelectorAll(".fade-in-item");
-        const image = document.querySelector(".fade-in-image");
-        let index = 0;
-
-        function showNextItem() {
-            if (index < items.length) {
-                items[index].classList.add("show");
-                index++;
-                setTimeout(showNextItem, 1000);
-            } else {
-                image.classList.add("show");
-            }
-        }
-
-        /*** Initialize Everything ***/
-        loopTyping();
-        showNextItem();
-
-        // Fade-in Image after text animations
-        setTimeout(() => image.classList.add("show"), 1000);
-    });
-</script>

templates/partials/hero/aihero7.html

@@ -1,123 +0,0 @@
-<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>
-        <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>
-    <div class="relative pt-16 sm:pt-24">
-        <div class="absolute inset-x-0 top-48 bottom-0"></div>
-        <div class="relative mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
-            <div class="grid grid-cols-1 gap-10 lg:grid-cols-3">
-                {% for plan in section.extra.plans %}
-                <div class="-m-2 grid grid-cols-1 rounded-[2rem] ring-1 shadow-[inset_0_0_2px_1px_#ffffff4d] ring-black/5 max-lg:mx-auto max-lg:w-full max-lg:max-w-md">
-                    <div class="grid grid-cols-1 rounded-[2rem] p-2 shadow-md shadow-black/5">
-                        <div class="rounded-3xl bg-white p-10 pb-9 ring-1 shadow-2xl ring-black/5">
-                            <h2 class="lg:text-4xl text-3xl font-semibold text-black">{{ plan.name }} <span class="sr-only">plan</span></h2>
-                            <p class="mt-2 text-sm/6 text-pretty text-black font-light">{{ plan.description }}</p>
-                            <div class="mt-4 flex items-center gap-4">
-                                <div class="lg:text-5xl text-3xl font-semibold text-gray-950">${{ plan.price }}</div>
-                                <div class="text-sm text-gray-600">
-                                </div>
-                            </div>
-                            <div class="mt-6">
-                                <h3 class="text-sm/6 font-medium text-gray-950">Includes:</h3>
-                                <ul class="mt-3 space-y-2">
-                                    {% for feature in plan.features %}
-                                    <li {% if not feature.included %}data-disabled="true"{% endif %} class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
-                                        <span class="inline-flex h-6 items-center">
-                                            <svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
-                                                <path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
-                                            </svg>
-                                        </span>
-                                        {% if not feature.included %}<span class="sr-only">Not included:</span>{% endif %}
-                                        {{ feature.name }}
-                                    </li>
-                                    {% endfor %}
-                                </ul>
-                            </div>
-                            <div class="mt-6">
-                                <h3 class="text-sm/6 font-medium text-gray-950">Rewards:</h3>
-                                <ul class="mt-3 space-y-2">
-                                    {% for feature in plan.rewards %}
-                                    <li {% if not feature.included %}data-disabled="true"{% endif %} class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
-                                        <span class="inline-flex h-6 items-center">
-                                            <svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
-                                                <path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
-                                            </svg>
-                                        </span>
-                                        {% if not feature.included %}<span class="sr-only">Not included:</span>{% endif %}
-                                        {{ feature.name }}
-                                    </li>
-                                    {% endfor %}
-                                </ul>
-                            </div>
-
-                        </div>
-                    </div>
-                </div>
-                {% endfor %}
-            </div>
-        </div>
-    </div>
-</div>
-
-<style>
-    /* Fade-in animation for the grid items */
-    .fade-in-box {
-        opacity: 0;
-        animation: fadeIn 2.2s ease-in-out forwards;
-    }
-
-    /* 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; }
-
-    @keyframes fadeIn {
-        to {
-            opacity: 1;
-        }
-    }
-</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/aihero9.html

@@ -1,124 +0,0 @@
-<div class="bg-white">
-  <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>
-      <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>
-  <div class="relative pt-16 sm:pt-24">
-      <div class="absolute inset-x-0 top-48 bottom-0"></div>
-      <div class="relative mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
-          <div class="grid grid-cols-1 gap-10 lg:grid-cols-3">
-              {% for plan in section.extra.plans %}
-              <div class="-m-2 grid grid-cols-1 rounded-[2rem] ring-1 shadow-[inset_0_0_2px_1px_#ffffff4d] ring-black/5 max-lg:mx-auto max-lg:w-full max-lg:max-w-md">
-                  <div class="grid grid-cols-1 rounded-[2rem] p-2 shadow-md shadow-black/5">
-                      <div class="rounded-3xl bg-white p-10 pb-9 ring-1 shadow-2xl ring-black/5">
-                          <h2 class="lg:text-4xl text-3xl font-semibold text-black">{{ plan.name }} <span class="sr-only">plan</span></h2>
-                          <p class="mt-2 text-sm/6 text-pretty text-black font-light">{{ plan.description }}</p>
-                          <div class="mt-4 flex items-center gap-4">
-                              <div class="lg:text-5xl text-3xl font-semibold text-gray-950">${{ plan.price }}</div>
-                              <div class="text-sm text-gray-600">
-                              </div>
-                          </div>
-                          <div class="mt-6">
-                              <h3 class="text-sm/6 font-medium text-gray-950">Includes:</h3>
-                              <ul class="mt-3 space-y-2">
-                                  {% for feature in plan.features %}
-                                  <li {% if not feature.included %}data-disabled="true"{% endif %} class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
-                                      <span class="inline-flex h-6 items-center">
-                                          <svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
-                                              <path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
-                                          </svg>
-                                      </span>
-                                      {% if not feature.included %}<span class="sr-only">Not included:</span>{% endif %}
-                                      {{ feature.name }}
-                                  </li>
-                                  {% endfor %}
-                              </ul>
-                          </div>
-                          <div class="mt-6">
-                              <h3 class="text-sm/6 font-medium text-gray-950">Rewards:</h3>
-                              <ul class="mt-3 space-y-2">
-                                  {% for feature in plan.rewards %}
-                                  <li {% if not feature.included %}data-disabled="true"{% endif %} class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
-                                      <span class="inline-flex h-6 items-center">
-                                          <svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
-                                              <path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
-                                          </svg>
-                                      </span>
-                                      {% if not feature.included %}<span class="sr-only">Not included:</span>{% endif %}
-                                      {{ feature.name }}
-                                  </li>
-                                  {% endfor %}
-                              </ul>
-                          </div>
-
-                      </div>
-                  </div>
-              </div>
-              {% endfor %}
-          </div>
-      </div>
-  </div>
-</div>
-
-<style>
-  /* Fade-in animation for the grid items */
-  .fade-in-box {
-      opacity: 0;
-      animation: fadeIn 2.2s ease-in-out forwards;
-  }
-
-  /* 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; }
-
-  @keyframes fadeIn {
-      to {
-          opacity: 1;
-      }
-  }
-</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/pricing-hero.html

@@ -1,123 +0,0 @@
-<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>
-        <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>
-    <div class="relative pt-16 sm:pt-24">
-        <div class="absolute inset-x-0 top-48 bottom-0"></div>
-        <div class="relative mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
-            <div class="grid grid-cols-1 gap-10 lg:grid-cols-3">
-                {% for plan in section.extra.plans %}
-                <div class="-m-2 grid grid-cols-1 rounded-[2rem] ring-1 shadow-[inset_0_0_2px_1px_#ffffff4d] ring-black/5 max-lg:mx-auto max-lg:w-full max-lg:max-w-md">
-                    <div class="grid grid-cols-1 rounded-[2rem] p-2 shadow-md shadow-black/5">
-                        <div class="rounded-3xl bg-white p-10 pb-9 ring-1 shadow-2xl ring-black/5">
-                            <h2 class="lg:text-4xl text-3xl font-semibold text-black">{{ plan.name }} <span class="sr-only">plan</span></h2>
-                            <p class="mt-2 text-sm/6 text-pretty text-black font-light">{{ plan.description }}</p>
-                            <div class="mt-4 flex items-center gap-4">
-                                <div class="lg:text-5xl text-3xl font-semibold text-gray-950">${{ plan.price }}</div>
-                                <div class="text-sm text-gray-600">
-                                </div>
-                            </div>
-                            <div class="mt-6">
-                                <h3 class="text-sm/6 font-medium text-gray-950">Includes:</h3>
-                                <ul class="mt-3 space-y-2">
-                                    {% for feature in plan.features %}
-                                    <li {% if not feature.included %}data-disabled="true"{% endif %} class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
-                                        <span class="inline-flex h-6 items-center">
-                                            <svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
-                                                <path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
-                                            </svg>
-                                        </span>
-                                        {% if not feature.included %}<span class="sr-only">Not included:</span>{% endif %}
-                                        {{ feature.name }}
-                                    </li>
-                                    {% endfor %}
-                                </ul>
-                            </div>
-                            <div class="mt-6">
-                                <h3 class="text-sm/6 font-medium text-gray-950">Rewards:</h3>
-                                <ul class="mt-3 space-y-2">
-                                    {% for feature in plan.rewards %}
-                                    <li {% if not feature.included %}data-disabled="true"{% endif %} class="group flex items-start gap-4 text-sm/6 text-gray-600 data-disabled:text-gray-400">
-                                        <span class="inline-flex h-6 items-center">
-                                            <svg class="size-4 fill-gray-400 group-data-disabled:fill-gray-300" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
-                                                <path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
-                                            </svg>
-                                        </span>
-                                        {% if not feature.included %}<span class="sr-only">Not included:</span>{% endif %}
-                                        {{ feature.name }}
-                                    </li>
-                                    {% endfor %}
-                                </ul>
-                            </div>
-
-                        </div>
-                    </div>
-                </div>
-                {% endfor %}
-            </div>
-        </div>
-    </div>
-</div>
-
-<style>
-    /* Fade-in animation for the grid items */
-    .fade-in-box {
-        opacity: 0;
-        animation: fadeIn 2.2s ease-in-out forwards;
-    }
-
-    /* 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; }
-
-    @keyframes fadeIn {
-        to {
-            opacity: 1;
-        }
-    }
-</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/shortcodes/accordion.html

@@ -0,0 +1,44 @@
+<div class="rounded-lg shadow-lg overflow-hidden my-2 border border-gray-200">
+            <input type="checkbox" id="{{ id_accordion }}" class="peer hidden">
+            <label for="{{ id_accordion }}" class="accordion flex items-center justify-between p-4 cursor-pointer transition-colors">
+                <span class="text-lg font-semibold">{{ question }}</span>
+                <svg class="w-6 h-6 transition-transform peer-checked:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+                </svg>
+            </label>
+            <div class="max-h-0 overflow-hidden transition-all duration-300 peer-checked:max-h-screen">
+                <div class="p-4">
+                    {% if description %} 
+                    <p class="semigray font-normal leading-relaxed">{{ description }} </p>
+                    {% endif %}
+                </div>
+            </div>
+        </div>
+
+        <style>
+
+            body .accordion:hover {
+                background-color: rgb(240, 240, 240) !important;
+             }
+
+            body.dark-mode .accordion:hover {
+               background-color: #2e2e2e !important;
+            }
+        </style>
+
+        
+
+   
+
+     
+
+     
+
+
+     
+   
+
+
+
+
+   

templates/shortcodes/animated_header.html

@@ -0,0 +1,71 @@
+{% set header = header | default(value="") %}
+
+<div class="max-w-xl">
+    <h2 id="typing-text" class="mx-auto fade-in">
+    </h2>
+</div>        
+     
+  <style>
+    /* Fade-in animation for the grid items */
+    .fade-in-box {
+      opacity: 0;
+      animation: fadeIn 2.2s ease-in-out forwards;
+    }
+  
+    /* 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>
+  
+  <script>
+    document.addEventListener("DOMContentLoaded", function () {
+        const text = "Take Control of Your AI Future";
+        const textElement = document.getElementById("typing-text");
+        let loopCount = 0;
+        const maxLoops = 1;
+  
+        function typeText(i, callback) {
+            if (i < text.length) {
+                textElement.textContent += text.charAt(i);
+                setTimeout(() => typeText(i + 1), 100);
+            } else {
+                setTimeout(callback, 2000);
+            }
+        }
+  
+
+
+  
+        function loopTyping() {
+            if (loopCount < maxLoops) {
+                typeText(0, () => {
+                    deleteText(() => {
+                        loopCount++;
+                        loopTyping();
+                    });
+                });
+            } else {
+                typeText(0, () => {}); // Final typing with no delete
+            }
+        }
+  
+        loopTyping();
+    });
+  </script>
+  

templates/shortcodes/animated_paragraph.html

@@ -0,0 +1,42 @@
+{% set id = id | default(value="") %}
+{% set description = description | default(value="") %}
+
+
+    <p id="{{ id }}" class="mt-0 mb-10 lg:mt-8 fade-in-up text-left lg:text-3xl text-lg leading-snug font-light tracking-tight text-black px-4 lg:px-10">
+        {{ description }}
+    </p>
+    
+
+<style>
+    .fade-in-up {
+        opacity: 0;
+        transform: translateY(20px);
+        position: absolute;
+        transition: opacity 1s ease-out, transform 1s ease-out;
+    }
+
+    .fade-in-up.show {
+        opacity: 1;
+        transform: translateY(0);
+    }
+</style>
+
+<script>
+    document.addEventListener("DOMContentLoaded", function () {
+        const paragraphs = document.querySelectorAll(".fade-in-up");
+        let index = 0;
+  
+        function showNextParagraph() {
+            paragraphs.forEach((p, i) => {
+                p.classList.remove("show");
+            });
+
+            paragraphs[index].classList.add("show");
+
+            index = (index + 1) % paragraphs.length; // Loop back to the first paragraph
+            setTimeout(showNextParagraph, 5000); // Change paragraph every 5 seconds
+        }
+  
+        showNextParagraph();
+    });
+</script>

templates/shortcodes/cloud_header.html

@@ -1,57 +0,0 @@
-{% set base = config.base_url %}
-
-<div class="flex flex-wrap text-center mx-4 lg:pt-4 mt-10 lg:mx-10  lg:mt-4 pb-10">
-    <div class="grid grid-cols-1 md:grid-cols-3 mx-auto items-center">
-        <div class="w-full mb-4 border-b border-gray-600">
-            <div class="arrow_up"></div>
-            <a href="https://library.threefold.me/info/manual/#/technology/qsss/threefold__qsss_home" target="_blank"
-                class="text-5xl font-extrabold uppercase">Store</a>
-        </div>
-        <div class="mb-4">
-            {% if 'www_threefold_io' in base  %}
-            {% set path = base ~ '/' ~ 'images/cloud_header_seprated.png' %}
-
-            <img class="mx-auto sm:w-1/2 lg:w-full" src="{{path}}" alt="TF Cloud" />
-            {% else %}
-            <img class="mx-auto sm:w-1/2 lg:w-full" src="/images/cloud_header_seprated.png" alt="TF Cloud" />
-            {% endif %}
-        </div>
-        <div class="w-full mb-4 border-b border-gray-600">
-            <a href="https://library.threefold.me/info/manual/#/manual__weblets_home" target="_blank"
-                class="text-5xl font-extrabold uppercase">Build</a>
-            <div class="arrow_down"></div>
-        </div>
-    </div>
-</div>
-
-<style>
-    .arrow_up,
-    .arrow_down {
-        display: inline-block;
-        margin-right: 10px;
-        width: 0;
-        height: 0;
-        border-width: 0 12.5px 30px 12.5px;
-        border-color: transparent transparent #000000 transparent;
-        border-style: solid;
-    }
-
-    .arrow_down {
-        margin-left: 10px;
-
-        border-width: 35px 12.5px 0 12.5px;
-        border-color: #000000 transparent transparent transparent;
-    }
-
-    a {
-        font-family: "Orbitron", sans-serif !important;
-        color: black;
-    }
-
-    hr {
-        height: 1px;
-        border-width: 0;
-        color: gray;
-        background-color: gray;
-    }
-</style>

templates/shortcodes/cloud_stats.html

@@ -1,174 +0,0 @@
-{% set data = load_data(url="https://gridproxy.grid.tf/stats?status=up", required=false, format="json") %}
-{% if data %}
-  {% set capacity = (data.totalHru + data.totalSru) / 1024 / 1024 / 1024 / 1024 / 1024 %}
-  {% set nodes = data.nodes %}
-  {% set countries = data.countries %}
-  {% set cores = data.totalCru %}
-{% endif %}
-
-{% if data %}
-<div class="lg:py-24 py-10 sm:pt-10">
-  <div class="mx-auto px-4 sm:px-6 lg:px-8">
-    <div class="lg:max-w-xl mx-auto text-center">
-      <h2 class="
-            
-          lg:text-6xl
-          text-center
-          capitalize
-          my-2
-          leading-none
-          font-light 
-        
-          ">
-        A Global Edge <br><span class="font-medium"> Infrastructure</span>
-      </h2>
-    </div>
-  </div>
-  <div class="mt-10 pb-12 sm:pb-16">
-    <div class="relative">
-      <div class="absolute inset-0 h-1/2"></div>
-      <div class="relative mx-auto px-4 sm:px-6 lg:px-8">
-        <div class="max-w-8xl mx-auto">
-          <dl class="rounded-lg bg-white sm:grid sm:grid-cols-4">
-            <div class="
-                  flex flex-col
-                  border-b border-gray-400
-                  p-6
-                  text-center
-                  sm:border-0 sm:border-r
-                ">
-              <dt class="
-                    order-2
-                    mt-2
-                    text-2xl
-                    leading-6
-                    font-medium
-                    text-gray-900
-                    uppercase
-                  " id="item-1">
-                Nodes
-              </dt>
-              <dd class="
-                    order-1
-                    text-5xl
-                    leading-none
-                    font-extrabold
-                    text-black
-                    mb-4
-                  " aria-describedby="item-1">
-                {{ nodes }}
-              </dd>
-            </div>
-            <div class="
-                  flex flex-col
-                  border-t border-b border-gray-400
-                  p-6
-                  text-center
-                  sm:border-0 sm:border-l sm:border-r
-                ">
-              <dt class="
-                    order-2
-                    mt-2
-                    text-2xl
-                    leading-6
-                    font-medium
-                    text-gray-900
-                    uppercase
-                  ">
-                Capacity
-              </dt>
-              <dd class="
-                    order-1
-                    text-5xl
-                    leading-none
-                    font-extrabold
-                    text-black
-                    mb-4
-                  ">
-                {{ capacity | round(precision=2) }}PB
-              </dd>
-            </div>
-            <div class="
-                  flex flex-col
-                  border-t border-gray-400
-                  p-6
-                  text-center
-                  sm:border-0 sm:border-l
-                ">
-              <dt class="
-                    order-2
-                    mt-2
-                    text-2xl
-                    leading-6
-                    font-medium
-                    text-gray-900
-                    uppercase
-                  ">
-                Cores
-              </dt>
-              <dd class="
-                    order-1
-                    text-5xl
-                    leading-none
-                    font-extrabold
-                    text-black
-                    mb-4
-                  ">
-                {{ cores | num_format }}
-              </dd>
-            </div>
-            <div class="
-                  flex flex-col
-                  border-t border-gray-400
-                  p-6
-                  text-center
-                  sm:border-0 sm:border-l
-                ">
-              <dt class="
-                    order-2
-                    mt-2
-                    text-2xl
-                    leading-6
-                    font-medium
-                    text-gray-900
-                    uppercase
-                  ">
-                Countries
-              </dt>
-              <dd class="
-                    order-1
-                    text-5xl
-                    leading-none
-                    font-extrabold
-                    text-black
-                    mb-4
-                  ">
-                {{ countries }}
-              </dd>
-            </div>
-          </dl>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <div class="block text-center mt-5">
-    <a target="_blank" href="https://explorer.threefold.io/all" class="
-          inline-block
-            bg-white
-            text-lg
-            learn-button
-            text-gray-700
-            hover:text-gray-500
-            bo
-            px-12
-            py-1
-            mr-5
-            mb-4
-            border-2
-            shadow
-            border-black
-        ">Explore Capacity</a>
-  </div>
-</div>
-{% endif %}

templates/shortcodes/community_banner.html

@@ -1,16 +0,0 @@
-{% block content %}
-
-<div class="relative flex flex-col lg:flex-row items-baseline -mx-8 sm:-mx-12 md:-mx-16 lg:-mx-20">
-    <a href="/careers" class="section banner">
-        <div class="center">
-            <h2 class="h1">
-                <strong>Join our Team</strong>
-            </h2>
-        </div>
-        {% set background = "background-image: url(" ~ page.permalink ~ "tf_people.jpg)" %}
-
-        <div class="back" style="{{background}}"></div>
-    </a>
-</div>
-
-{% endblock content %}

templates/shortcodes/cta.html

@@ -0,0 +1,36 @@
+{% set title_1 = title_1 | default(value="") %}
+{% set title_2 = title_2 | default(value="") %}
+{% set title_3 = title_3 | default(value="") %}
+{% set button_text_1 = button_text_1 | default(value="") %}
+{% set button_link_1 = button_link_1 | default(value="") %}
+{% set button_text_2 = button_text_2 | default(value="") %}
+{% set button_link_2 = button_link_2 | default(value="") %}
+{% set button_text_3 = button_text_3 | default(value="") %}
+{% set button_link_3 = button_link_3 | default(value="") %}
+{% set button_text_4 = button_text_4 | default(value="") %}
+{% set button_link_4 = button_link_4 | default(value="") %}
+
+<div class="py-12 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 class="max-w-xl leading-tight items-start lg:text-left text-center fade-in">
+        {{ title_1 }} <br>{{ title_2 }}<br> {{ title_3 }}
+      </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="{{ button_link_1 }}" 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">
+          {{ button_text_1 }}
+        </a>
+        {% if button_link_2 %}
+        <a href="{{ button_link_2 }}" target="_blank" class="blinking-effect rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:bg-gray-200 hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 mb-4 lg:mb-0">
+          {{ button_text_2 }}
+        </a>
+        {% endif %}
+        <a href="{{ button_link_3 }}" target="_blank" class="text-sm/6 font-semibold text-gray-900">
+          {{ button_text_3 }} <span aria-hidden="true">→</span>
+        </a>
+        {% if button_link_4 %}
+        <a href="{{ button_link_4 }}" class="fade-in text-sm/6 font-semibold text-white">{{ button_text_4 }}<span aria-hidden="true">→</span></a>
+         {% endif%}
+      </div>
+    </div>
+</div>
+

templates/shortcodes/dev_resourses.html

@@ -1,127 +0,0 @@
-{% if '127.0.0.1:1111' in config.base_url %}
-{% set img_url = 'developer/' %}
-{% else %}
-{% set img_url = '' %}
-{% endif %}
-
-{% if 'www_threefold_io' in config.base_url %}
-{% set url = '/www_threefold_io' %}
-{% else %}
-{% set url = '' %}
-{% endif %}
-
-<div class="my-5 lg:py-24 py-10 lg:mx-28 mx-4">
-    <div class="w-full text-center">
-        <h2 class="lg:text-6xl capitalize font-normal leading-tight">
-            where would you like to start?
-        </h2>
-        <div class="max-w-4xl mb-10 py-2 text-xl mx-auto leading-tight tracking-wide">ThreeFold's open-source
-            infrastructure has been built from the ground up on the Linux Kernel to create a fully decentralized
-            Internet and Cloud. From a stateless operating system to new compute, storage and networking primitives, the
-            next-generation Internet is here.
-        </div>
-    </div>
-    <div class="grid sm:grid-cols-1 gap-4 lg:grid-cols-2 text-center lg:px-16">
-        <div class="
-        mx-auto
-        my-4
-        rounded
-        overflow-hidden
-        transition
-        duration-500
-        bg-gray-100
-      ">
-            <a href={{ url ~ "/developer/os" }}>
-                <img src={{ img_url ~ 'operating_system.png' }} />
-                <div class="font-bold text-xl py-5 mx-4 text-black">
-                    Operating System
-                </div>
-            </a>
-        </div>
-
-        <div class="
-        mx-auto
-        my-4
-        rounded
-        overflow-hidden
-        transition
-        duration-500
-        bg-gray-100
-      ">
-            <a href={{ url ~ "/developer/automation" }}>
-                <img src={{ img_url ~ 'automation.png' }} />
-                <div class="font-bold text-xl py-5 mx-4 text-black">
-                    Autonomous Components
-                </div>
-            </a>
-        </div>
-
-        <div class="
-        mx-auto
-        my-4
-        rounded
-        overflow-hidden
-        transition
-        duration-500
-        bg-gray-100
-      ">
-            <a href={{ url ~ "/developer/tooling" }}>
-                <img src={{ img_url ~ 'tooling.png' }} />
-                <div class="font-bold text-xl py-5 mx-4 text-black">
-                    Developer tooling
-                </div>
-            </a>
-        </div>
-
-        <div class="
-        mx-auto
-        my-4
-        rounded
-        overflow-hidden
-        transition
-        duration-500
-        bg-gray-100
-      ">
-            <a href={{ url ~ "/developer/qsfs" }}>
-                <img src={{ img_url ~ 'qsfs.png' }} />
-                <div class="font-bold text-xl py-5 mx-4 text-black">
-                    Quantum-Safe Storage
-                </div>
-            </a>
-        </div>
-
-        <div class="
-        mx-auto
-        my-4
-        rounded
-        overflow-hidden
-        transition
-        duration-500
-        bg-gray-100
-      ">
-            <a href={{ url ~ "/developer/blockchain" }}>
-                <img src={{ img_url ~ 'blockchain.png' }} />
-                <div class="font-bold text-xl py-5 mx-4 text-black">
-                    ThreeFold Blockchain
-                </div>
-            </a>
-        </div>
-
-        <div class="
-        mx-auto
-        my-4
-        rounded
-        overflow-hidden
-        transition
-        duration-500
-        bg-gray-100
-      ">
-            <a href={{ url ~ "/developer/planetarynw" }}>
-                <img src={{ img_url ~ 'planetary_network.jpg' }} />
-                <div class="font-bold text-xl py-5 mx-4 text-black">
-                    Planetary Network
-                </div>
-            </a>
-        </div>
-    </div>
-</div>

templates/shortcodes/farm_steps.html

@@ -0,0 +1,60 @@
+{% set image_src = image_src | default(value="") %}
+{% set image_alt = image_alt | default(value="") %}
+{% set title = title | default(value="") %}
+{% set subtitle = subtitle | default(value="") %}
+{% set description = description | default(value="") %}
+{% set button_text_1 = button_text_1 | default(value="") %}
+{% set button_link_1 = button_link_1 | default(value="") %}
+{% set button_text_2 = button_text_2 | default(value="") %}
+{% set button_link_2 = button_link_2 | default(value="") %}
+
+
+
+        <div class="fade-in-box flex flex-col p-8 rounded-2xl my-4 bg-gray-50">
+          <img class="fade-in relative mb-4" width="15%" src="{{ image_src }}" alt="{{ image_alt }}">
+          <dt class="flex items-center gap-x-3 text-lg rounded-2xl font-semibold">
+            {{ title }}
+          </dt>          
+          <dt class="text-lg font-normal">{{ subtitle }}<dt>
+          <dd class="mt-4 flex flex-auto flex-col">
+            <p class="flex-auto leading-normal font-light text-gray-800 text-base">{{ description }}</p>
+            <div class="flex mt-6 justify-center fade-in">
+              {% if button_link_1 %}
+              <a href="{{ button_link_1 }}" class="mr-2 fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:text-gray-800 hover:bg-green focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2" target="_blank">{{ button_text_1 }}</a>
+              {% endif %}
+              {% if button_link_1 %}
+              <a href="{{ button_link_2 }}" class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:text-gray-800 hover:bg-green focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2" target="_blank">{{ button_text_2 }}</a>
+              {% endif %}
+            </div>
+          </dd>
+        </div>
+
+
+
+<style>
+  /* Fade-in animation for the grid items */
+  .fade-in-box {
+    opacity: 0;
+    animation: fadeIn 0.6s ease-in-out forwards;
+  }
+
+  /* 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/shortcodes/featured_stories.html

@@ -1,70 +0,0 @@
-<div class="relative px-4 sm:px-6 py-12 lg:py-28 lg:px-8">
-    <div class="absolute inset-0">
-        <div class="bg-white h-1/3 sm:h-2/3"></div>
-    </div>
-    <div class="relative max-w-7xl mx-auto">
-        <div class="text-center">
-            <h2 class="
-                lg:text-6xl
-                leading-tight
-                font-normal font-heading
-                
-                sm:leading-10
-                lg:pb-10
-              ">
-              Dive Deeper
-            </h2>
-        </div>
-        <div class="mt-12 grid gap-5 max-w-lg mx-auto lg:grid-cols-3 lg:max-w-none">
-            <div class="flex flex-col rounded-lg shadow-lg overflow-hidden">
-                <div class="flex-shrink-0">
-                    <img class="h-48 w-full object-cover" src="images/planet_first_people_first.png" alt="" />
-                </div>
-                <div class="flex-1 bg-white p-6 flex flex-col justify-between">
-                    <div class="flex-1">
-                        <a href="blog/planet-first-people-first" class="block">
-                            <h3 class="mt-2 text-2xl leading-7 font-normal text-gray-900">
-                                Planet first. People first.
-                            </h3>
-                            <div class="mt-3 leading-6 text-gray-500 text-lg">Together with our community and partners, we're taking action and making productive choices for our planet and humanity.</div>
-                        </a>
-                    </div>
-                </div>
-            </div>
-
-            <div class="flex flex-col rounded-lg shadow-lg overflow-hidden">
-                <div class="flex-shrink-0">
-                    <img class="h-48 w-full object-cover" src="images/internet_of_internets.png" alt="" />
-                </div>
-                <div class="flex-1 bg-white p-6 flex flex-col justify-between">
-                    <div class="flex-1">
-                        <a href="/blog/internet-of-internets/" class="block">
-                            <h3 class="mt-2 text-2xl leading-7 font-normal text-gray-900">
-                                Welcome to the Internet of Internets
-                            </h3>
-                            <div class="mt-3 leading-6 text-gray-500 text-lg">Together, we’re building our own future through the Internet of Internets – decentralized, open, inclusive, regenerative, and resilient.</div>
-                        </a>
-                    </div>
-                </div>
-            </div>
-
-            <div class="flex flex-col rounded-lg shadow-lg overflow-hidden">
-                <div class="flex-shrink-0">
-                    <img class="h-48 w-full object-cover" src="images/tft_vedio.jpg" alt="" />
-                </div>
-                <div class="flex-1 bg-white p-6 flex flex-col justify-between">
-                    <div class="flex-1">
-                        <a href="https://www.youtube.com/watch?v=5DtVU66Z74s" target="_blank" class="block">
-                            <h3 class="mt-2 text-2xl leading-7 font-normal text-gray-900">
-                                ThreeFold Explained in 2 Minutes
-                            </h3>
-                            <div class="mt-3 leading-6 text-gray-500 text-lg">We make sovereignty a reality and
-                                opportunities universal. Our technology ensures data ownership and a democratized
-                                Internet. Discover how.</div>
-                        </a>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>

templates/shortcodes/grid_stats_expand.html

@@ -1,82 +0,0 @@
-{% set styles = "background-image: url('V3.png');" %}
-{% set data = load_data(url="https://gridproxy.grid.tf/stats?status=up", required=false, format="json") %}
-{% if data %}
-{% set capacity = (data.totalHru + data.totalSru) / 1024 / 1024 / 1024 / 1024 / 1024 %}
-{% set nodes = data.nodes %}
-  {% set countries = data.countries %}
-  {% set cores = data.totalCru %}
-{% endif %}
-
-{% if data %}
-<section class="px-2 h-auto bg-center lg:py-28 p-12 bg-cover bg-no-repeat" style="{{styles}}">
-    <div class="relative lg:max-w-6xl mx-auto">
-        <div class="text-center rounded lg:px-6 mt-10 lg:mt-0 mx-auto">
-            {{body | markdown | safe }}
-
-            <div class="my-10 grid lg:grid-cols-4 lg:gap-8">
-                
-
-                <!-- capacity -->
-            <div class="flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4">
-                    <img class="mx-auto p-4" src="V3-08.png" width="150" alt="">
-                <div class="leading-none font-extrabold text-3xl">
-                    {{ capacity | round(precision=2) }}PB
-                    <span class="block text-lg mt-4 font-normal capitalize">capacity</span>
-                </div>
-            </div>
-                
-
-                <!-- Nodes -->
-            <div class="flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4">
-                    <img class="mx-auto p-4" src="V3-09.png" width="150" alt="">
-                <div class="leading-none font-extrabold text-3xl">
-                    {{ nodes }}
-                    <span class="block text-lg mt-4 font-normal capitalize">nodes</span>
-                </div>
-            </div>
-                
-                
-
-                <!-- countries -->
-            <div class="flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4">
-                    <img class="mx-auto p-4" src="V3-10.png" width="150" alt="">
-                <div class="leading-none font-extrabold text-3xl">
-                    {{ countries }}
-                    <span class="block text-lg mt-4 font-normal capitalize">countries</span>
-                </div>
-            </div>
-
-              <!-- cores -->
-            <div class="flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4">
-                   <img class="mx-auto p-4" src="V3-11.png" width="150" alt="">
-                <div class="leading-none font-extrabold text-3xl">
-                {{ cores | num_format }}
-                <span class="block text-lg mt-4 font-normal capitalize">cores</span>
-                </div>
-            </div>
-
- 
-            </div>
-            
-        <button><a href="https://dashboard.grid.tf/#/tf-grid/node-statistics/">Explore Grid Capacity</a></button>
-        <button><a href="/host">Become a Host</a></button>
-        </div>
-    </div>
-</section>
-{% endif %}
-<style>
-    dd {
-        display: inline-block;
-        margin: auto;
-        border-radius: 50%;
-        line-height: 100px;
-    }
-
-    .bg-green {
-        background-color: #70dfc9;
-    }
-
-    .bg-pink {
-        background-color: #ea1ff7;
-    }
-</style>

templates/shortcodes/header_new.html

@@ -1,20 +0,0 @@
-<div class="text-gray-900 bg-cover bg-no-repeat mybg" style="background-image:url(expand/BG_wide.png)">
-    <div class="h-full">
-      <div class="flex flex-col items-center md:flex-row">
-       <div class="w-full md:w-1/2">
-          <div class="block">
-            <img
-                src="expand/togethericon.png" class="w-full h-full"/>
-          </div>
-        </div>
-        <div class="flex flex-col items-start justify-center w-full py-24 md:w-1/2">
-          <div class="flex flex-col items-start justify-center p-6">
-            <h1>Be the <strong>Internet</strong></h1>
-            <h3 class="my-0">Host a node, support a decentralized future</h3>
-            <p>By connecting a modern computer at your home or office to the ThreeFold Grid, you can provide Internet capacity to communities and builders, and be rewarded for doing this. Take part in shaping a new Internet era governed by all of us.</p>
-            <button class="mx-0"><a target="_blank" href="https://www.manual.grid.tf/documentation/farmers/3node_building/3node_building.html">Get Started</a></button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>

templates/shortcodes/hero_animation.html

@@ -1,19 +1,30 @@
-<div class="fade-in relative isolate overflow-hidden">
-    <div class="mx-auto max-w-7xl lg:col-span-2 px-6 py-18 lg:flex lg:gap-x-2 lg:px-8 lg:py-24">
-      <div class="mx-auto max-w-2xl shrink-0 lg:mx-0 lg:pt-8">
-        <h1 class="mt-10 font-medium tracking-tight text-pretty text-black leading-tight lg:text-[7.37rem] text-[3.5rem]">
-          Your 
+{% set title = title | default(value="") %}
+{% set title_part_1 = title_part_1 | default(value="") %}
+{% set title_part_2 = title_part_2 | default(value="") %}
+{% set title_part_3 = title_part_3 | default(value="") %}
+{% set title_part_4 = title_part_4 | default(value="") %}
+{% set title_part_5 = title_part_5 | default(value="") %}
+{% set image_src = image_src | default(value="") %}
+{% set image_alt = image_alt | default(value="") %}
+{% set button_text = button_text | default(value="") %}
+{% set button_link = button_link | default(value="") %}
+
+<div class="fade-in relative isolate overflow-hidden py-12 lg:py-24 lg:h-screen">
+    <div class="mx-auto max-w-7xl lg:col-span-2 px-4 lg:flex lg:gap-x-2 lg:px-8">
+      <div class="mx-auto max-w-2xl shrink-0 lg:mx-0 lg:pt-8 px-4">
+        <h1 class="mt-10">
+          {{ title }} 
           <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">
-            Learn more <span aria-hidden="true">→</span>
+          <a href="{{ button_link }}" target="_blank" class="text-xl font-semibold text-black hover:text-gray-500">
+            {{ button_text }} <span aria-hidden="true">→</span>
           </a>
         </div>
       </div>
       <div class="mx-auto flex max-w-5xl lg:mt-12 mt-0 lg:mr-0 lg:ml-5 lg:max-w-none lg:flex-none">
         <div class="max-w-3xl flex-none lg:max-w-5xl">
-          <img src="/images/aibox6.jpg" alt="App screenshot" width="2432" height="1442" class="lg:w-[66rem] w-[25rem]">
+          <img src="{{ image_src }}" alt="{{ image_alt }}" width="2432" height="1442" class="lg:w-[66rem] w-[25rem]">
         </div>
       </div>
     </div>
@@ -22,11 +33,11 @@
   <script>
   document.addEventListener("DOMContentLoaded", function () {
       const phrases = [
-          "Personal AI Powerhouse.",
-          "Smart GPU, Your Rules.",
-          "True Digital Playground.",
-          "Gateway to AI freedom.",
-          "Personal AIBox." // Final phrase
+          "{{ title_part_1 }}",
+          "{{ title_part_2 }}",
+          "{{ title_part_3 }}",
+          "{{ title_part_4 }}",
+          "{{ title_part_5 }}" // Final phrase
       ];
   
       let index = 0;

templates/shortcodes/hero_with_image.html

@@ -0,0 +1,72 @@
+{% set image_src = image_src | default(value="") %}
+{% set image_alt = image_alt | default(value="") %}
+
+<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="{{ image_src }}" alt="{{ image_alt }}">
+          </div>
+          <div class="mx-auto lg:mx-0 lg:flex-auto">
+            <!-- Typing Text -->
+            <h2 id="typing-text2" class="mt-6 fade-in">
+            </h2>          
+        </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/shortcodes/hovevision.html

@@ -1,59 +0,0 @@
-
-<div class="flex flex-col md:flex md:flex-row justify-center items-center mx-auto lg:pt-20 pt-8">
-    <div class="flex flex-wrap justify-center items-center w-full md:w-1/3">
-     <h1 class="font-semibold">The Vision</h1>
-     <h3 class="blue font-normal my-0">Pioneering. Empowering.</h3>
-    </div>
-    <div class="w-full md:w-2/3">
-        <div class="flex flex-wrap justify-center md:justify-end">
-            <div class="relative my-6 mx-2">
-                <img class="w-full object-cover rounded-md" src="/images/vision1.png" alt="Random image">
-                <div class="cardhover opacity-100 md:opacity-0 md:hover:opacity-100 duration-300 rounded-md absolute inset-0  flex justify-center items-center px-8 text-md text-gray-900 font-semibold">Most countries only rely on cable networks, meaning they lack control over their own digital infrastructure. </div>
-            </div>
-            <div class="relative my-6 mx-2">
-                <img class="w-full object-cover rounded-md" src="/images/vision2.png" alt="Random image">
-                <div class="cardhover opacity-100 md:opacity-0 md:hover:opacity-100 rounded-md absolute inset-0  flex justify-center items-center px-8 text-md text-gray-900 font-semibold">Today, most of the cloud is owned and operated by a few major companies taking all the profits and control of the Internet.</div>
-            </div>
-            <div class="relative my-6 mx-2">
-                <img class="w-full object-cover rounded-md" src="/images/vision3.png" alt="Random image">
-                <div class="cardhover opacity-100 md:opacity-0 md:hover:opacity-100 rounded-md absolute inset-0  flex justify-center items-center px-8 text-md text-gray-900 font-semibold">Digital experiences should not manipulate people, rather they should empower them. </div>
-            </div>
-            <div class="relative my-6 mx-2">
-                <img class="w-full object-cover rounded-md" src="/images/vision4.png" alt="Random image">
-                <div class="cardhover opacity-100 md:opacity-0 md:hover:opacity-100 rounded-md absolute inset-0  flex justify-center items-center px-8 text-md text-gray-900 font-semibold">Current IT infrastructures consume far too much energy. Now it is time we do something about it.</div>
-            </div>
-        </div>
-    </div>
-</div>
-
-
-
-
-
-
-<style>
-
-    .cardhover{
-        background-color: rgba(224, 224, 224, 0);
-
-        
-    }
-
-    .cardhover:hover{ 
-        background-color: rgba(224, 224, 224, 0.8);
-        animation-duration: 200;
-        
-    }
-
-
-    @media (max-width: 640px) {
-        .cardhover{ 
-            background-color: rgba(224, 224, 224, 0.8);
-            
-            
-        }
-    }
-</style>
-
-
-

templates/shortcodes/left_header.html

@@ -0,0 +1,30 @@
+{% set title = title | default(value="MYCELIUM") %}
+{% set subtitle = subtitle | default(value="") %}
+{% set subtitle_2 = subtitle_2 | default(value="") %}
+{% set description = description | default(value="") %}
+{% set description2 = description2 | default(value="") %}
+{% set description3 = description3 | default(value="") %}
+{% set button_text = button_text | default(value="") %}
+{% set button_link = button_link | default(value="") %}
+
+<div class="lg:pt-24 pt-12 lg:max-w-7xl container mx-auto px-4 lg:px-0">
+  <div class="mx-auto">
+    <div class="mx-auto">
+      {% if subtitle %}
+      <p class="text-base font-light tracking-wide">{{ subtitle }}</p>
+      {% endif %}
+      <h2 class="fade-in my-4">{{ title }}</h2>
+      <h3 class="mx-auto fade-in">{{ subtitle_2 }}</h2>
+      <p class="mt-6 max-w-3xl text-lg font-light">{{ description }}</p>
+      {% if description2 %}
+      <p class="mt-6 text-lg font-light">{{ description2 }}</p>
+      {% endif %}
+
+      {% if description3 %}
+      <p class="text-left mt-4 max-w-3xl text-pretty lg:text-lg text-md font-light  fade-in">
+        {{ description3 }} <a href="{{ button_link }}" class="font-semibold" target="_blanks"><u>{{ button_text }}</u></a>
+      </p>
+      {% endif %}
+    </div>
+  </div>
+</div>

templates/shortcodes/logo_slider.html

@@ -1,97 +0,0 @@
-
-{# <div class="flex space-x-12 justify-center">
-    <img loading="lazy" src="images/zictia_black.png" class="test" alt="Image 1" />
-    <img loading="lazy" src="images/vverse_black.png" class="test" alt="Image 2" />
-    <img loading="lazy" src="images/social_network_black.png" class="test" alt="Image 3" />
-    <img loading="lazy" src="images/vevrse_black.png" class="test" alt="Image 4" />
-    <img loading="lazy" src="images/sikana_black.png" class="test" alt="Image 5" />
-    <img loading="lazy" src="images/ourworld_black.png" class="test" alt="Image 6" />
-    <img loading="lazy" src="images/ict_black.png" class="test" alt="Image 7" />
-    <img loading="lazy" src="images/holochain_black.png" class="test" alt="Image 8" />
-    <img loading="lazy" src="images/temple_black.png" class="test" alt="Image 9" />
-    
-  </div> #}
-  
-
-  <div class="border-t-2 mb-6 border-gray-200"></div>
-
-  <div
-  x-data="{}"
-  x-init="$nextTick(() => {
-      let ul = $refs.logos;
-      ul.insertAdjacentHTML('afterend', ul.outerHTML);
-      ul.nextSibling.setAttribute('aria-hidden', 'true');
-  })"
-  class="w-full inline-flex flex-nowrap overflow-hidden [mask-image:_linear-gradient(to_right,transparent_0,_black_128px,_black_calc(100%-128px),transparent_100%)]"
->
-
-<ul x-ref="logos" class="flex items-center justify-center md:justify-start [&_li]:mx-8 [&_img]:max-w-none animate-infinite-scroll">
-    <li>
-        <img src="images/zictia_black.png" alt="Facebook" />
-    </li>
-    <li>
-        <img src="images/vverse_black.png" alt="Disney" />
-    </li>
-    <li>
-        <img src="images/social_network_black.png" alt="Airbnb" />
-    </li>
-    <li>
-        <img src="images/vevrse_black.png" alt="Apple" />
-    </li>
-    <li>
-        <img src="images/ict_black.png" alt="Spark" />
-    </li>
-    <li>
-        <img src="images/holochain_black.png" alt="Samsung" />
-    </li>
-    <li>
-        <img src="images/sikana_black.png" alt="Quora" />
-    </li>
-    <li>
-        <img src="images/ourworld_black.png" alt="Sass" />
-    </li>
-    <li>
-        <img src="images/temple_black.png" alt="Sass" />
-    </li>
-</ul> 
-<ul x-ref="logos" class="flex items-center justify-center md:justify-start [&_li]:mx-8 [&_img]:max-w-none animate-infinite-scroll" aria-hidden="true">
-    <li>
-        <img src="images/zictia_black.png" alt="Facebook" />
-    </li>
-    <li>
-        <img src="images/vverse_black.png" alt="Disney" />
-    </li>
-    <li>
-        <img src="images/social_network_black.png" alt="Airbnb" />
-    </li>
-    <li>
-        <img src="images/vevrse_black.png" alt="Apple" />
-    </li>
-    <li>
-        <img src="images/ict_black.png" alt="Spark" />
-    </li>
-    <li>
-        <img src="images/holochain_black.png" alt="Samsung" />
-    </li>
-    <li>
-        <img src="images/sikana_black.png" alt="Quora" />
-    </li>
-    <li>
-        <img src="images/ourworld_black.png" alt="Sass" />
-    </li>
-    <li>
-        <img src="images/temple_black.png" alt="Sass" />
-    </li>
-</ul> 
-
-</div>
-<div class="border-t-2 mt-6 border-gray-200"></div>
-
-
-<style>
-    ul {
-        list-style-type: none;
-      }
-</style>
-
-

templates/shortcodes/roadmap.html

@@ -1,126 +0,0 @@
-<!-- Timeline section -->
-<div class="mx-auto -mt-8 px-6 lg:py-24 py-4 ">
-    <div class="mx-auto grid max-w-2xl grid-cols-1 gap-8 overflow-hidden lg:mx-0 lg:max-w-none lg:grid-cols-4">
-      <div>
-        <time datetime="2021-08" class="flex items-center text-lg font-semibold leading-6 text-black">
-          <svg viewBox="0 0 4 4" class="mr-4 h-3 w-3 flex-none" aria-hidden="true">
-            <circle class="green_text" cx="2" cy="2" r="2" fill="currentColor" />
-          </svg>
-          Phase 1
-          <div class="absolute -ml-2 h-px w-screen -translate-x-full bg-gray-900/10 sm:-ml-4 lg:static lg:-mr-6 lg:ml-8 lg:w-auto lg:flex-auto lg:translate-x-0" aria-hidden="true"></div>
-        </time>
-        <div class="road_border_green px-3">
-        <p class="mt-6 text-lg font-semibold leading-8 tracking-tight green_text">CREATION OF CORE TECH</p>
-        <ul class="mt-1 text-base leading-7 text-gray-600 list-none" style="padding-left: 0px;">
-            <li>
-              +10 years of development
-            </li>
-            <br>
-            <li>
-              Built decentralized, autonomous, edge internet technology
-            </li>
-        </ul>
-      </div>
-      </div>
-      <div>
-        <time datetime="2021-12" class="flex items-center text-lg font-semibold leading-6 text-black">
-          <svg viewBox="0 0 4 4" class="mr-4 h-3 w-3 flex-none" aria-hidden="true">
-            <circle class="green_text" cx="2" cy="2" r="2" fill="currentColor" />
-          </svg>
-          Phase 2
-          <div class="absolute -ml-2 h-px w-screen -translate-x-full bg-gray-900/10 sm:-ml-4 lg:static lg:-mr-6 lg:ml-8 lg:w-auto lg:flex-auto lg:translate-x-0" aria-hidden="true"></div>
-        </time>
-        <div class="road_border_green px-3">
-        <p class="mt-6 text-lg font-semibold leading-8 tracking-tight green_text">TRACTION & EXPANSION</p>
-        <ul class="mt-1 text-base leading-7 text-gray-600 list-none" style="padding-left: 0px;">
-            <li>
-              Open Source Development<br> 
-              60+ Countries<br>  
-              30,000+ Cores<br>  
-              30,000,000 GB of Storage
-            </li>
-            <br>
-            <li>
-              Signed with Government of Zanzibar for a digital FreeZone and connected cyber city
-            </li>
-            <br>
-            <li>
-              Multiple global partners want to be part of the global expansion
-            </li>
-        </ul>
-      </div>
-      </div>
-      <div>
-        <time datetime="2022-02" class="flex items-center text-lg font-semibold leading-6 blue">
-          <svg viewBox="0 0 4 4" class="mr-4 h-3 w-3 flex-none" aria-hidden="true">
-            <circle class="blue" cx="2" cy="2" r="2" fill="currentColor" />
-          </svg>
-          Current | Phase 3
-          <div class="absolute -ml-2 h-px w-screen -translate-x-full bg-gray-900/10 sm:-ml-4 lg:static lg:-mr-6 lg:ml-8 lg:w-auto lg:flex-auto lg:translate-x-0" aria-hidden="true"></div>
-        </time>
-        <div class="road_border_blue px-3">
-        <p class="mt-6 text-lg font-semibold leading-8 tracking-tight blue">THREEFOLD EXPANSION</p>
-        <ul class="mt-1 text-base leading-7 text-gray-600 list-none" style="padding-left: 0px;">
-            <li>
-                Open Source Mode & Commercial Mode
-                Version 3 & Version 4
-            </li>
-            <br>
-            <li>
-              Service Levels & Supportability
-            </li>
-            <br>
-            <li>
-              Launch Project Internet Capacity
-            </li>
-            <br>
-            <li>
-              Expansion towards 1 million nodes
-          </li>
-        </ul>
-      </div>
-      </div>
-      <div>
-        <time datetime="2022-12" class="flex items-center text-lg font-semibold leading-6 text-black">
-          <svg viewBox="0 0 4 4" class="mr-4 h-3 w-3 flex-none" aria-hidden="true">
-            <circle class="text-gray-500" cx="2" cy="2" r="2" fill="currentColor" />
-          </svg>
-          Phase 4
-          <div class=""></div>
-        </time>
-        <div class="road_border px-3">
-        <p class="mt-6 text-lg font-semibold leading-8 tracking-tight text-gray-600">SOVEREIGNTY FOR ALL</p>
-        <ul class="mt-1 text-base leading-7 text-gray-600 list-none" style="padding-left: 0px;">
-            <li>
-              +1 Million Nodes enabled
-            </li>
-            <br>
-            <li>
-              +100 Million people using our system platform.
-            </li>
-            <br>
-            <li>
-                A credible and widespread alternative to centralized clouds
-            </li>
-        </ul>
-      </div>
-      </div>
-    </div>
-  </div>
-
-  <style>
-
-    .road_border{
-    
-      border-left: 1px solid rgb(156, 156, 156);
-    }
-
-    .road_border_green{
-      border-left: 1px solid #58CF77;
-    }
-
-    .road_border_blue{
-      border-left: 1px solid #2E83FF;
-    }
-
-  </style>

templates/shortcodes/storymap.html

@@ -1,118 +0,0 @@
-<div class="space-y-8 lg:pb-24 pb-4 relative before:absolute before:inset-0 before:ml-5 before:-translate-x-px md:before:mx-auto md:before:translate-x-0 before:h-full before:w-0.5 before:bg-gradient-to-b before:from-transparent before:via-slate-300 before:to-transparent">
-
-    <!-- Item #1 -->
-    <div class="relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active">
-        <!-- Icon -->
-        {# <div class="flex items-center justify-center w-10 h-10 rounded-full border border-white bg-slate-300 group-[.is-active]:bg-emerald-500 text-slate-500 group-[.is-active]:text-emerald-50 shadow shrink-0 md:order-1 md:group-odd:-translate-x-1/2 md:group-even:translate-x-1/2">
-            <svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="12" height="10">
-                <path fill-rule="nonzero" d="M10.422 1.257 4.655 7.025 2.553 4.923A.916.916 0 0 0 1.257 6.22l2.75 2.75a.916.916 0 0 0 1.296 0l6.415-6.416a.916.916 0 0 0-1.296-1.296Z" />
-            </svg>
-        </div>
-        <!-- Card -->
-        <div class="w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white p-4 rounded border border-slate-200 shadow">
-            <div class="flex items-center justify-between space-x-2 mb-1">
-                <div class="font-bold text-slate-900">Order Placed</div>
-                <time class="font-caveat font-medium text-indigo-500">08/06/2023</time>
-            </div>
-            <div class="text-slate-500">Our journey began, with a realization among a group of Internet and Cloud veterans: the existing Internet infrastructure is unsustainable.</div>
-        </div> #}
-    </div>
-    
-    <!-- Item #2 -->
-    <div class="relative flex items-center justify-center md:justify-normal md:odd:flex-row-reverse group is-active">
-        <!-- Icon -->
-        <div class="flex items-center justify-center w-6 h-6 rounded-full border border-white bg-gray-600 shrink-0 md:order-1 md:group-odd:-translate-x-7 md:group-even:translate-x-7">
-            {# <svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="12" height="10">
-                <path fill-rule="nonzero" d="M10.422 1.257 4.655 7.025 2.553 4.923A.916.916 0 0 0 1.257 6.22l2.75 2.75a.916.916 0 0 0 1.296 0l6.415-6.416a.916.916 0 0 0-1.296-1.296Z" />
-            </svg> #}
-        </div>
-        <!-- Card -->
-        <div class="w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white p-4 rounded border border-slate-200 shadow">
-            <div class="flex items-center space-x-2 mb-1">
-                {# <div class="font-bold text-slate-900">Phase 1:</div> #}
-                {# <div class="font-caveat font-semibold text-lg">OUR JOURNEY BEGAN</div> #}
-            </div>
-            <p class="text-gray-800 text-md"><span class="font-caveat font-semibold text-lg blue">OUR JOURNEY BEGAN </span>with a realization among a group of Internet and Cloud veterans: the existing Internet infrastructure is unsustainable.</p>
-           
-        </div>
-    </div>
-    
-    <!-- Item #3 -->
-    <div class="relative flex items-center justify-center md:justify-normal md:odd:flex-row-reverse group is-active">
-        <!-- Icon -->
-        <div class="flex items-center justify-center w-6 h-6 rounded-full border border-white bg-gray-600 shrink-0 md:order-1 md:group-odd:-translate-x-7 md:group-even:translate-x-7">
-            {# <svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="12" height="10">
-                <path fill-rule="nonzero" d="M10.422 1.257 4.655 7.025 2.553 4.923A.916.916 0 0 0 1.257 6.22l2.75 2.75a.916.916 0 0 0 1.296 0l6.415-6.416a.916.916 0 0 0-1.296-1.296Z" />
-            </svg> #}
-        </div>
-        <!-- Card -->
-        <div class="w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white p-4 rounded border border-slate-200 shadow">
-            <div class="flex items-center space-x-2 mb-1">
-                {# <div class="font-bold text-slate-900">Phase 2:</div> #}
-                {# <time class="font-caveat font-semibold green_text">In response,</time> #}
-            </div>
-            <p class="text-gray-800 text-md"><span class="font-caveat font-semibold text-lg blue uppercase">In response, </span>we came together with a shared mission—to design a revolutionary decentralized, open-source, inclusive, and sustainable Cloud solution for all.  </p>
-           
-        </div>
-    </div>
-    
-    <!-- Item #4 -->
-    <div class="relative flex items-center justify-center md:justify-normal md:odd:flex-row-reverse group is-active">
-        <!-- Icon -->
-        <div class="flex items-center justify-center w-6 h-6 rounded-full border border-white bg-gray-600 shrink-0 md:order-1 md:group-odd:-translate-x-7 md:group-even:translate-x-7">
-            {# <svg class="fill-current text-white" xmlns="http://www.w3.org/2000/svg" width="12" height="10">
-                <path fill-rule="nonzero" d="M10.422 1.257 4.655 7.025 2.553 4.923A.916.916 0 0 0 1.257 6.22l2.75 2.75a.916.916 0 0 0 1.296 0l6.415-6.416a.916.916 0 0 0-1.296-1.296Z" />
-            </svg> #}
-        </div>
-        <!-- Card -->
-        <div class="w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white p-4 rounded border border-slate-200 shadow">
-            <div class="flex items-center space-x-2 mb-1">
-                {# <div class="font-bold text-slate-900">Phase 3:</div> #}
-                {# <div class="font-caveat font-semibold blue">Today</div> #}
-            </div>
-            <p class="text-gray-800 text-md"><span class="font-caveat font-semibold text-lg blue uppercase">Today </span>
-                as we embark on the commercialization phase, the ThreeFold Grid is in its third generation technology and live in ±60 countries, significant milestones in our ongoing commitment to redefine the future of the digital landscape.
-            </p>
-           
-        </div>
-    </div>
-
-    <!-- Item #5 -->
-    <div class="relative flex items-center justify-center md:justify-normal md:odd:flex-row-reverse group is-active">
-        <!-- Icon -->
-        <div class="flex items-center justify-center w-6 h-6 rounded-full border border-white bg-gray-600 shrink-0 md:order-1 md:group-odd:-translate-x-7 md:group-even:translate-x-7">
-            {# <svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="12" height="10">
-                <path fill-rule="nonzero" d="M10.422 1.257 4.655 7.025 2.553 4.923A.916.916 0 0 0 1.257 6.22l2.75 2.75a.916.916 0 0 0 1.296 0l6.415-6.416a.916.916 0 0 0-1.296-1.296Z" />
-            </svg> #}
-        </div>
-        <!-- Card -->
-        <div class="w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white p-4 rounded border border-slate-200 shadow">
-            <div class="flex items-center space-x-2 mb-1">
-                {# <div class="font-bold text-slate-900">Phase 2:</div> #}
-                {# <time class="font-caveat font-semibold green_text">In response,</time> #}
-            </div>
-            <p class="text-gray-800 text-md"><span class="font-caveat font-semibold text-lg blue uppercase">Project Internet Capacity</span> is the fourth generation of the ThreeFold Grid, the accumulation of years of work by ThreeFold. Project INCA aims to be a Layer 0 for the DePIN community and involves the launch of a new token, INCA, on the Solana blockchain. Learn more <a href="https://www.threefold.io/blog/introducing-project-inca/">here.</a></p>
-           
-        </div>
-    </div>
-    
-    <!-- Item #6 -->
-    {# <div class="relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group">
-        <!-- Icon -->
-        <div class="flex items-center justify-center w-10 h-10 rounded-full border border-white bg-slate-300 group-[.is-active]:bg-emerald-500 text-slate-500 group-[.is-active]:text-emerald-50 shadow shrink-0 md:order-1 md:group-odd:-translate-x-1/2 md:group-even:translate-x-1/2">
-            <svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
-                <path d="M12 10v2H7V8.496a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5V12H0V4.496a.5.5 0 0 1 .206-.4l5.5-4a.5.5 0 0 1 .588 0l5.5 4a.5.5 0 0 1 .206.4V10Z" />
-            </svg>
-        </div>
-        <!-- Card -->
-        <div class="w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white p-4 rounded border border-slate-200 shadow">
-            <div class="flex items-center justify-between space-x-2 mb-1">
-                <div class="font-bold text-slate-900">Delivered</div>
-                <time class="font-caveat font-medium text-amber-500">Exp. 12/08/2023</time>
-            </div>
-            <div class="text-slate-500">Pretium lectus quam id leo. Urna et pharetra aliquam vestibulum morbi blandit cursus risus.</div>
-        </div>
-    </div> #}
-
-</div>
-

templates/shortcodes/timeline.html

@@ -0,0 +1,145 @@
+{% set title_1 = title_1 | default(value="") %}
+{% set subtitle_1 = subtitle_1 | default(value="") %}
+{% set point_1_1 = point_1_1 | default(value="") %}
+{% set point_1_2 = point_1_2 | default(value="") %}
+{% set point_1_3 = point_1_3 | default(value="") %}
+{% set title_2 = title_2 | default(value="") %}
+{% set subtitle_2 = subtitle_2 | default(value="") %}
+{% set point_2_1 = point_2_1 | default(value="") %}
+{% set point_2_2 = point_2_2 | default(value="") %}
+{% set point_2_3 = point_2_3 | default(value="") %}
+{% set point_2_4 = point_2_4 | default(value="") %}
+{% set point_2_5 = point_2_5 | default(value="") %}
+{% set point_2_6 = point_2_6 | default(value="") %}
+{% set paragraph_2_1 = paragraph_2_1 | default(value="") %}
+{% set title_3 = title_3 | default(value="") %}
+{% set subtitle_3 = subtitle_3 | default(value="") %}
+{% set point_3_1 = point_3_1 | default(value="") %}
+{% set point_3_2 = point_3_2 | default(value="") %}
+{% set point_3_3 = point_3_3 | default(value="") %}
+{% set paragraph_3_1 = paragraph_3_1 | default(value="") %}
+{% set paragraph_3_2 = paragraph_3_2 | default(value="") %}
+
+
+
+
+<div class="space-y-8 pt-12 mx-auto max-w-7xl relative before:absolute before:inset-0 before:ml-5 before:-translate-x-px md:before:mx-auto md:before:translate-x-0 before:h-full before:w-0.5 before:bg-gradient-to-b before:from-transparent before:via-slate-300 before:to-transparent">
+
+    <!-- Item #1 -->
+    <div class="fade-in relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active">
+        <div class="flex items-center justify-center w-10 h-10 rounded-full border border-white bg-slate-300 group-[.is-active]:bg-emerald-500 text-slate-500 group-[.is-active]:text-emerald-50 shadow shrink-0 md:order-1 md:group-odd:-translate-x-1/2 md:group-even:translate-x-1/2">
+            <svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="12" height="10">
+                <path fill-rule="nonzero" d="M10.422 1.257 4.655 7.025 2.553 4.923A.916.916 0 0 0 1.257 6.22l2.75 2.75a.916.916 0 0 0 1.296 0l6.415-6.416a.916.916 0 0 0-1.296-1.296Z" />
+            </svg>
+        </div>
+        <div class="fade-in w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white/5 p-4 rounded-2xl shadow visible">
+            <div class="flex items-center justify-between space-x-2 mb-1">
+                <div class="font-medium">{{ subtitle_1 }}</div>
+            </div>
+            <div class="font-semibold text-lg mb-2">{{ title_1 }}</div>
+            <div class="text-gray-900 font-light">
+                <ul style="list-style: disc;">
+                    <li>{{ point_1_1 }}</li>
+                    <li>{{ point_1_2 }}</li>
+                    <li>{{ point_1_3 }}</li>
+                </ul>
+            </div>
+        </div>
+    </div>
+
+    <!-- Item #2 -->
+    <div class="fade-in relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active">
+        <div class="flex items-center justify-center w-10 h-10 rounded-full border border-white bg-slate-300 group-[.is-active]:bg-emerald-500 text-slate-500 group-[.is-active]:text-emerald-50 shadow shrink-0 md:order-1 md:group-odd:-translate-x-1/2 md:group-even:translate-x-1/2">
+            <svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="12" height="10">
+                <path fill-rule="nonzero" d="M10.422 1.257 4.655 7.025 2.553 4.923A.916.916 0 0 0 1.257 6.22l2.75 2.75a.916.916 0 0 0 1.296 0l6.415-6.416a.916.916 0 0 0-1.296-1.296Z" />
+            </svg>
+        </div>
+        <div class="fade-in w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white/5 p-4 rounded-2xl shadow visible">
+            <div class="flex items-center justify-between space-x-2 mb-1">
+                <div class="font-medium">{{ subtitle_2 }}</div>
+            </div>
+            <div class="font-semibold text-lg mb-2">{{ title_2 }}</div>
+            <div class="text-gray-900 font-light">
+                <ul style="list-style: disc;">
+                    <li>{{ point_2_1 }}</li>
+                    <li>{{ point_2_2 }}</li>
+                    <li>{{ point_2_3 }}</li>
+                    <li>{{ point_2_4 }}</li>
+                    <li>{{ point_2_5 }}</li>
+                    <li>{{ point_2_6 }}</li>              
+                </ul>
+                <p class="text-base font-semibold mt-4">{{ paragraph_2_1 }}</p>
+            </div>
+        </div>
+    </div>
+
+    <!-- Item #3 -->
+    <div class="fade-in relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active">
+        <div class="flex items-center justify-center w-10 h-10 rounded-full border border-white bg-slate-300 group-[.is-active]:bg-emerald-500 text-slate-500 group-[.is-active]:text-emerald-50 shadow shrink-0 md:order-1 md:group-odd:-translate-x-1/2 md:group-even:translate-x-1/2">
+            <svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="12" height="10">
+                <path fill-rule="nonzero" d="M10.422 1.257 4.655 7.025 2.553 4.923A.916.916 0 0 0 1.257 6.22l2.75 2.75a.916.916 0 0 0 1.296 0l6.415-6.416a.916.916 0 0 0-1.296-1.296Z" />
+            </svg>
+        </div>
+        <div class="fade-in w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white/5 p-4 rounded-2xl shadow visible">
+            <div class="flex items-center justify-between space-x-2 mb-1">
+                <div class="font-medium">{{ subtitle_3 }}</div>
+            </div>
+            <div class="font-semibold text-lg mb-2">{{ title_3 }}</div>
+            <div class="text-gray-900 font-light">
+               
+                <ul style="list-style: disc;">
+                    <li>{{ point_3_1 }}</li>
+                    <li>{{ point_3_2 }}</li>
+                    <li>{{ point_3_3 }}</li>
+                </ul>
+               
+                <div class="text-base mt-8">
+                    <p class="text-base">{{ paragraph_3_1 }}</p>
+                    <p class="text-base font-semibold mt-4">{{ paragraph_3_2 }}</p>
+                </div>    
+                
+            </div>
+        </div>
+    </div>
+</div>
+
+
+
+<style>
+    /* Initial state: elements are invisible */
+.fade-in {
+  opacity: 0;
+  transition: opacity 1s ease-out;
+}
+
+/* State when element is in view */
+.fade-in.visible {
+  opacity: 1;
+}
+
+</style>
+
+<script>
+    // Get all the elements that need to be faded in
+    document.addEventListener('DOMContentLoaded', function() {
+  // Target all elements with the 'fade-in' class
+  const fadeInElements = document.querySelectorAll('.fade-in');
+
+  const observer = new IntersectionObserver((entries, observer) => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        // Add 'visible' class to the element when it's in view
+        entry.target.classList.add('visible');
+        observer.unobserve(entry.target); // Stop observing after it fades in
+      }
+    });
+  }, {
+    threshold: 0.1 // Trigger when 10% of the element is in view
+  });
+
+  fadeInElements.forEach(element => {
+    observer.observe(element);
+  });
+});
+</script>
+