updated toolkit page nav

Author: pautva

src/pages/toolkit.astro

@@ -30,12 +30,14 @@ const toolkitTools = (await getCollection("toolkit")).sort(
           aria-label="Tabs"
           role="tablist"
         >
+
+          <!-- Collaboration and engagement -->
           <button
             type="button"
-            class="hs-tab-active:bg-blue-100 hs-tab-active:hover:border-transparent w-full flex flex-col text-start hover:bg-blue-50 p-3 md:p-5 rounded-xl dark:hs-tab-active:bg-neutral-800 dark:hover:bg-neutral-800 active"
-            id="tabs-with-card-item-1"
-            data-hs-tab="#tabs-with-card-1"
-            aria-controls="tabs-with-card-1"
+            class="hs-tab-active:bg-blue-100 hs-tab-active:hover:border-transparent w-full flex flex-col text-start hover:bg-blue-50 p-3 md:p-5 rounded-xl dark:hs-tab-active:bg-neutral-800 dark:hover:bg-neutral-800"
+            id="tabs-with-card-item-5"
+            data-hs-tab="#tabs-with-card-5"
+            aria-controls="tabs-with-card-5"
             role="tab"
           >
             <svg
@@ -50,33 +52,30 @@ const toolkitTools = (await getCollection("toolkit")).sort(
               stroke-linecap="round"
               stroke-linejoin="round"
               ><path
-                d="M5 5.5A3.5 3.5 0 0 1 8.5 2H12v7H8.5A3.5 3.5 0 0 1 5 5.5z"
-              ></path><path d="M12 2h3.5a3.5 3.5 0 1 1 0 7H12V2z"></path><path
-                d="M12 12.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 1 1-7 0z"></path><path
-                d="M5 19.5A3.5 3.5 0 0 1 8.5 16H12v3.5a3.5 3.5 0 1 1-7 0z"
-              ></path><path
-                d="M5 12.5A3.5 3.5 0 0 1 8.5 9H12v7H8.5A3.5 3.5 0 0 1 5 12.5z"
-              ></path></svg
+                d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"
+              ></path><path d="M5 3v4"></path><path d="M19 17v4"></path><path
+                d="M3 5h4"></path><path d="M17 19h4"></path></svg
             >
             <span class="mt-5">
               <span
                 class="hs-tab-active:text-blue-800 block font-semibold text-gray-800 dark:hs-tab-active:text-blue-500 dark:text-neutral-200"
-                >User Research</span
+                >Collaboration and Engagement</span
               >
               <span
                 class="hidden lg:block mt-2 text-gray-800 dark:text-neutral-200"
-                >Methods and tools for understanding user needs, behaviors, and
-                pain points.</span
+                >Methods for facilitating collaboration and communication among
+                diverse stakeholders.</span
               >
             </span>
           </button>
 
+          <!-- User Research -->
           <button
             type="button"
-            class="hs-tab-active:bg-blue-100 hs-tab-active:hover:border-transparent w-full flex flex-col text-start hover:bg-blue-50 p-3 md:p-5 rounded-xl dark:hs-tab-active:bg-neutral-800 dark:hover:bg-neutral-800"
-            id="tabs-with-card-item-2"
-            data-hs-tab="#tabs-with-card-2"
-            aria-controls="tabs-with-card-2"
+            class="hs-tab-active:bg-blue-100 hs-tab-active:hover:border-transparent w-full flex flex-col text-start hover:bg-blue-50 p-3 md:p-5 rounded-xl dark:hs-tab-active:bg-neutral-800 dark:hover:bg-neutral-800 active"
+            id="tabs-with-card-item-1"
+            data-hs-tab="#tabs-with-card-1"
+            aria-controls="tabs-with-card-1"
             role="tab"
           >
             <svg
@@ -102,22 +101,23 @@ const toolkitTools = (await getCollection("toolkit")).sort(
             <span class="mt-5">
               <span
                 class="hs-tab-active:text-blue-800 block font-semibold text-gray-800 dark:hs-tab-active:text-blue-500 dark:text-neutral-200"
-                >Design and Prototyping</span
+                >User Research</span
               >
               <span
                 class="hidden lg:block mt-2 text-gray-800 dark:text-neutral-200"
-                >Techniques for visualising and creating interactive
-                representations of data services and products.</span
+                >Methods and tools for understanding user needs, behaviors, and
+                pain points.</span
               >
             </span>
           </button>
 
+          <!-- Design and prototyping -->
           <button
             type="button"
             class="hs-tab-active:bg-blue-100 hs-tab-active:hover:border-transparent w-full flex flex-col text-start hover:bg-blue-50 p-3 md:p-5 rounded-xl dark:hs-tab-active:bg-neutral-800 dark:hover:bg-neutral-800"
-            id="tabs-with-card-item-3"
-            data-hs-tab="#tabs-with-card-3"
-            aria-controls="tabs-with-card-3"
+            id="tabs-with-card-item-2"
+            data-hs-tab="#tabs-with-card-2"
+            aria-controls="tabs-with-card-2"
             role="tab"
           >
             <svg
@@ -143,22 +143,23 @@ const toolkitTools = (await getCollection("toolkit")).sort(
             <span class="mt-5">
               <span
                 class="hs-tab-active:text-blue-800 block font-semibold text-gray-800 dark:hs-tab-active:text-blue-500 dark:text-neutral-200"
-                >Evaluation and Testing</span
+                >Design and Prototyping</span
               >
               <span
                 class="hidden lg:block mt-2 text-gray-800 dark:text-neutral-200"
-                >Approaches for gathering feedback and assessing the usability
-                and effectiveness of solutions.</span
+                >Techniques for visualising and creating interactive
+                representations of data services and products.</span
               >
             </span>
           </button>
 
+          <!-- Evaluation and testing -->
           <button
             type="button"
             class="hs-tab-active:bg-blue-100 hs-tab-active:hover:border-transparent w-full flex flex-col text-start hover:bg-blue-50 p-3 md:p-5 rounded-xl dark:hs-tab-active:bg-neutral-800 dark:hover:bg-neutral-800"
-            id="tabs-with-card-item-5"
-            data-hs-tab="#tabs-with-card-5"
-            aria-controls="tabs-with-card-5"
+            id="tabs-with-card-item-3"
+            data-hs-tab="#tabs-with-card-3"
+            aria-controls="tabs-with-card-3"
             role="tab"
           >
             <svg
@@ -173,22 +174,28 @@ const toolkitTools = (await getCollection("toolkit")).sort(
               stroke-linecap="round"
               stroke-linejoin="round"
               ><path
-                d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"
-              ></path><path d="M5 3v4"></path><path d="M19 17v4"></path><path
-                d="M3 5h4"></path><path d="M17 19h4"></path></svg
+                d="M5 5.5A3.5 3.5 0 0 1 8.5 2H12v7H8.5A3.5 3.5 0 0 1 5 5.5z"
+              ></path><path d="M12 2h3.5a3.5 3.5 0 1 1 0 7H12V2z"></path><path
+                d="M12 12.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 1 1-7 0z"></path><path
+                d="M5 19.5A3.5 3.5 0 0 1 8.5 16H12v3.5a3.5 3.5 0 1 1-7 0z"
+              ></path><path
+                d="M5 12.5A3.5 3.5 0 0 1 8.5 9H12v7H8.5A3.5 3.5 0 0 1 5 12.5z"
+              ></path></svg
             >
             <span class="mt-5">
               <span
                 class="hs-tab-active:text-blue-800 block font-semibold text-gray-800 dark:hs-tab-active:text-blue-500 dark:text-neutral-200"
-                >Collaboration and Engagement</span
+                >Evaluation and Testing</span
               >
               <span
                 class="hidden lg:block mt-2 text-gray-800 dark:text-neutral-200"
-                >Methods for facilitating collaboration and communication among
-                diverse stakeholders.</span
+                >Approaches for gathering feedback and assessing the usability
+                and effectiveness of solutions.</span
               >
             </span>
           </button>
+
+
         </nav>
         <!-- End Tab Nav -->