<header class="cm-gray-2 body-font sticky top-0 z-50 bg-gradient-to-r from-white to-secondary">
    <div class="container mx-auto flex flex-wrap p-5 flex-row items-center">
        <a class="flex title-font font-medium items-center cm-gray-1 mb-0 mr-2" href="{{ '/' | relative_url }}">
            <img src="{{ '/assets/logo.png' | relative_url }}" alt="logo" height="32" width="32" class="h-8">
            <span class="ml-3 text-xl">{{ site.title }}</span>
        </a>

        <div class="flex-grow xs:flex-none"></div>

        <nav class="md:mr-auto md:py-1 xs:ml-4 xs:pl-4 xs:border-l xs:border-gray-400	flex flex-wrap items-center text-base justify-center">
            <a class="mr-5 hover:cm-gray-1" href="{% include fnc/link.html item=site.deploy-link %}">Deploy</a>
            <a class="mr-5 hover:cm-gray-1" href="{% include fnc/link.html item=site.doc-link %}">Docs</a>
            <a class="mr-5 hover:cm-gray-1" href="{% include fnc/link.html item=site.blog-link %}">Blog</a>
        </nav>

        {% if page.main_page %}
        <a href="demo" class="inline-flex items-center bg-gray-100 ml-2 border-0 py-1 px-3 focus:outline-none hover:bg-gray-200 rounded text-base mt-4 md:mt-0">
            <span class='fa-solid fa-rocket'></span>&nbsp;
            Open demo
        </a>
        {% endif %}
    </div>
</header>