<div class="bg-transparent py-24 sm:py-32">
    <div class="mx-auto max-w-7xl grid grid-cols-1 gap-x-16 gap-y-16 sm:gap-y-20 lg:grid-cols-2 lg:items-start px-6">
        <div class="mx-auto w-full max-w-3xl lg:mx-0">
            <h2 class="fade-in text-balance lg:text-5xl text-4xl leading-tight font-normal tracking-tight text-black">Unlock the Web4 Revolution with ThreeFold</h2>
            <p class="mx-auto mt-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">From secure phones and AI-driven virtual assistants to encrypted routers and decentralized nodes, explore a suite of innovative Web4 products designed to redefine connectivity, empower autonomy, and simplify daily life with cutting-edge technology.</p>
            <div class="mt-8 flex gap-x-6">
            </div>
        </div>
        <div class="mx-auto grid w-full max-w-xl grid-cols-2 gap-2 items-center gap-y-12 sm:gap-y-14 lg:mx-0 lg:max-w-none lg:pl-8">
            <div class="grid-item bg-white/5 p-2 lg:p-12">
                <div class="p-10">
                    <p class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-black">Web4 Phone</p>
                    <p class="mt-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">The world’s first truly decentralized smartphone on a mission to define Web4 mobile connectivity.</p>
                    <a href="#" class="mt-6 text-sm/6 font-semibold text-black">Learn more <span aria-hidden="true">→</span></a>
                </div>
            </div>
            <div class="grid-item bg-white/5 p-2 lg:p-12">
                <div class="p-10">
                    <p class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-black">Web4 Router</p>
                    <p class="mt-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">Be your own Internet and unlock the full potential of Web4 from the convenience of your home.</p>
                    <a href="#" class="mt-6 text-sm/6 font-semibold text-black">Learn more <span aria-hidden="true">→</span></a>
                </div>                
            </div>
            <div class="grid-item bg-white/5 p-2 lg:p-12 lg:pt-4">
                <div class="p-10">
                    <p class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-black">Web4 Nodes</p>
                    <p class="mt-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">Power the Internet by hosting your own Web4 Node—contributing to a secure, scalable, and autonomous Web4 ecosystem.</p>
                    <a href="#" class="mt-6 text-sm/6 font-semibold text-black">Learn more <span aria-hidden="true">→</span></a>
                </div>                
            </div>
            <div class="grid-item bg-white/5 p-2 lg:p-12 lg:pt-4">
                <div class="p-10">
                    <p class="mt-2 lg:text-xl text-lg font-medium tracking-tight text-black">TF Genie</p>
                    <p class="mt-2 max-w-lg text-sm/6 text-gray-400 font-light leading-tight">Your AI-powered Web4 assistant, designed to enhance productivity and simplify daily tasks with seamless integration.</p>
                    <a href="#" class="mt-6 text-sm/6 font-semibold text-black">Learn more <span aria-hidden="true">→</span></a>
                </div>                
            </div>
        </div>
    </div>
</div>
