Add mega navigation, top utility bar, and rebuilt footer

.eleventy.js

@@ -107,7 +107,7 @@ module.exports = function(eleventyConfig) {
     });
 
     // Add a global data variable for the current date
-    eleventyConfig.addGlobalData("currentDateISO", new Date().toISOString());  
+    eleventyConfig.addGlobalData("currentDateISO", new Date().toISOString());
 
     // Make filters globally accessible
     global.isFuturePost = eleventyConfig.getFilter('isFuturePost');
@@ -226,6 +226,13 @@ module.exports = function(eleventyConfig) {
 
     eleventyConfig.addFilter("limit", (arr, limit) => arr.slice(0, limit ));
 
+    // Marketing image for a nav highlight card: the linked page's image front matter
+    eleventyConfig.addFilter("pageImageForUrl", (collection, url) => {
+        const normalized = url && !url.endsWith("/") ? `${url}/` : url;
+        const match = (collection || []).find((p) => p.url === normalized);
+        return (match && match.data && match.data.image) || null;
+    });
+
     eleventyConfig.addFilter('console', function (value) {
         const str = util.inspect(value, { showHidden: false, depth: null });
         return `<div style="white-space: pre-wrap;">${unescape(str)}</div>;`
@@ -973,11 +980,11 @@ module.exports = function(eleventyConfig) {
 
         if (content) {
             const chevronDown = loadSVG('chevron-down')
-            return `<li class="${classes}"><span class="flex items-center gap-1">${iconSvg}${label}<span class="ff-nav-chevron">${chevronDown}</span></span>${content}</li>`
+            return `<li class="${classes}"><span class="flex items-center gap-1">${iconSvg}<span class="ff-nav-label">${label}</span><span class="ff-nav-chevron">${chevronDown}</span></span>${content}</li>`
         } else if (link) {
-            return `<li class="${classes}"><a class="flex items-center gap-2" href="${link}">${iconSvg}${label}</a></li>`
+            return `<li class="${classes}"><a class="flex items-center gap-2" href="${link}">${iconSvg}<span class="ff-nav-label">${label}</span></a></li>`
         } else {
-            return `<li class="${classes}"><span class="flex items-center gap-2">${iconSvg}${label}</span></li>`
+            return `<li class="${classes}"><span class="flex items-center gap-2">${iconSvg}<span class="ff-nav-label">${label}</span></span></li>`
         }
     });
 

nuxt/components/AppUtilityBar.vue

@@ -0,0 +1,58 @@
+<script setup>
+import { onMounted } from 'vue'
+
+// Mirrors src/_includes/components/top-utility-bar.njk (11ty). Events come
+// from 11ty global data and are not available here, so only the standing
+// promos rotate; keep both files in sync when editing.
+onMounted(() => {
+    const items = document.querySelectorAll('.ff-utility-announce > .ff-utility-item')
+    if (items.length < 2) return
+    let i = 0
+    items.forEach((el, k) => { el.style.display = (k === 0 ? 'inline-flex' : 'none') })
+    setInterval(() => {
+        items[i].style.display = 'none'
+        i = (i + 1) % items.length
+        items[i].style.display = 'inline-flex'
+    }, 7000)
+})
+</script>
+
+<template>
+  <div class="ff-utility-bar w-full bg-indigo-700 text-indigo-100 text-sm px-6">
+    <div class="mx-auto max-screen-none lg:max-w-screen-xl 2xl:max-w-[1920px] flex items-center justify-between gap-4 py-3">
+      <!-- Announcements (standing promos) -->
+      <div class="ff-utility-announce min-w-0 flex-1 flex items-center">
+        <a href="/ai/" class="ff-utility-item group inline-flex items-center gap-2 min-w-0 no-underline hover:no-underline text-indigo-100 hover:text-white">
+          <span class="shrink-0 font-semibold">New</span>
+          <span class="hidden sm:block">-</span>
+          <span class="truncate">Meet FlowFuse Expert: build industrial applications with AI.</span>
+          <span class="shrink-0 hidden sm:inline-flex items-center gap-1 font-medium text-white underline underline-offset-2">
+            Learn more
+            <span class="transition-transform group-hover:translate-x-0.5">&rarr;</span>
+          </span>
+        </a>
+        <a href="/docs/device-agent/install/overview/" class="ff-utility-item group inline-flex items-center gap-2 min-w-0 no-underline hover:no-underline text-indigo-100 hover:text-white" style="display: none">
+          <span class="shrink-0 font-semibold">Get started</span>
+          <span class="hidden sm:block">-</span>
+          <span class="truncate">Begin with installing the FlowFuse device agent on your hardware.</span>
+          <span class="shrink-0 hidden sm:inline-flex items-center gap-1 font-medium text-white underline underline-offset-2">
+            Download
+            <span class="transition-transform group-hover:translate-x-0.5">&rarr;</span>
+          </span>
+        </a>
+      </div>
+      <!-- Mobile Sign In (quick-links nav below is hidden under md) -->
+      <a href="https://app.flowfuse.com" class="md:hidden shrink-0 text-indigo-100 hover:text-white no-underline hover:no-underline font-medium">Sign In</a>
+      <!-- Quick links (right) -->
+      <nav class="hidden md:flex items-center gap-5 shrink-0" aria-label="Quick links">
+        <a href="/about/" class="text-indigo-100 hover:text-white no-underline hover:no-underline">About us</a>
+        <a href="/blog/" class="text-indigo-100 hover:text-white no-underline hover:no-underline">Blog</a>
+        <a href="/docs/" class="text-indigo-100 hover:text-white no-underline hover:no-underline">Docs</a>
+        <a href="/support/" class="text-indigo-100 hover:text-white no-underline hover:no-underline">Support</a>
+        <a href="/docs/device-agent/install/overview/" class="text-indigo-100 hover:text-white no-underline hover:no-underline">Download</a>
+        <span class="h-4 w-px bg-indigo-400/40" aria-hidden="true"></span>
+        <a href="https://app.flowfuse.com" class="text-indigo-100 hover:text-white no-underline hover:no-underline font-medium">Sign In</a>
+      </nav>
+    </div>
+  </div>
+</template>

nuxt/layouts/default.vue

@@ -3,6 +3,7 @@
     <a href="#main-content" class="skip-to-main">Skip to main content</a>
     <div class="flex-grow base">
       <div class="w-full">
+        <AppUtilityBar />
         <AppHeader />
         <main id="main-content" class="flex flex-col mx-auto items-center justify-center gradient-bg">
           <slot />

src/_data/navHighlights.json

@@ -0,0 +1,23 @@
+{
+    "_comment": "Nav highlight cards, one per top-nav dropdown. Marketing owns this file: each entry is the promo card shown at the left of the corresponding mega dropdown on xl+ screens. Swap an entry to feature a campaign, webinar, customer story or launch. Each card renders as the image plus the title (which also serves as the link's accessible name); keep titles short (2 lines max). Set image to a site-absolute path to override, otherwise the card uses the linked page's front-matter image, falling back to /images/og-blog.jpg. Consumed by Eleventy (base.njk) and by Nuxt (nuxt/components/AppHeader.vue).",
+    "platform": {
+        "title": "Industrial AI, governed and built in",
+        "link": "/ai/",
+        "image": "/images/ai/ai-hero.png"
+    },
+    "solutions": {
+        "title": "Scale automotive operations",
+        "link": "/industries/automotive/",
+        "image": "/images/industries/automotive.jpg"
+    },
+    "resources": {
+        "title": "Free Node-RED training",
+        "link": "https://node-red-academy.learnworlds.com/",
+        "image": "/images/education/education_hero.jpg"
+    },
+    "company": {
+        "title": "See how teams ship with FlowFuse",
+        "link": "/customer-stories/",
+        "image": "/images/stories/arch_systems.jpeg"
+    }
+}

src/_includes/base.js

@@ -164,3 +164,17 @@ function ffCreateHubSpotForm (config) {
 }
 
 window.ffCreateHubSpotForm = ffCreateHubSpotForm
+
+// Mobile nav: dropdown sections expand on tap, not hover
+document.addEventListener('DOMContentLoaded', function () {
+    document.querySelectorAll('header .ff-nav-dropdown > span').forEach(function (trigger) {
+        trigger.addEventListener('click', function (e) {
+            if (window.innerWidth < 768) {
+                e.preventDefault()
+                e.stopPropagation()
+                // Toggle this section on its own; other open sections stay open
+                trigger.parentElement.classList.toggle('mobile-expanded')
+            }
+        })
+    })
+})