Add mega navigation, top utility bar, and rebuilt footer

[dimitrieh]

Description

Outcome: site-wide wayfinding is rebuilt. A full-width mega navigation (hover intent, animated underlines, and a marketing-configurable highlight card per dropdown), a top utility bar, and a footer whose sections mirror the nav. The Nuxt header, footer, and utility bar are brought to parity with the Eleventy site, including the By Integration footer column and the Certifications link.

Builds on: the Shop Floor Communication page beneath it, so the new "By Use Case" nav and footer entries resolve to a live page.

Provides for later PRs: the shared style.css and base.njk layout foundation that every subsequent PR in this stack relies on, plus the nav/footer structure those pages plug into.

Also removes the retired events banner.

Related Issue(s)

Split from #5371. Implements the intent of #5067 (utility bar).

Checklist

• I have read the contribution guidelines
• I have considered the performance impact of these changes

---

Stack (left to right is merge order; #5373 punctuation is independent, off main):

flowchart LR
    main([main])
    main --> P73["#5373 punctuation"]
    main --> P74["#5374 shop-floor"] --> P75["#5375 nav"] --> P76["#5376 use-cases"] --> P77["#5377 hero-media"] --> P78["#5378 industry"] --> P79["#5379 AI"] --> P80["#5380 homepage"] --> P81["#5381 polish"]
    classDef here stroke-width:4px;
    class P75 here;

Loading

[netlify]

✅ Deploy Preview for flowforge-website ready!

Name	Link
🔨 Latest commit	a7d2534
🔍 Latest deploy log	https://app.netlify.com/projects/flowforge-website/deploys/6a63440a3628de000805455e
😎 Deploy Preview	https://deploy-preview-5375--flowforge-website.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 63 (🔴 down 5 from production) Accessibility: 96 (no change from production) Best Practices: 100 (no change from production) SEO: 91 (no change from production) PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[Yndira-E]

@dimitrieh looking good! Thanks for your work on this. A few notes:

• The new “Download” CTA that leads to the Device Agent docs, I’m not sure I understand the reasoning behind this. Could you elaborate? Also, “Download” doesn’t seem to set the right expectation. I’m not sure why this CTA needs to appear on every page. Would someone visiting our website for the first time really be looking to download the Device Agent? At what stage of their journey would they actually need this?

• Nav on Eleventy pages doesn't match the nav on Nuxt pages, columns, items, icons, font size...
  Eleventy

Nuxt

• The mobile nav is also different in terms of layout and items.
  Eleventy

Nuxt

• The AI image under "platform" on the main nav looks cropped

• The Food & Beverage item has the wrong icon (on Eleventy pages)

• The icon for the "Certification" item is missing

• There’s some inconsistency in the responsive behaviour. When the image disappears, the columns expand to fill the available width. However, at narrower widths, they stop doing that. I’d expect the opposite behaviour.

• The top border on the footer feels unnecessary. The background already provides enough separation from the content.

• I think there’s an opportunity to improve how the footer links are grouped. Is there any rationale behind the current grouping? I tried to understand the relationship between the grouped items, but it wasn’t obvious to me.

• I’m not sure the underline needs to extend across the full width of each menu item. I think it would feel cleaner if it only matched the width of the text.

• I don’t think the hover effect on the logo adds much. I’d probably keep it static.

[dimitrieh]

@Yndira-E Thanks! looking at this asap.

Argh, I had not tested with the nuxt pages, just made sure the links were there as well. Looking at this in a bit

The new “Download” CTA that leads to the Device Agent docs, I’m not sure I understand the reasoning behind this. Could you elaborate? Also, “Download” doesn’t seem to set the right expectation. I’m not sure why this CTA needs to appear on every page. Would someone visiting our website for the first time really be looking to download the Device Agent? At what stage of their journey would they actually need this?

I am welcoming suggestions. But we need to lead people directly to use the device agent (Nick is making this a conversion funnel this release, people can start using FlowFuse from the terminal without first needing to login to the website, they will get guided through that journey starting with the terminal). The easiest first step was leading them towards the download docs for the device agent. Basically, this should be considered an equal opportunity to "login or free trial".

See for more info https://flowfuse.slack.com/archives/C032Q63FGG1/p1784901796597059?thread_ts=1784898894.095579&cid=C032Q63FGG1