Skip to content

Commit 77f485c

Browse files
authored
Merge pull request #3151 from FlowFuse/320-solutions-page-mes
MES Solutions page
2 parents 80e9c31 + 0e07a12 commit 77f485c

6 files changed

Lines changed: 151 additions & 3 deletions

File tree

.eleventy.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ const { EleventyEdgePlugin } = require("@11ty/eleventy");
2626

2727
// Skip slow optimizations when developing i.e. serve/watch or Netlify deploy preview
2828
const DEV_MODE = process.env.ELEVENTY_RUN_MODE !== "build" || process.env.CONTEXT === "deploy-preview" || process.env.SKIP_IMAGES === 'true'
29+
const DEPLOY_PREVIEW = process.env.CONTEXT === "deploy-preview";
2930

3031
module.exports = function(eleventyConfig) {
3132
eleventyConfig.addDataExtension("yaml", contents => yaml.load(contents)); // Add support for YAML data files
@@ -104,6 +105,7 @@ module.exports = function(eleventyConfig) {
104105
// make global accessible in src/_includes/layouts/base.njk for loading of PH scripts
105106
eleventyConfig.addGlobalData('POSTHOG_APIKEY', () => process.env.POSTHOG_APIKEY || '' )
106107
eleventyConfig.addGlobalData('DEV_MODE', () => DEV_MODE || DEV_MODE_POSTS)
108+
eleventyConfig.addGlobalData('deployPreview', DEPLOY_PREVIEW)
107109

108110
// Custom Tooltip "Component"
109111
eleventyConfig.addPairedShortcode("tooltip", function (content, text) {

src/_includes/layouts/base.njk

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -218,10 +218,11 @@ eleventyComputed:
218218
</ul>
219219
{% endnavoption %}
220220
{% navoption "Solutions", null, 0 %}
221-
<ul>
221+
<ul class="sm:grid sm:grid-flow-col sm:grid-rows-3 sm:grid-cols-1 sm:pr-9 align-left">
222222
{% navoption "IT/OT middleware", "/solutions/it-ot-middleware/", 1, "cog" %}{% endnavoption %}
223223
{% navoption "Unified Namespace", "/solutions/uns/", 1, "uns" %}{% endnavoption %}
224224
{% navoption "SCADA", "/solutions/scada/", 1, "adjustments-horizontal" %}{% endnavoption %}
225+
{% navoption "MES", "/solutions/mes/", 1, "chart" %}{% endnavoption %}
225226
{% navoption "Device management", "/solutions/device-management/", 1, "chip" %}{% endnavoption %}
226227
{% navoption "Data integration", "/solutions/data-integration/", 1, "db" %}{% endnavoption %}
227228
</ul>

src/images/solutions/mes-hero.png

74.7 KB
Loading
179 KB
Loading

src/solutions/mes.njk

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
---
2+
layout: page
3+
nohero: true
4+
heroSection:
5+
title: "FlowFuse for <span class='text-indigo-600 inline-block'>your own MES</span>"
6+
image: images/solutions/mes-hero.png
7+
imgAlt: "MES with FlowFuse"
8+
bannerSection:
9+
title: "MES for Modern Industry"
10+
content: "MES systems evolved to manage and monitor manufacturing operations on the shop floor, serving to bridge the gap between enterprise resource planning (ERP) systems and production process management like a SCADA system. Complete, monolithic MES systems are no longer needed. FlowFuse provides the resources that allow you to build and augment the components for the MES system you need, securely and at scale."
11+
howSection:
12+
title: "How it Works"
13+
p1:
14+
- "Monolithic MES systems - think Siemens OpCenter Execution or Rockwell Automation’s Plex - offer MES products that are comprehensive and sophisticated, but also expensive and complex. In contrast, FlowFuse allows you to use <a href='/node-red/'>Node-RED</a>, popular industry protocols, <a href='/integrations/'>integrations</a>, and our resource library to design and deploy applications for a flexible MES solution you want for your business - and nothing more."
15+
- "Here is an example. An MES system is essentially a collection of management functions, like production tracking, resource management, data collection and analysis, and scheduling and dispatching. With FlowFuse, you can build the MES features you want by using Node-RED to create applications for the functions that you need, and none that you don’t."
16+
p2: "Collect data from the shop floor or the lab by using <a href='/integrations/'>FlowFuse Certified Nodes</a> to connect with local machines using any protocol: MQTT, OPC-UA, Modbus, Sparkplug B, and any other protocol that exists now or in the future."
17+
image1: images/home/connect_graphic.png
18+
imageAlt1: "Icons of communication protocols"
19+
image2: images/solutions/oee-dashboard--1.png
20+
imageAlt2: "OEE dashboard"
21+
p3:
22+
- "Create applications in Node-RED to transform your data for analysis and create visualizations that enable your team to make data-driven decisions about your business. Our ever-expanding <a href='/blueprints/'>Blueprints library</a> helps you get started quickly."
23+
- "Because FlowFuse provides management of all of your Node-RED instances in a central place, you can easily monitor your applications whether you're running a dozen instances in a factory or thousands at sites across the globe."
24+
industrySection:
25+
title: "MES for Your Industry"
26+
p1:
27+
- "The MES needs for an automotive plant, a pharmaceutical manufacturer, and an airline are all very distinct - and yet all can (and do) rely on FlowFuse. With the infinite flexibility of Node-RED and the security and scalability of FlowFuse, every kind of industrial operation can operate the MES they need."
28+
- "And with the FlowFuse open source advantage, you can build and implement any Node-RED nodes you need at any time, and securely manage the instances that you create along the way."
29+
whySection:
30+
title: "The FlowFuse <span class='text-red-600'>Advantage</span>"
31+
reasons:
32+
- title: "Built-in adaptation layer"
33+
description: "Leverage the power of Node-RED to design exactly the MES your organization needs."
34+
- title: "End-to-end insight and control"
35+
description: "Everything you need to connect, manage, visualize and analyze your data in one place."
36+
- title: "Limitless connections"
37+
description: "Robust and growing open-source library provides connections for all protocols, all machines, and all devices."
38+
- title: "Rapid implementation"
39+
description: "Get up and running quickly on FlowFuse Cloud."
40+
- title: "Open-source"
41+
description: "Avoid vendor lock-in."
42+
- title: "Low-Code"
43+
description: "Empowering your teams to build custom solutions with ease."
44+
ctaSection:
45+
title: "Ready to build the MES your business needs?"
46+
primaryUrl: "/book-demo/"
47+
primaryCta: "Contact us for Demo"
48+
secondaryUrl: "https://app.flowfuse.com/account/create"
49+
secondaryCta: "Try FlowFuse Now"
50+
meta:
51+
title: "FlowFuse for your own MES"
52+
description: "FlowFuse provides everything you need to build the robust Manufacturing Execution System (MES) you want, providing everything from production tracking to data analysis, with the components you need and the flexibility to customize as you see fit. Powered by Node-RED."
53+
keywords: "FlowFuse, manufacturing, MES, Industry 4.0, Siemens S7, PLC, Sentron"
54+
---
55+
<div class="nohero w-full px-6">
56+
<!--Hero Content-->
57+
<div class="w-full pt-12 pb-20 md:pt-6 md:pb-8">
58+
<div class="md:flex md:my-16 items-center md:flex-row md:justify-between container mx-auto text-center md:text-left md:max-w-screen-lg gap-8">
59+
<div class="my-auto max-md:mx-auto md:w-1/2 lg:w-5/12 max-w-lg">
60+
<h1 class="w-full mt-0 md:px-0 m-auto font-medium">
61+
{{ heroSection.title | safe }}
62+
</h1>
63+
<p class="mb-10 flex-grow">
64+
{{ meta.description }}
65+
</p>
66+
<div class="flex md:hidden justify-center m-auto max-w-[400px] mb-10">
67+
{% set image = ["./", heroSection.image ] | join %}
68+
{% set imageAlt = heroSection.imgAlt %}
69+
{% image image, imageAlt, [400] %}
70+
</div>
71+
<div class="flex gap-3 max-md:max-w-sm max-md:mx-auto max-sm:flex-col max-md:justify-center">
72+
<a class="ff-btn ff-btn--primary min-h-[40px]" href="/contact-us/" onclick="capture('cta-talk-to-an-expert', {'position': 'primary'}, {'page': 'mes'})">TALK TO AN EXPERT</a>
73+
<a class="ff-btn ff-btn--primary-outlined min-h-[40px]" href="https://app.flowfuse.com/account/create" onclick="capture('cta-get-started', {'position': 'primary'}, {'page': 'mes'})">GET STARTED</a>
74+
</div>
75+
</div>
76+
<div class="flex max-md:hidden justify-center m-auto max-w-[550px]">
77+
{% set image = ["./", heroSection.image ] | join %}
78+
{% set imageAlt = heroSection.imgAlt %}
79+
{% image image, imageAlt, [550] %}
80+
</div>
81+
</div>
82+
</div>
83+
<div class="w-full">
84+
<div class="max-w-screen-lg mx-auto">
85+
<!-- Banner - SCADA meets Industry 4.0 -->
86+
<div class="flex md:flex-row flex-col w-full bg-white border-2 border-indigo-200 px-6 py-2 drop-shadow-lg md:gap-6 rounded-lg">
87+
<h2 class="w-full max-sm:mx-auto my-6 text-indigo-400">{{ bannerSection.title | safe }}</span></h2>
88+
<p class="md:max-w-[680px] max-sm:mx-auto">{{ bannerSection.content | safe }}</p>
89+
</div>
90+
<!--How it works-->
91+
<h2 class="mt-16">{{ howSection.title | safe }}</h2>
92+
{% for p in howSection.p1 %}
93+
<p class="w-full max-sm:mx-auto mt-6">{{ p | safe }}</p>
94+
{% endfor %}
95+
<p class="w-full max-sm:mx-auto mt-4">{{ howSection.p2 | safe }}</p>
96+
<div class="mx-auto max-w-[550px] my-12">
97+
{% set image = ["./", howSection.image1 ] | join %}
98+
{% set imageAlt = howSection.imageAlt1 %}
99+
{% image image, imageAlt, [550] %}
100+
</div>
101+
<div class="max-md:order-first">
102+
{% for p in howSection.p3 %}
103+
<p class="w-full max-sm:mx-auto mt-4">{{ p | safe }}</p>
104+
{% endfor %}
105+
</div>
106+
<div class="mx-auto ff-image-rounded p-1 max-md:max-w-[500px] max-md:my-12 md:mt-4 max-md:order-last">
107+
{% if howSection.image2 %}
108+
{% set image = ["./", howSection.image2 ] | join %}
109+
{% set imageAlt = howSection.imageAlt2 %}
110+
{% image image, imageAlt, [1024] %}
111+
{% endif %}
112+
</div>
113+
<!--How it works-->
114+
<h2 class="mt-16">{{ industrySection.title | safe }}</h2>
115+
{% for p in industrySection.p1 %}
116+
<p class="w-full max-sm:mx-auto mt-6">{{ p | safe }}</p>
117+
{% endfor %}
118+
</div>
119+
</div>
120+
</div>
121+
<!--Why FlowFuse-->
122+
<div class="w-full bg-indigo-50/50 py-12 mt-20 px-6">
123+
<div class="max-w-screen-lg mx-auto">
124+
<h2 class="font-bold m-auto w-full text-center sm:text-left mb-12">{{ whySection.title | safe }}</h2>
125+
<div class="w-full grid sm:grid-cols-2 md:grid-cols-3 gap-6 md:gap-8">
126+
{% for reason in whySection.reasons %}
127+
<div class="w-full mt-4 md:mt-0 flex flex-col">
128+
<h4 class="flex justify-center sm:justify-start font-semibold text-gray-500">{{ reason.title }}</h4>
129+
<p class="text-center sm:text-left font-light mt-6 max-sm:max-w-md max-sm:mx-auto">{{ reason.description }}
130+
</p>
131+
</div>
132+
{% endfor %}
133+
</div>
134+
</div>
135+
</div>
136+
<div class="max-md:max-w-xl md:max-w-screen-lg mx-auto max-sm:text-center pt-16 pb-10 px-6 text-lg flex-col flex-row items-center justify-center gap-1 hover:no-underline flex-wrap mb-12">
137+
<!--CTA-->
138+
<div class="ff-blue-card max-sm:max-w-none">
139+
<h4 class="mb-6 w-full text-center">{{ ctaSection.title }}</h4>
140+
<div class="flex max-sm:flex-col max-md:mx-auto gap-3 justify-center">
141+
<a class="ff-btn ff-btn--primary min-h-[40px] uppercase" href="{{ ctaSection.primaryUrl }}" onclick="capture('cta-contact-us-for-demo', {'position': 'secondary'}, {'page': 'mes'})">{{ ctaSection.primaryCta }}</a>
142+
<a class="ff-btn ff-btn--primary-outlined min-h-[40px] uppercase" href="{{ ctaSection.secondaryUrl }}" onclick="capture('cta-try-flowfuse-now', {'position': 'secondary'}, {'page': 'mes'})">{{ ctaSection.secondaryCta }}</a>
143+
</div>
144+
</div>
145+
</div>

src/solutions/scada.njk

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -63,8 +63,8 @@ meta:
6363
{% image image, imageAlt, [400] %}
6464
</div>
6565
<div class="flex gap-3 max-md:max-w-sm max-md:mx-auto max-sm:flex-col max-md:justify-center">
66-
<a class="ff-btn ff-btn--primary min-h-[40px]" href="/contact-us/" onclick="capture('cta-talk-to-an-expert', {'position': 'primary'}, {'page': 'uns'})">TALK TO AN EXPERT</a>
67-
<a class="ff-btn ff-btn--primary-outlined min-h-[40px]" href="https://app.flowfuse.com/account/create" onclick="capture('cta-get-started', {'position': 'primary'}, {'page': 'uns'})">GET STARTED</a>
66+
<a class="ff-btn ff-btn--primary min-h-[40px]" href="/contact-us/" onclick="capture('cta-talk-to-an-expert', {'position': 'primary'}, {'page': 'scada'})">TALK TO AN EXPERT</a>
67+
<a class="ff-btn ff-btn--primary-outlined min-h-[40px]" href="https://app.flowfuse.com/account/create" onclick="capture('cta-get-started', {'position': 'primary'}, {'page': 'scada'})">GET STARTED</a>
6868
</div>
6969
</div>
7070
<div class="flex max-md:hidden justify-center m-auto max-w-[450px]">

0 commit comments

Comments
 (0)