Repository navigation
Clearer main nav and a footer with its own job - #6029
Open
sumitshinde-84 wants to merge 20 commits into
Open
sumitshinde-84 wants to merge 20 commits into
sumitshinde-84 wants to merge 20 commits into
Conversation
Header: each page appears once. Pricing, Industrial AI and the security, support and status duplicates are out of the dropdowns. Use-case pages move from Platform > Capabilities into Solutions > By Use Case, so Platform is products and components and Solutions is team, industry and use case. Adds Aviation & Aerospace, Free templates and Build with us, clearer labels, and one-line descriptions under Edge, Hub and Fleet. Footer: its own list instead of a copy of the mega nav. Adds comparison pages, Node-RED and protocol pages, free templates, and a trust and support column; newsletter link and Talk to Us in a top strip. Tests: the header lists each page once, and the footer stays below two-thirds overlap with the header.
Five columns (Product, Evaluate, Resources, Company, Trust & support) and a brand block, 29 links. Drops the Node-RED topic, individual template, industry and Tulip links and the top strip; the header is sticky, so a footer Talk to Us repeated it. The overlap test now checks the footer does not carry most of the header.
Matches the offer's name on the redesigned homepage and /build-with-us/ page. In the footer it moves from Company to Evaluate, since it is now how a buyer starts with FlowFuse. The Solutions highlight card promotes it with the homepage's own line.
The site now leads with outcomes and the Foundation Partnership rather than the product, so the first menu answers the buyer's first question: do you solve my problem, for my industry and team.
Matches the redesigned homepage's H1. Used under the footer logo and in the llms.txt description.
- Utility bar carries existing-user tasks only (Docs, Support, Install on edge, Sign In); About and Blog are already in the main menus. - Highlight cards no longer repeat links: Platform points to the platform overview, Company promotes Partners. - Column headings describe their contents: Products, Features (now with Security & Compliance), and Evaluate (now with Why FlowFuse). - Every header link has its own icon, and a test keeps it that way. - Industrial AI sits beside Platform; header.order sets the top-level order, and a test checks it lists every item once. - One Title Case style across header and footer labels. - See All links are indigo instead of grey; Integrations, a regular item now, is no longer caught by the old See-all grey rule.
Keyboard users could not reach Solutions, Platform, Resources or Company: the triggers were plain spans and the panels used visibility: hidden, so Tab skipped about 45 links (WCAG 2.1.1). Triggers are now focusable with button semantics and aria-expanded, following the W3C disclosure pattern: Tab moves between top-level items, Enter/Space opens a panel, Escape closes it and returns focus. Mouse hover and click are unchanged. The top-level item a page belongs to now keeps the brand colour and its underline, resolved by the longest matching nav href.
The footer had no solutions links on a solutions-led site. Solutions now leads the footer, matching the header order, and lists the six core use cases plus All Use Cases: one kind of item, the problems FlowFuse solves. Foundation Partnership moves to the top of Evaluate. The brand block gets its own row so six columns fit without wrapping, and the old rule that greyed footer links to /use-cases/, /industries/ and /integrations/ is removed. The overlap guard allows up to two thirds, since the footer now deliberately shares the use-case pages.
…ustries Labels match the header's Solutions > By Team. There is no teams index page, so the column ends with the two real index pages rather than an All Teams link to a page that does not exist.
✅ Deploy Preview for flowfuse-website ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
With it now in the Evaluate column, the copy under Company > Work with us made the header tests flag a duplicate link and icon.
The newsletter was only a link under Resources. The footer now carries the signup itself: the blog's HubSpot form (same list, same cta-blog-subscribe event, tagged footer), restyled into one email row with the form's consent text as small print and the reCAPTCHA notice in place of its badge. It has to be the embed, not an API post: the form has captcha on, and HubSpot refuses API submissions for those. HubSpotForm takes an optional stylesheet and reports when the form is ready, and gives each instance its own container id so the blog page can render the blog form and the footer form together.
This branch has not been deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The header and footer were built from one shared list, so the footer repeated 98% of the header's pages, and the header itself listed Pricing, Industrial AI and Security twice and split use cases across two menus. This PR gives each its own job. Solutions now comes before Platform in the header, since our new GTM leads with the problems FlowFuse solves rather than the product, and a buyer's first question is whether we solve theirs. The header also shows each page once (53 links down to 48), groups every use case under Solutions, describes Edge, Hub and Fleet by who they're for, and can be used from the keyboard, which it couldn't before. The footer is its own shorter list (51 links down to 35), organised by Solutions, Product, Evaluate, Resources, Company and Trust & Support, with the new tagline. Merge with or after #6021, which introduces the Foundation Partnership name and tagline used here.