Holistic redesign PoC: industries, AI page, nav + interaction polish#5371
Open
dimitrieh wants to merge 61 commits into
Open
Holistic redesign PoC: industries, AI page, nav + interaction polish#5371dimitrieh wants to merge 61 commits into
dimitrieh wants to merge 61 commits into
Conversation
…rework Template-content pages for the three-lens navigation model: operational use-case pages tagged by industry and value with an AI build layer and Expert dock, outcome lens pages derived from those tags, derived use-case grids on industry pages and systematic cross-link includes, a full-width mega navigation with hover intent and animated underlines across both headers, a top utility bar implementing the intent of PR 5067, homepage use-case links, and an Industrial AI page reworked against the competitor research.
… under Product Rebuild the footer as sections that mirror the top navigation (Platform, Solutions, Resources, Company), each with eyebrow-labelled sub-columns matching the nav dropdown groups, plus copyright, Privacy, Terms and cookie preferences with the social icons on a separate bottom row. Promote Company to a top-level dropdown (Company, Partners and Services, Support) placed before Industrial AI, which is now the last item. Move Pricing out of the top bar into the Platform dropdown under Product. Add About us to the top utility bar quick links and fix the white gap under the header on the Industrial AI page caused by margin collapse-through of the hero heading.
Give the footer Company column an invisible eyebrow spacer inside a flex wrapper so its links baseline-align with the other sections (a plain wrapper let the paragraph margin collapse through). Add the narrow class to the Resources and Company mega panels so column titles and first links sit at the same offset in every dropdown.
Add a promo card slot at the left of each dropdown panel, configured in src/_data/navHighlights.js so marketing can swap what is featured without touching templates. On xl screens the panel uses a fixed four-track grid left-aligned to the screen-xl container, so the card and every column sit at identical positions in all dropdowns regardless of column count. Defaults: capability learning resources (Platform), customer stories (Solutions), Node-RED Academy (Resources) and careers (Company). Also add a FlowFuse Expert link under Platform > Components pointing at the Expert docs.
Show the linked page's marketing image on the highlight card, following the blog-index pattern: an explicit image in navHighlights.js wins, otherwise a new pageImageForUrl filter resolves the target page's image front matter, falling back to the generic og image. Add image front matter to the UNS and customer stories pages. The card now keeps its natural height instead of stretching with tall panels, and the header's chevron span transform (scale plus rotate-on-hover) and the mega-link underline animation are neutralized inside the card, which fixes the odd hover behavior.
The highlight is now just the marketing image: a compact bordered card with space around it, no text block. Platform features the connected plant image. Restyle the mega panels: column titles become uppercase eyebrows matching the footer, the misaligned border stripes on titles and sub-menus are removed, columns sit flush, rows are tighter and the panel gets more vertical padding.
Show the configured title beneath the highlight image so cards whose image carries no text still say where they lead. The image becomes decorative for screen readers; the visible title names the link.
… card Dropdown links drop to 0.875rem. The highlight border and rounding move onto the image itself so the image alone reads as the card, with the title as plain text underneath.
Center the title under the highlight image, color it FlowFuse purple with the same animated hover underline as other panel links (sized to the text via inline-block), align the image top with the column title text top, and widen the card track so more space separates the image from the first column at every xl-and-up width.
Replace the Company column with a labelled horizontal quick-link strip between the main sections and the legal and social row, and let the remaining Platform, Solutions and Resources sections span the width.
Align the highlight image top with the first link row of the panel columns (the first column is now explicitly placed so its title stays in the header row) and left-align the title under the image. Rebuild the footer Company band as a full section with a header like Platform and structured eyebrow groups (Company, Partners and Services, Support) matching the nav dropdown. De-emphasize the See-all index links in both the mega panels and the footer.
Move the FlowFuse logo from the footer top into the Company band where the section header was, with the Company, Partners and Services and Support groups laid out on the same column positions as the sections above.
Keep the muted color but drop the hover color shift, so the See-all index links get identical hover styling to neighboring links in both the mega panels and the footer.
In Resources and Company the highlight card spanned only four link rows, so the grid stretched those rows to fit its height and their links got visibly looser spacing than Platform and Solutions. The card is now a zero-height grid item whose content overflows (it no longer participates in row sizing) and panels gain a min-height with align-content start so short dropdowns still fit the card with uniform rows. Also increase the footer top padding above the section rules.
Single-source the highlight cards: the Vue header now imports src/_data/navHighlights.js instead of hardcoding copies, the config drops fields nothing renders, and the Solutions card gets an explicit image. Port the top utility bar to Nuxt as AppUtilityBar and align the Vue header with the 11ty one: sub-menu lists gain the li wrappers valid HTML requires, the desktop Sign In moves to the utility bar, Contact Us is wrapped properly and appears in the mobile row, and Docs becomes mobile-only. Fix the 640-767px range where the mega grid classes activated inside the mobile accordion by moving them from sm: to md:. Footers gain the FlowFuse Expert and See-all-industries links the header has. Normalize trailing slashes in pageImageForUrl, rename About FlowFuse to About us for consistency, and clean the custom CSS: dead rules removed, duplicate card blocks merged, magic values documented.
Move the highlight title above the card image, pixel-aligned with the column eyebrows (a relative -2px shift compensates the line-height difference; the image still meets the first link row). Rebuild the footer Company band as the logo spanning two columns with the remaining links across four headerless columns on the same grid rhythm. Give the homepage operational-system columns a light indigo background so the white cards stand out.
The muted color rule outspecified the generic header hover, so See-all links and their currentColor underline stayed gray on hover. Restore the indigo hover at the same specificity as the muted rest color.
The accordion still used the old styling (large plain group titles, double border stripes, indented sub-lists). Make the eyebrow titles, stripe removal and See-all de-emphasis width-independent so mobile matches the reworked desktop dropdowns, while keeping the larger touch-target link padding on mobile.
Indent the group eyebrows to the link icon column (they sat clipped at the viewport edge), tighten link rows to a 40px pitch, and give links interaction feedback: a text-hugging indigo underline on hover and active. The desktop animated underline needs a text span the link markup does not have, so mobile uses text-decoration instead.
The mobile drawer used a fixed 64px top offset that predated the slim utility bar. With the bar stacked above the header, the drawer opened on top of the Contact Us and close-button row instead of below it. Pin the utility bar and nav header together as one sticky stack (.ff-header-stack) and anchor the drawer to that stack's height via a single --ff-stack-h variable, so the top offset is a constant that is correct in every scroll position.
Drawer: anchor to the header's live bottom edge on open (JS) instead of a fixed offset, so it opens below the scroll-away utility bar at the top of the page and below the sticky header once scrolled, and fills the full viewport height. Lock only the html scroll container while open; locking html and body together detaches the sticky header. Nav parity with desktop: wrap nav labels in a span and give mobile the same animated, text-hugging underline; stop the chevron rotating on hover (rotation is tap-driven only); align section eyebrows to the icon column. Remove the mobile-only top-level Docs link so the top links match desktop (Docs stays reachable under Resources). Footer: Resources uses the same responsive column grid as the other sections instead of a single-column stack.
Below 420px the wordmark logo collided with the Contact Us button, so swap to the square logo there (no scaling) and keep the wordmark from 420px up. Matches the existing md-to-lg square-logo behaviour. Fix the desktop mega-panel row inflation: the .ff-nav-label reset lost specificity to 'header ul.narrow span' (pt-2 pb-4), so panel link labels were padded to 48px tall. Reset padding with !important so labels hug their text on every breakpoint again.
…er effects - Square logo: use the wordmark's #DA3D0B (was the lighter #ED4E4E). - Mobile accordion: sections toggle independently so several can stay open. - Mobile section links: indent under the eyebrow (2.5rem) for clearer nesting. - Utility bar links: underline on hover. - Logo: subtle purple color-wave sweeping left-to-right on hover.
Give both logo SVGs a horizontal gradient across their own paths and animate the gradient stops to purple in staggered sequence on hover, so a subtle purple wave flows left-to-right through the letterforms instead of a block sweeping over the top.
Industry hero layouts now render an optional full-bleed, poster-first looping MP4 behind the existing two-column hero content, gated on a new hero.video frontmatter field so pages without it render unchanged. Content sits on a frosted semi-transparent white card for legibility, and the video pauses to its first frame under prefers-reduced-motion. Clips are royalty-free (Pexels License), re-encoded to compact 720p MP4 with matching frame-0 poster images.
…+ AI messaging - base.njk: header is a direct body child so position:sticky spans the full page (footer no longer scrolls it away); footer Company spacing bump - industry.njk, automotive.njk: eyebrow restyled as a gray pill; "Trusted by" logos moved below Key Outcomes behind a footer-style rule - site.json: edge-native homepage tagline and subtitle - ai.njk: hero and CTA content rework
Industry pages: - Per-page hero video playback speed via frontmatter (data-speed) - New wider food-beverage clip (roller-conveyor line) and new aviation clip (aircraft assembly hangar) + posters - Trusted-by logos restyled to match the homepage, divider removed - Hero content left-aligned on mobile; smaller problem-list markers; higher-contrast subCta; secondary CTA gets animated underline and a centred arrow; use-case card arrow centred - Renewables eyebrow icon made visible; card labels break to a new line Navigation: - Highlight cards retargeted (Platform to Industrial AI, Solutions to Automotive) and the customer-stories card moved to Company - "See all" index links de-emphasised at rest (label + icon) - Mega panel columns spread across the width on lg-to-xl viewports - Free Trial gets the animated underline and keeps its brand-purple rest - Mobile drawer roomier with larger tap targets (mobile only) Footer: - Brand logo animates on hover and links home - Text links get brand-purple hover with the animated underline; Reddit and YouTube icons hover brand orange/red; cookie link static underline removed; bottom row and Platform columns aligned to the upper grid Industrial AI page: animated aurora hero background sized to the input box. Hero CTA buttons: clearer lift/shadow on hover. Content: em dashes removed across the site.
Delete the /outcomes/ section and the new operational use-case pages, keeping shop-floor-communication and production-monitoring. Clean up cross-links so nothing 404s: nav mega-menu and footer columns, homepage operational-system cards, ai and edge-connectivity featured use cases, the use-cases index outcome link, and the use-case-chips outcome band. Also drop the orphaned value layout and outcomes-specific nav/footer CSS.
Drop the sticky expert-dock floater and its conditional include from the use-case layout, and the expertDock flag from the remaining use-case pages. The book-a-demo CTAs are unaffected.
Drop the ff-btn-colour-pass hover swipe (band gradient, oversized background sizing, and keyframes) on primary and highlight CTAs. Buttons now settle a shade darker on hover via the existing background-color transition, with the slight press dim retained.
Build, deploy and govern becomes Build, deploy, and govern.
New third column under Solutions linking the FlowFuse Node-RED protocol and AI docs: Redis, OPC UA, RTSP, EtherNet/IP, MQTT, ONNX, LLM Nodes, MCP. Added to both the mega-menu and the footer.
Drop the indigo-950/55 tint over the container-port footage and the bottom mask-image gradient on .ai-hero-bg, so the hero video shows without the purple overlay or fade.
Third Solutions column in the nav mega-menu and footer linking the FlowFuse Node-RED protocol and AI docs: Redis, OPC UA, RTSP, EtherNet/IP, MQTT, ONNX, LLM Nodes, MCP.
…sections Wrap the hero heading and tagline in a frosted white card with dark text (matching the industry hero) and replace the solid indigo hero background with white. Move the control-plane/accelerator tagline into the hero, drop the redundant intro paragraph, and remove the standalone platform section and the 'teams can' CTA section along with their data.
… fixes Link the 'Build your own AI agents' blueprint to /blueprints/ai/ and note MCP access including RAG applications. Move the certified-LLM-nodes capability into the Operate group, renamed 'Use any model within flows'. Drop 'teams' from the use-cases intro line.
DEV_MODE wrote every image to /img/<basename> and deduped by basename, so two sources sharing a filename collided. The new hero-video posters (industries/hero-video/<name>.jpg) share basenames with the hero foreground stills (industries/<name>.jpg), so on industry pages the poster overwrote the foreground output. Key the dev output filename by a short hash of the resolved source path. Production is unaffected (its pipeline already hashes by content).
Nav mega-menu and footer By Integration columns end with a 'See all integrations' link to /integrations/, matching the other columns.
…ases Bring back the full Operational Application System card set. Cards whose use-case pages were removed render unlinked (plain div, no url); Production Monitoring and Shop Floor Communication stay linked.
Add /integrations/ to the de-emphasised grey (rest) and indigo (hover) selector groups for the nav mega-menu and footer index links.
Relocate the Integrations and Blueprint Library links from the Platform Product column into the Components column, in the nav mega-menu and the footer.
Add ff-btn--primary-outlined (and drop the ad-hoc text-indigo colour utilities) on secondary CTAs that were bare ff-btn text links lacking hover/active states: the homepage TRY IT OUT buttons, the industry hero secondary CTA, the vs comparison TRY IT OUT buttons, abm-landing's Start Free Trial, and why-flowfuse's GET STARTED.
New Certifications entry under Company in the nav mega-menu and footer, linking to /platform/security/#certifications, plus a link to it from the About page intro.
Give embedded HubSpot signup/newsletter form submit buttons the ff-btn--primary solid look with hover-settle and press-dim states.
Revert the outlined-variant standardization on the homepage TRY IT OUT buttons, industry CONTACT US, vs comparison TRY IT OUT, abm Start Free Trial, and why-flowfuse GET STARTED. These are tertiary text CTAs (text plus animated underline), not bordered secondary buttons.
Wrap the label of the tertiary text CTAs (homepage TRY IT OUT, vs comparison TRY IT OUT, abm Start Free Trial, why-flowfuse GET STARTED) in ff-animated-link so they get the animated underline on hover, matching the hero TRY IT OUT and industry CONTACT US. This restores the interaction state they were missing.
The parked Nuxt app's AppHeader/AppFooter still linked to the removed /outcomes/ pages and eight removed use-cases, which the CI link checker flagged across every Nuxt-built page. Remove those links to match the Eleventy nav cleanup.
ZJvandeWeg
reviewed
Jul 23, 2026
| type: sign-up | ||
| title: Manage Node-RED Environment Variables with FlowFuse | ||
| description: FlowFuse makes it easy to set, update, and secure environment variables across all your Node-RED instances and devices — with role-based access control and centralized management from a single dashboard. | ||
| description: FlowFuse makes it easy to set, update, and secure environment variables across all your Node-RED instances and devices, with role-based access control and centralized management from a single dashboard. |
Member
There was a problem hiding this comment.
@dimitrieh Why stage this change? Seems like a distraction?
ZJvandeWeg
reviewed
Jul 23, 2026
| ## Simplify IoT Complexity with FlowFuse’s MIND Stack | ||
|
|
||
| If you’re concerned about managing multiple components in your IoT stack, FlowFuse has you covered. By bundling three of the four core elements of the MING stack—MQTT, Node-RED, and Grafana. FlowFuse simplifies your setup and management. This streamlined approach means fewer moving parts and less complexity, allowing you to focus on what matters most: your data and your applications. | ||
| If you’re concerned about managing multiple components in your IoT stack, FlowFuse has you covered. By bundling three of the four core elements of the MING stack, MQTT, Node-RED, and Grafana. FlowFuse simplifies your setup and management. This streamlined approach means fewer moving parts and less complexity, allowing you to focus on what matters most: your data and your applications. |
Member
There was a problem hiding this comment.
@dimitrieh Why stage this change? Seems like a distraction?
ZJvandeWeg
reviewed
Jul 23, 2026
| deno.lock No newline at end of file | ||
| deno.lock | ||
|
|
||
| # In-repo npm cache and tooling config written by the dev container |
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
2 participants
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.
Holistic proof-of-concept, not intended to be merged as-is. Sharing for feedback. Can be broken out into multiple PRs.
Scope: industry pages (animated video heroes, card images), AI page rebuild (sticky capability sections), site-wide button/nav/footer interaction polish, homepage copy.