ourworld_web/www_aibox
20
0
Fork 0
Code Pull Requests Activity

made images in seperated section

Browse Source
This commit is contained in:
Ehab Hassan 2025-03-06 12:00:14 +02:00
parent a1a8ac8993
commit 449b185dff
3 changed files with 98 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
templates/layouts/farmer.html
View File

@ -3,6 +3,7 @@
{% include "partials/farmer/hero_section.html" %} {% include "partials/farmer/hero_section.html" %}
{% include "partials/farmer/farmers.html" %} {% include "partials/farmer/farmers.html" %}
{% include "partials/farmer/show_images.html" %}
{% include "partials/farmer/about1.html" %} {% include "partials/farmer/about1.html" %}
{% include "partials/farmer/cta.html" %} {% include "partials/farmer/cta.html" %}

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

@ -5,58 +5,51 @@
<p class="text-left my-6 max-w-3xl 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">
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.” Regardless of technical expertise, anyone can deploy AIBOX (servers) from their homes or offices, and participate in a decentralized alternative to corporate-owned data centers – while earning rewards for their contributions. We call this process “farming.”
</p> </p>
</div> </div>
<section class="pb-12 lg:pb-24 bg-transparent"> <section class="bg-transparent">
<div class="max-w-6xl mx-4 lg:mx-12 xl:mx-auto"> <div class="max-w-6xl mx-4 lg:mx-12 xl:mx-auto">
<div class="mx-auto max-w-2xl lg:max-w-none"> <div class="mx-auto max-w-2xl lg:max-w-none">
<dl class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-8 lg:max-w-none lg:grid-cols-3"> <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 NODE 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 a ThreeFold Node.</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>
</div>
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-gray-50 ring-1 ring-black/5 py-6 shadow-md shadow-black/5">
<dt class="flex items-center gap-x-3 text-lg rounded-2xl font-semibold text-black">
2. OFFER CAPACITY
</dt>
<dd class="mt-4 flex flex-auto flex-col">
<p class="flex-auto leading-normal font-light text-gray-800 text-md">The capacity of the node gets verified and registered in the ThreeFold Blockchain, securing access to a decentralized autonomous cloud for users and communities.</p>
<p class="mt-6">
</p>
</dd>
</div>
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-gray-50 ring-1 ring-black/5 py-6 shadow-md shadow-black/5">
<dt class="flex items-center gap-x-3 text-lg rounded-2xl font-semibold text-black">
3. EARN REWARDS
</dt>
<dd class="mt-4 flex flex-auto flex-col">
<p class="flex-auto leading-normal font-light text-gray-800 text-md">After your node is set up and verified, you’ll be rewarded for the capacity that you provide to the ThreeFold Grid.
</p>
<p class="mt-6">
</p>
</dd>
</div>
</div>
</div> </div>
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-gray-50 ring-1 ring-black/5 py-6 shadow-md shadow-black/5"> </dl>
<dt class="flex items-center gap-x-3 text-lg rounded-2xl font-semibold text-black">
2. OFFER CAPACITY
</dt>
<dd class="mt-4 flex flex-auto flex-col">
<p class="flex-auto leading-normal font-light text-gray-800 text-md">The capacity of the node gets verified and registered in the ThreeFold Blockchain, securing access to a decentralized autonomous cloud for users and communities.</p>
<p class="mt-6">
</p>
</dd>
</div>
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-gray-50 ring-1 ring-black/5 py-6 shadow-md shadow-black/5">
<dt class="flex items-center gap-x-3 text-lg rounded-2xl font-semibold text-black">
3. EARN REWARDS
</dt>
<dd class="mt-4 flex flex-auto flex-col">
<p class="flex-auto leading-normal font-light text-gray-800 text-md">After your node is set up and verified, you’ll be rewarded for the capacity that you provide to the ThreeFold Grid.
</p>
<p class="mt-6">
</p>
</dd>
</div> </div>
</div> </div>
</section>
<div class="fade-in-box my-16 mx-auto text-center lg:flex lg:justify-center"> </div>
<img class="h-auto object-cover" src="/images/aibox_farming1.png" alt="AIBox Specifications">
</div>
<div class="fade-in-box mt-16 mx-auto text-center lg:flex lg:justify-center">
<img class="h-auto object-cover" src="/images/aibox_farming2.png" alt="AIBox Specifications">
</div>
</div>
</dl>
</div>
</div>
</section>
<style> <style>
/* Fade-in animation for the grid items */ /* Fade-in animation for the grid items */

55
templates/partials/farmer/show_images.html Normal file
View File

@ -0,0 +1,55 @@
<div class="relative isolate overflow-hidden bg-transparent">
<div class="px-6 pt-12 pb-12">
<div class="mx-auto max-w-7xl text-center">
{# <h2 class="text-balance font-normal tracking-tight text-black lg:text-6xl text-4xl fade-in">Powered by ThreeFold</h2> #}
{# <p class="mx-auto mt-12 text-pretty lg:text-xl text-lg font-light text-gray-900 fade-in"><span class="font-semibold">AIBOX</span> is a project by ThreeFold, a team with over 10 years of experience
building decentralized internet infrastructure.
</p> #}
<div class="fade-in-box mb-16 mx-auto text-center lg:flex lg:justify-center">
<img class="h-auto object-cover" src="/images/aibox_farming1.png" alt="AIBox Specifications">
</div>
<div class="fade-in-box mt-16 mx-auto text-center lg:flex lg:justify-center">
<img class="h-auto object-cover" src="/images/aibox_farming2.png" alt="AIBox Specifications">
</div>
{# <div class="mt-10 flex items-center gap-x-6 flex-wrap justify-center">
<a href="https://threefold.io/" target="_blank" class="fade-in rounded-2xl bg-black px-4 py-2.5 text-sm lg:text-md font-semibold text-white shadow-sm hover:bg-gray-200 hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 mb-4 lg:mb-0">
Visit ThreeFold
</a>
<a href="https://dashboard.grid.tf/" target="_blank" class="text-sm/6 font-semibold text-gray-900">Explore Grid Capacity <span aria-hidden="true">→</span></a>
</div> #}
</div>
</div>
</div>
<style>
/* Define the fade-in animation */
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.fade-in-box {
opacity: 0;
animation: fadeIn 0.6s ease-in-out forwards;
margin-top: 2.5rem;
}
/* Apply the fade-in animation to elements with the 'fade-in' class */
.fade-in {
animation: fadeIn 4s ease-in-out forwards; /* Adjust the duration (2s) to make it slower or faster */
}
/* Optional: Delay the animation for a more staggered effect */
h2 {
animation-delay: 0.5s; /* Delay for header */
}
p {
animation-delay: 1s; /* Delay for paragraphs */
}
</style>