made images in seperated section

This commit is contained in:
2025-03-06 12:00:14 +02:00
parent a1a8ac8993
commit 449b185dff
3 changed files with 98 additions and 49 deletions

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">
Regardless of technical expertise, anyone can deploy AIBOX (servers) from their homes or offices, and participate in a decentralized alternative to corporate-owned data centers while earning rewards for their contributions. We call this process “farming.”
</p>
</div>
<section class="pb-12 lg:pb-24 bg-transparent">
<div class="max-w-6xl mx-4 lg:mx-12 xl:mx-auto">
<div class="mx-auto max-w-2xl lg:max-w-none">
<dl class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-8 lg:max-w-none lg:grid-cols-3">
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-gray-50 ring-1 ring-black/5 py-6 shadow-md shadow-black/5">
<dt class="flex items-center gap-x-3 text-lg rounded-2xl font-semibold text-black">
1. HOST A NODE
</dt>
<dd class="mt-4 flex flex-auto flex-col">
<p class="flex-auto leading-normal font-light text-gray-800 text-md">All you need to get started is a modern computer, electricity and network. Once booted with Zero OS, a computer becomes a ThreeFold Node.</p>
<p class="mt-6">
</p>
</dd>
</div>
<section class="bg-transparent">
<div class="max-w-6xl mx-4 lg:mx-12 xl:mx-auto">
<div class="mx-auto max-w-2xl lg:max-w-none">
<dl class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-8 lg:max-w-none lg:grid-cols-3">
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-gray-50 ring-1 ring-black/5 py-6 shadow-md shadow-black/5">
<dt class="flex items-center gap-x-3 text-lg rounded-2xl font-semibold text-black">
1. HOST A NODE
</dt>
<dd class="mt-4 flex flex-auto flex-col">
<p class="flex-auto leading-normal font-light text-gray-800 text-md">All you need to get started is a modern computer, electricity and network. Once booted with Zero OS, a computer becomes a ThreeFold Node.</p>
<p class="mt-6">
</p>
</dd>
</div>
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-gray-50 ring-1 ring-black/5 py-6 shadow-md shadow-black/5">
<dt class="flex items-center gap-x-3 text-lg rounded-2xl font-semibold text-black">
2. OFFER CAPACITY
</dt>
<dd class="mt-4 flex flex-auto flex-col">
<p class="flex-auto leading-normal font-light text-gray-800 text-md">The capacity of the node gets verified and registered in the ThreeFold Blockchain, securing access to a decentralized autonomous cloud for users and communities.</p>
<p class="mt-6">
</p>
</dd>
</div>
<div class="fade-in-box flex flex-col p-8 rounded-2xl bg-gray-50 ring-1 ring-black/5 py-6 shadow-md shadow-black/5">
<dt class="flex items-center gap-x-3 text-lg rounded-2xl font-semibold text-black">
3. EARN REWARDS
</dt>
<dd class="mt-4 flex flex-auto flex-col">
<p class="flex-auto leading-normal font-light text-gray-800 text-md">After your node is set up and verified, youll be rewarded for the capacity that you provide to the ThreeFold Grid.
</p>
<p class="mt-6">
</p>
</dd>
</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">
<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, youll be rewarded for the capacity that you provide to the ThreeFold Grid.
</p>
<p class="mt-6">
</p>
</dd>
</dl>
</div>
</div>
<div class="fade-in-box my-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>
</dl>
</div>
</div>
</section>
</section>
</div>
<style>
/* Fade-in animation for the grid items */