<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-col md:flex-row items-center">
      <a class="flex title-font font-medium items-center cm-gray-1 mb-4 md:mb-0" 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>

      <nav class="md:mr-auto md:ml-4 md:py-1 md:pl-4 md:border-l md:border-gray-400	flex flex-wrap items-center text-base justify-center">
        <a class="mr-5 hover:cm-gray-1" href="{{ '/' | relative_url }}">Home</a>
        <a class="mr-5 hover:cm-gray-1" href="{{ site.plugin-link }}">Plugins</a>
        <a class="mr-5 hover:cm-gray-1" href="{{ site.doc-link }}">Docs</a>
      </nav>

      {% if page.main_page %}
      <nav class="md:ml-auto flex flex-wrap items-center text-base justify-center rounded border-2 border-primary">
        <a class="ml-2 mr-2 hover:cm-gray-1" href="#maker">for <strong>maker</strong></a>
        <a class="mr-2 hover:cm-gray-1" href="#business">for <strong>business</strong></a>
        <a class="mr-2 hover:cm-gray-1" href="#edu">for <strong>edu</strong></a>
      </nav>
      {% endif %}
      <a href="{{site.demo-link}}" 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">
        Open demo
      </a>
    </div>
</header>