<style> .bg_earning { background-color: #F2F2F2; } .bg_fflow_twin { background-color: #EAF3F7; } .bg_CHi_green { background-color: #EBFFED; } </style> <div class="relative px-4 sm:px-6 lg:pb-28 lg:px-8 bg-white"> <div class="absolute inset-0"> <div class="bg-white h-1/3 sm:h-2/3"></div> </div> <div class="relative max-w-7xl mx-auto"> <div class="grid gap-5 max-w-lg mx-auto lg:grid-cols-3 lg:max-w-none"> <div class="flex flex-col p-6 rounded-lg shadow-lg overflow-hidden bg_earning"> <div class="flex-shrink-0"> <img class="h-full w-full object-cover" src="/images/get_earn.png" alt="" /> </div> <div class="flex-1 p-6 flex flex-col justify-between text-center"> <div class="flex-1"> <h3 class="mt-2 text-4xl leading-9 font-normal uppercase text-gray-900"> get a node and <br /><b class="font-bold">start earning</b> </h3> <div class="mt-3 leading-6 text-gray-800 text-lg max-w-sm">Get a FreeFlow Node and add capacity to the FreeFlow Network.</div> <button class="uppercase font-bold" onclick="window.location='/node'">know more</button> </div> </div> </div> <div class="flex flex-col p-6 rounded-lg shadow-lg overflow-hidden bg_fflow_twin"> <div class="flex-shrink-0"> <img class="h-full w-full object-cover" src="/images/ff_twin.png" alt="" /> </div> <div class="flex-1 p-6 flex flex-col justify-between text-center"> <div class="flex-1"> <h3 class="mt-2 text-4xl leading-9 font-normal uppercase text-gray-900"> GET THE <br /><b class="font-bold">FREEFLOW TWIN</b> </h3> <div class="mt-3 leading-6 text-gray-800 text-lg max-w-sm">Reserve your sovereign digital twin. <br>Take control over your digital life.</div> <button class="uppercase font-bold" onclick="window.location='/twin'">know more</button> </div> </div> </div> <div class="flex flex-col p-6 rounded-lg shadow-lg overflow-hidden bg_CHi_green"> <div class="flex-shrink-0"> <img class="h-full w-full object-cover" src="/images/chi.png" alt="" /> </div> <div class="flex-1 p-6 flex flex-col justify-between text-center"> <div class="flex-1"> <h3 class="mt-2 text-4xl leading-9 font-normal uppercase text-gray-900"> ACQUIRE <br /><b class="font-bold">CHI</b> </h3> <div class="mt-3 leading-6 text-gray-800 text-lg max-w-sm">The digital energy currency of <br>the FreeFlow network `CHI token`</div> <button class="uppercase font-bold" onclick="window.open('https://threefoldfoundation.github.io/books/freeflow/network/buy/buy_my_chi.html', '_blank')">know more</button> </div> </div> </div> </div> </div> </div>