ourworld_web/www_aibox
20
0
Fork 0
Code Pull Requests Activity

Compare commits

base: ourworld_web:development
Branches Tags
ourworld_web:development
ourworld_web:development_markdown
ourworld_web:master
..
compare: ourworld_web:master
Branches Tags
ourworld_web:development
ourworld_web:development_markdown
ourworld_web:master

3 Commits
developmen ... master

Author SHA1 Message Date
ehab-hassan
7f01271cd4 update matomo script 2025-03-19 23:57:12 +02:00
ehab-hassan
3093de1be0 Merge branch 'development' 2025-03-06 12:20:17 +02:00
samir
7ead706432 Update config.toml 2025-03-03 10:22:29 +00:00
20 changed files with 249 additions and 113 deletions
Show Stats Expand all files Collapse all files

46
.github/workflows/tf_update_dev.yml vendored Normal file
View File

@ -0,0 +1,46 @@
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'

46
.github/workflows/tf_update_prod.yml vendored Normal file
View File

@ -0,0 +1,46 @@
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'

46
.github/workflows/update_dev2.yml vendored Normal file
View File

@ -0,0 +1,46 @@
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'

46
.github/workflows/update_www3.yml vendored Normal file
View File

@ -0,0 +1,46 @@
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'

9
config.toml
View File

@ -1,17 +1,17 @@
# The URL the site will be built for # The URL the site will be built for
base_url = "https://www2.aibox.threefold.io/" base_url = "https://www.aibox.threefold.io/"
# Change this to your own URL! Please note this variable **must** be uncommented . # Change this to your own URL! Please note this variable **must** be uncommented .
title = "AIBOX" title = "AIBOX"
description = "Your Personal AI Powerhouse" description = "Your Personal AI Powerhouse"
# When set to "true", a feed is automatically generated. # 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. # 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. # 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. # 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 # The number of articles to include in the feed. All items are included if
# this limit is not set (the default). # this limit is not set (the default).
@ -51,7 +51,8 @@ external_links_no_referrer = true
# For example, `...` into `…`, `"quote"` into `“curly”` etc # For example, `...` into `…`, `"quote"` into `“curly”` etc
smart_punctuation = true smart_punctuation = true
[build]
not_found = "404.md"
[[taxonomies]] [[taxonomies]]
name = "categories" name = "categories"

4
content/_index.md
View File

@ -1,8 +1,8 @@
--- ---
title: "AIBOX" title: "AIBOX"
description: "Meet AIBOX - Your Personal AI Powerhouse powered by ThreeFold. " # quotation marks to allow colons where used description: "Meet AIBOX - Your Personal AI Powerhouse powered by ThreeFold. " # quotation marks to allow colons where used
#date: 2025-01-14T21:00:00-05:00 date: 2025-01-14T21:00:00-05:00
#updated: 2025-02-25T14:40:00-06:00 updated: 2025-02-25T14:40:00-06:00
draft: false draft: false
extra: extra:
author: ThreeFold author: ThreeFold

2
content/footer/_index.md
View File

@ -14,7 +14,7 @@ extra:
<br> <br>
###### [AIBox Docs](https://threefold.info/aibox/docs/) ###### [AIBOX Docs](https://threefold.info/aibox/docs/)
###### [ThreeFold](https://docs.threefold.io/docs/introduction) ###### [ThreeFold](https://docs.threefold.io/docs/introduction)

2
content/header/index.md
View File

@ -7,7 +7,7 @@ extra:
--- ---
- [Host a Box]("farmer") - [Become a farmer]("farmer")
- [Docs]("https://threefold.info/aibox/docs/") - [Docs]("https://threefold.info/aibox/docs/")

BIN
tailwindcss-macos-arm64
View File

Binary file not shown.

5
templates/index.html
View File

@ -6,7 +6,8 @@
{% include "partials/hero/aihero8.html" %} {% include "partials/hero/aihero8.html" %}
{% include "partials/hero/aihero4.html" %} {% include "partials/hero/aihero4.html" %}
{% include "partials/hero/aihero5.html" %} {% include "partials/hero/aihero5.html" %}
{% include "partials/hero/coming_soon.html" %} {% include "partials/hero/aihero6.html" %}
{% include "partials/hero/aihero9.html" %}
{% include "partials/hero/faq.html" %} {% include "partials/hero/faq.html" %}
{% include "partials/farmer/cta.html" %} {% include "partials/hero/aihero10.html" %}
{% endblock content %} {% endblock content %}

10
templates/partials/farmer/about1.html
View File

@ -2,16 +2,16 @@
<div class="px-6 mt-12 lg:pt-16 pt-12 pb-12 sm:px-6 lg:px-8"> <div class="px-6 mt-12 lg:pt-16 pt-12 pb-12 sm:px-6 lg:px-8">
<div class="mx-auto max-w-3xl text-center"> <div class="mx-auto max-w-3xl text-center">
<h2 class="text-balance font-normal tracking-tight text-black lg:text-6xl text-4xl fade-in">Powered by ThreeFold</h2> <h2 class="text-balance font-normal tracking-tight text-black lg:text-6xl text-4xl fade-in">Powered by ThreeFold</h2>
<p class="mx-auto mt-12 text-pretty lg:text-xl text-lg font-light text-gray-900 fade-in"><span class="font-semibold">AIBox</span> is a project by ThreeFold, a team with over 10 years of experience <p class="mx-auto mt-12 text-pretty lg:text-xl text-lg font-light text-gray-900 fade-in"><span class="font-semibold">AIBOX</span> is a project by ThreeFold, a team with over 10 years of experience
<br> building decentralized internet infrastructure. building decentralized internet infrastructure.
</p> </p>
<p class="mx-auto mt-4 text-pretty lg:text-xl text-lg font-light text-gray-900 fade-in">ThreeFold empowers individuals and organizations to share compute, storage, <p class="mx-auto mt-4 text-pretty lg:text-xl text-lg font-light text-gray-900 fade-in">ThreeFold empowers individuals and organizations to share compute, storage,
and network resources on the ThreeFold Grid, creating a truly decentralized and autonomous internet. and network resources on the ThreeFold Grid—creating a truly decentralized and autonomous internet.
</p> </p>
<p class="mx-auto mt-4 text-pretty lg:text-xl text-lg font-light text-gray-900 fade-in">Today, our <span class="font-semibold">Proof-of-Concept Network</span> is live globally, <br> running on <span class="font-semibold">v3.17.0</span> technology. <p class="mx-auto mt-4 text-pretty lg:text-xl text-lg font-light text-gray-900 fade-in">Today, our <span class="font-semibold">Proof-of-Concept Network</span> is live globally, running on <span class="font-semibold">v3.15.0</span> technology.
</p> </p>
<div class="mt-10 flex items-center gap-x-6 flex-wrap justify-center"> <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"> <a href="https://threefold.io/" target="_blank" class="fade-in rounded-2xl bg-black px-4 py-2.5 text-sm lg:text-md font-semibold text-white shadow-sm hover:bg-gray-200 hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 mb-4 lg:mb-0">
Visit ThreeFold Visit ThreeFold
</a> </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> <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>

9
templates/partials/farmer/cta.html
View File

@ -1,12 +1,11 @@
<div class="bg-transparent py-12 lg:pt-24 mb-10 pb-24 px-4"> <div class="bg-transparent py-12 lg:pt-24 mb-10 pb-24 px-4">
<div class="mx-auto ring-1 shadow-2xl ring-black/5 py-12 rounded-2xl bg-white/5 max-w-7xl px-6 lg:flex lg:items-center lg:justify-between lg:px-20"> <div class="mx-auto ring-1 shadow-2xl ring-black/5 py-12 rounded-2xl bg-white/5 max-w-7xl px-6 lg:flex lg:items-center lg:justify-between lg:px-20">
<h2 id="blinking4" class="lg:text-balance text-center lg:text-left items-start lg:text-[5rem] text-[3rem] font-normal tracking-tight text-black fade-in"> <h2 id="blinking4" class="lg:text-balance text-center lg:text-left items-start lg:text-[4rem] text-[2rem] font-normal tracking-tight text-black fade-in">
Own <br> Own Your AI. <br>Pre-Order<br>Now.
Your AI
</h2> </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"> <div class="mt-10 flex items-center 0 gap-x-6 lg:mt-0 lg:shrink-0 flex-wrap justify-center lg:justify-start">
<a href="/signup" target="_blank" onclick="window.open(this.href, '_blank'); return false;" class="fade-in rounded-2xl bg-black px-4 py-2.5 text-sm lg:text-md font-semibold text-white shadow-sm hover:text-gray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 mb-4 lg:mb-0"> <a href="/signup" target="_blank" onclick="window.open(this.href, '_blank'); return false;" class="fade-in rounded-2xl bg-black px-4 py-2.5 text-sm lg:text-md font-semibold text-white shadow-sm hover:bg-gray-200 hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 mb-4 lg:mb-0">
Register Now Pre-order Now
</a> </a>
<a href="https://threefold.info/aibox/docs/" target="_blank" class="text-sm/6 font-semibold text-gray-900">Learn more <span aria-hidden="true">→</span></a> <a href="https://threefold.info/aibox/docs/" target="_blank" class="text-sm/6 font-semibold text-gray-900">Learn more <span aria-hidden="true">→</span></a>
</div> </div>

16
templates/partials/farmer/farmers.html
View File

@ -2,12 +2,8 @@
<div class="mx-auto max-w-7xl px-4 lg:max-w-7xl lg:px-8"> <div class="mx-auto max-w-7xl px-4 lg:max-w-7xl lg:px-8">
<div class="mx-auto max-w-2xl lg:max-w-7xl "> <div class="mx-auto max-w-2xl lg:max-w-7xl ">
<h2 class="mx-auto fade-in text-left lg:text-5xl text-4xl leading-snug font-normal tracking-tight text-black capitalize">How it works</h2> <h2 class="mx-auto fade-in text-left lg:text-5xl text-4xl leading-snug font-normal tracking-tight text-black capitalize">How it works</h2>
<p class="text-left my-6 max-w-5xl text-pretty lg:text-xl text-lg font-light text-gray-800 fade-in"> <p class="text-left my-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-800 fade-in">
Anyone can deploy AIBox (servers) from their homes or offices and participate in a decentralized alternative to corporate-owned data centers. Regardless of technical expertise, anyone can deploy AIBOX (servers) from their homes or offices, and participate in a decentralized alternative to corporate-owned data centers – while earning rewards for their contributions. We call this process “farming.”
<br>
<br>
Starting this summer, farming is evolving. With the launch of the ThreeFold Marketplace, rewards will be based on actual usage. Users will also be able to rent unlisted GPUs directly from the network, unlocking new use cases and making decentralized compute power more accessible than ever.
</p> </p>
</div> </div>
<section class="bg-transparent"> <section class="bg-transparent">
@ -16,10 +12,10 @@ Starting this summer, farming is evolving. With the launch of the ThreeFold Mark
<dl class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-8 lg:max-w-none lg:grid-cols-3"> <dl class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-8 lg:max-w-none lg:grid-cols-3">
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-gray-50 ring-1 ring-black/5 py-6 shadow-md shadow-black/5"> <div class="fade-in-box flex flex-col p-8 rounded-2xl bg-gray-50 ring-1 ring-black/5 py-6 shadow-md shadow-black/5">
<dt class="flex items-center gap-x-3 text-lg rounded-2xl font-semibold text-black"> <dt class="flex items-center gap-x-3 text-lg rounded-2xl font-semibold text-black">
1. HOST A BOX 1. HOST A NODE
</dt> </dt>
<dd class="mt-4 flex flex-auto flex-col"> <dd class="mt-4 flex flex-auto flex-col">
<p class="flex-auto leading-normal font-light text-gray-800 text-md">All you need to get started is a modern computer, electricity and network. Once booted with Zero OS, a computer becomes an AIBox.</p> <p class="flex-auto leading-normal font-light text-gray-800 text-md">All you need to get started is a modern computer, electricity and network. Once booted with Zero OS, a computer becomes a ThreeFold Node.</p>
<p class="mt-6"> <p class="mt-6">
</p> </p>
</dd> </dd>
@ -29,7 +25,7 @@ Starting this summer, farming is evolving. With the launch of the ThreeFold Mark
2. OFFER CAPACITY 2. OFFER CAPACITY
</dt> </dt>
<dd class="mt-4 flex flex-auto flex-col"> <dd class="mt-4 flex flex-auto flex-col">
<p class="flex-auto leading-normal font-light text-gray-800 text-md">The capacity of the AIBox gets verified, registered and secured on the ThreeFold Blockchain. Farmers can then list their resources on the ThreeFold Marketplace, making them available directly to users.</p> <p class="flex-auto leading-normal font-light text-gray-800 text-md">The capacity of the node gets verified and registered in the ThreeFold Blockchain, securing access to a decentralized autonomous cloud for users and communities.</p>
<p class="mt-6"> <p class="mt-6">
</p> </p>
@ -40,7 +36,7 @@ Starting this summer, farming is evolving. With the launch of the ThreeFold Mark
3. EARN REWARDS 3. EARN REWARDS
</dt> </dt>
<dd class="mt-4 flex flex-auto flex-col"> <dd class="mt-4 flex flex-auto flex-col">
<p class="flex-auto leading-normal font-light text-gray-800 text-md">Farmers earn rewards when their GPU resources are used through the Marketplace, enabling a fair and transparent peer-to-peer economy. <p class="flex-auto leading-normal font-light text-gray-800 text-md">After your node is set up and verified, you’ll be rewarded for the capacity that you provide to the ThreeFold Grid.
</p> </p>
<p class="mt-6"> <p class="mt-6">

4
templates/partials/header.html
View File

@ -110,7 +110,7 @@
</a> </a>
</li> </li>
</ul> #} </ul> #}
<a href="/signup" target="_blank" onclick="window.open(this.href, '_blank'); return false;" class="blinking-effect dashboard rounded-2xl bg-black px-4 p-2 text-sm font-semibold text-white shadow-sm hover:text-gray-300 hover:bg-gray-900">Register Now</a> <a href="/signup" target="_blank" onclick="window.open(this.href, '_blank'); return false;" class="blinking-effect dashboard rounded-2xl bg-black px-4 p-2 text-sm font-semibold text-white shadow-sm hover:text-gray-800 hover:bg-gray-900">Pre-Order Now</a>
</div> </div>
</div> </div>
</div> </div>
@ -200,7 +200,7 @@
</div> #} </div> #}
<div class="rounded-xl border-2 my-4 border-gray-400 py-2 mx-4"> <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="/signup" target="_blank" class="mt-2 rounded-md px-4 py-2.5 text-lg font-semibold text-white shadow-sm hover:text-gray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Pre-Order Now</a><br>
<a href="https://threefold.info/aibox/docs/" <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"> 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 Docs

2
templates/partials/hero/aihero1.html
View File

@ -6,7 +6,7 @@
<span id="slides" class="slides"></span> <span id="slides" class="slides"></span>
</h1> </h1>
<div id="learn-more" class="lg:mt-10 mt-4 flex items-center gap-x-6"> <div id="learn-more" class="lg:mt-10 mt-4 flex items-center gap-x-6">
<a href="/farmer" target="_blank" class="text-xl font-semibold text-black hover:text-gray-200"> <a href="/farmers" target="_blank" class="text-xl font-semibold text-black hover:text-gray-200">
Learn more <span aria-hidden="true">→</span> Learn more <span aria-hidden="true">→</span>
</a> </a>
</div> </div>

56
templates/partials/hero/aihero10.html
View File

@ -1,22 +1,22 @@
<div class="bg-transparent py-12 lg:pt-24 mb-10 pb-24 px-4"> <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"> <div class="mx-auto ring-1 shadow-2xl ring-black/5 py-12 rounded-2xl bg-white/5 max-w-7xl px-6 lg:flex lg:items-center lg:justify-between lg:px-20">
<h2 id="blinking4" class="lg:text-balance text-center lg:text-left items-start lg:text-[4rem] text-[2rem] font-normal tracking-tight text-black fade-in"> <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>Register Own Your AI. <br>Pre-Order<br>Now.
</h2> </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"> <div class="mt-10 flex items-center 0 gap-x-6 lg:mt-0 lg:shrink-0 flex-wrap justify-center lg:justify-start">
<a href="/signup" target="_blank" onclick="window.open(this.href, '_blank'); return false;" class="fade-in rounded-2xl bg-black px-4 py-2.5 text-sm lg:text-md font-semibold text-white shadow-sm hover:text-gray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 mb-4 lg:mb-0"> <a href="/signup" target="_blank" onclick="window.open(this.href, '_blank'); return false;" class="fade-in rounded-2xl bg-black px-4 py-2.5 text-sm lg:text-md font-semibold text-white shadow-sm hover:bg-gray-200 hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 mb-4 lg:mb-0">
Register Now Pre-order Now
</a> </a>
<a href="https://threefold.info/aibox/docs/" target="_blank" class="text-sm/6 font-semibold text-gray-900">Learn more <span aria-hidden="true">→</span></a> <a href="https://threefold.info/aibox/docs/" target="_blank" class="text-sm/6 font-semibold text-gray-900">Learn more <span aria-hidden="true">→</span></a>
</div>
</div>
</div> </div>
</div>
</div>
</div> </div>
<style> <style>
/* Initial state: elements are invisible */ /* Initial state: elements are invisible */
.fade-in { .fade-in {
opacity: 0; opacity: 0;
transition: opacity 1s ease-out; transition: opacity 1s ease-out;
@ -30,30 +30,30 @@ opacity: 1;
</style> </style>
<script> <script>
// Get all the elements that need to be faded in // Get all the elements that need to be faded in
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
const h2 = document.getElementById("blinking4"); const h2 = document.getElementById("blinking4");
setInterval(() => { setInterval(() => {
h2.style.opacity = (h2.style.opacity == "1") ? "0.3" : "1"; h2.style.opacity = (h2.style.opacity == "1") ? "0.3" : "1";
}, 1000); // Blinks every 2 seconds }, 1000); // Blinks every 2 seconds
// Target all elements with the 'fade-in' class // Target all elements with the 'fade-in' class
const fadeInElements = document.querySelectorAll('.fade-in'); const fadeInElements = document.querySelectorAll('.fade-in');
const observer = new IntersectionObserver((entries, observer) => { const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => { entries.forEach(entry => {
if (entry.isIntersecting) { if (entry.isIntersecting) {
// Add 'visible' class to the element when it's in view // Add 'visible' class to the element when it's in view
entry.target.classList.add('visible'); entry.target.classList.add('visible');
observer.unobserve(entry.target); // Stop observing after it fades in observer.unobserve(entry.target); // Stop observing after it fades in
} }
}); });
}, { }, {
threshold: 0.1 // Trigger when 10% of the element is in view threshold: 0.1 // Trigger when 10% of the element is in view
}); });
fadeInElements.forEach(element => { fadeInElements.forEach(element => {
observer.observe(element); observer.observe(element);
}); });
}); });

4
templates/partials/hero/aihero3.html
View File

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

2
templates/partials/hero/aihero8.html
View File

@ -7,7 +7,7 @@
<div class="relative mx-auto mt-4 max-w-7xl px-4 pb-16 sm:px-6 lg:px-8"> <div class="relative mx-auto mt-4 max-w-7xl px-4 pb-16 sm:px-6 lg:px-8">
<div class="mx-auto max-w-2xl text-center lg:max-w-5xl"> <div class="mx-auto max-w-2xl text-center lg:max-w-5xl">
<h2 class="text-balance font-normal tracking-tight text-black lg:text-[6rem] text-[2.5rem]">Push the Limits of AI—Your Way.</h2> <h2 class="text-balance font-normal tracking-tight text-black lg:text-[6rem] text-[2.5rem]">Push the Limits of AI—Your Way.</h2>
<p class="mt-8 fade-i lg:text-3xl text-xl leading-snug font-normal tracking-tight text-gray-900"><span class="font-medium">AIBox</span> is built for those who think beyond limits. Whether you're a hacker, AI researcher, or tech enthusiast, AIBox is your playground.</p> <p class="mt-8 fade-i lg:text-3xl text-xl leading-snug font-normal tracking-tight text-gray-900"><span class="font-medium">AIBox</span> is built for those who think beyond limits—whether you're a hacker, AI researcher, or tech enthusiast, AIBox is your playground.</p>
</div> </div>
<dl class="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 sm:gap-y-16 lg:max-w-none lg:grid-cols-3 lg:gap-x-8"> <dl class="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 sm:gap-y-16 lg:max-w-none lg:grid-cols-3 lg:gap-x-8">

45
templates/partials/hero/coming_soon.html
View File

@ -1,45 +0,0 @@
<div class="relative isolate overflow-hidden bg-transparent">
<div class="px-6 mt-12 lg:pt-16 pt-12 pb-12 sm:px-6 lg:px-8">
<div class="mx-auto max-w-3xl text-center">
<h2 class="text-balance font-normal tracking-tight text-black lg:text-6xl text-4xl fade-in">AIBox is Coming Soon</h2>
<h3 class="mx-auto mt-12 text-pretty lg:text-xl text-lg font-semibold text-gray-900 fade-in">
The future of computing is almost here.
</h3>
<p class="mx-auto mt-4 text-pretty lg:text-xl text-lg font-light text-gray-900 fade-in">We are preparing to launch AIBox, a powerful next-generation system designed to transform decentralized AI and edge computing. Built for performance, privacy, and autonomy, AIBox will enable users to contribute to the ThreeFold Grid and run AI workloads using their own hardware.
</p>
<p class="mx-auto mt-4 text-pretty lg:text-xl text-lg font-semibold text-gray-900 fade-in">Register and stay informed about launch details, <br> setup options, and how to participate.
</p>
<div class="mt-10 flex items-center gap-x-6 flex-wrap justify-center">
<a href="https://www.aibox.threefold.io/signup/" target="_blank" class="fade-in rounded-2xl bg-black px-4 py-2.5 text-sm lg:text-md font-semibold text-white shadow-sm hover:bg-gray-800 hover:text-gray-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 mb-4 lg:mb-0">
Register
</a>
</div>
</div>
</div>
</div>
<style>
/* Define the fade-in animation */
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* Apply the fade-in animation to elements with the 'fade-in' class */
.fade-in {
animation: fadeIn 4s ease-in-out forwards; /* Adjust the duration (2s) to make it slower or faster */
}
/* Optional: Delay the animation for a more staggered effect */
h2 {
animation-delay: 0.5s; /* Delay for header */
}
p {
animation-delay: 1s; /* Delay for paragraphs */
}
</style>

8
templates/partials/hero/faq.html
View File

@ -94,7 +94,7 @@
:aria-expanded="expanded" :aria-expanded="expanded"
aria-controls="faqs-text-04" aria-controls="faqs-text-04"
> >
<span style="color: #000;">Can I use AIBox to generate revenue?</span> <span style="color: #000;">Can I use AI Box to generate revenue?</span>
<svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg"> <svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" /> <rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
<rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" /> <rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
@ -110,7 +110,7 @@
> >
<div class="overflow-hidden"> <div class="overflow-hidden">
<p class="pb-3 text-black text-base font-light"> <p class="pb-3 text-black text-base font-light">
Yes! AIBox supports resource-sharing options where you can rent out unused GPU power for inference, development, or training workloads. Yes! AIBox supports resource-sharing options where you can rent out unused GPU power for inference, development, or training workloads. Additionally, you can earn INCA token rewards through network participation.
</p> </p>
</div> </div>
</div> </div>
@ -158,7 +158,7 @@
:aria-expanded="expanded" :aria-expanded="expanded"
aria-controls="faqs-text-06" aria-controls="faqs-text-06"
> >
<span style="color: #000;">How does AIBox handle cooling and power efficiency?</span> <span style="color: #000;">How does AI Box handle cooling and power efficiency?</span>
<svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg"> <svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
<rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" /> <rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
<rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" /> <rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
@ -174,7 +174,7 @@
> >
<div class="overflow-hidden"> <div class="overflow-hidden">
<p class="pb-3 text-black text-base font-light"> <p class="pb-3 text-black text-base font-light">
AIBox is designed with superior thermal management and optimized power consumption, ensuring long-term efficiency and performance stability compared to DIY setups. AI Box is designed with superior thermal management and optimized power consumption, ensuring long-term efficiency and performance stability compared to DIY setups.
</p> </p>
</div> </div>
</div> </div>