Add use-case and outcome lens pages and cross-link includes

src/_includes/components/industry-use-cases.njk

@@ -0,0 +1,27 @@
+{# ============================================================
+   USE CASES FOR THIS INDUSTRY - derived grid.
+   Lists every use-case page whose `industries[]` front-matter
+   contains the current page's fileSlug. Mapping source of truth:
+   the Use Cases Asana project (Industry field).
+   ============================================================ #}
+{% set industrySlug = page.fileSlug %}
+<div class="w-full py-16 sm:py-24 px-6 bg-gray-50 border-y border-gray-100">
+    <div class="max-w-screen-lg mx-auto">
+        <h2 class="max-md:text-center">Use cases in <span class="text-indigo-600">{{ industryDisplayName or hero.eyebrow or title }}</span></h2>
+        <p class="mt-4 max-w-3xl text-gray-600">Operational workflow patterns teams in this industry build and own with FlowFuse.</p>
+        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mt-10">
+            {% for uc in collections["use-case"] | sort(false, true, "data.title") %}
+            {% if uc.data.industries and industrySlug in uc.data.industries %}
+            <a href="{{ uc.url }}" class="group hover:no-underline flex flex-col gap-3 rounded-xl border border-gray-200 p-6 bg-white hover:border-indigo-300 hover:shadow-sm transition-all">
+                <h3 class="m-0 text-gray-800 group-hover:text-indigo-600 transition-colors">{{ uc.data.title }}</h3>
+                <p class="m-0 text-gray-600 text-sm flex-grow">{{ uc.data.problem }}</p>
+                <span class="ff-animated-link mt-2 text-indigo-600 text-sm font-semibold flex items-center gap-2">
+                    View use case
+                    <span class="w-4 h-4 shrink-0 flex items-center [&>svg]:w-full [&>svg]:h-full">{% include "components/icons/arrow-right.svg" %}</span>
+                </span>
+            </a>
+            {% endif %}
+            {% endfor %}
+        </div>
+    </div>
+</div>

src/_includes/components/related-resources.njk

@@ -39,7 +39,7 @@
                 <ul class="flex flex-col gap-3 list-none p-0 m-0">
                     {% for item in column.items %}
                     <li>
-                        <a href="{{ item.url }}" class="text-indigo-600 hover:text-indigo-800">{{ item.data.title or item.data.meta.title or item.data.contentTitle | safe }}</a>
+                        <a href="{{ item.url }}" class="ff-animated-link inline-block hover:no-underline text-indigo-600 hover:text-indigo-800">{{ item.data.title or item.data.meta.title or item.data.contentTitle | safe }}</a>
                     </li>
                     {% endfor %}
                 </ul>

src/_includes/components/use-case-chips.njk

@@ -0,0 +1,30 @@
+{# ============================================================
+   USE CASE CONTEXT BAND - labeled links to the industry lens
+   pages. Reads `industries[]` (slugs) from page front-matter.
+   The slug->label maps mirror
+   the Use Cases Asana project fields (source of truth).
+   Rendered near the end of the use-case page, not under the hero.
+   ============================================================ #}
+{% set industryLabels = {
+    "automotive": "Automotive",
+    "food-beverage": "Food & Beverage",
+    "life-sciences": "Life Sciences",
+    "aviation-aerospace": "Aviation & Aerospace",
+    "aerospace-components": "Aerospace Components",
+    "renewables": "Renewables",
+    "semiconductors": "Semiconductors",
+    "electronics-appliances": "Electronics & Appliances"
+} %}
+{% if industries %}
+<div class="w-full px-6 py-10 bg-gray-50 border-y border-gray-100">
+    <div class="max-w-screen-lg mx-auto grid grid-cols-1 sm:grid-cols-[12rem_1fr] gap-x-8 gap-y-4 items-baseline">
+        {% if industries %}
+        <span class="uppercase text-xs font-semibold text-gray-400 tracking-widest">Common in these industries</span>
+        <p class="m-0 text-gray-700">
+            {% for slug in industries %}<a href="/industries/{{ slug }}/" class="text-indigo-600 hover:text-indigo-800 font-medium">{{ industryLabels[slug] or slug }}</a>{% if not loop.last %}, {% endif %}{% endfor %}
+            <span class="text-gray-400">&middot;</span> <a href="/industries/" class="text-gray-500 hover:text-indigo-600 text-sm">all industries</a>
+        </p>
+        {% endif %}
+    </div>
+</div>
+{% endif %}

src/_includes/components/use-case-links.njk

@@ -0,0 +1,23 @@
+{# ============================================================
+   USE CASE LINKS - systematic cross-link cards.
+   The host page declares which use cases to feature:
+       {% set featuredUseCases = ["slug-a", "slug-b"] %}
+       {% include "components/use-case-links.njk" %}
+   Card content (title, problem line, url) derives from each
+   use-case page's own front matter, so copy lives in one place.
+   ============================================================ #}
+{% if featuredUseCases %}
+<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mt-10">
+    {% for slug in featuredUseCases %}
+    {% for uc in collections["use-case"] %}
+    {% if uc.fileSlug == slug %}
+    <a href="{{ uc.url }}" class="group hover:no-underline flex flex-col gap-3 rounded-xl border border-gray-200 p-6 bg-white hover:border-indigo-300 hover:shadow-sm transition-all">
+        <h3 class="m-0 text-gray-800 group-hover:text-indigo-600 transition-colors">{{ uc.data.title }}</h3>
+        <p class="m-0 text-gray-600 text-sm flex-grow">{{ uc.data.problem }}</p>
+        <span class="ff-animated-link mt-2 text-indigo-600 text-sm font-semibold flex items-center gap-2">View use case <span class="w-4 h-4">{% include "components/icons/arrow-right.svg" %}</span></span>
+    </a>
+    {% endif %}
+    {% endfor %}
+    {% endfor %}
+</div>
+{% endif %}

src/_includes/explore-more-content.njk

@@ -22,9 +22,9 @@
             </a>
             {%- endfor -%}
         </div>
-        <a href="/blog/{{ collectionName or '' }}" class="w-full text-right flex flex-row items-center justify-end self-end justify-self-end gap-1">
-            See all
-            {% include "components/icons/arrow-long-right.svg" %}
+        <a href="/blog/{{ collectionName or '' }}" class="group hover:no-underline w-full text-right flex flex-row items-center justify-end self-end justify-self-end gap-1">
+            <span class="ff-animated-link">See all</span>
+            <span class="w-5 h-5 shrink-0 flex items-center [&>svg]:w-full [&>svg]:h-full">{% include "components/icons/arrow-long-right.svg" %}</span>
         </a>
     </div>
     <div class="w-full my-2 grid grid-cols-1 pb-4">

src/_includes/layouts/use-case.njk

@@ -26,6 +26,7 @@ sitemapPriority: 0.7
 {% if whyItMatters %}{% set nav = nav.concat([{ id: "why-it-matters", label: "Why It Matters" }]) %}{% endif %}
 {% if competition %}{% set nav = nav.concat([{ id: "competition", label: "Why Off-the-Shelf Fails" }]) %}{% endif %}
 {% if comparison %}{% set nav = nav.concat([{ id: "with-without", label: "With / Without FlowFuse" }]) %}{% endif %}
+{% if aiBuildLayer %}{% set nav = nav.concat([{ id: "ai-build-layer", label: "Build It With AI" }]) %}{% endif %}
 
 <div class="w-full">
 
@@ -203,6 +204,34 @@ sitemapPriority: 0.7
     </div>
     {% endif %}
 
+    {% if aiBuildLayer %}
+    <!-- ============================================================
+         06. BUILD IT WITH AI (Expert build layer)
+    ============================================================ -->
+    <div id="ai-build-layer" class="w-full py-16 sm:py-24 px-6 bg-gray-50 border-y border-gray-100 scroll-mt-16">
+        <div class="max-w-screen-lg mx-auto">
+            <p class="uppercase text-xs font-semibold text-indigo-400 mb-2">06 · Build it with AI</p>
+            <h2 class="max-md:text-center">{{ aiBuildLayer.heading or "From described to deployed, with the FlowFuse Expert" }}</h2>
+            <p class="mt-4 max-w-3xl text-gray-600">{{ aiBuildLayer.intro }}</p>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-12">
+                {% for step in aiBuildLayer.steps %}
+                <div class="rounded-xl bg-white border border-gray-200 p-6 flex flex-col gap-2">
+                    <div class="flex items-center gap-2">
+                        <span class="w-6 h-6 text-indigo-500">{% include "components/icons/sparkles.svg" %}</span>
+                        <span class="text-indigo-500 text-xs font-semibold uppercase tracking-widest">Step {% if loop.index < 10 %}0{% endif %}{{ loop.index }}</span>
+                    </div>
+                    <h4 class="m-0 text-gray-800">{{ step.title }}</h4>
+                    <p class="m-0 text-gray-600 text-sm">{{ step.detail }}</p>
+                </div>
+                {% endfor %}
+            </div>
+            {% if aiBuildLayer.note %}
+            <p class="mt-8 text-sm text-gray-400">{{ aiBuildLayer.note }}</p>
+            {% endif %}
+        </div>
+    </div>
+    {% endif %}
+
     {# ============================================================
        LEGACY SKELETON FALL-BACK (only when no rich blocks defined)
     ============================================================ #}
@@ -253,6 +282,11 @@ sitemapPriority: 0.7
         {% endif %}
     {% endif %}
 
+    <!-- ============================================================
+         WHERE THIS FITS (outcome + industry lens links)
+    ============================================================ -->
+    {% include "components/use-case-chips.njk" %}
+
     <!-- ============================================================
          RELATED RESOURCES (empty "More coming soon" state)
     ============================================================ -->
@@ -273,4 +307,5 @@ sitemapPriority: 0.7
         </div>
     </div>
 
+
 </div>

src/use-cases.njk

@@ -20,19 +20,45 @@ meta:
         </div>
     </div>
 
-    <!-- USE CASE CARD GRID -->
+    <!-- OPERATIONAL USE CASES (tagged with value pillars) -->
     <div class="w-full py-16 sm:py-24 px-6 bg-white">
         <div class="max-w-screen-lg mx-auto">
-            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+            <h2 class="max-md:text-center">Operational <span class="text-indigo-600">use cases</span></h2>
+            <p class="mt-4 max-w-3xl text-gray-600">Problems operations teams own, and how they are solved with FlowFuse. Each use case is also reachable by <a href="/industries/">industry</a>.</p>
+            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mt-10">
                 {% for uc in collections["use-case"] | sort(false, true, "data.title") %}
+                {% if uc.data.values %}
                 <a href="{{ uc.url }}" class="group hover:no-underline flex flex-col gap-3 rounded-xl border border-gray-200 p-6 bg-white hover:border-indigo-300 hover:shadow-sm transition-all">
                     <h3 class="m-0 text-gray-800 group-hover:text-indigo-600 transition-colors">{{ uc.data.title }}</h3>
                     <p class="m-0 text-gray-600 text-sm flex-grow">{{ uc.data.problem }}</p>
-                    <span class="mt-2 text-indigo-600 text-sm font-semibold flex items-center gap-2">
+                    <span class="ff-animated-link mt-2 text-indigo-600 text-sm font-semibold flex items-center gap-2">
                         View use case
                         <span class="w-4 h-4">{% include "components/icons/arrow-right.svg" %}</span>
                     </span>
                 </a>
+                {% endif %}
+                {% endfor %}
+            </div>
+        </div>
+    </div>
+
+    <!-- PLATFORM ARCHITECTURES (untagged legacy solution pages) -->
+    <div class="w-full py-16 sm:py-24 px-6 bg-gray-50 border-y border-gray-100">
+        <div class="max-w-screen-lg mx-auto">
+            <h2 class="max-md:text-center">By <span class="text-indigo-600">architecture</span></h2>
+            <p class="mt-4 max-w-3xl text-gray-600">How FlowFuse is deployed and where it sits in your stack. Architectures are the technical evaluator's entry point; the use cases above are what gets built on them.</p>
+            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mt-10">
+                {% for uc in collections["use-case"] | sort(false, true, "data.title") %}
+                {% if not uc.data.values %}
+                <a href="{{ uc.url }}" class="group hover:no-underline flex flex-col gap-3 rounded-xl border border-gray-200 p-6 bg-white hover:border-indigo-300 hover:shadow-sm transition-all">
+                    <h3 class="m-0 text-gray-800 group-hover:text-indigo-600 transition-colors">{{ uc.data.title }}</h3>
+                    <p class="m-0 text-gray-600 text-sm flex-grow">{{ uc.data.problem }}</p>
+                    <span class="ff-animated-link mt-2 text-indigo-600 text-sm font-semibold flex items-center gap-2">
+                        View architecture
+                        <span class="w-4 h-4">{% include "components/icons/arrow-right.svg" %}</span>
+                    </span>
+                </a>
+                {% endif %}
                 {% endfor %}
             </div>
         </div>

src/use-cases/edge-connectivity.njk

@@ -1,7 +1,7 @@
 ---
 layout: solution
 title: FlowFuse for Edge Connectivity
-problem: "Deploy and manage Node-RED instances on edge hardware at scale — from a single pane of glass, without touching each device."
+problem: "Deploy and manage Node-RED instances on edge hardware at scale, from a single pane of glass, without touching each device."
 image: /images/solutions/og-solutions-edge-connectivity.jpg
 subtitle:
 heroImg: ./images/pictograms/edge_blue.png
@@ -75,6 +75,16 @@ description:
     </div>
 </div>
 
+<!-- USE CASES built at the edge (cross-links per web task) -->
+<div class="w-full py-16 sm:py-20 px-6 bg-gray-50 border-y border-gray-100">
+    <div class="max-w-screen-lg mx-auto">
+        <h2 class="max-md:text-center">What teams build <span class="text-indigo-600">at the edge</span></h2>
+        {% set featuredUseCases = ["shop-floor-communication", "production-monitoring"] %}
+        {% include "components/use-case-links.njk" %}
+        <p class="mt-8 text-center"><a class="ff-btn ff-btn--primary-outlined uppercase" href="/docs/device-agent/install/">Get the Device Agent</a></p>
+    </div>
+</div>
+
 <div class="w-full px-6 pb-28 pt-12 md:px-0">
        <div class="content max-w-screen-lg m-auto text-center border-2 rounded-lg py-6 px-20 bg-indigo-50 border-indigo-100">
         <p class="text-2xl leading-10 mt-0 mb-9">

src/use-cases/production-monitoring.njk

@@ -4,6 +4,19 @@ meta:
   title: "Production Monitoring | Use Cases | FlowFuse"
   description: "Real-time visibility into what your production lines are actually doing. Build the monitoring app your operation needs with FlowFuse and Node-RED: connect any protocol, deploy at the edge or in the cloud, and roll out across sites."
 problem: "Your operation is running. You just can't see it clearly enough, until something breaks."
+industries: ["automotive", "food-beverage", "life-sciences", "aviation-aerospace", "aerospace-components", "renewables", "semiconductors", "electronics-appliances"]
+values: ["production-performance"]
+
+aiBuildLayer:
+  intro: "The FlowFuse Expert works on this use case with you: describe the monitoring you need and get a working starting flow, then query what it captures in plain language."
+  steps:
+    - title: "Describe it, get a starting flow"
+      detail: "Tell the Expert which lines and KPIs to watch; it assembles tabs, nodes and wiring for a monitoring starting point. Currently in open beta on FlowFuse Cloud."
+    - title: "Refine with in-editor assistance"
+      detail: "Function Builder and inline completions handle counters, shift logic and dashboard bindings; the flow explainer documents the result."
+    - title: "Ask your plant anything"
+      detail: "Expose captured production data through MCP tools and query it with Expert's Insights mode (beta): 'which line lost the most output this shift?'"
+  note: "AI capabilities noted as beta are in open beta on FlowFuse Cloud at time of writing."
 
 customerPain:
   heading: "Visibility gaps are expensive."

src/use-cases/uns.njk

@@ -1,6 +1,7 @@
 ---
 layout: page
 title: "FlowFuse for UNS"
+image: /images/solutions/flowfuse-uns.png
 problem: "Adopt a Unified Namespace without ripping out existing infrastructure. FlowFuse connects producers and consumers through MQTT with low-code flows."
 nohero: true
 meta:
@@ -31,15 +32,15 @@ meta:
             <div class="flex max-md:hidden justify-center m-auto max-w-[400px]">
                 {% image "./images/solutions/ff-uns.png", "FlowFuse connected to many industrial devices", [400] %}
             </div>
-        </div>   
+        </div>
     </div>
 
-    <!-- Unlock the power of your real-time data -->  
+    <!-- Unlock the power of your real-time data -->
     <div class="w-full">
         <div class="max-w-screen-lg mx-auto px-6">
             <h2 class="max-sm:max-w-md w-full max-sm:text-center max-sm:mx-auto mb-6">Unlock the power of your <span class="text-indigo-600">real-time data</span></h2>
             <p class="max-sm:max-w-md w-full max-sm:text-center max-sm:mx-auto mt-6">IT and data professionals are often challenged by the complexities of accessing and analyzing data scattered across disparate systems in manufacturing environments. UNS offers a solution to these challenges by providing a standardized way to access and utilize real-time data across your entire manufacturing operation.</p>
-            <div class="w-full grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-x-7 gap-y-14 my-14">                
+            <div class="w-full grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-x-7 gap-y-14 my-14">
 
                 {% set sections = [
                     {
@@ -92,14 +93,14 @@ meta:
                     </div>
                 {% endfor %}
             </div>
-            <!-- From Data Source to Application -->     
+            <!-- From Data Source to Application -->
             <h2 class="mb-16 mt-16">From Data Source to Application:</br>
                 <span class="text-indigo-600">Streamline Your UNS Workflows with FlowFuse</span></h2>
             {% image "./images/solutions/flowfuse-uns.png", "FlowFuse UNS Workflow", [1024] %}
         </div>
     </div>
 </div>
-<!--Why FlowFuse-->    
+<!--Why FlowFuse-->
 <div class="w-full bg-indigo-50/50 py-12 mt-20">
     <div class="max-w-screen-lg mx-auto px-6">
         <h2 class="font-bold m-auto w-full text-center sm:text-left mb-12">The FlowFuse <span class="text-red-600">Advantage</span></h2>
@@ -131,7 +132,7 @@ meta:
             "description": "Empowering your teams to build custom solutions with ease."
             }
             ] %}
-    
+
             {% for section in sections %}
             <div class="w-full mt-4 md:mt-0 flex flex-col">
                 <h4 class="flex justify-center sm:justify-start font-semibold text-gray-500">{{ section.title }}</h4>