Apply site-wide animated-link and button interaction polish

src/_includes/faq.njk

@@ -16,8 +16,8 @@
                                 type="button"
                                 aria-expanded="false"
                                 aria-controls="answer-{{ loop.index }}">
-                            <span>{{ faq.question }}</span>
-                            <div class="chevron transition-transform ease-in-out duration-300"
+                            <span class="ff-animated-link">{{ faq.question }}</span>
+                            <div class="chevron transition-transform ease-in-out duration-300 shrink-0"
                                 id="chevron-{{ loop.index }}">
                                 {% include "components/icons/chevron-down.svg" %}
                             </div>
@@ -51,3 +51,4 @@
         });
     });
 </script>
+

src/_includes/layouts/abm-landing.njk

@@ -34,7 +34,7 @@ nohero: true
                         href="{% include "sign-up-url.njk" %}"
                         onclick="capture('cta-try-now', {'reference': '{{ hero.buttonReference }}'})">
                         <span class="flex gap-2 uppercase items-center text-indigo-600 hover:text-indigo-800">
-                            Start Free Trial
+                            <span class="ff-animated-link">Start Free Trial</span>
                             {% include "components/icons/arrow-right.svg" %}
                         </span>
                     </a>

src/_includes/layouts/post.njk

@@ -50,9 +50,9 @@
     <div class="blog nohero w-full pb-24">
         <div class="container flex flex-col md:flex-row m-auto text-left max-lg:px-6 md:max-w-screen-lg gap-8 items-stretch">
             <div class="ff-prose min-w-0">
-                <a class="inline-flex align-center gap-1 mb-4" href="/blog">
-                    {% include "components/icons/chevron-left.svg" %}
-                    Back to Blog Posts
+                <a class="group hover:no-underline inline-flex items-center gap-1 mb-4" href="/blog">
+                    <span class="w-5 h-5 shrink-0 flex items-center [&>svg]:w-full [&>svg]:h-full">{% include "components/icons/chevron-left.svg" %}</span>
+                    <span class="ff-animated-link">Back to Blog Posts</span>
                 </a>
                 <div class="prose w-full flex-grow">
                     <div class="mb-4 hero-img">

src/_includes/layouts/story.njk

@@ -18,9 +18,9 @@ layout: layouts/base.njk
     {% endif %}
     <div class="blog nohero w-full pt-6 pb-24 bg-gray-50">
         <div class="container flex flex-col m-auto text-left max-lg:px-6 md:max-w-screen-lg items-stretch">
-            <a class="inline-flex align-center gap-1 mb-5 md:mb-4" href="/customer-stories">
-                {% include "components/icons/chevron-left.svg" %}
-                Back to Customer Stories
+            <a class="group hover:no-underline inline-flex items-center gap-1 mb-5 md:mb-4" href="/customer-stories">
+                <span class="w-5 h-5 shrink-0 flex items-center [&>svg]:w-full [&>svg]:h-full">{% include "components/icons/chevron-left.svg" %}</span>
+                <span class="ff-animated-link">Back to Customer Stories</span>
             </a>
             <div class="ff-prose flex flex-col-reverse md:flex-row md:gap-8 mb-6 border-b">
                 <div class="flex-grow">

src/customer-stories.njk

@@ -1,5 +1,6 @@
 ---
 layout: nohero
+image: /images/stories/arch_systems.jpeg
 sitemapPriority: 0.8
 meta:
     title: Customer Stories

src/platform/why-flowfuse.njk

@@ -37,7 +37,7 @@ table:
       flowfuse: "AI-accelerated, structure/unify any format"
       nodered: "Yes"
     - feature: "Deployment & Management"
-      flowfuse: "Cloud, Edge, Hybrid—centralized"
+      flowfuse: "Cloud, Edge, Hybrid, centralized"
       nodered: "Manual"
     - feature: "Blueprints & Prebuilt Solutions"
       flowfuse: "Certified, customizable for production"
@@ -71,7 +71,7 @@ meta:
                 <div class="mb-10 flex-grow">
                     <p>FlowFuse is the easiest, fastest, most sustainable way to build and operate applications that help you optimize industrial processes. </p>
                     <p>From pilot to production, innovation in industry starts with the right foundation. <span class="font-semibold">Node-RED, pioneered by our own CTO Nick O’Leary,</span> empowers thousands to connect data, automate, and build ideas rapidly.</p>
-                    <p><span class="font-semibold">FlowFuse takes that power further</span>—enabling secure, governed, and AI-accelerated scale for your most critical operations.</p>                   
+                    <p><span class="font-semibold">FlowFuse takes that power further</span>, enabling secure, governed, and AI-accelerated scale for your most critical operations.</p>                   
                 </div>
                 <!-- Mobile image -->  
                 <div class="flex md:hidden justify-center m-auto mb-10 ff-image-rounded rounded-lg drop-shadow-lg"> 
@@ -82,7 +82,7 @@ meta:
                 </div>
                 <div class="flex gap-3 max-md:mx-auto max-sm:flex-col max-md:justify-center">
                     <a class="ff-btn ff-btn--primary min-h-[40px]" href="/book-demo/" onclick="capture('cta-book-demo', {'position': 'primary'}, {'page': 'why-flowfuse'})">GET A FREE DEMO</a>
-                    <a class="ff-btn min-h-[40px] flex gap-2" href="{% include "sign-up-url.njk" %}" onclick="capture('cta-get-started', {'position': 'primary'}, {'page': 'why-flowfuse'})">GET STARTED {% include "components/icons/arrow-right.svg" %}</a>
+                    <a class="ff-btn min-h-[40px] flex gap-2" href="{% include "sign-up-url.njk" %}" onclick="capture('cta-get-started', {'position': 'primary'}, {'page': 'why-flowfuse'})"><span class="flex gap-2 items-center text-indigo-600 hover:text-indigo-800"><span class="ff-animated-link">GET STARTED</span> {% include "components/icons/arrow-right.svg" %}</span></a>
                 </div>
             </div>
             <div class="flex max-md:hidden justify-center m-auto max-w-[550px] ff-image-rounded rounded-lg drop-shadow-lg w-full">
@@ -134,7 +134,7 @@ meta:
                 </div>
                 <div class="flex-grow">
                     <p>FlowFuse and Node-RED form a seamless continuum: start with the creativity and agility of Node-RED, and scale with enterprise-ready security, audit trails, versioning, and FlowFuse AI Expert tools FlowFuse offers.</p>
-                    <p>FlowFuse bridges the gap between what’s possible and what’s reliable at scale, empowering teams to innovate faster, build smarter, and automate with confidence—all with complete governance and operational control.</p>
+                    <p>FlowFuse bridges the gap between what’s possible and what’s reliable at scale, empowering teams to innovate faster, build smarter, and automate with confidence, all with complete governance and operational control.</p>
                     <p class="mb-0">Our platform is 100% compatible with Node-RED, backed by the original creator, ensuring you invest in a future-proof solution.</p>                   
                 </div>
             </div>

src/vs/ignition.njk

@@ -79,7 +79,7 @@ cta:
                     href="{% include "sign-up-url.njk" %}"
                     onclick="capture('try-it-out', {'reference': '{{ hero.buttonReference }}'})">
                         <span class="flex gap-2 uppercase items-center text-indigo-600 hover:text-indigo-800">
-                            TRY IT OUT
+                            <span class="ff-animated-link">TRY IT OUT</span>
                             {% include "components/icons/arrow-right.svg" %}
                         </span>
                     </a>

src/vs/kepware.njk

@@ -6,7 +6,7 @@ imageDescription: "Plant manager with a laptop in a factory setting"
 heroTitle: "A Modern Alternative to <span class='text-indigo-600'>Kepware</span>"
 meta:
     title: "A Modern Alternative to Kepware"
-    description: "FlowFuse is the open, cloud-ready solution engineers choose to replace legacy tools like PTC Kepware. Build faster, integrate easier, and modernize your industrial workflows — without vendor lock-in."
+    description: "FlowFuse is the open, cloud-ready solution engineers choose to replace legacy tools like PTC Kepware. Build faster, integrate easier, and modernize your industrial workflows, without vendor lock-in."
 hero:
     buttonText: "Talk to a Migration Expert"
     buttonLink: "https://meetings-eu1.hubspot.com/michael-davis/round-robin-michael-omar-kasheef?utm_campa[…]113138546&utm_content=113138546&utm_source=hs_automation"
@@ -52,7 +52,7 @@ switch:
     ctaUrl: "/book-demo"
 cta:
     title: "Ready to Leave Kepware Behind?"
-    content: "See how FlowFuse helps teams like yours modernize their industrial automation infrastructure — faster, more flexibly, and at lower cost. <a href='https://meetings-eu1.hubspot.com/michael-davis/round-robin-michael-omar-kasheef?utm_campa[…]113138546&utm_content=113138546&utm_source=hs_automation' class='font-semibold'>Book a Demo with a FlowFuse Expert</a>."
+    content: "See how FlowFuse helps teams like yours modernize their industrial automation infrastructure, faster, more flexibly, and at lower cost. <a href='https://meetings-eu1.hubspot.com/michael-davis/round-robin-michael-omar-kasheef?utm_campa[…]113138546&utm_content=113138546&utm_source=hs_automation' class='font-semibold'>Book a Demo with a FlowFuse Expert</a>."
 ---
 <!--Hero Content-->
 <div class="w-full">
@@ -79,7 +79,7 @@ cta:
                     href="{% include "sign-up-url.njk" %}" 
                     onclick="capture('try-it-out', {'reference': '{{ hero.buttonReference }}'})">
                         <span class="flex gap-2 uppercase items-center text-indigo-600 hover:text-indigo-800">
-                            TRY IT OUT
+                            <span class="ff-animated-link">TRY IT OUT</span>
                             {% include "components/icons/arrow-right.svg" %}
                         </span>
                     </a>

src/vs/litmus.njk

@@ -6,7 +6,7 @@ imageDescription: "FlowFuse vs Litmus Hero Image"
 heroTitle: "A Flexible Alternative to <span class='text-red-600'>Litmus</span>"
 meta:
     title: "A Flexible Alternative to Litmus"
-    description: "FlowFuse is an open, cloud-ready platform that industrial teams choose as an alternative to Litmus. Build faster, stay flexible, and scale Industrial AI on your terms — without unnecessary lock-in."
+    description: "FlowFuse is an open, cloud-ready platform that industrial teams choose as an alternative to Litmus. Build faster, stay flexible, and scale Industrial AI on your terms, without unnecessary lock-in."
 hero:
     buttonText: "Talk to a Migration Expert"
     buttonLink: "https://meetings-eu1.hubspot.com/michael-davis/round-robin-michael-omar-kasheef?utm_campa[…]113138546&utm_content=113138546&utm_source=hs_automation"
@@ -76,7 +76,7 @@ cta:
                     href="{% include "sign-up-url.njk" %}" 
                     onclick="capture('try-it-out', {'reference': '{{ hero.buttonReference }}'})">
                         <span class="flex gap-2 uppercase items-center text-indigo-600 hover:text-indigo-800">
-                            TRY IT OUT
+                            <span class="ff-animated-link">TRY IT OUT</span>
                             {% include "components/icons/arrow-right.svg" %}
                         </span>
                     </a>
@@ -100,7 +100,7 @@ cta:
         <!-- Cards -->  
         {% set blueCards = [
             {"title": "Open, flexible edge architecture",
-            "content": "Customers can run FlowFuse where it makes sense — <span class='font-medium'>at the edge, on-premises, or in the cloud</span> — and integrate with a wide range of clouds, data platforms, and AI services, rather than a single, tightly coupled stack."},
+            "content": "Customers can run FlowFuse where it makes sense, <span class='font-medium'>at the edge, on-premises, or in the cloud</span>, and integrate with a wide range of clouds, data platforms, and AI services, rather than a single, tightly coupled stack."},
             {"title": "Reduced vendor lock-in and higher portability",
             "content": "Because flows remain Node-RED-compatible and <span class='font-medium'>rely on open standards</span>, organizations can evolve their Industrial AI strategy over time without being constrained by a monolithic, proprietary edge data platform."}
         ] %}