From 7743b78b7104d8b09ce47af2d9599df0a374660d Mon Sep 17 00:00:00 2001
From: Dimitrie Stefanescu <didimitrie@gmail.com>
Date: Wed, 14 Jul 2021 14:38:05 +0100
Subject: [PATCH] feat: top menu & mobile menu revamp

---
 partials/menus/resourcesMenu.hbs |   4 +-
 partials/navbar.hbs              | 370 ++++++++++++++++---------------
 tutorials.hbs                    |   2 +-
 3 files changed, 190 insertions(+), 186 deletions(-)

diff --git a/partials/menus/resourcesMenu.hbs b/partials/menus/resourcesMenu.hbs
index c0087a9..b1ccaa0 100644
--- a/partials/menus/resourcesMenu.hbs
+++ b/partials/menus/resourcesMenu.hbs
@@ -44,9 +44,7 @@
               </span>Docs
             </p>
             <p class="mt-1 text-sm font-normal  text-gray-900 dark:text-gray-50">
-              Documentation and step-by-step guides on how
-              to
-              get the best of Speckle.
+              In depth documentation on Speckle.
             </p>
           </div>
           <p class="mt-2 text-sm font-medium text-blue-600 lg:mt-4">Check
diff --git a/partials/navbar.hbs b/partials/navbar.hbs
index 7fa903f..859b5af 100644
--- a/partials/navbar.hbs
+++ b/partials/navbar.hbs
@@ -2,7 +2,8 @@
 <div class="mt-0 w-full h-20"></div>
 
 {{!-- Actual navbar --}}
-<div x-data="{ mobileMenuOpen: false, usecasesMenu: false, developersMenu: false, resourcesMenu: false, flyoutMenuOpen: false }"
+<div
+  x-data="{ mobileMenuOpen: false, usecasesMenu: false, developersMenu: false, resourcesMenu: false, flyoutMenuOpen: false }"
   class="fixed top-0 shadow mt-0 w-full bg-white dark:bg-gray-900 dark:text-white z-50">
   <div class="relative">
     <div class="w-default flex justify-between items-center py-5 sm:py-4 md:justify-between">
@@ -23,12 +24,9 @@
       <div class="-mr-2 -my-2 lg:hidden">
         <button @click="mobileMenuOpen = true" type="button"
           class="bg-white dark:bg-gray-900 rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500">
-          <svg class="h-6 w-6" x-description="Heroicon name: menu"
-            xmlns="http://www.w3.org/2000/svg" fill="none"
-            viewBox="0 0 24 24" stroke="currentColor"
-            aria-hidden="true">
-            <path stroke-linecap="round" stroke-linejoin="round"
-              stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
+          <svg class="h-6 w-6" x-description="Heroicon name: menu" xmlns="http://www.w3.org/2000/svg" fill="none"
+            viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
           </svg>
         </button>
       </div>
@@ -36,102 +34,144 @@
       {{!-- Main Menu --}}
 
       <div class="hidden lg:flex-1 lg:flex lg:items-center lg:justify-between">
-        <nav class="flex space-x-4">
+        <nav class="flex space-x-2">
 
           {{!-- use cases menu button --}}
 
           <div class="relative">
-            <button type="button" @mouseenter="usecasesMenu = true; resourcesMenu = false; developersMenu = false; flyoutMenuOpen = false;"
-              @click="usecasesMenu = !usecasesMenu;"
-              x-state:on="Item active" x-state:off="Item inactive"
-              :class="{ 'text-gray-900 dark:text-gray-50': usecasesMenu, 'text-gray-700 dark:text-gray-400': !usecasesMenu }"
-              class="group bg-white dark:bg-gray-900 rounded-md text-gray-700 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 inline-flex items-center text-base font-medium focus:outline-none outline-none">
-              <span>Features</span>
-              <svg x-state:on="Item active" x-state:off="Item inactive"
-                class="ml-2 h-5 w-5 text-gray-400 group-hover:text-gray-500"
-                x-bind:class="{ 'text-gray-600': usecasesMenu, 'text-gray-400': !usecasesMenu }"
-                x-description="Heroicon name: chevron-down"
-                xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
-                fill="currentColor" aria-hidden="true">
-                <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                  clip-rule="evenodd"></path>
+            <a href="/features/connectors"
+              class="transition hover:bg-blue-100 dark:hover:bg-gray-800 rounded-md px-2 text-gray-700 dark:text-gray-400 hover:text-blue-500 inline-flex items-center text-base font-medium">
+              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24"
+                stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                  d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4" />
               </svg>
-            </button>
+              <span>Connectors</span>
+            </a>
           </div>
 
-          {{!-- developers menu button --}}
-
           <div class="relative">
-            <button type="button" @mouseenter="developersMenu = true; usecasesMenu = false; resourcesMenu = false; flyoutMenuOpen = false;"
-              @click="developersMenu = !developersMenu;"
-              x-state:on="Item active" x-state:off="Item inactive"
-              :class="{ 'text-gray-900 dark:text-gray-50': developersMenu, 'text-gray-700 dark:text-gray-400': !developersMenu }"
-              class="group bg-white dark:bg-gray-900 rounded-md text-gray-700 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 inline-flex items-center text-base font-medium focus:outline-none outline-none">
-              <span>Developers</span>
-              <svg x-state:on="Item active" x-state:off="Item inactive"
-                class="ml-2 h-5 w-5 text-gray-400 group-hover:text-gray-500"
-                x-bind:class="{ 'text-gray-600': developersMenu, 'text-gray-400': !developersMenu }"
-                x-description="Heroicon name: chevron-down"
-                xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
-                fill="currentColor" aria-hidden="true">
-                <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                  clip-rule="evenodd"></path>
+            <a href="/tutorials" @mouseenter="resourcesMenu = false; flyoutMenuOpen = false;"
+              class="transition hover:bg-blue-100 dark:hover:bg-gray-800 rounded-md px-2 text-gray-700 dark:text-gray-400 hover:text-blue-500 inline-flex items-center text-base font-medium">
+              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24"
+                stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                  d="M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a2 2 0 110-4h1a1 1 0 001-1V7a1 1 0 011-1h3a1 1 0 001-1V4z" />
               </svg>
-            </button>
+              <span>Tutorials</span>
+            </a>
           </div>
 
-          {{!-- Learn menu button --}}
+          <div class="relative" @mouseenter="resourcesMenu = false; flyoutMenuOpen = false;">
+            <a href="/developers"
+              class="transition hover:bg-blue-100 dark:hover:bg-gray-800 rounded-md px-2 text-gray-700 dark:text-gray-400 hover:text-blue-500 inline-flex items-center text-base font-medium">
+              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24"
+                stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
+              </svg>
+              <span>Devs</span>
+            </a>
+          </div>
 
-          <div class="relative">
-            <button type="button" @mouseenter="resourcesMenu = true; usecasesMenu = false; developersMenu = false; flyoutMenuOpen = false;"
-              @click="resourcesMenu = !resourcesMenu;" x-state:on="Item active"
-              x-state:off="Item inactive" :class="{ 'text-gray-900 dark:text-gray-50': resourcesMenu, 'text-gray-700 dark:text-gray-400': !resourcesMenu }"
-              class="group bg-white dark:bg-gray-900 rounded-md text-gray-700 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 inline-flex items-center text-base font-medium focus:outline-none outline-none">
+
+          {{!-- Resources menu button --}}
+
+          <div class="relative ml-1">
+            <button type="button" @mouseenter="resourcesMenu = true; flyoutMenuOpen = false;"
+              @click="resourcesMenu = !resourcesMenu;" x-state:on="Item active" x-state:off="Item inactive"
+              :class="{ 'text-gray-900 dark:text-gray-50': resourcesMenu, 'text-gray-700 dark:text-gray-400': !resourcesMenu }"
+              class="transition hover:bg-blue-100 dark:hover:bg-gray-800 rounded-md px-2 text-gray-700 dark:text-gray-400 hover:text-blue-500 inline-flex items-center text-base font-medium">
+              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24"
+                stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                  d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
+              </svg>
               <span>Resources</span>
-              <svg x-state:on="Item active" x-state:off="Item inactive"
-                class="ml-2 h-5 w-5 text-gray-400 group-hover:text-gray-500"
-                x-bind:class="{ 'text-gray-600': resourcesMenu, 'text-gray-400': !resourcesMenu }"
-                x-description="Heroicon name: chevron-down"
-                xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
-                fill="currentColor" aria-hidden="true">
-                <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                  clip-rule="evenodd"></path>
-              </svg>
             </button>
+
+            <div x-description="'resources' flyout menu, show/hide based on flyout menu state." x-show="resourcesMenu"
+              @mouseleave="resourcesMenu = false;" x-transition:enter="transition ease-out duration-200"
+              x-transition:enter-start="opacity-0 -translate-y-1" x-transition:enter-end="opacity-100 translate-y-0"
+              x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 translate-y-0"
+              x-transition:leave-end="opacity-0 -translate-y-1"
+              class="absolute z-10 left-1/2 transform -translate-x-1/2 mt-3 px-2 w-screen max-w-xs sm:px-0">
+
+              <div class="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden">
+                <div class="relative grid gap-6 bg-white dark:bg-gray-900 px-5 py-6 sm:gap-8 sm:p-8">
+
+                  <a href="/blog"
+                    class="-m-3 p-3 block rounded-md hover:bg-gray-50 dark:hover:bg-gray-800 transition ease-in-out duration-150">
+                    <p class="text-base font-medium text-gray-900 dark:text-gray-100">
+                      Blog
+                    </p>
+                    <p class="mt-1 text-sm text-gray-500">
+                      Announcements and other musings from the Speckle team.
+                    </p>
+                  </a>
+
+                  <a href="https://speckle.guide" target="_blank"
+                    class="-m-3 p-3 block rounded-md hover:bg-gray-50 dark:hover:bg-gray-800 transition ease-in-out duration-150">
+                    <p class="text-base font-medium text-gray-900 dark:text-gray-100 flex items-center">
+                      Docs
+                      <svg xmlns="http://www.w3.org/2000/svg" class="ml-3 h-4 w-4" fill="none" viewBox="0 0 24 24"
+                        stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                          d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+                      </svg>
+                    </p>
+                    <p class="mt-1 text-sm text-gray-500">
+                      The reference manuals for Speckle, both for end users and developers alike.
+                    </p>
+                  </a>
+
+                  <a href="https://speckle.community" target="_blank"
+                    class="-m-3 p-3 block rounded-md hover:bg-gray-50 dark:hover:bg-gray-800 transition ease-in-out duration-150">
+                    <p class="text-base font-medium text-gray-900 dark:text-gray-100 flex items-center">
+                      Community Forum
+                      <svg xmlns="http://www.w3.org/2000/svg" class="ml-3 h-4 w-4" fill="none" viewBox="0 0 24 24"
+                        stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                          d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+                      </svg>
+                    </p>
+                    <p class="mt-1 text-sm text-gray-500">
+                      Meet & get help from the Speckle community!
+                    </p>
+                  </a>
+
+                </div>
+              </div>
+
+              {{!-- {{> menus/resourcesMenu }} --}}
+
+            </div>
+
           </div>
 
-          {{!-- About  --}}
+          {{!-- About --}}
 
-          <div class="relative" @mouseenter="resourcesMenu = false; usecasesMenu = false; developersMenu = false; flyoutMenuOpen = true"
-            @mouseleave="">
-            <button type="button" @click="flyoutMenuOpen = !flyoutMenuOpen"
-              x-state:on="Item active" x-state:off="Item inactive"
-              :class="{ 'text-gray-900': flyoutMenuOpen, 'text-gray-500': !flyoutMenuOpen }"
-              class="group bg-white dark:bg-gray-900 rounded-md text-gray-700 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 inline-flex items-center text-base font-medium focus:outline-none outline-none">
-              <span>Company</span>
-              <svg x-state:on="Item active" x-state:off="Item inactive"
-                class="ml-2 h-5 w-5 text-gray-400 group-hover:text-gray-500"
-                x-bind:class="{ 'text-gray-600': flyoutMenuOpen, 'text-gray-400': !flyoutMenuOpen }"
-                x-description="Heroicon name: chevron-down"
-                xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
-                fill="currentColor" aria-hidden="true">
-                <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                  clip-rule="evenodd"></path>
+          <div class="relative" @mouseenter="resourcesMenu = false; flyoutMenuOpen = true" @mouseleave="">
+            <button type="button" @click="flyoutMenuOpen = !flyoutMenuOpen" x-state:on="Item active"
+              x-state:off="Item inactive" :class="{ 'text-gray-900': flyoutMenuOpen, 'text-gray-500': !flyoutMenuOpen }"
+              class="transition hover:bg-blue-100 dark:hover:bg-gray-800 rounded-md px-2 text-gray-700 dark:text-gray-400 hover:text-blue-500 inline-flex items-center text-base font-medium">
+              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24"
+                stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                  d="M8 14v3m4-3v3m4-3v3M3 21h18M3 10h18M3 7l9-4 9 4M4 10h16v11H4V10z" />
               </svg>
+              <span>Company</span>
             </button>
-            <div x-description="Flyout menu, show/hide based on flyout menu state."
-              @mouseleave="flyoutMenuOpen = false;" x-show="flyoutMenuOpen"
-              x-transition:enter="transition ease-out duration-200"
-              x-transition:enter-start="opacity-0 translate-y-1"
-              x-transition:enter-end="opacity-100 translate-y-0"
-              x-transition:leave="transition ease-in duration-150"
-              x-transition:leave-start="opacity-100 translate-y-0"
-              x-transition:leave-end="opacity-0 translate-y-1"
+
+            <div x-description="Company menu" @mouseleave="flyoutMenuOpen = false;" x-show="flyoutMenuOpen"
+              x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 translate-y-1"
+              x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition ease-in duration-150"
+              x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 translate-y-1"
               class="absolute z-10 left-1/2 transform -translate-x-1/2 mt-3 px-2 w-screen max-w-xs sm:px-0">
               <div class="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden">
                 <div class="relative grid gap-6 bg-white dark:bg-gray-900 px-5 py-6 sm:gap-8 sm:p-8">
 
-                  <a href="/about" class="-m-3 p-3 block rounded-md hover:bg-gray-50 dark:hover:bg-gray-800 transition ease-in-out duration-150">
+                  <a href="/about"
+                    class="-m-3 p-3 block rounded-md hover:bg-gray-50 dark:hover:bg-gray-800 transition ease-in-out duration-150">
                     <p class="text-base font-medium text-gray-900 dark:text-gray-100">
                       About
                     </p>
@@ -140,7 +180,8 @@
                     </p>
                   </a>
 
-                  <a href="/partnerships" class="-m-3 p-3 block rounded-md hover:bg-gray-50 dark:hover:bg-gray-800 transition ease-in-out duration-150">
+                  <a href="/partnerships"
+                    class="-m-3 p-3 block rounded-md hover:bg-gray-50 dark:hover:bg-gray-800 transition ease-in-out duration-150">
                     <p class="text-base font-medium text-gray-900 dark:text-gray-100">
                       Partnerships
                     </p>
@@ -149,7 +190,8 @@
                     </p>
                   </a>
 
-                  <a href="/contact" class="-m-3 p-3 block rounded-md hover:bg-gray-50 dark:hover:bg-gray-800 transition ease-in-out duration-150">
+                  <a href="/contact"
+                    class="-m-3 p-3 block rounded-md hover:bg-gray-50 dark:hover:bg-gray-800 transition ease-in-out duration-150">
                     <p class="text-base font-medium text-gray-900 dark:text-gray-100">
                       Contact
                     </p>
@@ -158,7 +200,8 @@
                     </p>
                   </a>
 
-                  <a href="/careers" class="-m-3 p-3 block rounded-md hover:bg-gray-50 dark:hover:bg-gray-800 transition ease-in-out duration-150">
+                  <a href="/careers"
+                    class="-m-3 p-3 block rounded-md hover:bg-gray-50 dark:hover:bg-gray-800 transition ease-in-out duration-150">
                     <p class="text-base font-medium text-gray-900 dark:text-gray-100">
                       Careers
                     </p>
@@ -171,8 +214,9 @@
             </div>
           </div>
 
-          <div class="relative" @mouseenter="resourcesMenu = false; usecasesMenu = false; developersMenu = false; flyoutMenuOpen = false">
-            &nbsp;
+          <div class="relative"
+            @mouseenter="resourcesMenu = false; usecasesMenu = false; developersMenu = false; flyoutMenuOpen = false">
+            &nbsp;&nbsp;
           </div>
 
         </nav>
@@ -180,11 +224,11 @@
         {{!-- CTA --}}
 
         <div class="flex items-center lg:ml-12">
-          <a href="https://github.com/specklesystems/speckle-server"
-            target="_blank" class="mr-4 transition hover:text-gray-500">
-            <svg class="h-6 w-6" fill="currentColor"
-              viewBox="0 0 24 24" aria-hidden="true">
-              <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
+          <a href="https://github.com/specklesystems/speckle-server" target="_blank"
+            class="mr-4 transition hover:text-gray-500">
+            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+              <path fill-rule="evenodd"
+                d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
                 clip-rule="evenodd"></path>
             </svg>
           </a>
@@ -194,56 +238,13 @@
     </div>
   </div>
 
-  <!-- Use cases menu -->
-  <div x-description="'Solutions' flyout menu, show/hide based on flyout menu state."
-    x-show="usecasesMenu" @mouseleave="usecasesMenu = false;"
-    x-transition:enter="transition ease-out duration-200"
-    x-transition:enter-start="opacity-0 -translate-y-1"
-    x-transition:enter-end="opacity-100 translate-y-0"
-    x-transition:leave="transition ease-in duration-150"
-    x-transition:leave-start="opacity-100 translate-y-0"
-    x-transition:leave-end="opacity-0 -translate-y-1" class="hidden md:block absolute z-10 inset-x-0 transform shadow-lg">
-
-    {{> menus/tagDropdownMenu tag="features" maxcards="3" large="true" }}
-
-  </div>
-
-  <!-- Learn menu -->
-  <div x-description="'Learn' flyout menu, show/hide based on flyout menu state."
-    x-show="resourcesMenu" @mouseleave="resourcesMenu = false;"
-    x-transition:enter="transition ease-out duration-200"
-    x-transition:enter-start="opacity-0 -translate-y-1"
-    x-transition:enter-end="opacity-100 translate-y-0"
-    x-transition:leave="transition ease-in duration-150"
-    x-transition:leave-start="opacity-100 translate-y-0"
-    x-transition:leave-end="opacity-0 -translate-y-1" class="hidden md:block absolute z-10 inset-x-0 transform shadow-lg">
-
-    {{> menus/resourcesMenu }}
-
-  </div>
-
-  <!-- Developers menu -->
-  <div x-description="'Developers' flyout menu, show/hide based on flyout menu state."
-    x-show="developersMenu" @mouseleave="developersMenu = false;"
-    x-transition:enter="transition ease-out duration-200"
-    x-transition:enter-start="opacity-0 -translate-y-1"
-    x-transition:enter-end="opacity-100 translate-y-0"
-    x-transition:leave="transition ease-in duration-150"
-    x-transition:leave-start="opacity-100 translate-y-0"
-    x-transition:leave-end="opacity-0 -translate-y-1" class="hidden md:block absolute z-10 inset-x-0 transform shadow-lg">
-
-    {{> menus/tagDropdownMenu tag="developers" maxcards="3" large="true" }}
-
-  </div>
 
   {{!-- Mobile menu --}}
-  <div x-description="Mobile menu, show/hide based on mobile menu state."
-    x-show="mobileMenuOpen" x-transition:enter="duration-200 ease-out"
-    x-transition:enter-start="opacity-0 scale-95"
-    x-transition:enter-end="opacity-100 scale-100"
-    x-transition:leave="duration-100 ease-in"
-    x-transition:leave-start="opacity-100 scale-100"
-    x-transition:leave-end="opacity-0 scale-95" class="fixed w-full h-full z-30 top-0 inset-x-0 p-2 transition transform origin-top-right lg:hidden">
+  <div x-description="Mobile menu, show/hide based on mobile menu state." x-show="mobileMenuOpen"
+    x-transition:enter="duration-200 ease-out" x-transition:enter-start="opacity-0 scale-95"
+    x-transition:enter-end="opacity-100 scale-100" x-transition:leave="duration-100 ease-in"
+    x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95"
+    class="fixed w-full h-full z-30 top-0 inset-x-0 p-2 transition transform origin-top-right lg:hidden">
     <div class="rounded-lg shadow-2xl bg-white dark:bg-gray-900">
       <div class="pt-5 pb-6 px-5 sm:pb-8">
         <div class="flex items-center justify-between">
@@ -253,13 +254,9 @@
           <div class="-mr-2">
             <button @click="mobileMenuOpen = false" type="button"
               class="bg-white dark:bg-gray-900 rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500">
-              <svg class="h-6 w-6" x-description="Heroicon name: x"
-                xmlns="http://www.w3.org/2000/svg" fill="none"
-                viewBox="0 0 24 24" stroke="currentColor"
-                aria-hidden="true">
-                <path stroke-linecap="round"
-                  stroke-linejoin="round" stroke-width="2"
-                  d="M6 18L18 6M6 6l12 12"></path>
+              <svg class="h-6 w-6" x-description="Heroicon name: x" xmlns="http://www.w3.org/2000/svg" fill="none"
+                viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
               </svg>
             </button>
           </div>
@@ -268,31 +265,27 @@
           <nav>
             <div class="grid gap-7 sm:grid-cols-2 sm:gap-y-8 sm:gap-x-4">
 
-              <a href="/features" class="-m-3 flex items-center p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800">
-                <div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-blue-500 text-white sm:h-12 sm:w-12">
-                  <svg class="h-6 w-6" x-description="Heroicon name: chart-bar"
-                    xmlns="http://www.w3.org/2000/svg" fill="none"
-                    viewBox="0 0 24 24" stroke="currentColor"
-                    aria-hidden="true">
-                    <path stroke-linecap="round"
-                      stroke-linejoin="round" stroke-width="2"
-                      d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
+              <a href="/features/connectors" class="-m-3 flex items-center p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800">
+                <div
+                  class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-blue-500 text-white sm:h-12 sm:w-12">
+                  <svg class="h-6 w-6" x-description="Heroicon name: chart-bar" xmlns="http://www.w3.org/2000/svg"
+                    fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                      d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4" />
                   </svg>
                 </div>
                 <div class="ml-4 text-base font-medium text-gray-900 dark:text-gray-200">
-                  Features
+                  Connectors
                 </div>
               </a>
 
-              <a href="/developers" class="-m-3 flex items-center p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800">
-                <div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-blue-500 text-white sm:h-12 sm:w-12">
-                  <svg class="h-6 w-6" x-description="Heroicon name: shield-check"
-                    xmlns="http://www.w3.org/2000/svg" fill="none"
-                    viewBox="0 0 24 24" stroke="currentColor"
-                    aria-hidden="true">
-                    <path stroke-linecap="round"
-                      stroke-linejoin="round" stroke-width="2"
-                      d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
+              <a href="/developers"
+                class="-m-3 flex items-center p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800">
+                <div
+                  class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-blue-500 text-white sm:h-12 sm:w-12">
+                  <svg class="h-6 w-6" x-description="Heroicon name: shield-check" xmlns="http://www.w3.org/2000/svg"
+                    fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                   </svg>
                 </div>
                 <div class="ml-4 text-base font-medium text-gray-900 dark:text-gray-200">
@@ -300,15 +293,29 @@
                 </div>
               </a>
 
+              <a href="/tutorials" class="-m-3 flex items-center p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800">
+                <div
+                  class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-blue-500 text-white sm:h-12 sm:w-12">
+                  <svg class="h-6 w-6" x-description="Heroicon name: cursor-click" xmlns="http://www.w3.org/2000/svg"
+                    fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                      d="M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a2 2 0 110-4h1a1 1 0 001-1V7a1 1 0 011-1h3a1 1 0 001-1V4z" />
+                    </path>
+                  </svg>
+                </div>
+                <div class="ml-4 text-base font-medium text-gray-900 dark:text-gray-200">
+                  Tutorials
+                </div>
+              </a>
+
               <a href="/blog" class="-m-3 flex items-center p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800">
-                <div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-blue-500 text-white sm:h-12 sm:w-12">
-                  <svg class="h-6 w-6" x-description="Heroicon name: cursor-click"
-                    xmlns="http://www.w3.org/2000/svg" fill="none"
-                    viewBox="0 0 24 24" stroke="currentColor"
-                    aria-hidden="true">
-                    <path stroke-linecap="round"
-                      stroke-linejoin="round" stroke-width="2"
-                      d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"></path>
+                <div
+                  class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-blue-500 text-white sm:h-12 sm:w-12">
+                  <svg class="h-6 w-6" x-description="Heroicon name: cursor-click" xmlns="http://www.w3.org/2000/svg"
+                    fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                      d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122">
+                    </path>
                   </svg>
                 </div>
                 <div class="ml-4 text-base font-medium text-gray-900 dark:text-gray-200">
@@ -318,24 +325,23 @@
 
 
               <a href="/about" class="-m-3 flex items-center p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800">
-                <div class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-blue-500 text-white sm:h-12 sm:w-12">
-                  <svg class="h-6 w-6" x-description="Heroicon name: view-grid"
-                    xmlns="http://www.w3.org/2000/svg" fill="none"
-                    viewBox="0 0 24 24" stroke="currentColor"
-                    aria-hidden="true">
-                    <path stroke-linecap="round"
-                      stroke-linejoin="round" stroke-width="2"
-                      d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path>
+                <div
+                  class="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-blue-500 text-white sm:h-12 sm:w-12">
+                  <svg class="h-6 w-6" x-description="Heroicon name: view-grid" xmlns="http://www.w3.org/2000/svg"
+                    fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                      d="M8 14v3m4-3v3m4-3v3M3 21h18M3 10h18M3 7l9-4 9 4M4 10h16v11H4V10z" />
                   </svg>
                 </div>
                 <div class="ml-4 text-base font-medium text-gray-900 dark:text-gray-200">
-                  About
+                  About Us
                 </div>
               </a>
 
 
               <div class="text-base">
-                <a href="https://speckle.community" target="_blank" class="font-medium text-blue-600 hover:text-blue-500">
+                <a href="https://speckle.community" target="_blank"
+                  class="font-medium text-blue-600 hover:text-blue-500">
                   Community <span aria-hidden="true">→</span></a>
               </div>
 
diff --git a/tutorials.hbs b/tutorials.hbs
index 68e024f..5a2cd54 100644
--- a/tutorials.hbs
+++ b/tutorials.hbs
@@ -15,7 +15,7 @@
   {{/tag}}
 
   <div class="w-default flex flex-row space-x-4 flex-wrap content-center justify-center">
-    <p class="text-gray-500 w-full text-center text-sm mt-1">Popular topics:</p>
+    {{!-- <p class="text-gray-500 w-full text-center text-sm mt-1">Popular topics:</p> --}}
     {{#get "tags" limit="all" filter="slug:-[features,tutorials,careers,developers,blog]"}}
     {{#foreach tags}}
     <a href="{{url}}" class="mt-2 px-2 py-1 bg-blue-500 rounded-full inline-block text-white ring-0 hover:ring-4 transition">