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