<div class="bg-transparent pt-12 pb-6">
  <div class="mx-auto max-w-7xl px-6 lg:max-w-7xl lg:px-8">
    <div class="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
      <h2 class="mx-auto fade-in text-left lg:text-5xl text-4xl leading-snug font-normal tracking-tight text-white capitalize">How it works</h2>
      <p class="text-left my-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">
        Regardless of technical expertise, anyone can deploy nodes (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-32 bg-transparent">
  <div class="max-w-6xl mx-4 md:mx-10 lg:mx-20 xl:mx-auto">
    <div class="mx-auto max-w-2xl sm:mt-20 lg:mt-24 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-white/5">
          <dt class="flex items-center gap-x-3 text-lg rounded-2xl font-semibold text-white">
            1. HOST A NODE
          </dt>
          <dd class="mt-4 flex flex-auto flex-col">
            <p class="flex-auto leading-normal font-light text-gray-200 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-white/5">
          <dt class="flex items-center gap-x-3 text-lg rounded-2xl font-semibold text-white">
            2. OFFER CAPACITY
          </dt>
          <dd class="mt-4 flex flex-auto flex-col">
            <p class="flex-auto leading-normal font-light text-gray-200 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-white/5">
          <dt class="flex items-center gap-x-3 text-lg rounded-2xl font-semibold text-white">
            3. EARN REWARDS
          </dt>
          <dd class="mt-4 flex flex-auto flex-col">
            <p class="flex-auto leading-normal font-light text-gray-200 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 class="mt-12 flex items-center justify-center gap-x-6">
        <a href="https://docs.threefold.io/docs/category/become-a-farmer" target="_blank" class="fade-in rounded-2xl bg-white px-4 py-2.5 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 mt-8">Become a Farmer</a>
      </div>
    </div>
      </dl>
    </div>
  </div>
</section>

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