New page on why flowforge

src/_data/reasons.json

@@ -0,0 +1,20 @@
+[{
+    "title": "Hosted Node-RED - Easy to get started, easier to maintain",
+    "content": "FlowForge 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": "K4xw09DbSdI"
+  },
+  {
+    "title": "Multiple Node-RED Instances from one place",
+    "content": "FlowForge 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": "K4xw09DbSdI"
+  },
+  {
+    "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? FlowForge has built in version control. You can create snapshots of your instance that can be rolled back at any time.",
+    "videoid": "K4xw09DbSdI"
+  },
+  {
+    "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. FlowForge allows for team development on the same Node-RED instances. ",
+    "videoid": "K4xw09DbSdI"
+  }]

src/why-flowfuse.njk

@@ -0,0 +1,31 @@
+---
+layout: layouts/page.njk
+title: Why FlowFuse?
+description:
+    <p>Lorem ipsum dolor sit amet consectetur. Est id morbi nascetur tortor id donec tellus arcu enim. Leo dolor montes sapien quam. Pellentesque a purus parturient egestas quis nibh est.</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 odd %}-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">
+                        <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>
+                    </div>
+                </div>
+            </div>
+        {% endfor %}
+    </div>
+</div>