update nav

templates/partials/header.html

@@ -1,8 +1,8 @@
 {%- set section = get_page(path="header/index.md") %}
 {% set header_items = section.content | safe | split(pat="<li>") %}
 
-<header id="header-container bg-white">
+<header id="header-container">
-    <div class="z-20 fixed top-0 left-0 right-0 bg-white lg:absolute w-full">
+    <div class="z-20 fixed top-0 left-0 right-0  lg:absolute w-full">
         <div class="relative z-50">
         <div class="bg-white 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>
@@ -11,13 +11,13 @@
                 </a>
             </div>
             <div class="-mr-2 -my-2 lg:hidden">
-                <button id="hamburger-btn" type="button" class="bg-white 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">
+                <button id="hamburger-btn" type="button" class="bg-white inline-flex items-center justify-center p-2 border border-gray-900 rounded-md 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">
+                    <svg class="h-6 w-6 text-gray-900" 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-white 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">
+            <button id="close-hamburger-btn" type="button" class="bg-white  hidden lg:hidden items-center justify-center p-2 border border-gray-900 rounded-md 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" />
@@ -126,7 +126,7 @@
 
 <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 style="background-color: rgb(235, 235, 235);">
             <div id="menu" class="conatiner mx-auto">
                 {{header_menu | safe }}
             </div>
@@ -151,7 +151,7 @@
         -->
     <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 style="background-color: rgb(255, 255, 255);" 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">
@@ -165,7 +165,7 @@
                                 {% 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">
+                                    <a href="{{link_path[1]}}" target="_blank" class="text-lg px-8 py-3 leading-6 font-normal text-black hover:text-gray-600 focus:outline-none focus:text-gray-50 transition ease-in-out duration-150">
                                         {{link_label}}
                                     </a>
                                     {% endif %}
@@ -199,9 +199,12 @@
                           </p>
                           {% include "partials/socialLinks.html" %}
                       </div> #}
-
+                      <a href="https://manual.threefold.io/documentation/system_administrators/mycelium/mycelium_app.html" 
+                      class="text-lg px-8 py-3 leading-6 font-normal text-black hover:text-gray-600 focus:outline-none focus:text-gray-50 transition ease-in-out duration-150" target="_blank">
+                      Docs
+                      </a>
                       <div class="rounded-full border-2 my-4 border-gray-400 py-2 mx-4">
-                        <a href="/action" target="_blank" class="mt-2 rounded-md px-4 py-2.5 text-lg font-semibold text-black shadow-sm hover:text-gray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Join the Web4 Revolution</a>
+                        <a href="/action" target="_blank" class="mt-2 rounded-md px-4 py-2.5 text-lg font-semibold text-black shadow-sm hover:text-gray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">Get Mycelium</a>
                       </div>
                     </nav>                    
                 </div>

templates/partials/hero/myhero.html

@@ -1,4 +1,4 @@
-<div class="relative fade-in lg:py-24 h-screen">
+<div class="relative fade-in pt-20 mt-4 lg:mt-24  lg:pt-24 h-screen">
   <div class="mx-auto max-w-7xl lg:grid lg:grid-cols-12 lg:gap-x-8 lg:px-8">
     <div class="px-6 lg:col-span-7 lg:px-0 xl:col-span-6">
       <div class="mx-auto max-w-2xl lg:mx-0 lg:flex-auto">