From 2f3f790ac128006f29c5103ac8cf822503f14d49 Mon Sep 17 00:00:00 2001 From: Dimitrie Hoekstra Date: Thu, 28 May 2026 15:25:58 +0200 Subject: [PATCH 1/8] Add Use Cases section (structure only) Skeleton structure for a new Use Cases content shape on the marketing site: - /use-cases/ hub (renders an empty grid until use-case pages land). - New use-case layout with the canonical page anatomy (hero, operational gap, why existing systems did not solve it, the operational workflow, how it is operationalized with FlowFuse, outcomes, related resources). - _template.njk (non-rendered) as a copy-and-rename starting point for per-pattern content PRs. - Reusable related-resources block wired to a usecase:slug tag namespace using existing collection logic. Structure only. No use-case pages yet. No nav changes. No Expert dock. Follow-up PRs targeting this branch will add the dock, the nav entry, and the per-pattern pages with content from sales. --- .eleventy.js | 1 + .../components/related-resources.njk | 56 ++++++ src/_includes/layouts/use-case.njk | 165 ++++++++++++++++++ src/use-cases/_template.njk | 36 ++++ src/use-cases/index.njk | 57 ++++++ 5 files changed, 315 insertions(+) create mode 100644 src/_includes/components/related-resources.njk create mode 100644 src/_includes/layouts/use-case.njk create mode 100644 src/use-cases/_template.njk create mode 100644 src/use-cases/index.njk diff --git a/.eleventy.js b/.eleventy.js index ec50646650..da490491da 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -221,6 +221,7 @@ module.exports = function(eleventyConfig) { eleventyConfig.addLayoutAlias('page', 'layouts/page.njk'); eleventyConfig.addLayoutAlias('nohero', 'layouts/nohero.njk'); eleventyConfig.addLayoutAlias('solution', 'layouts/solution.njk'); + eleventyConfig.addLayoutAlias('use-case', 'layouts/use-case.njk'); eleventyConfig.addLayoutAlias('catalog', 'layouts/catalog.njk'); eleventyConfig.addLayoutAlias('redirect', 'layouts/redirect.njk'); diff --git a/src/_includes/components/related-resources.njk b/src/_includes/components/related-resources.njk new file mode 100644 index 0000000000..33984b912d --- /dev/null +++ b/src/_includes/components/related-resources.njk @@ -0,0 +1,56 @@ +{# ============================================================ + RELATED RESOURCES (skeleton) + Three columns: Case studies / White papers / Blog. + Driven by a tag passed in as `relatedTag` (e.g. "industry:food-beverage" + or "usecase:track-and-trace"). Resources opt in later by adding that tag; + the matching tag collection is then split by section. + No existing customer stories are tagged, so every column renders the + empty "More coming soon" state. + ============================================================ #} +{% set relatedTag = relatedTag or "" %} +{% set tagged = collections[relatedTag] or [] %} + +{% set caseStudies = [] %} +{% set whitepapers = [] %} +{% set blogPosts = [] %} +{% for item in tagged %} + {% if "/customer-stories/" in item.url %} + {% set caseStudies = (caseStudies.push(item), caseStudies) %} + {% elif "/whitepaper/" in item.url %} + {% set whitepapers = (whitepapers.push(item), whitepapers) %} + {% elif "/blog/" in item.url %} + {% set blogPosts = (blogPosts.push(item), blogPosts) %} + {% endif %} +{% endfor %} + +{% set columns = [ + {heading: "Case studies", items: caseStudies}, + {heading: "White papers", items: whitepapers}, + {heading: "Blog", items: blogPosts} +] %} + +
+
+

Related resources

+
+ {% for column in columns %} +
+

{{ column.heading }}

+ {% if column.items.length %} + + {% else %} +
+

More coming soon

+
+ {% endif %} +
+ {% endfor %} +
+
+
diff --git a/src/_includes/layouts/use-case.njk b/src/_includes/layouts/use-case.njk new file mode 100644 index 0000000000..87644f0dbb --- /dev/null +++ b/src/_includes/layouts/use-case.njk @@ -0,0 +1,165 @@ +--- +layout: layouts/base.njk +sitemapPriority: 0.7 +--- +{# ============================================================ + USE CASE LAYOUT (skeleton, generic workflow pattern) + Per-page front-matter: problem, gap[], workflow[], outcomes[]. + Sections 3 and 5 are fixed generic platform positioning. + No customer names, no quotes, no real numbers. + ============================================================ #} + +
+ + +
+
+

Use case

+

{{ title }}

+

{{ problem }}

+
+ Talk to an expert +
+
+
+ + +
+
+

The operational gap

+
+ {% for paragraph in gap %} +

{{ paragraph }}

+ {% endfor %} +
+

Placeholder copy. Generic operational framing for this workflow pattern.

+
+
+ + +
+
+

Why existing systems did not solve it

+ {% set reasons = [ + {title: "MES is too rigid", detail: "Fixed workflows are slow and costly to change as operations evolve."}, + {title: "Dashboards do not act", detail: "Visibility alone does not trigger or coordinate a response."}, + {title: "Historians store but do not orchestrate", detail: "Data is captured for later, not turned into action in the moment."}, + {title: "ERP does not execute", detail: "Business systems plan work but do not run the operational workflow."}, + {title: "AI builds but does not operationalize", detail: "Generated logic still needs governance, deployment and scale."}, + {title: "Scripts do not scale", detail: "One-off scripts are hard to manage, repeat and roll out across sites."} + ] %} +
+ {% for reason in reasons %} +
+
{% include "components/icons/x-circle.svg" %}
+

{{ reason.title }}

+

{{ reason.detail }}

+
+ {% endfor %} +
+
+
+ + +
+
+

The operational workflow

+

A pattern that turns industrial events into action.

+ {% set steps = [ + {label: "Event", icon: "components/icons/bolt.svg", detail: "An industrial event triggers the workflow from a machine, sensor, broker or system signal."}, + {label: "Decision", icon: "components/icons/arrows-right-left.svg", detail: "Event-driven orchestration applies logic, context and rules to decide what should happen."}, + {label: "Action", icon: "components/icons/cursor-arrow-rays.svg", detail: "Guided operator actions and automated steps carry out the response where work happens."} + ] %} +
+ {% for step in steps %} +
+
+
+ {% include step.icon %} +
+ {{ loop.index }} +
+

{{ step.label }}

+

{{ step.detail }}

+
+ {% endfor %} +
+ {% if workflow %} +
    + {% for item in workflow %} +
  • + {% include "components/icons/check.svg" %} + {{ item }} +
    • + {% endfor %} +
+ {% endif %} +
+
+ + +
+
+

How it is operationalized with FlowFuse

+

Generic platform capabilities. No named customer or attributed quotes.

+ {% set ops = [ + {title: "Deployment", detail: "Ship the workflow to cloud, on-premise or edge from one platform."}, + {title: "Governance", detail: "Keep humans in control with approvals and audit trails."}, + {title: "Role-based access", detail: "Scope who can view, edit and deploy across teams."}, + {title: "Version control", detail: "Track changes and roll back safely."}, + {title: "CI/CD pipelines", detail: "Promote from development to test to production."}, + {title: "Multi-site rollout", detail: "Roll the same workflow out to every site in a controlled way."}, + {title: "Reuse", detail: "Package the pattern as a reusable building block."} + ] %} +
+ {% for op in ops %} +
+ + {% include "components/icons/check.svg" %} + +
+
{{ op.title }}
+

{{ op.detail }}

+
+
+ {% endfor %} +
+
+
+ + +
+
+

Outcomes

+
+ {% for outcome in outcomes %} +
+ {% include "components/icons/arrow-trending-up.svg" %} +

{{ outcome }}

+
+ {% endfor %} +
+

Placeholder outcomes. No customer names or real figures.

+
+
+ + + {% set relatedTag = "usecase:" + page.fileSlug %} + {% include "components/related-resources.njk" %} + + +
diff --git a/src/use-cases/_template.njk b/src/use-cases/_template.njk new file mode 100644 index 0000000000..11d6aee0c7 --- /dev/null +++ b/src/use-cases/_template.njk @@ -0,0 +1,36 @@ +--- +# =================================================================== +# Use-case page TEMPLATE. +# +# This file is intentionally NOT rendered (permalink: false) and is +# NOT included in the `use-case` collection. It exists as a copy-and- +# rename starting point for new use-case pages. +# +# To create a new use-case page: +# 1. Copy this file to `src/use-cases/.njk` +# 2. Replace the placeholder values below +# 3. Make sure `tags` keeps `use-case` so the page appears in the +# `/use-cases/` hub grid +# =================================================================== +permalink: false +eleventyExcludeFromCollections: true +layout: use-case +tags: + - use-case +title: "[Use case title]" +meta: + title: "[Use case title] | Use Cases | FlowFuse" + description: "[One-sentence summary of the workflow pattern. Placeholder.]" +problem: "[One short sentence stating the operational problem this pattern addresses. Placeholder.]" +gap: + - "[First paragraph describing the operational gap. Placeholder.]" + - "[Second paragraph. Placeholder.]" +workflow: + - "[First concrete step in the workflow. Placeholder.]" + - "[Second step. Placeholder.]" + - "[Third step. Placeholder.]" +outcomes: + - "[First outcome bullet. Placeholder.]" + - "[Second outcome bullet. Placeholder.]" + - "[Third outcome bullet. Placeholder.]" +--- diff --git a/src/use-cases/index.njk b/src/use-cases/index.njk new file mode 100644 index 0000000000..c7dfb199ec --- /dev/null +++ b/src/use-cases/index.njk @@ -0,0 +1,57 @@ +--- +layout: layouts/base.njk +sitemapPriority: 0.8 +title: "Use Cases" +meta: + title: "Use Cases | FlowFuse" + description: "Generic operational workflow patterns for industrial teams. Turn events into action with FlowFuse. Placeholder skeleton hub." +--- +
+ + +
+
+

Use cases

+

Turn industrial events into action

+

Operational workflow patterns that follow Event, Decision, Action. Explore how each one is operationalized with FlowFuse.

+
+ Talk to an expert +
+
+
+ + +
+
+
+ {% for uc in collections["use-case"] | sort(false, true, "data.title") %} + +

{{ uc.data.title }}

+

{{ uc.data.problem }}

+ + View use case + {% include "components/icons/arrow-right.svg" %} + + + {% endfor %} +
+
+
+ + + {% set relatedTag = "" %} + {% include "components/related-resources.njk" %} + + +
+
+

See it on your workflow

+

Talk to an expert, or get started with FlowFuse today.

+
+ Talk to an expert + Get started +
+
+
+ +
From fb3d230ef8afb30f974ac2c5137e50dbc077042e Mon Sep 17 00:00:00 2001 From: Dimitrie Hoekstra Date: Mon, 1 Jun 2026 19:42:08 +0200 Subject: [PATCH 2/8] Use-case layout: content-driven sections + sticky nav; rich template --- src/_includes/layouts/use-case.njk | 289 ++++++++++++++++++++--------- src/use-cases/_template.njk | 92 +++++++-- 2 files changed, 279 insertions(+), 102 deletions(-) diff --git a/src/_includes/layouts/use-case.njk b/src/_includes/layouts/use-case.njk index 87644f0dbb..0996911bc4 100644 --- a/src/_includes/layouts/use-case.njk +++ b/src/_includes/layouts/use-case.njk @@ -3,12 +3,30 @@ layout: layouts/base.njk sitemapPriority: 0.7 --- {# ============================================================ - USE CASE LAYOUT (skeleton, generic workflow pattern) - Per-page front-matter: problem, gap[], workflow[], outcomes[]. - Sections 3 and 5 are fixed generic platform positioning. - No customer names, no quotes, no real numbers. + USE CASE LAYOUT (content-driven, pain-led narrative) + + Per-page front-matter (rich, preferred): + problem hero sub-headline (the pain in one line) + customerPain { heading, intro[], cards[ {icon,title,detail} ] } + outcomeFirst { heading, intro, dimensions[ {label,title,detail} ] } + whyItMatters { heading, intro, points[ {title,detail} ] } + competition { heading, intro, traps[ {label,title,detail} ] } + comparison { without[ {title,detail} ], with[ {title,detail} ] } + + Legacy fall-back front-matter (simple skeleton, still supported): + gap[], workflow[], outcomes[] + + No customer names and no attributed quotes on the public page. ============================================================ #} +{# --- build the sticky section nav from the blocks that exist --- #} +{% set nav = [] %} +{% if customerPain %}{% set nav = nav.concat([{ id: "customer-pain", label: "Customer Pain" }]) %}{% endif %} +{% if outcomeFirst %}{% set nav = nav.concat([{ id: "outcome-first", label: "Outcome First" }]) %}{% endif %} +{% if whyItMatters %}{% set nav = nav.concat([{ id: "why-it-matters", label: "Why It Matters" }]) %}{% endif %} +{% if competition %}{% set nav = nav.concat([{ id: "competition", label: "Why Off-the-Shelf Fails" }]) %}{% endif %} +{% if comparison %}{% set nav = nav.concat([{ id: "with-without", label: "With / Without FlowFuse" }]) %}{% endif %} +
+ + {% endif %} + + {% if customerPain %} -
+
-

The operational gap

-
- {% for paragraph in gap %} +

01 · Customer pain

+

{{ customerPain.heading }}

+
+ {% for paragraph in customerPain.intro %}

{{ paragraph }}

{% endfor %}
-

Placeholder copy. Generic operational framing for this workflow pattern.

+
+ {% for card in customerPain.cards %} +
+
+ {% include "components/icons/" + card.icon + ".svg" %} +
+

{{ card.title }}

+

{{ card.detail }}

+
+ {% endfor %} +
+ {% endif %} + {% if outcomeFirst %} -
+
-

Why existing systems did not solve it

- {% set reasons = [ - {title: "MES is too rigid", detail: "Fixed workflows are slow and costly to change as operations evolve."}, - {title: "Dashboards do not act", detail: "Visibility alone does not trigger or coordinate a response."}, - {title: "Historians store but do not orchestrate", detail: "Data is captured for later, not turned into action in the moment."}, - {title: "ERP does not execute", detail: "Business systems plan work but do not run the operational workflow."}, - {title: "AI builds but does not operationalize", detail: "Generated logic still needs governance, deployment and scale."}, - {title: "Scripts do not scale", detail: "One-off scripts are hard to manage, repeat and roll out across sites."} - ] %} -
- {% for reason in reasons %} +

02 · Outcome first

+

{{ outcomeFirst.heading }}

+

{{ outcomeFirst.intro }}

+
+ {% for dim in outcomeFirst.dimensions %}
-
{% include "components/icons/x-circle.svg" %}
-

{{ reason.title }}

-

{{ reason.detail }}

+ {{ dim.label }} +

{{ dim.title }}

+

{{ dim.detail }}

{% endfor %}
+ {% endif %} + {% if whyItMatters %} -
+
-

The operational workflow

-

A pattern that turns industrial events into action.

- {% set steps = [ - {label: "Event", icon: "components/icons/bolt.svg", detail: "An industrial event triggers the workflow from a machine, sensor, broker or system signal."}, - {label: "Decision", icon: "components/icons/arrows-right-left.svg", detail: "Event-driven orchestration applies logic, context and rules to decide what should happen."}, - {label: "Action", icon: "components/icons/cursor-arrow-rays.svg", detail: "Guided operator actions and automated steps carry out the response where work happens."} - ] %} -
- {% for step in steps %} -
-
-
- {% include step.icon %} -
- {{ loop.index }} +

03 · Why this is important

+

{{ whyItMatters.heading }}

+

{{ whyItMatters.intro }}

+
+ {% for point in whyItMatters.points %} +
+ {% if loop.index < 10 %}0{% endif %}{{ loop.index }} +
+

{{ point.title }}

+

{{ point.detail }}

-

{{ step.label }}

-

{{ step.detail }}

{% endfor %}
- {% if workflow %} -
    - {% for item in workflow %} -
  • - {% include "components/icons/check.svg" %} - {{ item }} -
    • - {% endfor %} -
- {% endif %}
+ {% endif %} + {% if competition %} -
+
-

How it is operationalized with FlowFuse

-

Generic platform capabilities. No named customer or attributed quotes.

- {% set ops = [ - {title: "Deployment", detail: "Ship the workflow to cloud, on-premise or edge from one platform."}, - {title: "Governance", detail: "Keep humans in control with approvals and audit trails."}, - {title: "Role-based access", detail: "Scope who can view, edit and deploy across teams."}, - {title: "Version control", detail: "Track changes and roll back safely."}, - {title: "CI/CD pipelines", detail: "Promote from development to test to production."}, - {title: "Multi-site rollout", detail: "Roll the same workflow out to every site in a controlled way."}, - {title: "Reuse", detail: "Package the pattern as a reusable building block."} - ] %} -
- {% for op in ops %} -
- - {% include "components/icons/check.svg" %} - -
-
{{ op.title }}
-

{{ op.detail }}

+

04 · Why off-the-shelf doesn't work

+

{{ competition.heading }}

+

{{ competition.intro }}

+
+ {% for trap in competition.traps %} +
+
+ {% include "components/icons/x-circle.svg" %} + {{ trap.label }}
+

{{ trap.title }}

+

{{ trap.detail }}

{% endfor %}
+ {% endif %} + {% if comparison %} -
+
-

Outcomes

-
- {% for outcome in outcomes %} -
- {% include "components/icons/arrow-trending-up.svg" %} -

{{ outcome }}

+

05 · With / without FlowFuse

+
+
+

Without FlowFuse

+
+ {% for row in comparison.without %} +
+ {% include "components/icons/x-mark.svg" %} +
+
{{ row.title }}
+

{{ row.detail }}

+
+
+ {% endfor %} +
+
+
+

With FlowFuse

+
+ {% for row in comparison.with %} +
+ {% include "components/icons/check-circle.svg" %} +
+
{{ row.title }}
+

{{ row.detail }}

+
+
+ {% endfor %} +
- {% endfor %}
-

Placeholder outcomes. No customer names or real figures.

+ {% endif %} + + {# ============================================================ + LEGACY SKELETON FALL-BACK (only when no rich blocks defined) + ============================================================ #} + {% if not nav.length %} + {% if gap %} +
+
+

The operational gap

+
+ {% for paragraph in gap %} +

{{ paragraph }}

+ {% endfor %} +
+

Placeholder copy. Generic operational framing for this workflow pattern.

+
+
+ {% endif %} + {% if workflow %} +
+
+

The operational workflow

+
    + {% for item in workflow %} +
  • + {% include "components/icons/check.svg" %} + {{ item }} +
    • + {% endfor %} +
+
+
+ {% endif %} + {% if outcomes %} +
+
+

Outcomes

+
+ {% for outcome in outcomes %} +
+ {% include "components/icons/arrow-trending-up.svg" %} +

{{ outcome }}

+
+ {% endfor %} +
+

Placeholder outcomes. No customer names or real figures.

+
+
+ {% endif %} + {% endif %} {% set relatedTag = "usecase:" + page.fileSlug %} {% include "components/related-resources.njk" %} - + +
+
+

See it on your operation

+

Talk to an expert, or get started with FlowFuse today.

+
+ Talk to an expert + Get started +
+
+
+
diff --git a/src/use-cases/_template.njk b/src/use-cases/_template.njk index 11d6aee0c7..a4240e01d7 100644 --- a/src/use-cases/_template.njk +++ b/src/use-cases/_template.njk @@ -11,6 +11,14 @@ # 2. Replace the placeholder values below # 3. Make sure `tags` keeps `use-case` so the page appears in the # `/use-cases/` hub grid +# +# The layout renders a pain-led narrative from the rich blocks below +# (customerPain, outcomeFirst, whyItMatters, competition, comparison) +# plus a sticky section nav. Every block is optional: a section only +# renders when its block is present. Keep copy generic, with no +# customer names and no attributed quotes. +# +# Icon names refer to files in src/_includes/components/icons/. # =================================================================== permalink: false eleventyExcludeFromCollections: true @@ -20,17 +28,75 @@ tags: title: "[Use case title]" meta: title: "[Use case title] | Use Cases | FlowFuse" - description: "[One-sentence summary of the workflow pattern. Placeholder.]" -problem: "[One short sentence stating the operational problem this pattern addresses. Placeholder.]" -gap: - - "[First paragraph describing the operational gap. Placeholder.]" - - "[Second paragraph. Placeholder.]" -workflow: - - "[First concrete step in the workflow. Placeholder.]" - - "[Second step. Placeholder.]" - - "[Third step. Placeholder.]" -outcomes: - - "[First outcome bullet. Placeholder.]" - - "[Second outcome bullet. Placeholder.]" - - "[Third outcome bullet. Placeholder.]" + description: "[One-sentence summary of the use case. Placeholder.]" +problem: "[The pain in one line. This is the hero sub-headline. Placeholder.]" + +# 01 -- Customer pain +customerPain: + heading: "[One-line statement of the core pain.]" + intro: + - "[First framing paragraph.]" + - "[Second framing paragraph.]" + cards: + - icon: "clock" + title: "[Pain symptom.]" + detail: "[One or two sentences.]" + - icon: "clip-list" + title: "[Pain symptom.]" + detail: "[One or two sentences.]" + +# 02 -- Outcome first +outcomeFirst: + heading: "[Reframe around the outcome the buyer defines.]" + intro: "[Why there is no one-size-fits-all answer.]" + dimensions: + - label: "Operational" + title: "[Outcome.]" + detail: "[One or two sentences.]" + - label: "Financial" + title: "[Outcome.]" + detail: "[One or two sentences.]" + +# 03 -- Why this is important +whyItMatters: + heading: "[Why the gap compounds if left unaddressed.]" + intro: "[One framing sentence.]" + points: + - title: "[Reason.]" + detail: "[One or two sentences.]" + - title: "[Reason.]" + detail: "[One or two sentences.]" + +# 04 -- Why off-the-shelf / competition does not work +competition: + heading: "[Why generic tools fit this operation poorly.]" + intro: "[One framing sentence.]" + traps: + - label: "Trap 01" + title: "[Trap.]" + detail: "[One or two sentences.]" + - label: "Trap 02" + title: "[Trap.]" + detail: "[One or two sentences.]" + +# 05 -- With / without FlowFuse +comparison: + without: + - title: "[Status quo pain.]" + detail: "[One or two sentences.]" + with: + - title: "[FlowFuse capability.]" + detail: "[One or two sentences.]" + +# --------------------------------------------------------------- +# Legacy minimal fall-back (still supported). If you only set these +# and omit the rich blocks above, the layout renders a simple +# gap / workflow / outcomes skeleton instead. +# --------------------------------------------------------------- +# gap: +# - "[Paragraph.]" +# workflow: +# - "[Step.]" +# outcomes: +# - "[Outcome.]" --- From dc5833a5ae90c0da868d8c3871332402f161ccc2 Mon Sep 17 00:00:00 2001 From: Dimitrie Hoekstra Date: Mon, 1 Jun 2026 19:42:34 +0200 Subject: [PATCH 3/8] Add Production Monitoring use case page --- src/use-cases/production-monitoring.njk | 125 ++++++++++++++++++++++++ 1 file changed, 125 insertions(+) create mode 100644 src/use-cases/production-monitoring.njk diff --git a/src/use-cases/production-monitoring.njk b/src/use-cases/production-monitoring.njk new file mode 100644 index 0000000000..ec2615d447 --- /dev/null +++ b/src/use-cases/production-monitoring.njk @@ -0,0 +1,125 @@ +--- +layout: use-case +tags: + - use-case +title: "Production Monitoring" +meta: + title: "Production Monitoring | Use Cases | FlowFuse" + description: "Real-time visibility into what your production lines are actually doing. Build the monitoring app your operation needs with FlowFuse and Node-RED: connect any protocol, deploy at the edge or in the cloud, and roll out across sites." +problem: "Your operation is running. You just can't see it clearly enough, until something breaks." + +customerPain: + heading: "Visibility gaps are expensive." + intro: + - "Production teams know their lines are running. What they don't always know is how well, until a supervisor walks the floor, a shift report lands, or a machine stops." + - "By then, the window to intervene is gone. Decisions get made on lag, instinct, and tribal knowledge instead of data." + - "The pain isn't unique to any one industry. It surfaces wherever machines produce output and humans are responsible for the result." + cards: + - icon: "clock" + title: "Reactive firefighting" + detail: "Problems are discovered after the fact, via alarms, operator reports, or finished-goods inspection. The response is always late." + - icon: "clip-list" + title: "Manual data collection" + detail: "Operators log counts, cycle times, and downtime events by hand. Numbers are inconsistent, delayed, and disconnected from the actual machine record." + - icon: "link-slash" + title: "Data that doesn't talk" + detail: "PLCs, SCADA, MES, and ERP each hold a piece of the picture. Nobody has connected them. Each system speaks a different protocol." + - icon: "chart" + title: "Reporting built on stale data" + detail: "Shift summaries and OEE reports tell you what happened yesterday. Nobody is watching what is happening now." + +outcomeFirst: + heading: "Define what \"monitored\" means for your operation." + intro: "There is no universal production monitoring app, because every operation measures success differently. The value FlowFuse delivers isn't a fixed dashboard. It is the ability to build exactly the one your operation needs." + dimensions: + - label: "Operational" + title: "Know what every line is producing, right now" + detail: "Live counts, cycle times, and throughput visible to anyone who needs them, from the floor to the control room." + - label: "Financial" + title: "Turn downtime from a cost center into a managed metric" + detail: "When you can see and categorize downtime events as they happen, you can act on them, and start reducing them systematically." + - label: "Organizational" + title: "Replace floor walks with live visibility" + detail: "Supervisors and engineers spend less time gathering data and more time acting on it. The floor reports to them, not the other way around." + - label: "Quality" + title: "Catch deviations before they become defects" + detail: "Monitoring process conditions in real time means anomalies surface early, before they have run through a full batch or shift." + - label: "Strategic" + title: "Build a data foundation you actually own" + detail: "Contextualized, historian-backed production data that feeds into MES, ERP, or AI tools, on your terms, not a vendor's." + - label: "Flexibility" + title: "Start where the pain is, scale from there" + detail: "One line, one shift, one KPI. Prove value fast, then expand. You are not locked into a one-size-fits-all deployment model." + +whyItMatters: + heading: "Blind production is a compounding liability." + intro: "Every hour a line runs without real-time visibility, the cost of the gap grows, not just in lost output, but in the decisions that never got made." + points: + - title: "Downtime is under-reported by design" + detail: "Manual logging creates pressure to minimize recorded stops. The real downtime picture is almost always worse than the data shows, which means improvement programs are built on a false baseline." + - title: "Reactive maintenance costs more than planned" + detail: "When you can't see a machine degrading, you can't schedule around it. You respond to failures instead of preventing them, and pay the premium every time." + - title: "OEE without live data is a lagging indicator" + detail: "A shift report tells you your OEE was 68%. Live monitoring tells you it dropped to 51% at 10:42 and you can still do something about it." + - title: "Digitization pressure isn't going away" + detail: "Customer requirements, ESG commitments, and internal efficiency mandates all require production data. The longer it takes to build the foundation, the further behind you fall." + - title: "The talent that knows your machines is leaving" + detail: "Experienced operators carry decades of institutional knowledge. Without a system to capture and surface what they know, that knowledge walks out the door at retirement." + +competition: + heading: "Your operation isn't a template." + intro: "Off-the-shelf monitoring platforms are built to fit the widest possible audience, which means they fit your specific operation poorly. You end up adapting your processes to the tool, not the other way around." + traps: + - label: "Trap 01" + title: "Rigid data models that don't match your machines" + detail: "Pre-built solutions assume standard signals, standard naming conventions, and standard equipment hierarchies. Your PLC speaks Siemens S7. Your historian uses a custom tag structure built in 2009. The integration becomes a months-long professional-services engagement, if it is even possible." + - label: "Trap 02" + title: "One dashboard for everyone means optimal for no one" + detail: "The shift supervisor needs a line overview. The maintenance engineer needs trend data on a specific axis. The plant manager needs a KPI roll-up. Off-the-shelf tools offer one fixed view, or an expensive configuration layer to build the others." + - label: "Trap 03" + title: "Time-to-value measured in quarters, not weeks" + detail: "Configuration, data mapping, and integration scoping turn into a professional-services engagement that drags on. The pilot budget runs out before anyone sees a working dashboard, and the project quietly stalls before it ever proves value." + - label: "Trap 04" + title: "Deployment models built for greenfield, not the shop floor" + detail: "Cloud-first SaaS tools were not designed for air-gapped networks, aging edge hardware, or mixed OT/IT environments where every change requires a change-management process. Getting them deployed takes longer than the pilot budget allows." + +comparison: + without: + - title: "Visibility on a delay" + detail: "Production status comes from shift reports, floor walks, and end-of-day summaries. By the time you know something went wrong, the shift is over." + - title: "Integrations that never close" + detail: "Every protocol difference, every legacy PLC, every proprietary historian adds months to a monitoring project. Most stall in pilot." + - title: "Apps built for someone else's operation" + detail: "The vendor's dashboard shows what they thought you would want to see. Your real KPIs live in a spreadsheet someone updates manually every morning." + - title: "IT projects that outpace OT readiness" + detail: "Cloud-native tools land in environments that were not built for them. Security reviews, network changes, and change management consume the timeline." + - title: "One site at a time, forever" + detail: "Even if a monitoring app works well in one facility, replicating it means rebuilding it. Nothing transfers. Every deployment is a new project." + with: + - title: "Live production data, where you need it" + detail: "Node-RED flows collect, contextualize, and surface machine data in real time, on the floor, in the control room, or wherever your team works." + - title: "Connect anything, regardless of protocol" + detail: "OPC-UA, Modbus, S7, MQTT, REST: Node-RED speaks them all. FlowFuse manages the infrastructure so your integrations stay running." + - title: "Build the app your operation actually needs" + detail: "FlowFuse Dashboard gives your team the tools to build purpose-fit interfaces, without a dedicated front-end developer or a six-figure SI engagement." + - title: "Runs at the edge, in the cloud, or both" + detail: "Deploy the Device Agent on existing edge hardware. Run instances in FlowFuse Cloud. Mix and match based on what your network allows." + - title: "Snapshot, replicate, and roll out at scale" + detail: "Once your monitoring app works on one line, FlowFuse lets you snapshot it and push it across every site, with environment-specific variables, centrally managed. Built on open Node-RED, the foundation stays yours." +--- +{# + INTERNAL, NOT RENDERED. Marketing guidance for the next content pass. + + Sections 6 to 10 still to be built: + - Lead with a crawl/walk/run framing: one line, one data source, one KPI, + building to multi-site. Avoid a big-bang deployment tone. + - Show how we do it: 2 to 3 reference flows from the Pulse flows JSON + (data collection, dashboard logic, alerting). Screenshots or embedded + flow diagrams work here. + - FlowFuse expert enablement: link certified nodes (OPC-UA, S7, MQTT), + Dashboard docs, and SE-led workshop content. + - Customer success / credibility: case study or sanitized reference + (e.g. "global automotive manufacturer") rather than a blank page. + - SEO aliasing: this same buyer pain also reads as "Machine Monitoring", + "Line Visibility", "OEE Tracking", "Real-Time Production Intelligence". +#} From b906f49121f6c4c8ffba8c31749c9f12f09fce30 Mon Sep 17 00:00:00 2001 From: Yndira-E Date: Wed, 3 Jun 2026 16:56:40 +0200 Subject: [PATCH 4/8] Add resources --- .../components/related-resources.njk | 35 +++--- src/_includes/layouts/use-case.njk | 10 +- .../building-oee-dashboard-with-flowfuse-2.md | 2 + ...ding-oee-dashboard-with-flowfuse-part-1.md | 2 + .../05/building-andon-task-manager-with-ff.md | 2 + ...reventive-maintenance-equipment-failure.md | 2 + .../11/building-hmi-for-equipment-control.md | 2 + ...fixing-oee-measurement-in-manufacturing.md | 2 + .../manufacturing-digital-transformation.md | 2 + ...ions-while-maintaining-competitive-edge.md | 2 + ...-manufacturing-automation-with-flowfuse.md | 2 + ...ns-with-flowfuse-dashboard-for-node-red.md | 2 + src/use-cases/_template.njk | 102 ------------------ src/use-cases/production-monitoring.njk | 3 - src/use-cases/use-cases.json | 6 ++ 15 files changed, 48 insertions(+), 128 deletions(-) delete mode 100644 src/use-cases/_template.njk create mode 100644 src/use-cases/use-cases.json diff --git a/src/_includes/components/related-resources.njk b/src/_includes/components/related-resources.njk index 33984b912d..9dea7522fd 100644 --- a/src/_includes/components/related-resources.njk +++ b/src/_includes/components/related-resources.njk @@ -1,31 +1,30 @@ {# ============================================================ - RELATED RESOURCES (skeleton) - Three columns: Case studies / White papers / Blog. - Driven by a tag passed in as `relatedTag` (e.g. "industry:food-beverage" - or "usecase:track-and-trace"). Resources opt in later by adding that tag; - the matching tag collection is then split by section. - No existing customer stories are tagged, so every column renders the - empty "More coming soon" state. + RELATED RESOURCES + Three columns: Case studies / eBooks and Whitepapers / Blog. + Content opts in via a dedicated front matter field: + usecase: + - production-monitoring + The layout passes `useCaseSlug` (e.g. "production-monitoring"). ============================================================ #} -{% set relatedTag = relatedTag or "" %} -{% set tagged = collections[relatedTag] or [] %} {% set caseStudies = [] %} {% set whitepapers = [] %} {% set blogPosts = [] %} -{% for item in tagged %} - {% if "/customer-stories/" in item.url %} - {% set caseStudies = (caseStudies.push(item), caseStudies) %} - {% elif "/whitepaper/" in item.url %} - {% set whitepapers = (whitepapers.push(item), whitepapers) %} - {% elif "/blog/" in item.url %} - {% set blogPosts = (blogPosts.push(item), blogPosts) %} +{% for item in collections.all %} + {% if item.data.usecase and useCaseSlug in item.data.usecase %} + {% if "/customer-stories/" in item.url %} + {% set caseStudies = (caseStudies.push(item), caseStudies) %} + {% elif "/ebooks/" in item.url or "/whitepaper/" in item.url %} + {% set whitepapers = (whitepapers.push(item), whitepapers) %} + {% elif "/blog/" in item.url %} + {% set blogPosts = (blogPosts.push(item), blogPosts) %} + {% endif %} {% endif %} {% endfor %} {% set columns = [ {heading: "Case studies", items: caseStudies}, - {heading: "White papers", items: whitepapers}, + {heading: "eBooks and Whitepapers", items: whitepapers}, {heading: "Blog", items: blogPosts} ] %} @@ -40,7 +39,7 @@ diff --git a/src/_includes/layouts/use-case.njk b/src/_includes/layouts/use-case.njk index 0996911bc4..a14ea06d24 100644 --- a/src/_includes/layouts/use-case.njk +++ b/src/_includes/layouts/use-case.njk @@ -38,7 +38,7 @@ sitemapPriority: 0.7

{{ title }}

{{ problem }}

- Talk to an expert + Talk to an expert
@@ -256,7 +256,7 @@ sitemapPriority: 0.7 - {% set relatedTag = "usecase:" + page.fileSlug %} + {% set useCaseSlug = page.fileSlug %} {% include "components/related-resources.njk" %}
-

See it on your operation

-

Talk to an expert, or get started with FlowFuse today.

+

{{ closingCta.heading or "See it on your operations" }}

+

{{ closingCta.description or "Talk to an expert, or get started with FlowFuse today." }}

- Talk to an expert + Talk to an expert Get started
diff --git a/src/blog/2025/04/building-oee-dashboard-with-flowfuse-2.md b/src/blog/2025/04/building-oee-dashboard-with-flowfuse-2.md index 5a3d21fcd6..f31d6f4dcc 100644 --- a/src/blog/2025/04/building-oee-dashboard-with-flowfuse-2.md +++ b/src/blog/2025/04/building-oee-dashboard-with-flowfuse-2.md @@ -3,6 +3,8 @@ title: "Part 2: Building an OEE Dashboard with FlowFuse" subtitle: Step-by-step guide to building your own OEE Dashboard. description: Learn how to build an OEE Dashboard using FlowFuse Dashboard (Node-RED Dashboard 2.0). This step-by-step guide covers data collection, OEE calculations, and dashboard creation with simulated production and downtime data. date: 2025-04-09 +usecase: + - production-monitoring authors: ["sumit-shinde"] image: /blog/2025/04/images/oee-dashboard-buildig-ff-2.png keywords: free oee dashboard, oee dashboard free, building oee dashboard, node-red oee dashboard, flowfuse oee dashboard diff --git a/src/blog/2025/04/building-oee-dashboard-with-flowfuse-part-1.md b/src/blog/2025/04/building-oee-dashboard-with-flowfuse-part-1.md index 9c5e0e8343..11b5603743 100644 --- a/src/blog/2025/04/building-oee-dashboard-with-flowfuse-part-1.md +++ b/src/blog/2025/04/building-oee-dashboard-with-flowfuse-part-1.md @@ -3,6 +3,8 @@ title: "Part 1: Building an OEE Dashboard with FlowFuse" subtitle: Defining OEE and Planning an Effective Dashboard description: Create an OEE dashboard with FlowFuse to track equipment performance, optimize efficiency, and gain real-time production insights date: 2025-04-01 +usecase: + - production-monitoring authors: ["sumit-shinde"] image: /blog/2025/04/images/building-oee-dashboard-part1.png keywords: free oee dashboard, oee dashboard free, building oee dashboard, node-red oee dashboard, flowfuse oee dashboard diff --git a/src/blog/2025/05/building-andon-task-manager-with-ff.md b/src/blog/2025/05/building-andon-task-manager-with-ff.md index 42fd2f6567..f91ec54470 100644 --- a/src/blog/2025/05/building-andon-task-manager-with-ff.md +++ b/src/blog/2025/05/building-andon-task-manager-with-ff.md @@ -3,6 +3,8 @@ title: "Part 1: Building an Andon Task Manager with FlowFuse" subtitle: Build a real-time Andon Task Manager with FlowFuse and Node-RED, covering key features, dashboard design, and data storage. description: Learn how to build a real-time Andon Task Manager using FlowFuse and Node-RED. This step-by-step guide covers request tracking, dashboard design, and data storage with SQLite and context storage. date: 2025-05-08 +usecase: + - production-monitoring authors: ["sumit-shinde"] image: /blog/2025/05/images/Building-an-Andon-Task-Manager-with-FlowFuse-1.png keywords: free andon task manager dashboard, andon task manager free, building andon task manager, node-red andon task manager, flowfuse andon task manager diff --git a/src/blog/2025/09/preventive-maintenance-equipment-failure.md b/src/blog/2025/09/preventive-maintenance-equipment-failure.md index 8c18c4390c..ea8eb630e7 100644 --- a/src/blog/2025/09/preventive-maintenance-equipment-failure.md +++ b/src/blog/2025/09/preventive-maintenance-equipment-failure.md @@ -3,6 +3,8 @@ title: "Preventive Maintenance in Manufacturing: Avoid Multi-Million Dollar Equi subtitle: "How industrial data platforms are turning equipment failures from crisis events into predictable, manageable costs" description: "Unplanned downtime costs manufacturers millions. Learn how preventive maintenance software and data platforms like FlowFuse cut failures, boost OEE, and deliver lasting ROI." date: 2025-09-04 +usecase: + - production-monitoring authors: ["sumit-shinde"] image: /blog/2025/09/images/preventive-maintenance-blog.png keywords: preventive maintenance, predictive maintenance, maintenance software, equipment monitoring, industrial data platforms, manufacturing downtime, OEE improvement diff --git a/src/blog/2025/11/building-hmi-for-equipment-control.md b/src/blog/2025/11/building-hmi-for-equipment-control.md index fe3d028e68..b04e2ed8a7 100644 --- a/src/blog/2025/11/building-hmi-for-equipment-control.md +++ b/src/blog/2025/11/building-hmi-for-equipment-control.md @@ -3,6 +3,8 @@ title: "Building a Web HMI for Factory Equipment Control" subtitle: "Create web-based operator interfaces for industrial equipment" description: "Build a modern HMI using FlowFuse to monitor and control factory equipment from any browser" date: 2025-11-19 +usecase: + - production-monitoring keywords: FlowFuse, web HMI, PLC control, Node-RED dashboard, industrial automation, edge device, MQTT, factory monitoring, SCADA alternative, remote equipment control authors: ["sumit-shinde"] image: /blog/2025/11/images/building-a-web-hmi-for-factory.png diff --git a/src/blog/2026/05/fixing-oee-measurement-in-manufacturing.md b/src/blog/2026/05/fixing-oee-measurement-in-manufacturing.md index de494a81c6..8bc6a26050 100644 --- a/src/blog/2026/05/fixing-oee-measurement-in-manufacturing.md +++ b/src/blog/2026/05/fixing-oee-measurement-in-manufacturing.md @@ -3,6 +3,8 @@ title: "OEE Is Misleading Your Factory — Here's How to Fix It" subtitle: "Why the OEE score on your dashboard does not match what is happening on the floor." description: "Most factories measure OEE wrong. Manual logs miss small stops, definitions drift, and operators game the score. A practical look at what to do about it." date: 2026-05-07 +usecase: + - production-monitoring keywords: authors: ["sumit-shinde"] image: /blog/2026/05/images/oee-is-misleading.png diff --git a/src/customer-stories/manufacturing-digital-transformation.md b/src/customer-stories/manufacturing-digital-transformation.md index 4abd5cba56..5c183ce23f 100644 --- a/src/customer-stories/manufacturing-digital-transformation.md +++ b/src/customer-stories/manufacturing-digital-transformation.md @@ -3,6 +3,8 @@ title: Node-RED Enables Digital Transformation of a Large US Manufacturing Compa description: Read how a US manufacturing giant uses Node-RED and FlowFuse for digital transformation, deploying thousands of instances to boost operational efficiency and innovation. image: /images/stories/large-us-manufacturing.jpg date: 2023-05-04 +usecase: + - production-monitoring logo: hubspot: formId: 826044fa-9760-4f47-84d0-bfe0234f1fa7 diff --git a/src/customer-stories/scaling-industrial-iot-operations-while-maintaining-competitive-edge.md b/src/customer-stories/scaling-industrial-iot-operations-while-maintaining-competitive-edge.md index b2ad90957a..59caa4c004 100644 --- a/src/customer-stories/scaling-industrial-iot-operations-while-maintaining-competitive-edge.md +++ b/src/customer-stories/scaling-industrial-iot-operations-while-maintaining-competitive-edge.md @@ -3,6 +3,8 @@ title: Scaling Industrial IoT Operations While Maintaining Competitive Edge description: Discover how Walter built a future-proof industrial application platform with FlowFuse—connecting machines, unifying data, and scaling operations without increasing IT overhead. image: /images/stories/walter.png date: 2025-12-16 +usecase: + - production-monitoring logo: hubspot: formId: 1cab86cb-5c81-40ab-be4b-a6ae94f38ac8 diff --git a/src/customer-stories/scaling-manufacturing-automation-with-flowfuse.md b/src/customer-stories/scaling-manufacturing-automation-with-flowfuse.md index 4ed014f1b2..8439158c98 100644 --- a/src/customer-stories/scaling-manufacturing-automation-with-flowfuse.md +++ b/src/customer-stories/scaling-manufacturing-automation-with-flowfuse.md @@ -3,6 +3,8 @@ title: Scaling Manufacturing Automation with FlowFuse description: Arch Systems leverages FlowFuse and Node-RED to integrate MES systems, automate 100+ databases, and deliver scalable, real-time manufacturing data processing. image: /images/stories/arch_systems.jpeg date: 2025-09-29 +usecase: + - production-monitoring logo: hubspot: formId: ef56a0ea-7b50-4eed-b6aa-cf5421233e03 diff --git a/src/ebooks/ultimate-guide-to-building-applications-with-flowfuse-dashboard-for-node-red.md b/src/ebooks/ultimate-guide-to-building-applications-with-flowfuse-dashboard-for-node-red.md index 2f4c205220..9a71dda75f 100644 --- a/src/ebooks/ultimate-guide-to-building-applications-with-flowfuse-dashboard-for-node-red.md +++ b/src/ebooks/ultimate-guide-to-building-applications-with-flowfuse-dashboard-for-node-red.md @@ -9,6 +9,8 @@ meta: title: The Ultimate Guide to Building Applications with FlowFuse Dashboard for Node-RED description: Discover the power of the FlowFuse Dashboard for Node-RED with our comprehensive eBook. Learn how to effortlessly create stunning UIs, from data charts to custom components, and enable collaborative full-stack application development. Ideal for developers of all levels, this guide unlocks the potential of your data in industrial IoT environments. Keywords: FlowFuse Dashboard, Node-RED Dashboard, Dashboard 2.0, IoT dashboard creation, Low-code platform, Data visualization, UI development, Industrial IoT, Dashboard design +usecase: + - production-monitoring hubspot: formId: 372e557c-9f90-48e8-81da-d7e462f8ef55 cta: "download-ebook" diff --git a/src/use-cases/_template.njk b/src/use-cases/_template.njk deleted file mode 100644 index a4240e01d7..0000000000 --- a/src/use-cases/_template.njk +++ /dev/null @@ -1,102 +0,0 @@ ---- -# =================================================================== -# Use-case page TEMPLATE. -# -# This file is intentionally NOT rendered (permalink: false) and is -# NOT included in the `use-case` collection. It exists as a copy-and- -# rename starting point for new use-case pages. -# -# To create a new use-case page: -# 1. Copy this file to `src/use-cases/.njk` -# 2. Replace the placeholder values below -# 3. Make sure `tags` keeps `use-case` so the page appears in the -# `/use-cases/` hub grid -# -# The layout renders a pain-led narrative from the rich blocks below -# (customerPain, outcomeFirst, whyItMatters, competition, comparison) -# plus a sticky section nav. Every block is optional: a section only -# renders when its block is present. Keep copy generic, with no -# customer names and no attributed quotes. -# -# Icon names refer to files in src/_includes/components/icons/. -# =================================================================== -permalink: false -eleventyExcludeFromCollections: true -layout: use-case -tags: - - use-case -title: "[Use case title]" -meta: - title: "[Use case title] | Use Cases | FlowFuse" - description: "[One-sentence summary of the use case. Placeholder.]" -problem: "[The pain in one line. This is the hero sub-headline. Placeholder.]" - -# 01 -- Customer pain -customerPain: - heading: "[One-line statement of the core pain.]" - intro: - - "[First framing paragraph.]" - - "[Second framing paragraph.]" - cards: - - icon: "clock" - title: "[Pain symptom.]" - detail: "[One or two sentences.]" - - icon: "clip-list" - title: "[Pain symptom.]" - detail: "[One or two sentences.]" - -# 02 -- Outcome first -outcomeFirst: - heading: "[Reframe around the outcome the buyer defines.]" - intro: "[Why there is no one-size-fits-all answer.]" - dimensions: - - label: "Operational" - title: "[Outcome.]" - detail: "[One or two sentences.]" - - label: "Financial" - title: "[Outcome.]" - detail: "[One or two sentences.]" - -# 03 -- Why this is important -whyItMatters: - heading: "[Why the gap compounds if left unaddressed.]" - intro: "[One framing sentence.]" - points: - - title: "[Reason.]" - detail: "[One or two sentences.]" - - title: "[Reason.]" - detail: "[One or two sentences.]" - -# 04 -- Why off-the-shelf / competition does not work -competition: - heading: "[Why generic tools fit this operation poorly.]" - intro: "[One framing sentence.]" - traps: - - label: "Trap 01" - title: "[Trap.]" - detail: "[One or two sentences.]" - - label: "Trap 02" - title: "[Trap.]" - detail: "[One or two sentences.]" - -# 05 -- With / without FlowFuse -comparison: - without: - - title: "[Status quo pain.]" - detail: "[One or two sentences.]" - with: - - title: "[FlowFuse capability.]" - detail: "[One or two sentences.]" - -# --------------------------------------------------------------- -# Legacy minimal fall-back (still supported). If you only set these -# and omit the rich blocks above, the layout renders a simple -# gap / workflow / outcomes skeleton instead. -# --------------------------------------------------------------- -# gap: -# - "[Paragraph.]" -# workflow: -# - "[Step.]" -# outcomes: -# - "[Outcome.]" ---- diff --git a/src/use-cases/production-monitoring.njk b/src/use-cases/production-monitoring.njk index ec2615d447..668729842a 100644 --- a/src/use-cases/production-monitoring.njk +++ b/src/use-cases/production-monitoring.njk @@ -1,7 +1,4 @@ --- -layout: use-case -tags: - - use-case title: "Production Monitoring" meta: title: "Production Monitoring | Use Cases | FlowFuse" diff --git a/src/use-cases/use-cases.json b/src/use-cases/use-cases.json new file mode 100644 index 0000000000..eab4d428f3 --- /dev/null +++ b/src/use-cases/use-cases.json @@ -0,0 +1,6 @@ +{ + "layout": "use-case", + "tags": [ + "use-case" + ] +} From 240edf1de51a2d076ef3d0e9e6df8f5b1c38e7d2 Mon Sep 17 00:00:00 2001 From: Yndira-E Date: Wed, 3 Jun 2026 17:08:17 +0200 Subject: [PATCH 5/8] Add solutions under /use-cases --- src/solutions/data-integration.njk | 1 + src/solutions/edge-connectivity.njk | 1 + src/solutions/it-ot-middleware.njk | 3 ++- src/solutions/mes.njk | 2 ++ src/solutions/scada.njk | 2 ++ src/solutions/solutions.json | 6 ++++++ src/solutions/uns.njk | 2 ++ src/{use-cases/index.njk => use-cases.njk} | 0 8 files changed, 16 insertions(+), 1 deletion(-) create mode 100644 src/solutions/solutions.json rename src/{use-cases/index.njk => use-cases.njk} (100%) diff --git a/src/solutions/data-integration.njk b/src/solutions/data-integration.njk index dcbd9cc086..e858816613 100644 --- a/src/solutions/data-integration.njk +++ b/src/solutions/data-integration.njk @@ -1,6 +1,7 @@ --- layout: solution title: FlowFuse for Data Integration +problem: "Collect, transform, and route data from any industrial source to any destination — without writing integration code from scratch." image: /images/solutions/og-solutions-data-integration.jpg subtitle: heroImg: ./images/pictograms/data_integration_blue.png diff --git a/src/solutions/edge-connectivity.njk b/src/solutions/edge-connectivity.njk index d7fd864a55..45d7386ba8 100644 --- a/src/solutions/edge-connectivity.njk +++ b/src/solutions/edge-connectivity.njk @@ -1,6 +1,7 @@ --- layout: solution title: FlowFuse for Edge Connectivity +problem: "Deploy and manage Node-RED instances on edge hardware at scale — from a single pane of glass, without touching each device." image: /images/solutions/og-solutions-edge-connectivity.jpg subtitle: heroImg: ./images/pictograms/edge_blue.png diff --git a/src/solutions/it-ot-middleware.njk b/src/solutions/it-ot-middleware.njk index 67a6ad1bf5..e85e5ae475 100644 --- a/src/solutions/it-ot-middleware.njk +++ b/src/solutions/it-ot-middleware.njk @@ -1,6 +1,7 @@ --- layout: solution -title: FlowFuse for IT/OT Integration +title: FlowFuse for IT/OT Integration +problem: "Bridge OT protocols and IT systems with low-code flows. Connect PLCs, SCADA, and historians to ERP, databases, and cloud services." subtitle: FlowFuse allows teams to automate their manufacturing process through customized, reliable applications. meta: keywords: "FlowFuse, Manufacturing, Automation, DevOps, Integration, OT, IT, Data, Visualization, Event Triggers, Fleet Management, Monitoring, Collaborative Development, Environment, Application Deployment, Professional Support" diff --git a/src/solutions/mes.njk b/src/solutions/mes.njk index d241aef11c..baae6e61bb 100644 --- a/src/solutions/mes.njk +++ b/src/solutions/mes.njk @@ -1,5 +1,7 @@ --- layout: page +title: "FlowFuse for MES" +problem: "Build exactly the MES your operation needs — compose modular execution, tracking, and reporting flows without a monolithic vendor platform." nohero: true heroSection: title: "FlowFuse for your own MES" diff --git a/src/solutions/scada.njk b/src/solutions/scada.njk index 1565633ee6..793ae8b1f0 100644 --- a/src/solutions/scada.njk +++ b/src/solutions/scada.njk @@ -1,5 +1,7 @@ --- layout: page +title: "FlowFuse for SCADA" +problem: "Modernize SCADA with low-code flows that connect legacy hardware, stream real-time data, and drive dashboards and alerts from a single platform." nohero: true heroSection: title: "FlowFuse for SCADA" diff --git a/src/solutions/solutions.json b/src/solutions/solutions.json new file mode 100644 index 0000000000..0f2981f3f7 --- /dev/null +++ b/src/solutions/solutions.json @@ -0,0 +1,6 @@ +{ + "tags": [ + "solution", + "use-case" + ] +} diff --git a/src/solutions/uns.njk b/src/solutions/uns.njk index 0b39db0e52..5110a691c2 100644 --- a/src/solutions/uns.njk +++ b/src/solutions/uns.njk @@ -1,5 +1,7 @@ --- layout: page +title: "FlowFuse for UNS" +problem: "Adopt a Unified Namespace without ripping out existing infrastructure. FlowFuse connects producers and consumers through MQTT with low-code flows." nohero: true meta: title: "FlowFuse for the Unified Namespace" diff --git a/src/use-cases/index.njk b/src/use-cases.njk similarity index 100% rename from src/use-cases/index.njk rename to src/use-cases.njk From b6942cb8026a6926a12ff4ee310e33fe47529735 Mon Sep 17 00:00:00 2001 From: Yndira-E Date: Fri, 5 Jun 2026 17:22:22 +0200 Subject: [PATCH 6/8] Update style --- src/_includes/layouts/use-case.njk | 12 ++++++------ src/use-cases.njk | 12 ++++-------- 2 files changed, 10 insertions(+), 14 deletions(-) diff --git a/src/_includes/layouts/use-case.njk b/src/_includes/layouts/use-case.njk index a14ea06d24..7e50b4cb4f 100644 --- a/src/_includes/layouts/use-case.njk +++ b/src/_includes/layouts/use-case.njk @@ -34,7 +34,7 @@ sitemapPriority: 0.7 ============================================================ -->
-

Use case

+

Use case

{{ title }}

{{ problem }}

@@ -69,7 +69,7 @@ sitemapPriority: 0.7 ============================================================ -->
-

01 · Customer pain

+

01 · Customer pain

{{ customerPain.heading }}

{% for paragraph in customerPain.intro %} @@ -97,7 +97,7 @@ sitemapPriority: 0.7 ============================================================ -->
-

02 · Outcome first

+

02 · Outcome first

{{ outcomeFirst.heading }}

{{ outcomeFirst.intro }}

@@ -119,7 +119,7 @@ sitemapPriority: 0.7 ============================================================ -->
-

03 · Why this is important

+

03 · Why this is important

{{ whyItMatters.heading }}

{{ whyItMatters.intro }}

@@ -143,7 +143,7 @@ sitemapPriority: 0.7 ============================================================ -->
-

04 · Why off-the-shelf doesn't work

+

04 · Why off-the-shelf doesn't work

{{ competition.heading }}

{{ competition.intro }}

@@ -168,7 +168,7 @@ sitemapPriority: 0.7 ============================================================ -->
-

05 · With / without FlowFuse

+

05 · With / without FlowFuse

Without FlowFuse

diff --git a/src/use-cases.njk b/src/use-cases.njk index c7dfb199ec..05953a9b38 100644 --- a/src/use-cases.njk +++ b/src/use-cases.njk @@ -3,7 +3,7 @@ layout: layouts/base.njk sitemapPriority: 0.8 title: "Use Cases" meta: - title: "Use Cases | FlowFuse" + title: "Use Cases" description: "Generic operational workflow patterns for industrial teams. Turn events into action with FlowFuse. Placeholder skeleton hub." ---
@@ -11,7 +11,7 @@ meta:
-

Use cases

+

Use cases

Turn industrial events into action

Operational workflow patterns that follow Event, Decision, Action. Explore how each one is operationalized with FlowFuse.

@@ -25,7 +25,7 @@ meta:
{% for uc in collections["use-case"] | sort(false, true, "data.title") %} - +

{{ uc.data.title }}

{{ uc.data.problem }}

@@ -38,15 +38,11 @@ meta:
- - {% set relatedTag = "" %} - {% include "components/related-resources.njk" %} -

See it on your workflow

-

Talk to an expert, or get started with FlowFuse today.

+

Talk to an expert, or get started with FlowFuse today.

Talk to an expert Get started From 66995703019b55bcb83675a44b935e73123695af Mon Sep 17 00:00:00 2001 From: Yndira-E Date: Fri, 5 Jun 2026 17:30:51 +0200 Subject: [PATCH 7/8] Move solutions to use cases --- src/_data/features.json | 2 +- src/_includes/layouts/base.njk | 12 ++++++------ src/index.njk | 6 +++--- src/landing/plc.njk | 2 +- src/llms.njk | 12 ++++++------ src/node-red/index.njk | 2 +- src/platform/features.njk | 4 ++-- src/redirects.njk | 12 +++++++++--- src/solutions/solutions.json | 6 ------ .../data-integration.njk | 0 .../edge-connectivity.njk | 0 .../it-ot-middleware.njk | 0 src/{solutions => use-cases}/mes.njk | 0 src/use-cases/production-monitoring.njk | 16 ---------------- src/{solutions => use-cases}/scada.njk | 0 src/{solutions => use-cases}/uns.njk | 0 16 files changed, 29 insertions(+), 45 deletions(-) delete mode 100644 src/solutions/solutions.json rename src/{solutions => use-cases}/data-integration.njk (100%) rename src/{solutions => use-cases}/edge-connectivity.njk (100%) rename src/{solutions => use-cases}/it-ot-middleware.njk (100%) rename src/{solutions => use-cases}/mes.njk (100%) rename src/{solutions => use-cases}/scada.njk (100%) rename src/{solutions => use-cases}/uns.njk (100%) diff --git a/src/_data/features.json b/src/_data/features.json index 3a7421c16b..d0bf64f557 100644 --- a/src/_data/features.json +++ b/src/_data/features.json @@ -30,7 +30,7 @@ "imageFolder": "./images/pictograms/", "imageFile": "edge_blue.png", "imageAlt": " edge management.", - "content": "FlowFuse allows you to deploy and manage Node-RED instances out to edge devices. This allows you to deploy the exact same instance out to hundreds or thousands of edge devices and monitor their status." + "content": "FlowFuse allows you to deploy and manage Node-RED instances out to edge devices. This allows you to deploy the exact same instance out to hundreds or thousands of edge devices and monitor their status." },{ "title": "Software Delivery Pipelines", "imageFolder": "./images/pictograms/", diff --git a/src/_includes/layouts/base.njk b/src/_includes/layouts/base.njk index f0dcab4a67..e1ced99a2b 100644 --- a/src/_includes/layouts/base.njk +++ b/src/_includes/layouts/base.njk @@ -219,12 +219,12 @@ eleventyComputed: {% navoption "By Use Case", null, 1, null, true, "pl-3 title border-l-2 sm:col-start-2 sm:row-start-1" %}{% endnavoption %}
    • - {% navoption "IT/OT middleware", "/solutions/it-ot-middleware/", 1, "cog" %}{% endnavoption %} - {% navoption "Unified Namespace", "/solutions/uns/", 1, "uns" %}{% endnavoption %} - {% navoption "SCADA", "/solutions/scada/", 1, "adjustments-horizontal" %}{% endnavoption %} - {% navoption "MES", "/solutions/mes/", 1, "chart" %}{% endnavoption %} - {% navoption "Edge Connectivity", "/solutions/edge-connectivity/", 1, "chip" %}{% endnavoption %} - {% navoption "Data integration", "/solutions/data-integration/", 1, "db" %}{% endnavoption %} + {% navoption "IT/OT middleware", "/use-cases/it-ot-middleware/", 1, "cog" %}{% endnavoption %} + {% navoption "Unified Namespace", "/use-cases/uns/", 1, "uns" %}{% endnavoption %} + {% navoption "SCADA", "/use-cases/scada/", 1, "adjustments-horizontal" %}{% endnavoption %} + {% navoption "MES", "/use-cases/mes/", 1, "chart" %}{% endnavoption %} + {% navoption "Edge Connectivity", "/use-cases/edge-connectivity/", 1, "chip" %}{% endnavoption %} + {% navoption "Data integration", "/use-cases/data-integration/", 1, "db" %}{% endnavoption %}
    • diff --git a/src/index.njk b/src/index.njk index 3f0a14ae53..490cd76b80 100644 --- a/src/index.njk +++ b/src/index.njk @@ -28,19 +28,19 @@ capabilities: imagePath: "images/home/home-dashboard.png" imageAlt: "FlowFuse Dashboard" solutions: - - href: "/solutions/it-ot-middleware/" + - href: "/use-cases/it-ot-middleware/" image: "./images/home/home-itot-middleware.png" imageAlt: "Image of workers on a factory shop floor with desks, computers and dashboards on the screen" icon: "components/icons/cog.svg" title: "IT/OT Middleware" description: "Connect disparate systems and industrial protocols with a unified platform. Accelerate development and enable seamless collaboration between IT and OT teams to optimize real-time data flow." - - href: "/solutions/scada/" + - href: "/use-cases/scada/" image: "./images/home/home-scada.png" imageAlt: "Image of a woman working on a computer with industrial dashboards on the screen in industrial environment" icon: "components/icons/adjustments-horizontal.svg" title: "SCADA" description: "Modernize your SCADA systems with a modular and flexible platform. Build custom interfaces and control logic in a fraction of the time, gaining full visibility of your operations in an agile and secure way." - - href: "/solutions/mes/" + - href: "/use-cases/mes/" image: "./images/home/home-mes.png" imageAlt: "A factory centrally connected with various devices and systems" icon: "components/icons/chart.svg" diff --git a/src/landing/plc.njk b/src/landing/plc.njk index 0290f91532..bf534cbc54 100644 --- a/src/landing/plc.njk +++ b/src/landing/plc.njk @@ -322,7 +322,7 @@ resources:

    Use FlowFuse as the adapter layer between your PLCs and an MQTT-based UNS. Normalize data from Siemens, Allen-Bradley, and legacy equipment into a common topic hierarchy.

    - Learn about UNS → + Learn about UNS →
    diff --git a/src/llms.njk b/src/llms.njk index a8736c275e..dab82d2fb5 100644 --- a/src/llms.njk +++ b/src/llms.njk @@ -21,12 +21,12 @@ eleventyExcludeFromCollections: true ## Solutions -- [IT/OT Middleware]({{ site.baseURL }}/solutions/it-ot-middleware/): Connect industrial systems with enterprise IT -- [Edge Connectivity]({{ site.baseURL }}/solutions/edge-connectivity/): Manage Node-RED at the edge -- [Data Integration]({{ site.baseURL }}/solutions/data-integration/): Integrate industrial and enterprise data sources -- [Unified Namespace (UNS)]({{ site.baseURL }}/solutions/uns/): UNS architecture with Node-RED and FlowFuse -- [MES]({{ site.baseURL }}/solutions/mes/): Manufacturing Execution Systems integration -- [SCADA]({{ site.baseURL }}/solutions/scada/): SCADA modernization with Node-RED +- [IT/OT Middleware]({{ site.baseURL }}/use-cases/it-ot-middleware/): Connect industrial systems with enterprise IT +- [Edge Connectivity]({{ site.baseURL }}/use-cases/edge-connectivity/): Manage Node-RED at the edge +- [Data Integration]({{ site.baseURL }}/use-cases/data-integration/): Integrate industrial and enterprise data sources +- [Unified Namespace (UNS)]({{ site.baseURL }}/use-cases/uns/): UNS architecture with Node-RED and FlowFuse +- [MES]({{ site.baseURL }}/use-cases/mes/): Manufacturing Execution Systems integration +- [SCADA]({{ site.baseURL }}/use-cases/scada/): SCADA modernization with Node-RED ## Platform diff --git a/src/node-red/index.njk b/src/node-red/index.njk index b91664927e..2e48218f65 100644 --- a/src/node-red/index.njk +++ b/src/node-red/index.njk @@ -21,7 +21,7 @@ meta: answer: > Node-RED can be used for a wide variety of use cases, including:
      -
    • The manufacturing industry uses Node-RED for collecting data from different pieces of factory equipment.
      • +
    • The manufacturing industry uses Node-RED for collecting data from different pieces of factory equipment.
    • Creating dashboards that visualize data and allow for event triggers to occur based on the data.
    • Developing chatbot platforms that can collect interactions of a wide variety of social media platforms.
    • Extract, transform and integrate data from many different sources in the enterprise.
      • diff --git a/src/platform/features.njk b/src/platform/features.njk index f7511facb8..74b791febe 100644 --- a/src/platform/features.njk +++ b/src/platform/features.njk @@ -73,7 +73,7 @@ hubspot: svgPath: "components/icons/arrows.svg", image1: "./images/home/connect_graphic.png", image1Alt: "Icons of communication protocols", - url: "/solutions/edge-connectivity/" + url: "/use-cases/edge-connectivity/" }, { title: "Collect & Transform", @@ -81,7 +81,7 @@ hubspot: svgPath: "components/icons/data-block.svg", image1: "./images/home/collect_graphic.png", image1Alt: "Icons of files formats", - url: "/solutions/data-integration/" + url: "/use-cases/data-integration/" }, { title: "Visualise", diff --git a/src/redirects.njk b/src/redirects.njk index f607a851c2..c44dc67b0d 100644 --- a/src/redirects.njk +++ b/src/redirects.njk @@ -85,13 +85,13 @@ eleventyExcludeFromCollections: true /blog/2024/09/using-amqp-with-node-red/ /node-red/protocol/amqp/ 301 /blog/2024/08/using-lwm2m-with-node-red/ /node-red/protocol/lwm2m/ 301 /blog/2024/07/sending-and-receiving-discord-messages-with-node-red/ /node-red/notification/discord/ 301 -/unified-namespace/ /solutions/uns/ 301 -/solutions/manufacturing/ /solutions/it-ot-middleware/ 301 +/unified-namespace/ /use-cases/uns/ 301 +/solutions/manufacturing/ /use-cases/it-ot-middleware/ 301 /node-red/protocol/opa-ua/ /node-red/protocol/opc-ua/ 301 /blog/2024/11/mqtt-common-pitfalls-industrial-data-operations/ /blog/2024/11/getting-the-most-out-of-mqtt-for-industrial-iot 301 /handbook/customer/sales/subscription-agreement-1.5/ /handbook/sales/subscription-agreement-1.5/ 301 /platform/cloud/ https://app.flowfuse.com/account/create/ 301 -/solutions/device-management/ /solutions/edge-connectivity/ 301 +/solutions/device-management/ /use-cases/edge-connectivity/ 301 /blueprints/manufacturing/andon-task/ /blueprints/manufacturing/andon-system/ 301 /landing/technology-migration-1/ /vs/kepware/ 301 /landing/technology-migration-2/ /vs/kepware/ 301 @@ -134,5 +134,11 @@ eleventyExcludeFromCollections: true /handbook/development/releases/dashboard-2/ /handbook/engineering/releases/dashboard-2/ /handbook/development/releases/process/ /handbook/engineering/releases/process/ /handbook/development/releases/digital-ocean/ /handbook/engineering/releases/digital-ocean/ +/solutions/data-integration/ /use-cases/data-integration/ 301 +/solutions/edge-connectivity/ /use-cases/edge-connectivity/ 301 +/solutions/it-ot-middleware/ /use-cases/it-ot-middleware/ 301 +/solutions/mes/ /use-cases/mes/ 301 +/solutions/scada/ /use-cases/scada/ 301 +/solutions/uns/ /use-cases/uns/ 301 /certified-nodes/ /integrations/?certified=1 301 /certified-nodes/* /integrations/?certified=1 301 diff --git a/src/solutions/solutions.json b/src/solutions/solutions.json deleted file mode 100644 index 0f2981f3f7..0000000000 --- a/src/solutions/solutions.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "tags": [ - "solution", - "use-case" - ] -} diff --git a/src/solutions/data-integration.njk b/src/use-cases/data-integration.njk similarity index 100% rename from src/solutions/data-integration.njk rename to src/use-cases/data-integration.njk diff --git a/src/solutions/edge-connectivity.njk b/src/use-cases/edge-connectivity.njk similarity index 100% rename from src/solutions/edge-connectivity.njk rename to src/use-cases/edge-connectivity.njk diff --git a/src/solutions/it-ot-middleware.njk b/src/use-cases/it-ot-middleware.njk similarity index 100% rename from src/solutions/it-ot-middleware.njk rename to src/use-cases/it-ot-middleware.njk diff --git a/src/solutions/mes.njk b/src/use-cases/mes.njk similarity index 100% rename from src/solutions/mes.njk rename to src/use-cases/mes.njk diff --git a/src/use-cases/production-monitoring.njk b/src/use-cases/production-monitoring.njk index 668729842a..2d9476c006 100644 --- a/src/use-cases/production-monitoring.njk +++ b/src/use-cases/production-monitoring.njk @@ -104,19 +104,3 @@ comparison: - title: "Snapshot, replicate, and roll out at scale" detail: "Once your monitoring app works on one line, FlowFuse lets you snapshot it and push it across every site, with environment-specific variables, centrally managed. Built on open Node-RED, the foundation stays yours." --- -{# - INTERNAL, NOT RENDERED. Marketing guidance for the next content pass. - - Sections 6 to 10 still to be built: - - Lead with a crawl/walk/run framing: one line, one data source, one KPI, - building to multi-site. Avoid a big-bang deployment tone. - - Show how we do it: 2 to 3 reference flows from the Pulse flows JSON - (data collection, dashboard logic, alerting). Screenshots or embedded - flow diagrams work here. - - FlowFuse expert enablement: link certified nodes (OPC-UA, S7, MQTT), - Dashboard docs, and SE-led workshop content. - - Customer success / credibility: case study or sanitized reference - (e.g. "global automotive manufacturer") rather than a blank page. - - SEO aliasing: this same buyer pain also reads as "Machine Monitoring", - "Line Visibility", "OEE Tracking", "Real-Time Production Intelligence". -#} diff --git a/src/solutions/scada.njk b/src/use-cases/scada.njk similarity index 100% rename from src/solutions/scada.njk rename to src/use-cases/scada.njk diff --git a/src/solutions/uns.njk b/src/use-cases/uns.njk similarity index 100% rename from src/solutions/uns.njk rename to src/use-cases/uns.njk From f631acbf2f5ecb67720a4bbf7038f2c1ca99a2d7 Mon Sep 17 00:00:00 2001 From: Yndira-E Date: Fri, 5 Jun 2026 18:25:24 +0200 Subject: [PATCH 8/8] Update main nav --- nuxt/components/AppHeader.vue | 18 +++++++++--------- .../components/icons/wind-turbine.svg | 12 ++++++++++-- src/_includes/layouts/base.njk | 6 +++--- 3 files changed, 22 insertions(+), 14 deletions(-) diff --git a/nuxt/components/AppHeader.vue b/nuxt/components/AppHeader.vue index a109055823..56d99e91b4 100644 --- a/nuxt/components/AppHeader.vue +++ b/nuxt/components/AppHeader.vue @@ -148,16 +148,16 @@ onMounted(() => {
    • By Industry
    • By Use Case
    @@ -195,7 +195,7 @@ onMounted(() => { @@ -205,7 +205,7 @@ onMounted(() => { Sign In Free Trial
    - Talk to Us + Contact Us
    diff --git a/src/_includes/components/icons/wind-turbine.svg b/src/_includes/components/icons/wind-turbine.svg index 370902f3ed..4a4e3104f9 100644 --- a/src/_includes/components/icons/wind-turbine.svg +++ b/src/_includes/components/icons/wind-turbine.svg @@ -1,3 +1,11 @@ - - + + + + + + + + + + diff --git a/src/_includes/layouts/base.njk b/src/_includes/layouts/base.njk index e1ced99a2b..af71b47612 100644 --- a/src/_includes/layouts/base.njk +++ b/src/_includes/layouts/base.njk @@ -218,13 +218,13 @@ eleventyComputed: {% navoption "By Use Case", null, 1, null, true, "pl-3 title border-l-2 sm:col-start-2 sm:row-start-1" %}{% endnavoption %}
  • -
      +
        + {% navoption "Production Monitoring", "/use-cases/production-monitoring/", 1, "pulse" %}{% endnavoption %} {% navoption "IT/OT middleware", "/use-cases/it-ot-middleware/", 1, "cog" %}{% endnavoption %} {% navoption "Unified Namespace", "/use-cases/uns/", 1, "uns" %}{% endnavoption %} - {% navoption "SCADA", "/use-cases/scada/", 1, "adjustments-horizontal" %}{% endnavoption %} {% navoption "MES", "/use-cases/mes/", 1, "chart" %}{% endnavoption %} {% navoption "Edge Connectivity", "/use-cases/edge-connectivity/", 1, "chip" %}{% endnavoption %} - {% navoption "Data integration", "/use-cases/data-integration/", 1, "db" %}{% endnavoption %} + {% navoption "See all use cases", "/use-cases/", 1, "arrow-right" %}{% endnavoption %}