New page on why flowforge

src/_data/reasons.json

@@ -0,0 +1,28 @@
+[{
+    "title": "Hosted Node-RED - Easy to get started, easier to maintain",
+    "content": "FlowFuse Cloud takes care of running Node-RED for you. No more messing around with Docker containers, upgrading to new releases, keeping your Node-RED running, we take care of it for you.",
+    "videoid": "Ec4yvcvGmu8"
+  },
+  {
+    "title": "Multiple Node-RED Instances from one place",
+    "content": "FlowFuse allows you to create multiple Node-RED instances and manage them in one place. Gone are the days of trying to coordinate Node-RED installations, or multitude of tabs. Finally Node-RED allows for serious application development.",
+    "videoid": "KOnQnR7yfT0"
+  },
+  {
+    "title": "Version control your Node-RED flows",
+    "content": "Who hasn't made changes to a Node-RED flow but regret not exporting the previous version? FlowFuse has built in version control. You can create snapshots of your instance that can be rolled back at any time.",
+    "videoid": "m2Onip4Lf4w"
+  },
+  {
+    "title": "Team development",
+    "content": "Node-RED is an amazing productivity tool for an individual engineer. However, doing any type of collaborative development with colleagues is very difficult. FlowFuse allows for team development on the same Node-RED instances.",
+    "videoid": "HCUDQvBI9JU"
+  },
+  {
+    "title": "Development Pipelines",
+    "content": "In modern software development, best practices are that you set up stages of the development process to streamline development, test and production, often called pipelines. FlowFuse allows you to set up pipelines for your Node-RED development."
+  },
+  {
+    "title": "Remote device management",
+    "content": "Many people are using Node-RED to aggregate and analyze data from remote devices. However, Node-RED is really meant for running locally or in the cloud. FlowFuse breaks down the barriers to remote device management by providing a central platform that can manage hundreds of devices running Node-RED. A great way to scale up your use of Node-RED in your organization."
+  }]

src/_includes/layouts/base.njk

@@ -115,6 +115,7 @@
                         {% navoption "pricing", "/pricing", 0 %}{% endnavoption %}
                         {% navoption "product", null, 0 %}
                             <ul>
+                                {% navoption "why FlowFuse?", "/product/why-flowfuse", 1, "light-bulb" %}{% endnavoption %}
                                 {% navoption "features", "/features", 1, "star" %}{% endnavoption %}
                                 {% navoption "roadmap", "/product/roadmap", 1, "map" %}{% endnavoption %}
                                 {% navoption "customer stories", "/customer-stories", 1, "presentation" %}{% endnavoption %}

src/product/why-flowfuse.njk

@@ -0,0 +1,39 @@
+---
+layout: layouts/page.njk
+title: Why FlowFuse?
+description:
+    <p>Node-RED is a great low-code visual programming tool. FlowFuse adds to standard Node-RED to make it even better.</p>
+image:
+---
+<div class="mt-12">
+    {% include "components/divider-flow--top-red--light.njk" %}
+</div>
+<div class="about w-full ff-bg-light pb-14 md:pt-6 -mt-1 pb-20">
+    <div class="container m-auto max-w-none sm:max-w-lg md:max-w-5xl flex flex-col gap-y-8">
+        {% for item in reasons %}
+            <div class="relative w-full p-6 m-auto">
+                <div class="absolute {% if loop.index is odd %}bottom-4 left-4{% else %}top-4 right-4{% endif %} bg-red-600 w-48 h-32 rounded-md z-0"></div>
+                <div class="flex flex-col md:flex-row{% if loop.index is even %}-reverse{% endif %} gap-6 items-center z-10 bg-white rounded drop-shadow-md px-8 pt-6 pb-8 md:py-6 md:justify-between">
+                    <div class="md:w-1/2 pt-4">
+                        <div class="flex flex-row gap-3 items-center">
+                            <div class="min-w-[60px] h-20 text-7xl bg-red-600 text-gray-50 text-center font-bold px-1 rounded pt-1">{{ loop.index }}</div>
+                            <h4><div class="font-medium leading-tight pt-1">{{ item.title }}</div></h4>
+                        </div>
+                        <p>{{ item.content }}</p>
+                    </div>
+                    <div class="md:w-1/2 flex justify-center">
+                        {% if item.videoid %}
+                        <lite-youtube videoid="{{ item.videoid }}" style="background-image: url('../../images/why-ff/why-ff-{{ loop.index }}.jpg'); width: 444px;" class="border-2 border-gray-800 rounded-md w-full max-w-sm md:max-w-none sm:max-h-full"></lite-youtube>
+                        {% else %}
+                        <div class="border-2 border-gray-800 rounded-md w-full max-w-sm md:max-w-none sm:max-h-full">
+                            {% set imageSrc = ['./images/why-ff/why-ff-', loop.index, '.jpg'] | join %}
+                            {% set imageDescription = ['Image depicting', item.title] | join %}
+                            {% image imageSrc, imageDescription, [444] %}
+                        </div>
+                        {% endif %}                        
+                    </div>
+                </div>
+            </div>
+        {% endfor %}
+    </div>
+</div>