Create HM26 event page

src/_data/events.yaml

@@ -4,7 +4,7 @@
   link: "/webinars/2026/integrating-external-ai-agents-in-industrial-workflows/"
   expire: "2026-03-24T16:01:00Z"
 - type: "Trade-show"
-  title: "Join us at ProveIt! 2026 | See our CEO on stage on Feb 17"
-  buttonText: "Claim your discounted ticket"
-  link: "/events/proveit-2026"
-  expire: "2026-02-17T11:00:00Z"
+  title: "Join us at Hannover Messe 2026 | Don't miss our special sessions!"
+  buttonText: "Claim your free ticket"
+  link: "/events/hannover-messe-2026"
+  expire: "2026-04-23T11:00:00Z"

src/css/style.css

@@ -583,6 +583,11 @@ h4:hover .header-anchor::before {
     @apply object-center;
 }
 
+.ff-image-cover.top img,
+.ff-image-cover.top picture {
+    @apply object-top;
+}
+
 .ff-image-cover.blueprint img,
 .ff-image-cover.blueprint picture {
     object-position: left top;

src/events/hannover-messe-2026.njk

@@ -0,0 +1,170 @@
+---
+layout: layouts/base.njk
+tags:
+    - trade-show
+meta: 
+    title: FlowFuse at Hannover Messe 2026
+    description: Visit FlowFuse at Hannover Messe 2026 in Hall 014, Stand K26 for live demos, special sessions, and industrial connectivity in action.
+heroSection:
+    image: events/images/hm26/hm-26-hero.png
+    imgAlt: Image of people at the FlowFuse booth
+    logo: events/images/hm25/hm_logo.png
+    logoAlt: Hannover Messe Logo
+demoSection:
+    image: events/images/hm26/hm-26-demo.png
+    imgAlt: Image of people attending the FlowFuse demo.
+specialSessions:
+    - image: events/images/hm26/zj-presenting.png
+      imgAlt: Zeger-Jan van de Weg presenting
+      labelClass: text-red-600
+      label: On-Stage Session
+      title: "ZJ van de Weg's Conference"
+      description: "Our CEO, Zeger-Jan van de Weg, will take the stage to present how FlowFuse bridges industrial operations and modern digital platforms to accelerate digital transformation initiatives."
+    - image: events/images/hm26/nick-presenting.png
+      imgAlt: Nick O'Leary presenting
+      labelClass: text-indigo-600
+      label: Masterclass
+      title: 'Bridging IT and OT: How AI-Powered Industrial Platforms Transform Digital Transformation Initiatives'
+      description: "FlowFuse founder Nick O'Leary will deliver an in-depth masterclass on how AI-powered industrial platforms connect IT and OT, unlock data silos, and enable scalable digital transformation."
+bookDemo:
+    cta: BOOK A DEMO
+    ctaUrl: "/book-demo"
+---
+<!-- Hero Section -->
+<div class="w-full nohero pb-16 pt-10 md:py-20">
+    <div class="w-full px-6">
+        <div class="container flex flex-coltext-left items-stretch md:max-w-screen-lg m-auto">
+            <div class="w-full flex flex-col max-md:justify-center md:flex-row md:gap-10 mt-3 pb-8 md:pb-12">
+                <div class="md:max-w-[390px] flex flex-grow relative ff-image-cover ff-image-rounded w-full max-md:mb-6">
+                    <div class="event bg-indigo-50 max-md:max-h-[300px] w-full md:h-full flex-grow">
+                        {% set imageSrc = ["./", heroSection.image ] | join %}
+                        {% set imageDescription = heroSection.imgAlt %}
+                        {% image imageSrc, imageDescription, [644] %}
+                    </div>
+                    <div class="hannover-logo-container">
+                        {% set logoSrc = ["./", heroSection.logo ] | join %}
+                        {% set logoDescription = heroSection.logoAlt %}
+                        {% image logoSrc, logoDescription, [50] %}
+                    </div>
+                </div>
+                <div class="main-content sm:2/3">
+                    <label class="text-red-600 font-medium mb-2 capitalize">Trade Show - April 20-24 2026</label>
+                    <h1 class="md:max-w-screen-md">FlowFuse at <span class="text-red-600">Hannover Messe 2026</span></h1>
+                    <p>Discover how FlowFuse empowers you to build, deploy, and scale industrial automation — your way.</p>
+                    <p>Visit us at Hannover Messe at <span>Hall 014 Stand K26</span> and experience live demonstrations of FlowFuse connecting the entire industrial stack — from PLCs on the shop floor to MES, ERP, and cloud services — enabling real-time industrial connectivity, data integration, and AI-powered operations.</p>
+                    <p>Let’s transform industrial data together — live, integrated, and in real time.</p>
+                    <div class="flex items-start justify-start mt-10">
+                        <a class="ff-btn ff-btn--highlight uppercase items-center text-base"
+                            href="https://www.hannovermesse.de/en/application/registration/direct-entry-tickets-passes?code=UQIRo"
+                            target="_blank">
+                            CLAIM FREE PASS
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- Demo Section -->
+    <div class="w-full md:bg-white pt-12 md:pt-20 px-6">
+        <div class="container flex flex-col md:flex-row m-auto text-left m-auto md:gap-14 items-stretch md:max-w-screen-lg">
+            <div class="ff-prose mt-3 sm:1/3 flex-grow">
+                <h3 class="text-gray-600 leading-snug">Join Us and Experience <span class="text-indigo-600">Connectivity in Action</span></h3>
+                <p>At Hannover Messe 2026, you’ll see how FlowFuse empowers you to enhance your existing systems and build truly integrated industrial solutions. At our booth, you’ll experience:</p>
+                <div class="prose">
+                    <ul>
+                        <li>A live connected production line demo (PLCs, MES, ERP, and cloud fully integrated via Node-RED)</li>
+                        <li>Real-time data flow across the complete ISA-95 architecture</li>
+                        <li>Seamless integration with your existing IT and OT systems</li>
+                        <li>AI-powered development capabilities with FlowFuse Expert</li>
+                        <li>Practical demonstrations showing how to make your industrial data AI-ready</li>
+                    </ul>
+                </div>
+            </div>
+            <div class="md:max-w-[390px] flex flex-grow w-full max-md:mt-6">
+                <div class="ff-image-cover top ff-image-rounded max-md:max-h-[300px] w-full md:h-full flex-grow">
+                    {% set imageSrc = ["./", demoSection.image ] | join %}
+                    {% set imageDescription = demoSection.imgAlt %}
+                    {% image imageSrc, imageDescription, [644] %}
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<!-- Special Sessions -->
+<div class="w-full px-6 py-14 md:py-20 bg-indigo-50">
+    <div class="container flex flex-col m-auto text-left items-stretch md:max-w-screen-lg">
+        <h2 class="text-gray-600 leading-snug mb-8 md:mb-10">Don't Miss our <span class="text-indigo-600">Special Sessions</span></h2>
+        {% for session in specialSessions %}
+        <div class="rounded-xl border border-gray-200 bg-white p-4 sm:p-6 md:p-3 flex flex-col md:flex-row gap-5 items-center md:items-stretch md:min-h-[320px] lg:min-h-[280px] drop-shadow-sm{% if not loop.first %} mt-6{% endif %}">
+            <div class="w-full h-[300px] ff-image-cover center ff-image-rounded md:w-[240px] md:h-auto md:self-stretch shrink-0">
+                {% set imageSrc = ["./", session.image ] | join %}
+                {% set imageDescription = session.imgAlt %}
+                {% image imageSrc, imageDescription, [263] %}
+            </div>
+            <div class="flex-grow py-2 md:pr-4 md:flex md:flex-col md:justify-center">
+                <label class="{{ session.labelClass }} font-medium mb-2 capitalize text-sm">{{ session.label }}</label>
+                <h3 class="leading-snug mb-3">{{ session.title }}</h3>
+                <p>{{ session.description }}</p>
+            </div>
+        </div>
+        {% endfor %}
+    </div>
+</div>
+<!-- Live Session Section -->
+<div class="w-full bg-[radial-gradient(ellipse_120%_120%_at_50%_120%,theme(colors.indigo.600)_0%,theme(colors.indigo.900)_100%)] px-6 py-10 md:py-20">
+    <div id="livesession" class="container flex flex-col m-auto text-left items-stretch md:max-w-screen-lg">
+        <div>
+            <label class="mb-2 capitalize text-[20px] text-indigo-200">On-Site Live Demonstrations</label>
+            <h2 class="text-white leading-snug mb-8">Intelligence and Connectivity Across Every Layer</h2>
+            <div class="ff-prose prose w-full md:2/3 text-white max-w-none">
+                <p class="text-white">Join us throughout Hannover Messe for exclusive live demonstrations featuring FlowFuse's complete industrial connectivity stack.</p>
+            </div>
+        </div>
+        <div class="flex max-md:flex-col w-full gap-6 mt-6">
+            <div class="ff-prose prose w-full md:2/3 text-white">
+                <p class="text-white">Our live setup shows how:</p>
+                <ul>
+                    <li>The most common challenges in IT/OT integration — and how to overcome them</li>
+                    <li>Why a Unified Namespace (UNS) is essential for scalable, future-proof data management</li>
+                    <li>How FlowFuse enables low-code integration, edge/cloud connectivity, and real-time event processing</li>
+                    <li>Real-world case studies showcasing efficiency gains and reduced downtime</li>
+                    <li>Practical steps to implement a UNS, plus key considerations to keep in mind</li>
+                </ul>
+            </div>
+            <div class="bg-white rounded-lg border-2 border-red-100 p-6 w-full max-w-[448px] sm:max-w-[896px] md:max-w-[350px] flex flex-col justify-center mx-auto max-md:my-6">
+                <h4 class="text-red-600 mx-auto text-center">Meet the Team On Site</h4>
+                <p>Stop by the booth, see the demos in action, and talk with our team about how FlowFuse can support your digital transformation journey.</p>
+                <div class="flex sm:order-2 order-3 mt-4">
+                    <a class="ff-btn ff-btn--highlight uppercase items-center text-base mx-auto" href="#">
+                        SCHEDULE A MEETING
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<!-- Book a Demo Section -->
+<div class="w-full px-6 pt-8 pb-16 sm:pt-10 md:pb-24 md:pt-16">
+    <div class="container md:max-w-screen-lg mx-auto">
+        <div class="ff-blue-card p-8 m-auto grid grid-cols-1 sm:grid-cols-[1fr_2fr] gap-8 sm:gap-x-10 items-center">
+            <div class="flex flex-col gap-6 sm:gap-8 sm:justify-center order-1">
+                <h3>Can’t make it to Hannover Messe?</h3>
+                {% macro bookDemoButton() %}
+                <a class="ff-btn ff-btn--primary uppercase items-center text-base" href="{{ bookDemo.ctaUrl }}">
+                    {{ bookDemo.cta }}
+                </a>
+                {% endmacro %}
+                <div class="hidden sm:flex items-start justify-center sm:justify-start">
+                    {{ bookDemoButton() }}
+                </div>
+            </div>
+            <div class="text-left sm:flex sm:flex-col sm:justify-center order-2">
+                <p>No problem! You can still experience FlowFuse’s industrial connectivity platform remotely.</p>
+                <p>Book a personalised online demo and discover how our flexible, real-time industrial software can optimise your operations and make your data AI-ready.</p>
+            </div>
+            <div class="flex justify-center order-3 sm:hidden">
+                {{ bookDemoButton() }}
+            </div>
+        </div>
+    </div>
+</div>