Merge pull request #1264 from FlowFuse/1148-professional-services-web…

…site-page

src/_includes/layouts/base.njk

@@ -129,11 +129,12 @@
                             </ul>
                         {% endnavoption %}
                         {% navoption "company", null, 0 %}
-                            <ul class="grid grid-cols-2 sm:grid-rows-5 sm:grid-flow-col">
+                            <ul class="grid grid-cols-2 sm:grid-rows-6 sm:grid-flow-col">
                                 {% navoption "about", "/about/", 1, "info" %}{% endnavoption %}
                                 {% navoption "blog", "/blog/", 1, "newspaper" %}{% endnavoption %}
                                 {% navoption "changelog", "/changelog/", 1, "cog" %}{% endnavoption %}
                                 {% navoption "partners", "/partners/", 1, "puzzle-piece" %}{% endnavoption %}
+                                {% navoption "professional services", "/professional-services/", 1, "academic-cap" %}{% endnavoption %}
                                 {% navoption "team", "/team/", 1, "users" %}{% endnavoption %}
                                 {% navoption "handbook", "/handbook/", 1, "star" %}{% endnavoption %}
                                 {% navoption "jobs", "https://boards.greenhouse.io/flowfuse", 1, "case" %}{% endnavoption %}

src/css/style.css

@@ -387,6 +387,11 @@ h4:hover .header-anchor {
     width: 100%;
 }
 
+.ff-image-rounded img,
+.ff-image-rounded picture {
+    @apply rounded-lg;
+}
+
 /*
     Header
 */

src/professional-services.njk

@@ -0,0 +1,68 @@
+---
+align: center
+layout: layouts/page.njk
+title: Professional Services
+description: <p>FlowFuse partners with our customers to ensure their successful deployment of FlowFuse and Node-RED. Discover our professional service offerings.</p>
+---
+<div class="text-left max-w-full ff-bg-light">
+  <div class="w-full pt-10 md:pt-12 px-0 ff-prose">
+    <div class="m-auto max-w-4xl">
+      <div class="flex px-6 flex-col gap-6 md:gap-x-12 gap-y-14">
+        <div class="flex flex-col md:flex-row gap-8 items-center">
+          <div class="sm:max-h-none md:min-w-[40%] max-w-[340px] ff-image-cover ff-image-rounded mx-auto">
+            {% image "./images/services/engineering-and-architecture-services.png", "Image of hands typing on laptop working on Node-RED flows", [357] %}
+          </div>
+          <div class="prose">
+            <h3 class="flex items-center">
+              <div class="flex flex-col leading-8 mt-3 text-center md:text-left w-full">
+                Engineering and Architecture Services
+              </div>
+            </h3>
+            <p class="mb-0">
+              FlowFuse employees are experts in Node-RED development. We can help your team create Node-RED flows that meet your requirements or we can conduct an architecture review of existing flows to align with Node-RED best practices. Flow engineering is available to Enterprise tier customers of FlowFuse.
+            </p>
+          </div>
+        </div>  
+        <div class="flex flex-col md:flex-row-reverse gap-8 items-center pb-6 md:pb-0">
+          <div class="sm:max-h-none md:min-w-[40%] max-w-[340px] ff-image-cover ff-image-rounded mx-auto">
+            {% image "./images/services/training.png", "Image of two people working together", [357] %}
+          </div>
+          <div class="prose">
+            <h3 class="flex items-center">
+              <div class="flex flex-col leading-8 mt-3 text-center md:text-left w-full">
+                Education and Training
+              </div>
+            </h3>
+            <p class="mb-0">
+              FlowFuse offers Node-RED and FlowFuse in-person and online courses for engineers, architects and managers. Our structured approach to training can be customized to fit your unique requirements.
+            </p>
+          </div>
+        </div>  
+      </div>
+    </div>
+    <div class="text-white">
+      {% include "components/dividers/divider-flow--top-grey.svg" %}
+    </div>
+    <div class="w-full bg-white pt-0 px-0 pb-24 ff-prose">
+      <div class="text-center m-auto pt-10 md:pt-8 mb-6 md:mb-12 md:max-w-xl px-6">
+        <h2>Contact us</h2>
+        <p>Reach out to discuss how FlowFuse experts can help with your FlowFuse and Node-RED projects.</p>
+      </div>
+      <div class="container m-auto md:max-w-xl prose">
+        <div class="px-6 mb-16">
+          <script src="https://www.google.com/recaptcha/api.js"></script>
+          <script>
+            function displayHubSpotForm() {
+              hbspt.forms.create({
+                region: "eu1",
+                portalId: "26586079",
+                formId: "b8ae3144-7eb2-4f5a-a9f8-f99e5c7bb07f"
+              });
+            }
+          </script>
+          <script async type="text/javascript" charset="utf-8" src="//js-eu1.hsforms.net/forms/embed/v2.js"
+            onload="displayHubSpotForm()"></script>
+        </div>
+      </div>
+    </div>
+  </div>