Merge pull request #2582 from FlowFuse/2521-flowfuse-for-education

FlowFuse for education page

src/_includes/layouts/base.njk

@@ -232,11 +232,12 @@ eleventyComputed:
                             </ul>
                         {% endnavoption %}
                         {% navoption "Resources", null, 0 %}
-                            <ul class="sm:grid sm:grid-flow-col sm:grid-rows-4 sm:grid-cols-1 sm:pr-9">
+                            <ul class="sm:grid sm:grid-flow-col sm:grid-rows-5 sm:grid-cols-1 sm:pr-9">
                                 {% navoption "Blog", "/blog/", 1, "newspaper" %}{% endnavoption %}
                                 {% navoption "Webinars", "/webinars/", 1, "screen" %}{% endnavoption %}
                                 {% navoption "Github", "https://github.com/FlowFuse/flowfuse", 1, "github", true %}{% endnavoption %}
                                 {% navoption "Docs", "/docs/", 1, "document-text" %}{% endnavoption %}
+                                {% navoption "Educational License", "/education/", 1, "book-open" %}{% endnavoption %}
                                 {% navoption "Support forums", "https://discourse.nodered.org/c/vendors/flowfuse/24/", 1, "chat-bubble-left-right-sm" %}{% endnavoption %}
                                 {% navoption "Customer Stories", "/customer-stories/", 1, "presentation" %}{% endnavoption %}
                                 {% navoption "Node-RED", "/node-red/", 1, "nr-icon" %}{% endnavoption %}
@@ -346,19 +347,6 @@ eleventyComputed:
             </div>
         </div>
     </footer>
-    <script>
-        // Adjust anchors so they don't get hidden behind the sticky header
-        function adjustAnchor() {
-            window.scrollBy(0, -70);
-        }
-
-        window.addEventListener('hashchange', adjustAnchor);
-
-        // Run adjustAnchor on page load if there's a hash
-        if (window.location.hash) {
-            window.addEventListener('load', adjustAnchor);
-        }
-    </script>
 </body>
 <script>
     document.getElementById('nav-toggle').onclick = function(){

src/css/style.css

@@ -17,6 +17,7 @@
 html, body {
     font-size: 16px;
     font-family: 'Helvetica Neue', sans-serif;
+    scroll-padding-top: 75px;
 }
 
 *{

src/education.njk

@@ -0,0 +1,52 @@
+---
+layout: page
+nohero: true
+meta:
+    title: "FlowFuse for Education"
+    keywords: FlowFuse, FlowFuse for students, FlowFuse for educators, FlowFuse for educational institutions, FlowFuse for universities, FlowFuse for schools, FlowFuse for colleges, FlowFuse for learning, FlowFuse for teaching, FlowFuse for training, FlowFuse for research, FlowFuse for academic institutions, FlowFuse for educational organizations, FlowFuse for educational establishments, FlowFuse for educational bodies, FlowFuse for educational centers, FlowFuse for educational facilities, Node-RED for education, Node-RED education, Node-RED for universities, Node-RED for classroom, Node-RED for educators, Node-RED for universities, Node-RED for academic institutions
+description: "FlowFuse offers a comprehensive suite of tools and resources for educational institutions, students, and educators to accelerate learning, teaching, and research in Node-RED and industrial automation."
+hubspot:
+    script: "hubspot/hs-form.njk"
+    formId: 48a92e16-8e5c-4bb6-aaee-ed0dfec0174d
+    cta: "cta-contact-us"
+    reference: "education"
+---
+<!--First two sections-->
+<div class="nohero w-full">
+    <!--Hero Content-->
+    <div class="w-full pt-12 md:pt-6">
+        <div class="md:max-w-screen-lg px-6 container mx-auto pb-20">
+            <div class="flex flex-col my-16 items-center md:flex-row md:items-start text-center md:text-left gap-8">
+                <div class="md:my-auto md:w-2/3">
+                    <h1 class="mt-0 mb-10 mx-auto">
+                        FlowFuse <span class="text-indigo-600 inline-block">for Education</span>
+                    </h1>
+                    <p class="mb-12">
+                        FlowFuse is your partner in teaching engineering, IoT, development, OT/IT integration, and automation to your students. Free for educators and students. Contact us for an educational license.
+                    </p>
+                        <div class="m-auto lg:mt-3 flex gap-4 items-center justify-center md:items-start md:justify-start md:m-0 flex-row">
+                            <a class="ff-btn ff-btn--primary flex flex-col max-xl:mb-6" href="#contact-us" onclick="scrollToAnchor(event, 'contact-us')">
+                                <span class="text-base uppercase items-center">
+                                    CONTACT US
+                                </span>
+                            </a>
+                        </div>
+                </div>
+                <div class="md:max-w-[369px] m-auto rounded-xl ff-image-cover h-full aspect-video md:aspect-[369/427]">
+                    {% image "./images/education/education_hero.jpg", "Node-RED pseudo UI", [369] %}
+                </div>
+            </div>  
+            <!-- Form -->
+            <div id="contact-us" class="grid grid-cols-1 md:grid-cols-4 border-2 border-indigo-200 ff-image-cover rounded-xl mt-20">
+                <div class="max-md:hidden">
+                    {% image "./images/education/education_form.jpg", "Node-RED pseudo UI", [369] %}
+                </div>
+                <div class="p-8 pb-4 md:col-span-3">
+                    {% include hubspot.script %}
+                </div>
+            </div>  
+        </div>
+    </div>
+
+<!-- Scroll to anchor -->
+{% include "smooth-scroll.njk" %}