diff --git a/.eleventy.js b/.eleventy.js index f9b28d6f71..ac251b91fb 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..0996911bc4 --- /dev/null +++ b/src/_includes/layouts/use-case.njk @@ -0,0 +1,276 @@ +--- +layout: layouts/base.njk +sitemapPriority: 0.7 +--- +{# ============================================================ + 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 %} + +
+ + +
+
+

Use case

+

{{ title }}

+

{{ problem }}

+
+ Talk to an expert +
+
+
+ + {% if nav.length %} + + + {% endif %} + + {% if customerPain %} + +
+
+

01 · Customer pain

+

{{ customerPain.heading }}

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

{{ paragraph }}

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

{{ card.title }}

+

{{ card.detail }}

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

02 · Outcome first

+

{{ outcomeFirst.heading }}

+

{{ outcomeFirst.intro }}

+
+ {% for dim in outcomeFirst.dimensions %} +
+ {{ dim.label }} +

{{ dim.title }}

+

{{ dim.detail }}

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

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 }}

+
+
+ {% endfor %} +
+
+
+ {% endif %} + + {% if competition %} + +
+
+

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 %} + +
+
+

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 %} +
+
+
+
+
+ {% 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 new file mode 100644 index 0000000000..a4240e01d7 --- /dev/null +++ b/src/use-cases/_template.njk @@ -0,0 +1,102 @@ +--- +# =================================================================== +# 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/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 +
+
+
+ +
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". +#}