Files
www_threefold_io/templates/shortcodes/vertical_timeline.html
2025-09-09 13:50:08 +03:00

40 lines
2.9 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<section>
<div class="container max-w-7xl py-10 mx-auto">
<div class="grid gap-4 mx-4 sm:grid-cols-12">
<div class="col-span-12 sm:col-span-3">
<div class="mb-6">
<h3 class="text-4xl font-semibold">How It Works</h3>
{# <span class="text-sm font-bold tracking-wider uppercase text-gray-300">Vestibulum diam nunc</span> #}
</div>
</div>
<div class="relative col-span-12 space-y-6 sm:col-span-9">
<div class="col-span-12 space-y-6 relative px-4 sm:col-span-8 before:absolute before:top-2 before:bottom-0 before:w-0.5 before:-left-3 before:bg-gray-600">
<div class="flex flex-col relative before:absolute before:top-2 before:w-4 before:h-4 before:rounded-full before:left-[-35px] before:z-[1] before:bg-gray-400">
<h3 class="text-xl font-medium">Create a Farm </h3>
<p class="text-md">Simply download the <a href="https://docs.threefold.io/docs/become-a-farmer/create_a_farm#download-the-app" target="_blank" class="text-white hover:text-gray-300 font-semibold">ThreeFold Connect App</a>, create an account and then create a farm.</p>
</div>
<div class="flex flex-col relative before:absolute before:top-2 before:w-4 before:h-4 before:rounded-full before:left-[-35px] before:z-[1] before:bg-gray-400">
<h3 class="text-xl font-medium">Create a Zero-OS bootstrap image </h3>
<p class="text-md">Download the Zero-OS bootstrap image and flash it to a USB drive using a tool like balenaEtcher.</p>
</div>
<div class="flex flex-col relative before:absolute before:top-2 before:w-4 before:h-4 before:rounded-full before:left-[-35px] before:z-[1] before:bg-gray-400">
<h3 class="text-xl font-medium">Choose Your Hardware </h3>
<p class="text-md">Plug in the USB, power on your device, and follow the setup instructions.</p>
</div>
<div class="flex flex-col relative before:absolute before:top-2 before:w-4 before:h-4 before:rounded-full before:left-[-35px] before:z-[1] before:bg-gray-400">
<h3 class="text-xl font-medium">Register Your Node </h3>
<p class="text-md">Once its running, register your node and assign it to your farm via the ThreeFold Connect App.</p>
</div>
<div class="flex flex-col relative before:absolute before:top-2 before:w-4 before:h-4 before:rounded-full before:left-[-35px] before:z-[1] before:bg-gray-400">
<h3 class="text-xl font-medium">Go Live </h3>
<p class="text-md">After its connected, start sharing your capacity. The more it's utilized, the more you earn.</p>
</div>
<div class="mt-6 lg:mt-16 flex items-left justify-left">
<a href="https://manual.grid.tf/farmers/category/build-a-3node" target="_black" class="fade-in rounded-2xl bg-white px-4 py-2 text-sm font-semibold text-black shadow-sm hover:bg-green hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2">Step-by-Step Guide</a>
</div>
</div>
</div>
</div>
</div>
</section>