226 lines
14 KiB
HTML
226 lines
14 KiB
HTML
{%- set section = get_page(path="header/index.md") %}
|
|
{% set header_items = section.content | safe | split(pat="<li>") %}
|
|
|
|
<header id="header-container">
|
|
<div class="z-20 fixed top-0 left-0 right-0 bg-white l lg:absolute w-full">
|
|
<div class="relative z-50">
|
|
<div class="mx-auto container flex z-50 justify-between items-center px-6 sm:px-4 md:px-6 py-4 lg:px-5 lg:justify-start space-x-10 sm:space-x-4 ">
|
|
<div>
|
|
<a href="{{get_url(path='/')}}" class="flex">
|
|
<img class="w-36 h-auto" style="max-width: none;" src="{{ get_url(path=section.extra.logoPath)}}" alt="ThreeFold Logo" />
|
|
</a>
|
|
</div>
|
|
<div class="-mr-2 -my-2 lg:hidden">
|
|
<button id="hamburger-btn" type="button" class="bg-black1 inline-flex items-center justify-center p-2 border-gray-100 rounded-md text-gray-400 focus:outline-none focus:text-gray-500 transition duration-200 ease-in-out">
|
|
<!-- Heroicon name: menu -->
|
|
<svg class="h-6 w-6 text-gray-100" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
|
</svg>
|
|
</button>
|
|
<button id="close-hamburger-btn" type="button" class="bg-black1 hidden lg:hidden items-center justify-center p-2 border-gray-100 rounded-md text-gray-400 focus:outline-none focus:text-gray-500 transition duration-250 ease-in-out">
|
|
<!-- Heroicon name: x -->
|
|
<svg class="h-6 w-6 text-gray-100" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="hidden lg:flex-1 lg:flex lg:items-center lg:justify-between lg:space-x-6">
|
|
<nav class="flex space-x-10">
|
|
{% for header_item in header_items %}
|
|
{% if not loop.first %}
|
|
{% set header_arr = header_item | split(pat="</li>") %}
|
|
{% set header_label = header_arr[0] %}
|
|
{% if '<a' in header_label %}
|
|
{% set link_label = header_label | striptags %}
|
|
{% set link_path = header_label | split(pat="%22") | safe%}
|
|
{% set current = get_url(path=link_path[1]) ~ "/" %}
|
|
{% if header_label is containing("http") %}
|
|
{% if header_label is not containing("threefold") %}
|
|
<a href="{{link_path[1]}}" target="_blank" class="text-lg font-normal py-3 leading-6 text-pretty tracking-normal text-black focus:outline-none focus:text-gray-700 transition ease-in-out duration-150">
|
|
{{link_label}}
|
|
</a>
|
|
{% endif %}
|
|
{% elif current_url and current == current_url %}
|
|
<a href="{{ get_url(path=link_path[1])}}" class="text-lg py-3 leading-6 font-light active text-pretty tracking-wide transition ease-in-out duration-150">
|
|
{{link_label}}
|
|
</a>
|
|
{% else %}
|
|
<a href="{{ get_url(path=link_path[1])}}" class="text-lg py-3 leading-6 font-normal text-black focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
|
|
{{link_label}}
|
|
</a>
|
|
{% endif %}
|
|
{% else %}
|
|
<div class="relative">
|
|
{% set button_id = header_label ~ "-menu-btn" | slugify %}
|
|
<button type="button" id="{{button_id}}" class="bg-black1 nav_btn py-3 text-white group inline-flex items-center space-x-2 text-lg leading-6 font-normal focus:outline-none transition ease-in-out duration-150">
|
|
<span>{{ header_label }}</span>
|
|
<div class="-rotate-90 transition-transform transform origin-center duration-200 ease-out"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#ffffff"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></div>
|
|
</button>
|
|
</div>
|
|
|
|
{% endif %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
</nav>
|
|
|
|
<div class="hidden md:inline-block md:order-last">
|
|
<div class="inline-flex">
|
|
{# <ul class="list-none inline-flex mt-5 mr-4 mx-auto">
|
|
<li class="ml-4">
|
|
<a href="https://t.me/threefoldnews" target="_blank" class="text-black">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="18"
|
|
height="18"
|
|
fill="currentColor"
|
|
class="bi bi-telegram"
|
|
viewBox="0 0 16 16"
|
|
>
|
|
<path
|
|
d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.287 5.906c-.778.324-2.334.994-4.666 2.01-.378.15-.577.298-.595.442-.03.243.275.339.69.47l.175.055c.408.133.958.288 1.243.294.26.006.549-.1.868-.32 2.179-1.471 3.304-2.214 3.374-2.23.05-.012.12-.026.166.016.047.041.042.12.037.141-.03.129-1.227 1.241-1.846 1.817-.193.18-.33.307-.358.336a8.154 8.154 0 0 1-.188.186c-.38.366-.664.64.015 1.088.327.216.589.393.85.571.284.194.568.387.936.629.093.06.183.125.27.187.331.236.63.448.997.414.214-.02.435-.22.547-.82.265-1.417.786-4.486.906-5.751a1.426 1.426 0 0 0-.013-.315.337.337 0 0 0-.114-.217.526.526 0 0 0-.31-.093c-.3.005-.763.166-2.984 1.09z"
|
|
/>
|
|
</svg>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="ml-4">
|
|
<a
|
|
href="javascript:;"
|
|
onclick="ml_account('webforms', '3562741', 'n7q9l7', 'show')"
|
|
class="text-black"
|
|
>
|
|
<svg
|
|
aria-hidden="true"
|
|
focusable="false"
|
|
data-prefix="far"
|
|
data-icon="envelope"
|
|
class="h-5 w-5"
|
|
role="img"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 512 512"
|
|
>
|
|
<path
|
|
fill="currentColor"
|
|
d="M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm0 48v40.805c-22.422 18.259-58.168 46.651-134.587 106.49-16.841 13.247-50.201 45.072-73.413 44.701-23.208.375-56.579-31.459-73.413-44.701C106.18 199.465 70.425 171.067 48 152.805V112h416zM48 400V214.398c22.914 18.251 55.409 43.862 104.938 82.646 21.857 17.205 60.134 55.186 103.062 54.955 42.717.231 80.509-37.199 103.053-54.947 49.528-38.783 82.032-64.401 104.947-82.653V400H48z"
|
|
></path>
|
|
</svg>
|
|
</a>
|
|
</li>
|
|
</ul> #}
|
|
<a href="mailto:info@threefold.io" target="_blank" onclick="window.open(this.href, '_blank'); return false;" class="blinking-effect dashboard rounded-2xl bg-black px-4 p-2 text-sm font-semibold text-white shadow-sm hover:text-gray-800 hover:bg-gray-900">Pre-Order Now</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% for header_item in header_items %}
|
|
{% if not loop.first %}
|
|
{% set header_arr = header_item | split(pat="</li>") %}
|
|
{% set header_label = header_arr[0] %}
|
|
{% set header_menu = header_arr[1] %}
|
|
{% set menu_id = header_label ~ "-menu" | slugify %}
|
|
|
|
<nav>
|
|
<div id="{{menu_id}}" class="nav_menu mt-0 sm:mt-0 md:mt-0 lg:mt-0 xl:mt-0 2xl:mt-0 z-50 absolute inset-x-0 transform shadow-lg lg:backdrop-blur xl:backdrop-blur transition duration-200 ease-in opacity-0 -translate-y-1 hidden">
|
|
<div style="background-color: rgba(34 34 34);">
|
|
<div id="menu" class="conatiner mx-auto">
|
|
{{header_menu | safe }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
|
|
{% endif %}
|
|
{% endfor %}
|
|
|
|
|
|
<!--
|
|
Mobile menu, show/hide based on mobile menu state.
|
|
|
|
Entering: "duration-200 ease-out"
|
|
From: "opacity-0 scale-95"
|
|
To: "opacity-100 scale-100"
|
|
Leaving: "duration-100 ease-in"
|
|
From: "opacity-100 scale-100"
|
|
To: "opacity-0 scale-95"
|
|
-->
|
|
<div id="hamburger" class="hidden fixed mt-14 z-20 top-0 inset-x-0 transition transform origin-top-right lg:hidden">
|
|
<div>
|
|
<div style="background-color: rgba(34 34 34);" class="shadow-xs h-screen divide-y-2 divide-gray-50">
|
|
<div class="pb-6 sm:px-12 md:px-16 mt-0 lg:px-20 space-y-6 sm:space-y-8 sm:pb-8 max-h-screen overflow-y-auto">
|
|
|
|
<nav class="flex flex-col justify-around pb-12">
|
|
{% for header_item in header_items %}
|
|
|
|
{% if not loop.first %}
|
|
{% set header_arr = header_item | split(pat="</li>") %}
|
|
{% set header_label = header_arr[0] %}
|
|
{% if '<a' in header_label %}
|
|
{% set link_label = header_label | striptags %}
|
|
{% set link_path = header_label | split(pat="%22") | safe%}
|
|
{% if header_label is containing("http") %}
|
|
{% if header_label is not containing("threefold") %}
|
|
<a href="{{link_path[1]}}" target="_blank" class="text-lg px-8 py-3 leading-6 font-normal text-gray-50 hover:text-gray-200 focus:outline-none focus:text-gray-50 transition ease-in-out duration-150">
|
|
{{link_label}}
|
|
</a>
|
|
{% endif %}
|
|
{% else %}
|
|
<a href="{{ get_url(path=link_path[1])}}" class="text-lg px-8 py-3 leading-6 font-normal text-black hover:text-gray-900 focus:outline-none focus:text-gray-100 transition ease-in-out duration-150">
|
|
{{link_label}}
|
|
</a>
|
|
{% endif %}
|
|
{% else %}
|
|
{% set button_id = header_label ~ "-mobile-menu-btn" | slugify %}
|
|
<button style="background-color: transparent; border:none" type="button" id="{{button_id}}" class=" px-8 py-3 items-start text-left text-white group inline-flex space-x-2 text-lg leading-6 font-normal hover:text-gray-200 focus:outline-none focus:text-white transition ease-in-out duration-150">
|
|
{{ header_label }}
|
|
<div class="-rotate-90 transition-transform transform origin-center duration-200 ease-out"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#ffffff"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></div>
|
|
</button>
|
|
{% set menu_id = header_label ~ "-mobile-menu" | slugify %}
|
|
<div id="{{menu_id}}" class="z-50 leading-3 pt-6 pb-4 inset-x-0 text-sm transform duration-200 ease-in opacity-0 -translate-y-1 hidden">
|
|
{{ header_arr[1] | safe }}
|
|
</div>
|
|
|
|
{% endif %}
|
|
<hr/>
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% set section = get_section(path="footer/_index.md")%}
|
|
{%- set logoPath = section.extra.logoPath %}
|
|
{# <div class="mx-8 mt-8">
|
|
<div class="space-y-8 lg:max-w-sm xl:max-w-sm lg:mr-8 lg:mb-8 xl:col-span-1">
|
|
<img class="w-32 h-auto" src="{{get_url(path=logoPath)}}" alt="Company name" />
|
|
<p class="text-gray-500 text-base leading-6 ">
|
|
{{section.description}}
|
|
</p>
|
|
{% include "partials/socialLinks.html" %}
|
|
</div> #}
|
|
|
|
<div class="rounded-full border-2 my-4 border-gray-400 py-2 mx-4">
|
|
<a href="/signup" target="_blank" class="mt-2 rounded-md px-4 py-2.5 text-lg font-semibold text-white shadow-sm hover:text-gray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Participate in Web4</a>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</header>
|
|
|
|
<style>
|
|
|
|
nav a:hover{
|
|
color: #c7c7c7 !important;
|
|
}
|
|
|
|
.active{
|
|
color: #c7c7c7 !important;
|
|
}
|
|
.nav_btn:hover {
|
|
color: #c7c7c7 !important;
|
|
}
|
|
|
|
</style> |