{% if 'www_threefold_io' in config.base_url %}
{% set url = 'developer/' %}
{% elif '127.0.0.1:1111' in config.base_url %}
{% set url = 'developer/' %}
{% else %}
{% set url = '' %}
{% endif %}
<div class="my-5 lg:my-40 lg:mx-40 mx-4">
    <div class="w-full text-center">
        <h2 class="lg:text-6xl uppercase font-normal leading-tight">
            WHERE WOULD YOU LIKE TO START?
        </h2>
        <div class="max-w-4xl mb-10 py-2 text-xl mx-auto leading-tight tracking-wide">ThreeFold's open-source
            infrastructure has been built from the ground up on the Linux Kernel to create a fully decentralized
            Internet and Cloud. From a stateless operating system to new compute, storage and networking primitives, the
            next-generation Internet is here.
        </div>
    </div>
    <div class="grid sm:grid-cols-1 gap-4 lg:grid-cols-2 text-center lg:px-16">
        <div class="
        mx-auto
        my-4
        rounded
        overflow-hidden
        transition
        duration-500
        bg-gray-100
      ">
            <a href="/developer/os">
                <img src={{ url ~ 'operating_system.png' }} />
                <div class="font-bold text-xl py-5 mx-4 text-black">
                    Operating System
                </div>
            </a>
        </div>

        <div class="
        mx-auto
        my-4
        rounded
        overflow-hidden
        transition
        duration-500
        bg-gray-100
      ">
            <a href="/developer/automation">
                <img src={{ url ~ 'automation.png' }} />
                <div class="font-bold text-xl py-5 mx-4 text-black">
                    Autonomous Components
                </div>
            </a>
        </div>

        <div class="
        mx-auto
        my-4
        rounded
        overflow-hidden
        transition
        duration-500
        bg-gray-100
      ">
            <a href="/developer/tooling">
                <img src={{ url ~ 'tooling.png' }} />
                <div class="font-bold text-xl py-5 mx-4 text-black">
                    Developer tooling
                </div>
            </a>
        </div>

        <div class="
        mx-auto
        my-4
        rounded
        overflow-hidden
        transition
        duration-500
        bg-gray-100
      ">
            <a href="/developer/qsfs">
                <img src={{ url ~ 'qsfs.png' }} />
                <div class="font-bold text-xl py-5 mx-4 text-black">
                    Quantum-Safe Storage
                </div>
            </a>
        </div>

        <div class="
        mx-auto
        my-4
        rounded
        overflow-hidden
        transition
        duration-500
        bg-gray-100
      ">
            <a href="/developer/blockchain">
                <img src={{ url ~ 'blockchain.png' }} />
                <div class="font-bold text-xl py-5 mx-4 text-black">
                    ThreeFold Blockchain
                </div>
            </a>
        </div>

        <div class="
        mx-auto
        my-4
        rounded
        overflow-hidden
        transition
        duration-500
        bg-gray-100
      ">
            <a href="/developer/planetarynw">
                <img src={{ url ~ 'planetary_network.jpg' }} />
                <div class="font-bold text-xl py-5 mx-4 text-black">
                    Planetary Network
                </div>
            </a>
        </div>
    </div>
</div>