{% if '127.0.0.1:1111' in config.base_url %}
{% set img_url = 'developer/' %}
{% else %}
{% set img_url = '' %}
{% endif %}

{% if 'www_threefold_io' in config.base_url %}
{% set url = '/www_threefold_io' %}
{% else %}
{% set url = '' %}
{% endif %}

<div class="my-5 lg:py-24 py-10 lg:mx-28 mx-4">
    <div class="w-full text-center">
        <h2 class="lg:text-6xl capitalize 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={{ url ~ "/developer/os" }}>
                <img src={{ img_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={{ url ~ "/developer/automation" }}>
                <img src={{ img_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={{ url ~ "/developer/tooling" }}>
                <img src={{ img_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={{ url ~ "/developer/qsfs" }}>
                <img src={{ img_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={{ url ~ "/developer/blockchain" }}>
                <img src={{ img_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={{ url ~ "/developer/planetarynw" }}>
                <img src={{ img_url ~ 'planetary_network.jpg' }} />
                <div class="font-bold text-xl py-5 mx-4 text-black">
                    Planetary Network
                </div>
            </a>
        </div>
    </div>
</div>