Merge pull request #735 from FlowFuse/docs-ff-advert

Docs: Add FlowFuse details & CTA

docs/.vitepress/theme/dashboard.css

@@ -2,6 +2,8 @@
     --vp-c-brand: #0094CE;
     --vp-c-node-red: #ffe4e3;
     --vp-c-node-red-dark: #B80C14;
+    --vp-c-flowfuse: #3730a3;
+    --vp-c-flowfuse-dark: #4338ca;
 }
 
 img + em {

docs/components/FlowFuseAdvert.vue

@@ -0,0 +1,51 @@
+<template>
+    <div class="flowfuse-advert">
+        <div>
+            <h1>Elevate Node-RED with FlowFuse</h1>
+            <p>FlowFuse provides a complete platform to manage and scale your production Node-RED applications.</p>
+            <ul>
+                <li>Simplified Hosting and Maintenance</li>
+                <li>Centralized Management of your Node-RED Deployments</li>
+                <li>Built-in Version Control &amp; Robust Development Pipelines</li>
+                <li>Enhanced Team Collaboration</li>
+                <li>Efficient Remote Device Management</li>
+            </ul>
+            <a href="https://flowfuse.com/product/why-flowfuse/">Learn More</a>
+        </div>
+        <div>
+            <img src="../assets/images/screenshot-flowfuse-applications.png">
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.flowfuse-advert {
+  margin-top: 64px;
+  padding-top: 64px;
+  border-top: 1px solid var(--vp-c-divider);
+  display: grid;
+  grid-template-columns: 1fr 60%;
+  gap: 36px;
+}
+
+.flowfuse-advert h1 {
+  color: var(--vp-c-flowfuse);
+}
+
+.flowfuse-advert img {
+
+}
+
+.flowfuse-advert a {
+    display: inline-block;
+    margin-top: 16px;
+    padding: 8px 16px;
+    background-color: var(--vp-c-flowfuse);
+    color: white;
+    border-radius: 4px;
+    text-decoration: none;
+}
+.flowfuse-advert a:hover {
+    background-color: var(--vp-c-flowfuse-dark);
+}
+</style>

docs/components/RecommendedReading.vue

@@ -35,6 +35,7 @@ const articles = [
     .recommended-reading a {
         overflow: hidden;
         border-radius: 12px;
+        border: 2px solid transparent;
     }
     .recommended-reading img {
         transition: 0.15s transform;

docs/index.md

@@ -25,6 +25,7 @@ hero:
 
     import HomeExtension from './components/HomeExtension.vue';
     import RecommendedReading from './components/RecommendedReading.vue';
+    import FlowFuseAdvert from './components/FlowFuseAdvert.vue';
     import CopyIcon from './components/icons/CopyIcon.vue';
 
     const copied = ref(false); 
@@ -48,6 +49,8 @@ hero:
 
 <RecommendedReading />
 
+<FlowFuseAdvert />
+
 </HomeExtension>
 
 <style scoped>
@@ -76,4 +79,5 @@ hero:
     color: black;
   }
 }
+
 </style>