From dbac6fbdb8a86098059360e8cfbd2654601263e6 Mon Sep 17 00:00:00 2001
From: ZJ van de Weg <git@zjvandeweg.nl>
Date: Wed, 30 Sep 2026 20:10:01 -0700
Subject: [PATCH 1/2] Render every use case from one template and share
 repeated bands

All eight /use-cases/ pages now render through pages/use-cases/[slug].vue
from content/use-cases/<slug>.yml. Each entry is listing metadata plus an
ordered `sections` list; a section's `type` selects a component in
components/use-case/. The six hand-written pages (scada, mes, uns,
data-integration, it-ot-middleware, remote-device-management) are removed
and their copy moved into YAML unchanged, apart from one typo fix.

Copy in YAML goes through lib/rich-text.mjs: links, bold, ==indigo== and
!!red!! accents, escaped first so content cannot inject raw HTML.

Bands that were duplicated across the site are now shared components:
- ClosingCta replaces IndustryPageCta, IndustryCta and the use-case CTA,
  keeping each caller's PostHog position.
- FaqSection renders the heading, accordion and FAQPage structured data,
  replacing hand-written copies on nine pages; BlogFaq loses its `page`
  variant, which only existed for that pairing.
- StepList replaces the copies on opcua, device-agent and
  remote-device-management.
- ResourceList replaces the thumbnail card markup on plc, opcua and the
  use-case resources band.
---
 nuxt/components/ActionButtons.vue             |  43 +++
 nuxt/components/BlogFaq.vue                   |  21 +-
 nuxt/components/ClosingCta.vue                |  49 +++
 nuxt/components/FaqSection.vue                |  42 +++
 nuxt/components/ResourceList.vue              |  35 ++
 nuxt/components/StepList.vue                  |  61 ++++
 nuxt/components/industry-page/Cta.vue         |  18 -
 nuxt/components/industry-page/Template.vue    |  19 +-
 nuxt/components/industry/Cta.vue              |  17 -
 nuxt/components/use-case/AiBuildLayer.vue     |   4 +-
 nuxt/components/use-case/ClosingCta.vue       |  29 --
 nuxt/components/use-case/Comparison.vue       |   4 +-
 nuxt/components/use-case/Competition.vue      |   4 +-
 .../components/use-case/DeploymentOptions.vue |  55 +++
 nuxt/components/use-case/Features.vue         | 125 +++++++
 nuxt/components/use-case/Hero.vue             | 102 +++++-
 nuxt/components/use-case/Outcomes.vue         |   4 +-
 nuxt/components/use-case/Pain.vue             |   4 +-
 nuxt/components/use-case/Prose.vue            |  45 +++
 nuxt/components/use-case/Resources.vue        |  32 ++
 nuxt/components/use-case/Results.vue          |  71 ++++
 nuxt/components/use-case/SolutionHero.vue     |  31 --
 nuxt/components/use-case/WhyItMatters.vue     |   4 +-
 nuxt/content.config.ts                        | 264 +++++++++++---
 nuxt/content/use-cases/data-integration.yml   |  60 +++-
 nuxt/content/use-cases/it-ot-middleware.yml   |  74 +++-
 nuxt/content/use-cases/mes.yml                |  57 +++-
 .../use-cases/production-monitoring.yml       | 221 ++++++------
 .../use-cases/remote-device-management.yml    | 131 ++++++-
 nuxt/content/use-cases/scada.yml              |  51 ++-
 .../use-cases/shop-floor-communication.yml    | 177 +++++-----
 nuxt/content/use-cases/uns.yml                |  65 +++-
 nuxt/lib/rich-text.mjs                        |  30 ++
 nuxt/lib/rich-text.test.mjs                   |  47 +++
 nuxt/pages/ai/index.vue                       |  18 +-
 nuxt/pages/index.vue                          |  16 +-
 nuxt/pages/industries/[slug].vue              |   7 +-
 nuxt/pages/integrations/opcua.vue             |  89 ++---
 nuxt/pages/landing/plc.vue                    |  44 +--
 nuxt/pages/node-red/index.vue                 |  14 +-
 nuxt/pages/platform/device-agent.vue          |  64 +---
 nuxt/pages/platform/why-flowfuse.vue          |  11 +-
 nuxt/pages/resources/roi-calculator.vue       |  11 +-
 nuxt/pages/use-cases/[slug].vue               | 119 ++++---
 nuxt/pages/use-cases/data-integration.vue     | 145 --------
 nuxt/pages/use-cases/index.vue                |   6 +-
 nuxt/pages/use-cases/it-ot-middleware.vue     | 240 -------------
 nuxt/pages/use-cases/mes.vue                  | 149 --------
 .../use-cases/remote-device-management.vue    | 322 ------------------
 nuxt/pages/use-cases/scada.vue                | 132 -------
 nuxt/pages/use-cases/uns.vue                  | 181 ----------
 51 files changed, 1725 insertions(+), 1839 deletions(-)
 create mode 100644 nuxt/components/ActionButtons.vue
 create mode 100644 nuxt/components/ClosingCta.vue
 create mode 100644 nuxt/components/FaqSection.vue
 create mode 100644 nuxt/components/ResourceList.vue
 create mode 100644 nuxt/components/StepList.vue
 delete mode 100644 nuxt/components/industry-page/Cta.vue
 delete mode 100644 nuxt/components/industry/Cta.vue
 delete mode 100644 nuxt/components/use-case/ClosingCta.vue
 create mode 100644 nuxt/components/use-case/DeploymentOptions.vue
 create mode 100644 nuxt/components/use-case/Features.vue
 create mode 100644 nuxt/components/use-case/Prose.vue
 create mode 100644 nuxt/components/use-case/Resources.vue
 create mode 100644 nuxt/components/use-case/Results.vue
 delete mode 100644 nuxt/components/use-case/SolutionHero.vue
 create mode 100644 nuxt/lib/rich-text.mjs
 create mode 100644 nuxt/lib/rich-text.test.mjs
 delete mode 100644 nuxt/pages/use-cases/data-integration.vue
 delete mode 100644 nuxt/pages/use-cases/it-ot-middleware.vue
 delete mode 100644 nuxt/pages/use-cases/mes.vue
 delete mode 100644 nuxt/pages/use-cases/remote-device-management.vue
 delete mode 100644 nuxt/pages/use-cases/scada.vue
 delete mode 100644 nuxt/pages/use-cases/uns.vue

diff --git a/nuxt/components/ActionButtons.vue b/nuxt/components/ActionButtons.vue
new file mode 100644
index 0000000000..0c44c4e2e7
--- /dev/null
+++ b/nuxt/components/ActionButtons.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+// A row of buttons given as data, for components whose buttons come from content (the
+// use-case sections) or vary per caller (<ClosingCta>). Each entry names one of the
+// fixed CTA destinations, so copy, href and event stay owned by the Cta* components; an
+// entry with `href` instead is a plain in-page link (it-ot-middleware's "Read
+// Whitepaper" jumps to its own #whitepapers list), which is navigation, not a tracked CTA.
+type Cta =
+    | { cta: 'book-demo' | 'contact-us' | 'sign-up' | 'pricing', variant?: 'primary' | 'primary-outlined' | 'highlight' | 'highlight-outlined' | 'ghost', color?: 'primary' | 'highlight' | 'white', icon?: string }
+    | { label: string, href: string }
+
+defineProps<{
+    ctas: Cta[]
+    position: string
+}>()
+
+const COMPONENTS = {
+    'book-demo': resolveComponent('CtaBookDemo'),
+    'contact-us': resolveComponent('CtaContactUs'),
+    'sign-up': resolveComponent('CtaSignUp'),
+    'pricing': resolveComponent('CtaPricing'),
+}
+
+// The first button leads, every later one follows, so a page only names a variant when it
+// wants something other than that.
+function variantFor(cta: { variant?: string }, index: number) {
+    return cta.variant || (index === 0 ? 'highlight' : 'primary-outlined')
+}
+</script>
+
+<template>
+  <template v-for="(cta, i) in ctas" :key="i">
+    <a v-if="'href' in cta" :href="cta.href" class="inline-block ff-btn ff-btn--primary-outlined shadow uppercase">{{ cta.label }}</a>
+    <component
+        :is="COMPONENTS[cta.cta]"
+        v-else
+        :variant="variantFor(cta, i)"
+        :color="cta.color"
+        :icon="cta.icon"
+        :position="position"
+        class="min-h-[40px]"
+    />
+  </template>
+</template>
diff --git a/nuxt/components/BlogFaq.vue b/nuxt/components/BlogFaq.vue
index 1011af4c5d..d12b330e4d 100644
--- a/nuxt/components/BlogFaq.vue
+++ b/nuxt/components/BlogFaq.vue
@@ -4,20 +4,11 @@
 // paragraphs, which the 11ty pages expressed with raw <i> and <p> tags under `| safe`.
 import { isListBlock, renderFaqAnswer } from '../lib/faq-answer.mjs'
 
-withDefaults(defineProps<{
+// Inside an article it sits under the post's own heading; on a marketing page
+// <FaqSection> supplies the heading, the band and the FAQPage structured data.
+defineProps<{
     faq: Array<{ question: string, answer: string }>
-    /**
-     * How much room the block takes above the first question.
-     *
-     * faq.njk had exactly these two modes: `post` inside an article, `page` everywhere a
-     * marketing page pairs it with its own <h2>. Those pages set a negative bottom margin
-     * on that heading, which only reads correctly against the taller spacing, so a page
-     * rendering this in post mode pulls its first question up over its own heading.
-     */
-    variant?: 'post' | 'page'
-}>(), {
-    variant: 'post',
-})
+}>()
 
 const openIndex = ref<number | null>(null)
 function toggle(i: number) {
@@ -26,8 +17,8 @@ function toggle(i: number) {
 </script>
 
 <template>
-  <div id="faqs" class="w-full" :class="variant === 'page' ? 'py-16' : 'py-4'">
-    <div class="m-auto w-full ff-prose" :class="{ 'mt-12': variant === 'page' }">
+  <div id="faqs" class="w-full py-4">
+    <div class="m-auto w-full ff-prose">
       <div class="prose max-w-none">
         <div v-for="(item, i) in faq" :key="i" class="w-full py-4" :class="{ 'border-b': i !== faq.length - 1 }">
           <h3 class="not-prose m-0">
diff --git a/nuxt/components/ClosingCta.vue b/nuxt/components/ClosingCta.vue
new file mode 100644
index 0000000000..a493e4762f
--- /dev/null
+++ b/nuxt/components/ClosingCta.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+// The band a marketing page ends on. Before this there were three copies: one for the
+// use cases, one for the industry pages and one for the legacy industry pages.
+//  - card: the light blue `ff-blue-card` (use cases, legacy industry pages, /use-cases/).
+//  - banner: the dark `ff-get-started-bg` gradient (industry pages,
+//    remote-device-management).
+// Buttons are a list of fixed CTA destinations (see <ActionButtons>), a demo request plus
+// sign-up unless the caller lists its own. `position` is the PostHog placement name, kept
+// per caller so each page's existing series carries on.
+import { richText } from '../lib/rich-text.mjs'
+
+withDefaults(defineProps<{
+    heading: string
+    description?: string
+    layout?: 'card' | 'banner'
+    ctas?: Array<Record<string, unknown>>
+    position?: string
+}>(), {
+    description: undefined,
+    layout: 'card',
+    ctas: () => [{ cta: 'book-demo' }, { cta: 'sign-up' }],
+    position: 'footer',
+})
+</script>
+
+<template>
+  <!-- eslint-disable vue/no-v-html -->
+  <section v-if="layout === 'banner'" class="w-full px-6 py-20">
+    <div class="max-w-screen-lg mx-auto">
+      <div class="rounded-xl px-9 py-12 flex flex-col items-center gap-8 text-center ff-get-started-bg">
+        <p class="text-white text-4xl sm:text-5xl font-medium m-0" v-html="richText(heading)" />
+        <p v-if="description" class="text-indigo-50 font-light text-xl max-w-3xl m-0" v-html="richText(description)" />
+        <div class="flex flex-col sm:flex-row gap-4 items-center">
+          <ActionButtons :ctas="ctas" :position="position" />
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section v-else class="w-full px-6 py-20">
+    <div class="ff-blue-card max-md:max-w-xl md:max-w-screen-lg mx-auto pt-12 pb-10 text-center">
+      <h3 class="mb-4 w-full text-center" v-html="richText(heading)" />
+      <p v-if="description" class="text-gray-600 mb-8 max-w-2xl mx-auto text-center" v-html="richText(description)" />
+      <div class="flex flex-wrap gap-4 justify-center" :class="{ 'mt-8': !description }">
+        <ActionButtons :ctas="ctas" :position="position" />
+      </div>
+    </div>
+  </section>
+</template>
diff --git a/nuxt/components/FaqSection.vue b/nuxt/components/FaqSection.vue
new file mode 100644
index 0000000000..f23367f9e9
--- /dev/null
+++ b/nuxt/components/FaqSection.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+// A page's FAQ band: a heading over the <BlogFaq> accordion, plus the FAQPage structured
+// data for the same questions. Every marketing page used to write all three by hand, with
+// its own negative-margin trick to pull the accordion up under its heading.
+//
+// `schemaItems` is for a page whose displayed copy is altered for layout only, so search
+// engines still get the plain text: device-agent shows "Node‑RED" with a non-breaking
+// hyphen. `schema: false` is for a page that emits its FAQPage some other way.
+import { richText } from '../lib/rich-text.mjs'
+
+const props = withDefaults(defineProps<{
+    items: Array<{ question: string, answer: string }>
+    heading?: string
+    background?: 'white' | 'gray' | 'indigo'
+    schema?: boolean
+    schemaItems?: Array<{ question: string, answer: string }>
+}>(), {
+    heading: 'Frequently Asked ==Questions==',
+    background: 'white',
+    schema: true,
+    schemaItems: undefined,
+})
+
+const BACKGROUNDS = { white: '', gray: 'bg-gray-50', indigo: 'bg-indigo-50/50' }
+
+if (props.schema && props.items.length) {
+    useSchemaOrg([
+        defineWebPage({ '@type': 'FAQPage' }),
+        ...(props.schemaItems || props.items).map(item => defineQuestion({ question: item.question, answer: item.answer })),
+    ])
+}
+</script>
+
+<template>
+  <section class="w-full px-6 py-16" :class="BACKGROUNDS[background]">
+    <div class="max-w-screen-lg mx-auto">
+      <!-- eslint-disable-next-line vue/no-v-html -->
+      <h2 class="mb-4 max-md:text-center" v-html="richText(heading)" />
+      <BlogFaq :faq="items" />
+    </div>
+  </section>
+</template>
diff --git a/nuxt/components/ResourceList.vue b/nuxt/components/ResourceList.vue
new file mode 100644
index 0000000000..0cfcbad1cf
--- /dev/null
+++ b/nuxt/components/ResourceList.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+// Thumbnail link cards in the `ff-nodered-resources` style: a cover image on the left,
+// the title on the right. /landing/plc/, /integrations/opcua/ and the UNS and IT/OT use
+// cases each carried a copy of this markup. The caller keeps its own headings and
+// "see all" links; this is only the list.
+//
+// `columns` is 2 for a grid of cards, or 1 for a single stacked column (the use-case
+// resources band sets two of those side by side).
+withDefaults(defineProps<{
+    items: Array<{
+        title: string
+        href: string
+        image: string
+        alt: string
+        // A bold run before the title, e.g. "Free whitepaper:".
+        lead?: string
+    }>
+    columns?: 1 | 2
+}>(), { columns: 2 })
+</script>
+
+<template>
+  <div class="ff-nodered-resources grid grid-cols-1 gap-4" :class="{ 'md:grid-cols-2': columns === 2 }">
+    <NuxtLink v-for="item in items" :key="item.href" :to="item.href" class="h-full">
+      <li class="h-full">
+        <div class="w-2/5 max-md:aspect-video ff-image-cover ff-image-left-rounded h-full">
+          <img :src="item.image" :alt="item.alt" width="208" loading="lazy" class="w-full h-auto">
+        </div>
+        <label class="w-3/5 font-light text-left">
+          <span v-if="item.lead" class="font-semibold">{{ item.lead }} </span>{{ item.title }}
+        </label>
+      </li>
+    </NuxtLink>
+  </div>
+</template>
diff --git a/nuxt/components/StepList.vue b/nuxt/components/StepList.vue
new file mode 100644
index 0000000000..c7f1240d07
--- /dev/null
+++ b/nuxt/components/StepList.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+// A numbered vertical step list beside a sticky heading. It started as the "From OPC UA
+// to insight, step by step" band on /integrations/opcua/, and /platform/device-agent/
+// and /use-cases/remote-device-management/ each carried a copy before this.
+//
+// Each step's `label` defaults to "Step <n>". All copy goes through lib/rich-text.mjs, so
+// it can carry links and accents but not raw HTML.
+//
+// On mobile the icon sits between two short horizontal lines; from sm up there is a
+// single vertical line below it, offset so the icon lines up with the title rather than
+// the label above it.
+import { richText } from '../lib/rich-text.mjs'
+
+defineProps<{
+    heading: string
+    eyebrow?: string
+    intro?: string
+    link?: { label: string, href: string }
+    steps: Array<{ icon: string, title: string, text: string | string[], label?: string }>
+}>()
+
+const paragraphs = (text: string | string[]) => (Array.isArray(text) ? text : [text])
+</script>
+
+<template>
+  <!-- eslint-disable vue/no-v-html -->
+  <section class="w-full px-6 py-20 md:py-24">
+    <div class="max-w-screen-lg mx-auto md:flex md:gap-12 md:items-start">
+      <div class="mb-12 md:mb-0 md:w-[373px] md:shrink-0 md:sticky! md:top-24 md:self-start max-md:text-center">
+        <p v-if="eyebrow" class="text-gray-500 text-sm font-semibold uppercase mt-0 mb-3">{{ eyebrow }}</p>
+        <h2 class="mt-0 mb-0" v-html="richText(heading)" />
+        <p v-if="intro" class="font-light text-gray-700 leading-relaxed mt-6 mb-0" v-html="richText(intro)" />
+        <NuxtLink v-if="link" :to="link.href" class="mt-3 inline-flex items-center gap-1.5">
+          {{ link.label }}
+          <UIcon name="i-heroicons-arrow-long-right-20-solid" class="w-5 h-5 shrink-0" />
+        </NuxtLink>
+      </div>
+      <div class="max-w-screen-md mx-auto md:mx-0">
+        <div v-for="(step, index) in steps" :key="step.title" class="flex flex-col sm:flex-row gap-3 sm:gap-6">
+          <div class="flex items-center gap-3 sm:flex-col sm:items-center sm:gap-0">
+            <div class="ff-line h-px flex-1 sm:hidden" />
+            <UIcon :name="step.icon" class="w-6 h-6 text-indigo-600 shrink-0 sm:mt-7" />
+            <div class="ff-line h-px flex-1 sm:hidden" />
+            <div v-if="index !== steps.length - 1" class="ff-line hidden sm:block w-px flex-1 my-4 bg-gray-300" />
+          </div>
+          <div :class="index !== steps.length - 1 ? 'pb-10 sm:pb-12' : ''">
+            <span class="block text-sm font-semibold text-gray-500 mb-1 text-center sm:text-left">{{ step.label || `Step ${index + 1}` }}</span>
+            <h3 class="mt-0 mb-4 sm:mb-2 text-xl font-semibold text-indigo-600 text-center sm:text-left">{{ step.title }}</h3>
+            <p
+                v-for="(paragraph, p) in paragraphs(step.text)"
+                :key="p"
+                class="font-light text-gray-600"
+                :class="p === paragraphs(step.text).length - 1 ? 'mb-0' : ''"
+                v-html="richText(paragraph)"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
diff --git a/nuxt/components/industry-page/Cta.vue b/nuxt/components/industry-page/Cta.vue
deleted file mode 100644
index 7368c77a9e..0000000000
--- a/nuxt/components/industry-page/Cta.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<script setup lang="ts">
-// The closing CTA band from automotive.vue. Distinct from industry-page/Roi's fixed link
-// and from the industriesLegacy Cta band: this one is the "get started" gradient card,
-// always ending in a single Book-a-demo button.
-defineProps<{ heading: string, description: string }>()
-</script>
-
-<template>
-  <div class="w-full px-6 pb-20">
-    <div class="max-w-screen-lg mx-auto">
-      <div class="rounded-xl px-9 py-12 flex flex-col items-center gap-8 text-center ff-get-started-bg">
-        <p class="text-white text-5xl font-medium m-0">{{ heading }}</p>
-        <p class="text-indigo-50 font-light text-xl max-w-2xl m-0">{{ description }}</p>
-        <CtaBookDemo variant="highlight" position="final-cta" />
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/nuxt/components/industry-page/Template.vue b/nuxt/components/industry-page/Template.vue
index efd775da98..6e72138a84 100644
--- a/nuxt/components/industry-page/Template.vue
+++ b/nuxt/components/industry-page/Template.vue
@@ -42,10 +42,6 @@ useSeoMeta({
     twitterSite: '@FlowFuseinc',
 })
 
-useSchemaOrg([
-    defineWebPage({ '@type': 'FAQPage' }),
-    ...props.page.faqs.map(item => defineQuestion(item)),
-])
 </script>
 
 <template>
@@ -76,13 +72,14 @@ useSchemaOrg([
          slug shows up here. Shared with the industriesLegacy [slug].vue's own band. -->
     <IndustryPageUseCases :slug="page.slug" :display-name="page.industryName" />
 
-    <div class="w-full px-6 pt-20 pb-10">
-      <div class="max-w-screen-lg mx-auto">
-        <h2 class="mb-1 text-center md:text-left">Frequently Asked <span class="text-indigo-600">Questions</span></h2>
-        <BlogFaq :faq="page.faqs" />
-      </div>
-    </div>
+    <FaqSection :items="page.faqs" />
 
-    <IndustryPageCta :heading="page.closingCta.heading" :description="page.closingCta.description" />
+    <ClosingCta
+        layout="banner"
+        :heading="page.closingCta.heading"
+        :description="page.closingCta.description"
+        :ctas="[{ cta: 'book-demo' }]"
+        position="final-cta"
+    />
   </div>
 </template>
diff --git a/nuxt/components/industry/Cta.vue b/nuxt/components/industry/Cta.vue
deleted file mode 100644
index c803f10f12..0000000000
--- a/nuxt/components/industry/Cta.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script setup lang="ts">
-// The closing CTA band from layouts/industry.njk. Distinct from the use-case one: a
-// single Book-a-demo button, and the copy is per page rather than defaulted.
-defineProps<{ cta: { title: string, description?: string } }>()
-</script>
-
-<template>
-  <div class="w-full px-6 pt-12 sm:pt-16 pb-24">
-    <div class="ff-blue-card max-md:max-w-xl md:max-w-screen-lg mx-auto pt-12 pb-10">
-      <h3 class="mb-4 w-full text-center">{{ cta.title }}</h3>
-      <p class="text-center text-gray-600 mb-8 max-w-2xl mx-auto">{{ cta.description }}</p>
-      <div class="flex justify-center">
-        <CtaBookDemo variant="highlight" position="cta" class="min-h-[40px]" />
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/nuxt/components/use-case/AiBuildLayer.vue b/nuxt/components/use-case/AiBuildLayer.vue
index 6b4207e911..ee0eff3698 100644
--- a/nuxt/components/use-case/AiBuildLayer.vue
+++ b/nuxt/components/use-case/AiBuildLayer.vue
@@ -3,6 +3,8 @@
 // <a class="ff-btn"> with an inline capture() call; this keeps the same event name and
 // props but routes it through useCapture like every other Nuxt CTA.
 const props = defineProps<{
+    // Its position among the numbered sections, matching the section nav ("01").
+    number: string
     block: {
         heading?: string
         intro?: string
@@ -22,7 +24,7 @@ function ordinal(index: number) {
 <template>
   <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>
+      <p class="uppercase text-xs font-semibold text-indigo-400 mb-2">{{ number }} · Build it with AI</p>
       <h2 class="max-md:text-center">{{ block.heading || 'From described to deployed, with the FlowFuse Expert' }}</h2>
       <p v-if="block.intro" class="mt-4 max-w-3xl text-gray-600">{{ block.intro }}</p>
       <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-12">
diff --git a/nuxt/components/use-case/ClosingCta.vue b/nuxt/components/use-case/ClosingCta.vue
deleted file mode 100644
index 32f4d479ea..0000000000
--- a/nuxt/components/use-case/ClosingCta.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<script setup lang="ts">
-// The closing CTA band that layouts/use-case.njk and src/use-cases.njk both ended on.
-// The markup and the sign-up button are identical; they differ only in the lead CTA
-// (the layout asks for a demo, the listing asks for contact), so that stays a prop
-// rather than being flattened to one of the two.
-withDefaults(defineProps<{
-    heading?: string
-    description?: string
-    lead?: 'book-demo' | 'contact-us'
-}>(), {
-    heading: 'See it on your operations',
-    description: 'Talk to an expert, or get started with FlowFuse today.',
-    lead: 'book-demo',
-})
-</script>
-
-<template>
-  <div class="w-full px-6 py-20">
-    <div class="ff-blue-card max-md:max-w-xl md:max-w-screen-lg mx-auto pt-12 pb-10 text-center">
-      <h3 class="mb-4 w-full text-center">{{ heading }}</h3>
-      <p class="text-gray-600 mb-8 max-w-xl mx-auto text-center">{{ description }}</p>
-      <div class="flex flex-wrap gap-4 justify-center">
-        <CtaBookDemo v-if="lead === 'book-demo'" variant="highlight" position="footer" class="min-h-[40px]" />
-        <CtaContactUs v-else variant="highlight" position="footer" class="min-h-[40px]" />
-        <CtaSignUp variant="primary-outlined" position="footer" class="min-h-[40px]" />
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/nuxt/components/use-case/Comparison.vue b/nuxt/components/use-case/Comparison.vue
index 7fb3822190..04cc72c3c5 100644
--- a/nuxt/components/use-case/Comparison.vue
+++ b/nuxt/components/use-case/Comparison.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 // "05 With / without FlowFuse" from layouts/use-case.njk.
 defineProps<{
+    // Its position among the numbered sections, matching the section nav ("01").
+    number: string
     block: {
         without?: Array<{ title: string, detail: string }>
         with?: Array<{ title: string, detail: string }>
@@ -11,7 +13,7 @@ defineProps<{
 <template>
   <div id="with-without" class="w-full py-16 sm:py-24 px-6 comparison-section-bg scroll-mt-16">
     <div class="max-w-screen-lg mx-auto">
-      <p class="uppercase text-xs font-semibold text-indigo-400 mb-2">05 · With / without FlowFuse</p>
+      <p class="uppercase text-xs font-semibold text-indigo-400 mb-2">{{ number }} · With / without FlowFuse</p>
       <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mt-6">
         <div>
           <h3 class="text-gray-500 m-0">Without FlowFuse</h3>
diff --git a/nuxt/components/use-case/Competition.vue b/nuxt/components/use-case/Competition.vue
index 9c47d1eaef..61bca2ae5a 100644
--- a/nuxt/components/use-case/Competition.vue
+++ b/nuxt/components/use-case/Competition.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 // "04 Why off-the-shelf doesn't work" from layouts/use-case.njk.
 defineProps<{
+    // Its position among the numbered sections, matching the section nav ("01").
+    number: string
     block: {
         heading: string
         intro?: string
@@ -12,7 +14,7 @@ defineProps<{
 <template>
   <div id="competition" class="w-full py-16 sm:py-24 px-6 bg-white scroll-mt-16">
     <div class="max-w-screen-lg mx-auto">
-      <p class="uppercase text-xs font-semibold text-indigo-400 mb-2">04 · Why off-the-shelf doesn't work</p>
+      <p class="uppercase text-xs font-semibold text-indigo-400 mb-2">{{ number }} · Why off-the-shelf doesn't work</p>
       <h2 class="max-md:text-center">{{ block.heading }}</h2>
       <p v-if="block.intro" class="mt-4 max-w-3xl text-gray-600">{{ block.intro }}</p>
       <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-12">
diff --git a/nuxt/components/use-case/DeploymentOptions.vue b/nuxt/components/use-case/DeploymentOptions.vue
new file mode 100644
index 0000000000..fb26d045a4
--- /dev/null
+++ b/nuxt/components/use-case/DeploymentOptions.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+// FlowFuse Cloud, self-managed and edge, as three cards. This is product copy rather
+// than anything one use case says differently, so it lives here rather than in YAML.
+// The self-managed card's link is not one of the five CTA destinations, so it keeps its
+// own `cta-install` event, routed through useCapture.
+const capture = useCapture()
+</script>
+
+<template>
+  <section class="w-full px-6 pt-8 pb-20">
+    <div class="text-center mb-14">
+      <h2>Flexible Deployment Options with <span class="text-indigo-600">FlowFuse</span></h2>
+    </div>
+    <div class="container m-auto max-w-screen-lg">
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-12 md:gap-5 max-w-md md:max-w-none mx-auto">
+        <div class="deployment-card white-bg">
+          <div>
+            <div class="title pb-4"><h4 class="text-indigo-600">FlowFuse Cloud</h4></div>
+            <p class="mb-0 text-left">
+              The easiest way to start building industrial applications. No installation required! Simply sign up and
+              gain immediate access to the editor.
+            </p>
+          </div>
+          <CtaSignUp variant="primary-outlined" position="deployment-options" class="md:self-end align-baseline w-full mt-3" />
+        </div>
+        <div class="deployment-card white-bg">
+          <div>
+            <div class="title">
+              <h4 class="text-indigo-600">Self managed</h4>
+              <div class="text-base font-bold text-gray-600 pb-4">(on premise)</div>
+            </div>
+            <p class="mb-0 text-left">
+              Run FlowFuse where you prefer; that's possible too! In your cloud of preference, or even on-site.
+            </p>
+          </div>
+          <NuxtLink
+              class="md:self-end ff-btn ff-btn--primary-outlined uppercase align-baseline w-full mt-3"
+              to="/docs/install/introduction/"
+              @click="capture('cta-install', { position: 'deployment-options' })"
+          >INSTALL NOW</NuxtLink>
+        </div>
+        <div class="deployment-card white-bg">
+          <div>
+            <div class="title pb-4"><h4 class="text-indigo-600">Edge device</h4></div>
+            <p class="mb-0 text-left">
+              Run FlowFuse where the data is generated. Manage thousands of edge devices through the FlowFuse Device
+              Agent.
+            </p>
+          </div>
+          <NuxtLink class="md:self-end ff-btn ff-btn--primary-outlined uppercase align-baseline w-full mt-3" to="/platform/device-agent/">MORE INFO</NuxtLink>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
diff --git a/nuxt/components/use-case/Features.vue b/nuxt/components/use-case/Features.vue
new file mode 100644
index 0000000000..8abdf78b49
--- /dev/null
+++ b/nuxt/components/use-case/Features.vue
@@ -0,0 +1,125 @@
+<script setup lang="ts">
+// A list of items, each optionally led by an icon or pictogram, under an optional
+// eyebrow, heading and intro. Before the template every architecture page wrote its own
+// copy of this band: "The FlowFuse Advantage" three times verbatim, plus feature grids,
+// challenge lists and pictogram rows that differed only in what led each item.
+//
+// `layout` keeps the four looks those copies actually had:
+//  - grid: plain items in 1-3 columns.
+//  - cards: items on translucent white cards (meant for the gradient background).
+//  - panel: the whole list inside one bordered indigo panel.
+//  - alternating: one item per row, pictogram flipping sides.
+import { richText } from '../../lib/rich-text.mjs'
+
+const props = defineProps<{
+    block: {
+        layout?: 'grid' | 'cards' | 'panel' | 'alternating'
+        columns?: number
+        background?: 'white' | 'gray' | 'indigo' | 'gradient'
+        centered?: boolean
+        eyebrow?: string
+        heading?: string
+        intro?: string
+        lead?: string
+        image?: { src: string, alt: string, width?: number }
+        items: Array<{
+            icon?: string
+            navIcon?: string
+            solid?: boolean
+            image?: string
+            title?: string
+            text?: string | string[]
+        }>
+        note?: string
+    }
+}>()
+
+const layout = computed(() => props.block.layout || 'grid')
+
+const BACKGROUNDS = {
+    white: '',
+    gray: 'bg-gray-50',
+    indigo: 'bg-indigo-50/50',
+    gradient: 'comparison-section-bg',
+}
+
+// Written out in full so Tailwind sees every class.
+const COLUMNS: Record<number, string> = {
+    1: 'grid-cols-1',
+    2: 'grid-cols-1 md:grid-cols-2',
+    3: 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3',
+}
+
+const paragraphs = (text?: string | string[]) => (Array.isArray(text) ? text : text ? [text] : [])
+</script>
+
+<template>
+  <!-- eslint-disable vue/no-v-html -->
+  <section class="w-full px-6 py-16 md:py-20" :class="BACKGROUNDS[block.background || 'white']">
+    <div class="max-w-screen-lg mx-auto" :class="{ 'text-center': block.centered }">
+      <div
+          :class="layout === 'panel' ? 'm-auto text-center sm:text-left p-8 max-w-md sm:max-w-screen-lg bg-indigo-50 rounded-lg border-[3px] border-indigo-200 drop-shadow-xl' : ''"
+      >
+        <p v-if="block.eyebrow" class="text-gray-500 text-sm font-semibold uppercase m-0 max-md:text-center">{{ block.eyebrow }}</p>
+        <h2 v-if="block.heading" class="max-md:text-center" :class="block.eyebrow ? 'mt-3 mb-0' : 'mb-0'" v-html="richText(block.heading)" />
+        <p v-if="block.intro" class="mt-6 mb-0 max-w-3xl max-md:text-center" :class="{ 'mx-auto': block.centered }" v-html="richText(block.intro)" />
+
+        <div v-if="block.image" class="mx-auto mt-10" :style="{ maxWidth: block.image.width ? `${block.image.width}px` : undefined }">
+          <img :src="block.image.src" :alt="block.image.alt" :width="block.image.width || 1024" loading="lazy" class="w-full h-auto">
+        </div>
+
+        <div v-if="layout === 'alternating'" class="mt-16">
+          <div
+              v-for="(item, i) in block.items"
+              :key="item.title"
+              class="flex flex-col gap-8 mb-12 text-left items-center"
+              :class="i % 2 === 0 ? 'sm:flex-row sm:pr-24 md:pr-48' : 'sm:flex-row-reverse sm:text-right sm:pl-24 md:pl-48'"
+          >
+            <div v-if="item.image" class="w-32 sm:w-48 flex-shrink-0">
+              <img :src="item.image" alt="" width="128" loading="lazy" class="w-full h-auto">
+            </div>
+            <div>
+              <h4 v-if="item.title" v-html="richText(item.title)" />
+              <p v-for="(paragraph, p) in paragraphs(item.text)" :key="p" v-html="richText(paragraph)" />
+            </div>
+          </div>
+        </div>
+
+        <div v-else class="grid gap-x-12 gap-y-12 mt-12 text-left" :class="COLUMNS[block.columns || 3]">
+          <div v-if="block.lead" class="flex flex-col justify-center w-full max-md:max-w-md mx-auto sm:bg-indigo-50 rounded-lg sm:p-7">
+            <h3 class="text-center w-full sm:text-left text-3xl text-gray-500 font-light leading-snug m-0" v-html="richText(block.lead)" />
+          </div>
+          <div
+              v-for="(item, i) in block.items"
+              :key="item.title || i"
+              class="flex flex-col max-md:text-center"
+              :class="layout === 'cards'
+                ? 'gap-9 rounded-lg border border-white p-5 bg-[linear-gradient(135deg,_theme(colors.white)_0%,_theme(colors.white/20%)_100%)]'
+                : 'gap-3'"
+          >
+            <UIcon v-if="item.icon" :name="item.icon" class="w-8 h-8 text-indigo-600 max-md:mx-auto" />
+            <div v-else-if="item.navIcon" class="text-indigo-700">
+              <NavIcon :name="item.navIcon" :solid="item.solid" size="lg" />
+            </div>
+            <div v-else-if="item.image" class="w-24 mb-3 flex-shrink-0 max-md:mx-auto">
+              <img :src="item.image" alt="" width="128" loading="lazy" class="w-full h-auto">
+            </div>
+            <div>
+              <h3 v-if="item.title" class="text-xl font-semibold text-gray-600 m-0" v-html="richText(item.title)" />
+              <p
+                  v-for="(paragraph, p) in paragraphs(item.text)"
+                  :key="p"
+                  class="font-light text-gray-700 leading-relaxed mb-0"
+                  :class="item.title ? 'mt-4' : 'mt-0'"
+                  v-html="richText(paragraph)"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- eslint-disable-next-line vue/no-v-html -->
+      <ProseNote v-if="block.note" class="mt-16"><span v-html="richText(block.note)" /></ProseNote>
+    </div>
+  </section>
+</template>
diff --git a/nuxt/components/use-case/Hero.vue b/nuxt/components/use-case/Hero.vue
index e8fb3c78d4..0ffe8298f3 100644
--- a/nuxt/components/use-case/Hero.vue
+++ b/nuxt/components/use-case/Hero.vue
@@ -1,17 +1,105 @@
 <script setup lang="ts">
-// The hero band from layouts/use-case.njk. Ported verbatim, classes included.
-defineProps<{ title: string, problem?: string }>()
+// Every use-case hero, one `layout` per look:
+//  - centered: the operational pages' band (ported from layouts/use-case.njk).
+//  - split: copy left, art right; SCADA, MES and UNS, which shared it verbatim.
+//  - pictogram: a centred title over a pictogram beside the text (layouts/solution.njk).
+//  - feature: copy left, a framed photo right, an optional quote under both, all under
+//    one indigo glow from the top-right corner (remote-device-management).
+// `heading` and `text` fall back to the page's own title and problem, which is what the
+// operational pages show.
+import { richText } from '../../lib/rich-text.mjs'
+
+type Image = { src: string, alt: string, width?: number }
+
+const props = defineProps<{
+    hero: {
+        layout: 'centered' | 'split' | 'pictogram' | 'feature'
+        eyebrow?: string
+        heading?: string
+        subtitle?: string
+        text?: string
+        image?: Image
+        ctas?: Array<Record<string, unknown>>
+        quote?: { text: string, author: string, role?: string, avatar?: string }
+    }
+    title: string
+    problem?: string
+}>()
+
+// The centered band shows the page title in the indigo accent, as layouts/use-case.njk did.
+const heading = computed(() => {
+    if (props.hero.heading) return richText(props.hero.heading)
+    return richText(props.hero.layout === 'centered' ? `==${props.title}==` : props.title)
+})
+const text = computed(() => richText(props.hero.text || props.problem))
+const ctas = computed(() => props.hero.ctas || [{ cta: 'book-demo' }])
+const maxWidth = (image?: Image) => image?.width ? `${image.width}px` : undefined
 </script>
 
 <template>
-  <div class="w-full px-6 bg-[radial-gradient(ellipse_120%_140%_at_50%_-20%,theme(colors.indigo.50)_0%,theme(colors.white)_60%)]">
+  <!-- eslint-disable vue/no-v-html -->
+  <div v-if="hero.layout === 'centered'" class="w-full px-6 bg-[radial-gradient(ellipse_120%_140%_at_50%_-20%,theme(colors.indigo.50)_0%,theme(colors.white)_60%)]">
     <div class="max-w-screen-lg mx-auto py-16 sm:py-24 text-center">
-      <p class="uppercase text-sm font-semibold text-indigo-500 mb-4">Use case</p>
-      <h1 class="m-auto max-w-3xl font-medium"><span class="text-indigo-600">{{ title }}</span></h1>
-      <p v-if="problem" class="mt-6 max-w-2xl mx-auto text-lg text-gray-600">{{ problem }}</p>
+      <p class="uppercase text-sm font-semibold text-indigo-500 mb-4">{{ hero.eyebrow || 'Use case' }}</p>
+      <h1 class="m-auto max-w-3xl font-medium" v-html="heading" />
+      <p v-if="text" class="mt-6 max-w-2xl mx-auto text-lg text-gray-600" v-html="text" />
       <div class="mt-10 flex flex-wrap gap-4 justify-center">
-        <CtaBookDemo variant="highlight" position="hero" class="min-h-[40px]" />
+        <ActionButtons :ctas="ctas" position="hero" />
+      </div>
+    </div>
+  </div>
+
+  <div v-else-if="hero.layout === 'split'" class="w-full px-6 pt-12 pb-20 md:pt-6 md:pb-8">
+    <div class="md:flex md:my-16 items-center md:flex-row md:justify-between container mx-auto text-center md:text-left md:max-w-screen-lg gap-8">
+      <div class="my-auto max-md:mx-auto md:w-1/2 lg:w-5/12 max-w-lg">
+        <h1 class="w-full mt-0 md:px-0 m-auto font-medium" v-html="heading" />
+        <p class="mb-10" v-html="text" />
+        <div v-if="hero.image" class="flex md:hidden justify-center m-auto max-w-[400px] mb-10">
+          <img :src="hero.image.src" :alt="hero.image.alt" width="400" class="w-full h-auto">
+        </div>
+        <div class="flex gap-3 max-md:max-w-sm max-md:mx-auto max-sm:flex-col max-md:justify-center">
+          <ActionButtons :ctas="ctas" position="hero" />
+        </div>
+      </div>
+      <div v-if="hero.image" class="flex max-md:hidden justify-center m-auto" :style="{ maxWidth: maxWidth(hero.image) }">
+        <img :src="hero.image.src" :alt="hero.image.alt" :width="hero.image.width" class="w-full h-auto">
+      </div>
+    </div>
+  </div>
+
+  <div v-else-if="hero.layout === 'pictogram'" class="page w-full px-6 mt-12 md:px-0">
+    <div class="hero container m-auto text-center max-w-screen-md">
+      <h1 class="px-12 md:px-0 m-auto" v-html="heading" />
+      <h4 v-if="hero.subtitle" class="mt-4 text-indigo-400">{{ hero.subtitle }}</h4>
+      <div class="flex items-center gap-6 mt-6">
+        <div v-if="hero.image" class="hidden sm:block w-64 flex-shrink-0">
+          <img :src="hero.image.src" :alt="hero.image.alt" width="250" class="w-full h-auto">
+        </div>
+        <div class="flex flex-col justify-center text-center sm:text-left py-2">
+          <p class="mt-0" v-html="text" />
+        </div>
+      </div>
+    </div>
+    <div class="mt-6 flex flex-wrap gap-8 justify-center">
+      <ActionButtons :ctas="ctas" position="hero" />
+    </div>
+  </div>
+
+  <div v-else class="w-full px-6 bg-[radial-gradient(ellipse_65%_80%_at_100%_0%,theme(colors.indigo.100)_0%,theme(colors.indigo.50/0)_100%)]">
+    <section class="max-w-screen-lg mx-auto pt-16 md:pt-32 grid md:grid-cols-2 gap-12 items-center">
+      <div class="text-center md:text-left">
+        <h1 class="text-4xl md:text-[42px] md:leading-10 font-medium m-0" v-html="heading" />
+        <p class="mt-10 text-gray-700 leading-relaxed max-w-md mx-auto md:mx-0" v-html="text" />
+        <div class="mt-12 flex flex-row flex-wrap gap-4 items-center justify-center md:justify-start">
+          <ActionButtons :ctas="ctas" position="hero" />
+        </div>
+      </div>
+      <div v-if="hero.image" class="rounded-xl border-2 border-red-100 overflow-hidden shadow-[20px_20px_40px_0_rgba(0,0,0,0.25)] aspect-[3/2]">
+        <img :src="hero.image.src" :alt="hero.image.alt" width="1082" height="722" class="w-full h-full object-cover" loading="eager">
       </div>
+    </section>
+    <div v-if="hero.quote" class="max-w-screen-lg mx-auto pt-16">
+      <QuoteBlock :quote="hero.quote.text" :author="hero.quote.author" :role="hero.quote.role" :avatar="hero.quote.avatar" />
     </div>
   </div>
 </template>
diff --git a/nuxt/components/use-case/Outcomes.vue b/nuxt/components/use-case/Outcomes.vue
index 5fcaee08b7..ef1eccd569 100644
--- a/nuxt/components/use-case/Outcomes.vue
+++ b/nuxt/components/use-case/Outcomes.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 // "02 Outcome first" from layouts/use-case.njk.
 defineProps<{
+    // Its position among the numbered sections, matching the section nav ("01").
+    number: string
     block: {
         heading: string
         intro?: string
@@ -12,7 +14,7 @@ defineProps<{
 <template>
   <div id="outcome-first" 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">02 · Outcome first</p>
+      <p class="uppercase text-xs font-semibold text-indigo-400 mb-2">{{ number }} · Outcome first</p>
       <h2 class="max-md:text-center">{{ block.heading }}</h2>
       <p v-if="block.intro" class="mt-4 max-w-3xl text-gray-600">{{ block.intro }}</p>
       <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-12">
diff --git a/nuxt/components/use-case/Pain.vue b/nuxt/components/use-case/Pain.vue
index 8ee0230f17..6f41268aa2 100644
--- a/nuxt/components/use-case/Pain.vue
+++ b/nuxt/components/use-case/Pain.vue
@@ -3,6 +3,8 @@
 // The .njk pulled card icons with {% include "components/icons/<name>.svg" %}; content
 // now names the Iconify glyph directly, so <UIcon> resolves it with nothing in between.
 defineProps<{
+    // Its position among the numbered sections, matching the section nav ("01").
+    number: string
     block: {
         heading: string
         intro?: string[]
@@ -14,7 +16,7 @@ defineProps<{
 <template>
   <div id="customer-pain" class="w-full py-16 sm:py-24 px-6 bg-white scroll-mt-16">
     <div class="max-w-screen-lg mx-auto">
-      <p class="uppercase text-xs font-semibold text-indigo-400 mb-2">01 · Customer pain</p>
+      <p class="uppercase text-xs font-semibold text-indigo-400 mb-2">{{ number }} · Customer pain</p>
       <h2 class="max-md:text-center"><span class="text-red-600">{{ block.heading }}</span></h2>
       <div class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl">
         <p v-for="(paragraph, i) in block.intro" :key="i" class="text-gray-600 m-0">{{ paragraph }}</p>
diff --git a/nuxt/components/use-case/Prose.vue b/nuxt/components/use-case/Prose.vue
new file mode 100644
index 0000000000..f8a0e9190a
--- /dev/null
+++ b/nuxt/components/use-case/Prose.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+// Headings, paragraphs and images in reading order: the "How it Works" write-ups on
+// SCADA and MES, the architecture diagrams on UNS and IT/OT. With `callout`, the heading
+// and the first paragraph sit side by side in the bordered card SCADA and MES opened with.
+import { richText } from '../../lib/rich-text.mjs'
+
+type Image = { src: string, alt: string, width?: number, framed?: boolean }
+
+const props = defineProps<{
+    block: {
+        heading?: string
+        callout?: boolean
+        body: Array<string | { image: Image }>
+    }
+}>()
+
+// A callout takes its first paragraph into the card; anything after it follows below.
+const calloutText = computed(() => props.block.callout && typeof props.block.body[0] === 'string' ? props.block.body[0] : undefined)
+const body = computed(() => calloutText.value ? props.block.body.slice(1) : props.block.body)
+</script>
+
+<template>
+  <!-- eslint-disable vue/no-v-html -->
+  <section class="w-full px-6 pt-8 pb-8">
+    <div class="max-w-screen-lg mx-auto">
+      <div v-if="block.callout" class="flex md:flex-row flex-col w-full bg-white border-2 border-indigo-200 px-6 py-2 drop-shadow-lg md:gap-6 rounded-lg">
+        <h2 class="w-full max-sm:mx-auto my-6 text-indigo-400" v-html="richText(block.heading)" />
+        <p v-if="calloutText" class="md:max-w-2/3 max-sm:mx-auto" v-html="richText(calloutText)" />
+      </div>
+      <h2 v-else-if="block.heading" class="mt-8" v-html="richText(block.heading)" />
+
+      <template v-for="(item, i) in body" :key="i">
+        <p v-if="typeof item === 'string'" class="w-full max-sm:mx-auto mt-6" v-html="richText(item)" />
+        <div
+            v-else
+            class="mx-auto my-12"
+            :class="{ 'ff-image-rounded border drop-shadow-md p-1 bg-white': item.image.framed }"
+            :style="{ maxWidth: item.image.width ? `${item.image.width}px` : undefined }"
+        >
+          <img :src="item.image.src" :alt="item.image.alt" :width="item.image.width || 1024" loading="lazy" class="w-full h-auto">
+        </div>
+      </template>
+    </div>
+  </section>
+</template>
diff --git a/nuxt/components/use-case/Resources.vue b/nuxt/components/use-case/Resources.vue
new file mode 100644
index 0000000000..43a84d57eb
--- /dev/null
+++ b/nuxt/components/use-case/Resources.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+// Columns of <ResourceList> cards under an optional heading each: UNS's "Learn about UNS"
+// reading list, IT/OT's case studies and whitepapers. Thumbnails point at the sections
+// that own them (/blog/**, /whitepaper/**, /images/stories/**).
+import { richText } from '../../lib/rich-text.mjs'
+
+defineProps<{
+    block: {
+        heading?: string
+        columns: Array<{
+            heading?: string
+            id?: string
+            items: Array<{ title: string, lead?: string, href: string, image: string, alt: string }>
+        }>
+    }
+}>()
+</script>
+
+<template>
+  <section class="w-full px-6 pt-16 pb-20">
+    <div class="container m-auto max-w-5xl">
+      <!-- eslint-disable-next-line vue/no-v-html -->
+      <h2 v-if="block.heading" class="text-center mb-8" v-html="richText(block.heading)" />
+      <div class="grid grid-cols-1 md:grid-cols-2 md:gap-x-12 items-start">
+        <div v-for="(column, c) in block.columns" :key="c" class="pb-4 md:pb-0">
+          <h4 v-if="column.heading" :id="column.id" class="text-center max-md:pt-8 scroll-mt-24">{{ column.heading }}</h4>
+          <ResourceList :items="column.items" :columns="1" class="pt-4" />
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
diff --git a/nuxt/components/use-case/Results.vue b/nuxt/components/use-case/Results.vue
new file mode 100644
index 0000000000..92c201c2c1
--- /dev/null
+++ b/nuxt/components/use-case/Results.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+// Customer metric cards, each one a link to its case study. Background and hover
+// treatment are the ones from /resources/roi-calculator/'s "The research behind the ROI
+// analysis". `before` is optional: only a result that is a change (1 → 130+) has one.
+// `company` is separate from `text` because the whole card is the link, so the name is
+// styled like one rather than being a second <a> nested inside the first.
+import { richText } from '../../lib/rich-text.mjs'
+
+defineProps<{
+    block: {
+        eyebrow?: string
+        heading: string
+        items: Array<{
+            before?: string
+            after: string
+            unit: string
+            company: string
+            text: string
+            linkText: string
+            linkName: string
+            href: string
+        }>
+    }
+}>()
+
+// The hover overlay highlights `linkName` inside the card's link text, the way the ROI
+// evidence cards highlight their source ("Read more at <source>").
+function splitLinkText(item: { linkText: string, linkName: string }) {
+    const at = item.linkText.indexOf(item.linkName)
+    if (at === -1) return { before: item.linkText, after: '' }
+    return { before: item.linkText.slice(0, at), after: item.linkText.slice(at + item.linkName.length) }
+}
+</script>
+
+<template>
+  <section class="w-full px-6 pt-20 pb-20 relative overflow-hidden">
+    <div class="absolute -inset-y-1 inset-x-0 solution-section-bg" aria-hidden="true" />
+    <div class="max-w-screen-lg mx-auto relative">
+      <p v-if="block.eyebrow" class="text-gray-500 text-sm font-semibold uppercase m-0 max-md:text-center">{{ block.eyebrow }}</p>
+      <!-- eslint-disable-next-line vue/no-v-html -->
+      <h2 class="mt-3 mb-0 max-md:text-center" v-html="richText(block.heading)" />
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-12">
+        <NuxtLink
+            v-for="item in block.items"
+            :key="item.company"
+            :to="item.href"
+            class="group relative z-[1] overflow-hidden md:overflow-visible bg-white rounded-lg border border-gray-200 px-7 pt-6 pb-7 flex flex-col gap-9 transition-all duration-200 ease-out hover:no-underline md:hover:z-[2] md:motion-safe:hover:scale-[1.04] md:after:absolute md:after:inset-0 md:after:rounded-lg md:after:pointer-events-none md:after:opacity-0 md:after:shadow-lift md:after:transition-opacity md:after:duration-200 md:after:ease-linear md:hover:after:opacity-100"
+        >
+          <UIcon name="i-heroicons-arrow-up-right" class="absolute top-6 right-7 z-10 w-4 h-4 text-gray-400 group-hover:text-indigo-600" />
+          <div class="flex flex-col gap-1 pr-8">
+            <div class="flex items-center gap-3.5 text-5xl font-semibold text-red-400">
+              <template v-if="item.before">
+                <span>{{ item.before }}</span>
+                <UIcon name="i-heroicons-chevron-right" class="w-8 h-8 shrink-0" />
+              </template>
+              <span>{{ item.after }}</span>
+            </div>
+            <span class="text-xl font-semibold text-red-500 opacity-90">{{ item.unit }}</span>
+          </div>
+          <p class="text-sm leading-5 text-gray-700 opacity-90 m-0">
+            <span class="font-semibold text-blue-700">{{ item.company }}</span> {{ item.text }}
+          </p>
+          <div class="hidden md:flex absolute inset-0 rounded-lg items-center justify-center text-center px-6 bg-white/80 backdrop-blur-sm opacity-0 group-hover:opacity-100 transition duration-300 ease-in-out">
+            <span class="text-sm font-medium text-gray-900">{{ splitLinkText(item).before }}<span class="text-indigo-600">{{ item.linkName }}</span>{{ splitLinkText(item).after }}</span>
+          </div>
+          <span class="absolute -inset-px z-20 rounded-lg border border-transparent group-hover:border-indigo-600 pointer-events-none transition-colors duration-200" aria-hidden="true" />
+        </NuxtLink>
+      </div>
+    </div>
+  </section>
+</template>
diff --git a/nuxt/components/use-case/SolutionHero.vue b/nuxt/components/use-case/SolutionHero.vue
deleted file mode 100644
index ae069a8b85..0000000000
--- a/nuxt/components/use-case/SolutionHero.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<script setup lang="ts">
-// The hero from layouts/solution.njk, which the three architecture pages using that
-// layout share. `description` was written as an HTML fragment in frontmatter and rendered
-// with `| safe`; it is markup in the calling page's template now, passed through the
-// default slot, so no page interpolates raw HTML.
-defineProps<{
-    title: string
-    subtitle?: string
-    heroImg: string
-    heroImgAlt?: string
-}>()
-</script>
-
-<template>
-  <div class="page w-full px-6 mt-12 md:px-0">
-    <div class="hero container m-auto text-center max-w-screen-md">
-      <div>
-        <h1 class="px-12 md:px-0 m-auto">{{ title }}</h1>
-        <h4 v-if="subtitle" class="mt-4 text-indigo-400">{{ subtitle }}</h4>
-      </div>
-      <div class="flex items-center gap-6 mt-6">
-        <div class="hidden sm:block w-64 flex-shrink-0">
-          <img :src="heroImg" :alt="heroImgAlt || 'Hero image for the respective solution'" width="250" class="w-full h-auto">
-        </div>
-        <div class="flex flex-col justify-center text-center sm:text-left py-2">
-          <slot />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/nuxt/components/use-case/WhyItMatters.vue b/nuxt/components/use-case/WhyItMatters.vue
index 501dc3e801..75f675b20c 100644
--- a/nuxt/components/use-case/WhyItMatters.vue
+++ b/nuxt/components/use-case/WhyItMatters.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 // "03 Why this is important" from layouts/use-case.njk.
 defineProps<{
+    // Its position among the numbered sections, matching the section nav ("01").
+    number: string
     block: {
         heading: string
         intro?: string
@@ -16,7 +18,7 @@ function ordinal(index: number) {
 <template>
   <div id="why-it-matters" class="w-full bg-[radial-gradient(ellipse_120%_120%_at_50%_120%,theme(colors.indigo.600)_0%,theme(colors.indigo.900)_100%)] py-16 sm:py-24 px-6 scroll-mt-16">
     <div class="max-w-screen-lg mx-auto">
-      <p class="uppercase text-xs font-semibold text-indigo-300 mb-2">03 · Why this is important</p>
+      <p class="uppercase text-xs font-semibold text-indigo-300 mb-2">{{ number }} · Why this is important</p>
       <h2 class="text-white max-md:text-center">{{ block.heading }}</h2>
       <p v-if="block.intro" class="mt-4 max-w-3xl text-indigo-100 font-light">{{ block.intro }}</p>
       <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-12">
diff --git a/nuxt/content.config.ts b/nuxt/content.config.ts
index 8ff188f8e9..82de215ec6 100644
--- a/nuxt/content.config.ts
+++ b/nuxt/content.config.ts
@@ -15,6 +15,28 @@ const ctaButton = z.object({
     onclick: z.string().optional(),
 })
 
+// Shared by the use-case section schemas below. A button is one of the fixed CTA
+// destinations (see .claude/CLAUDE.md, "Call-to-Action components"), or a plain in-page
+// link such as "#whitepapers", which is navigation rather than a tracked CTA.
+const useCaseCta = z.union([
+    z.object({
+        cta: z.enum(['book-demo', 'contact-us', 'sign-up', 'pricing']),
+        variant: z.enum(['primary', 'primary-outlined', 'highlight', 'highlight-outlined', 'ghost']).optional(),
+        color: z.enum(['primary', 'highlight', 'white']).optional(),
+        icon: z.string().optional(),
+    }),
+    z.object({ label: z.string(), href: z.string() }),
+])
+
+const useCaseImage = z.object({
+    src: z.string(),
+    alt: z.string(),
+    // The widest the image renders, in px. Omitted, it fills its column.
+    width: z.number().optional(),
+    // A rounded white frame with a shadow, for screenshots.
+    framed: z.boolean().optional(),
+})
+
 export default defineContentConfig({
     collections: {
         // Rendered via pages/[...slug].vue, which sets `robots: noindex` on every page —
@@ -435,77 +457,213 @@ export default defineContentConfig({
                 form: z.object({ title: z.string() }).optional(),
             })
         }),
-        // The two operational use-cases (the ones carrying `values:`) were pure 11ty
-        // frontmatter with no template body - layouts/use-case.njk rendered a fixed set of
-        // optional blocks from it. That is a data collection, rendered by
-        // pages/use-cases/[slug].vue through the components in components/use-case/.
-        // The six architecture pages had real markup bodies and stay hand-written Vue
-        // pages; they appear on the listing via useCaseArchitectures in that page.
+        // Every /use-cases/<slug>/ page, rendered by pages/use-cases/[slug].vue. A page is
+        // its listing metadata plus an ordered `sections` list; each entry's `type` picks
+        // one component in components/use-case/, so a page is laid out entirely here and
+        // no use case has a .vue file of its own. Copy fields go through lib/rich-text.mjs
+        // (links, bold, ==indigo== and !!red!! accents), never raw HTML.
         useCases: defineCollection({
             type: 'data',
             source: 'use-cases/*.yml',
             schema: z.object({
                 slug: z.string(),
                 title: z.string(),
+                // The one-line summary on the /use-cases/ and industry-page cards, and the
+                // centered hero's text when it sets none of its own.
                 problem: z.string(),
                 // SEO only. Named seoMeta rather than meta because `meta` is reserved by
                 // @nuxt/content and a declared `meta` field is silently replaced.
                 seoMeta: z.object({
                     title: z.string().optional(),
                     description: z.string().optional(),
+                    keywords: z.string().optional(),
+                    image: z.string().optional(),
                 }).optional(),
-                // Industry lens slugs, rendered as the context band near the page foot.
+                // Industry lens slugs: the industry pages' "Use cases in X" band reads these,
+                // and an `industries` section renders them as chips.
                 industries: z.array(z.string()).optional(),
                 // Value-pillar slugs. Presence of this is what puts a page under
                 // "Operational use cases" rather than "By architecture" on the listing.
                 values: z.array(z.string()).optional(),
                 architecture: z.string().optional(),
-                customerPain: z.object({
-                    heading: z.string(),
-                    intro: z.array(z.string()).optional(),
-                    cards: z.array(z.object({
-                        icon: z.string().optional(),
-                        title: z.string(),
-                        detail: z.string(),
-                    })).optional(),
-                }).optional(),
-                outcomeFirst: z.object({
-                    heading: z.string(),
-                    intro: z.string().optional(),
-                    dimensions: z.array(z.object({
-                        label: z.string(),
-                        title: z.string(),
-                        detail: z.string(),
-                    })).optional(),
-                }).optional(),
-                whyItMatters: z.object({
-                    heading: z.string(),
-                    intro: z.string().optional(),
-                    points: z.array(z.object({ title: z.string(), detail: z.string() })).optional(),
-                }).optional(),
-                competition: z.object({
-                    heading: z.string(),
-                    intro: z.string().optional(),
-                    traps: z.array(z.object({
-                        label: z.string(),
-                        title: z.string(),
-                        detail: z.string(),
-                    })).optional(),
-                }).optional(),
-                comparison: z.object({
-                    without: z.array(z.object({ title: z.string(), detail: z.string() })).optional(),
-                    with: z.array(z.object({ title: z.string(), detail: z.string() })).optional(),
-                }).optional(),
-                aiBuildLayer: z.object({
-                    heading: z.string().optional(),
-                    intro: z.string().optional(),
-                    steps: z.array(z.object({ title: z.string(), detail: z.string() })).optional(),
-                    note: z.string().optional(),
-                }).optional(),
-                closingCta: z.object({
-                    heading: z.string().optional(),
-                    description: z.string().optional(),
-                }).optional(),
+                sections: z.array(z.discriminatedUnion('type', [
+                    z.object({
+                        type: z.literal('hero'),
+                        // centered: the operational pages' band. split: copy left, art
+                        // right. pictogram: centred title over a pictogram and text.
+                        // feature: copy left, a framed photo right, an optional quote below.
+                        layout: z.enum(['centered', 'split', 'pictogram', 'feature']),
+                        eyebrow: z.string().optional(),
+                        heading: z.string().optional(),
+                        subtitle: z.string().optional(),
+                        text: z.string().optional(),
+                        image: useCaseImage.optional(),
+                        ctas: z.array(useCaseCta).optional(),
+                        quote: z.object({
+                            text: z.string(),
+                            author: z.string(),
+                            role: z.string().optional(),
+                            avatar: z.string().optional(),
+                        }).optional(),
+                    }),
+                    // The sticky in-page nav, listing every numbered section below it.
+                    z.object({ type: z.literal('sectionNav') }),
+                    z.object({
+                        type: z.literal('pain'),
+                        heading: z.string(),
+                        intro: z.array(z.string()).optional(),
+                        cards: z.array(z.object({
+                            icon: z.string().optional(),
+                            title: z.string(),
+                            detail: z.string(),
+                        })).optional(),
+                    }),
+                    z.object({
+                        type: z.literal('outcomes'),
+                        heading: z.string(),
+                        intro: z.string().optional(),
+                        dimensions: z.array(z.object({
+                            label: z.string(),
+                            title: z.string(),
+                            detail: z.string(),
+                        })).optional(),
+                    }),
+                    z.object({
+                        type: z.literal('whyItMatters'),
+                        heading: z.string(),
+                        intro: z.string().optional(),
+                        points: z.array(z.object({ title: z.string(), detail: z.string() })).optional(),
+                    }),
+                    z.object({
+                        type: z.literal('competition'),
+                        heading: z.string(),
+                        intro: z.string().optional(),
+                        traps: z.array(z.object({
+                            label: z.string(),
+                            title: z.string(),
+                            detail: z.string(),
+                        })).optional(),
+                    }),
+                    z.object({
+                        type: z.literal('comparison'),
+                        without: z.array(z.object({ title: z.string(), detail: z.string() })).optional(),
+                        with: z.array(z.object({ title: z.string(), detail: z.string() })).optional(),
+                    }),
+                    z.object({
+                        type: z.literal('aiBuildLayer'),
+                        heading: z.string().optional(),
+                        intro: z.string().optional(),
+                        steps: z.array(z.object({ title: z.string(), detail: z.string() })).optional(),
+                        note: z.string().optional(),
+                    }),
+                    // Headings, paragraphs and images in reading order. `callout` sets the
+                    // heading and the first paragraph side by side in a bordered card.
+                    z.object({
+                        type: z.literal('prose'),
+                        heading: z.string().optional(),
+                        callout: z.boolean().optional(),
+                        body: z.array(z.union([
+                            z.string(),
+                            z.object({ image: useCaseImage }),
+                        ])),
+                    }),
+                    // A grid of items, each optionally led by an icon or pictogram.
+                    z.object({
+                        type: z.literal('features'),
+                        // grid: plain items. cards: items on translucent cards. panel: the
+                        // whole list inside one bordered indigo panel. alternating: one
+                        // item per row, pictogram flipping sides.
+                        layout: z.enum(['grid', 'cards', 'panel', 'alternating']).optional(),
+                        columns: z.number().int().min(1).max(3).optional(),
+                        background: z.enum(['white', 'gray', 'indigo', 'gradient']).optional(),
+                        centered: z.boolean().optional(),
+                        eyebrow: z.string().optional(),
+                        heading: z.string().optional(),
+                        intro: z.string().optional(),
+                        // A heading placed in the grid's first cell, as its own tile.
+                        lead: z.string().optional(),
+                        image: useCaseImage.optional(),
+                        items: z.array(z.object({
+                            // An Iconify name (i-heroicons-*, i-lucide-*) ...
+                            icon: z.string().optional(),
+                            // ... or one of FlowFuse's own glyphs (nuxt/utils/navIcons.ts) ...
+                            navIcon: z.string().optional(),
+                            solid: z.boolean().optional(),
+                            // ... or a pictogram image.
+                            image: z.string().optional(),
+                            title: z.string().optional(),
+                            text: z.union([z.string(), z.array(z.string())]).optional(),
+                        })),
+                        note: z.string().optional(),
+                    }),
+                    // Customer metric cards, each linking to its case study.
+                    z.object({
+                        type: z.literal('results'),
+                        eyebrow: z.string().optional(),
+                        heading: z.string(),
+                        items: z.array(z.object({
+                            before: z.string().optional(),
+                            after: z.string(),
+                            unit: z.string(),
+                            company: z.string(),
+                            text: z.string(),
+                            // The hover overlay; `linkName` is the part of it shown in indigo.
+                            linkText: z.string(),
+                            linkName: z.string(),
+                            href: z.string(),
+                        })),
+                    }),
+                    // A numbered vertical step list beside a sticky heading, rendered by <StepList>.
+                    z.object({
+                        type: z.literal('steps'),
+                        eyebrow: z.string().optional(),
+                        heading: z.string(),
+                        intro: z.string().optional(),
+                        link: z.object({ label: z.string(), href: z.string() }).optional(),
+                        steps: z.array(z.object({
+                            icon: z.string(),
+                            title: z.string(),
+                            text: z.string(),
+                        })),
+                    }),
+                    // Rendered by <FaqSection>, which also emits the FAQPage structured data.
+                    z.object({
+                        type: z.literal('faq'),
+                        heading: z.string().optional(),
+                        items: z.array(z.object({ question: z.string(), answer: z.string() })),
+                    }),
+                    // Thumbnail link lists (articles, case studies, whitepapers) in columns.
+                    z.object({
+                        type: z.literal('resources'),
+                        heading: z.string().optional(),
+                        columns: z.array(z.object({
+                            heading: z.string().optional(),
+                            // An anchor a hero link can point at, e.g. #whitepapers.
+                            id: z.string().optional(),
+                            items: z.array(z.object({
+                                title: z.string(),
+                                // A bold run before the title, e.g. "Free whitepaper:".
+                                lead: z.string().optional(),
+                                href: z.string(),
+                                image: z.string(),
+                                alt: z.string(),
+                            })),
+                        })),
+                    }),
+                    // FlowFuse Cloud / self-managed / edge cards. Product copy, not page copy,
+                    // so the component carries it.
+                    z.object({ type: z.literal('deploymentOptions') }),
+                    // Chips for the page's own `industries` list.
+                    z.object({ type: z.literal('industries') }),
+                    z.object({
+                        type: z.literal('cta'),
+                        // card: the light blue card. banner: the dark get-started gradient.
+                        layout: z.enum(['card', 'banner']).optional(),
+                        heading: z.string().optional(),
+                        description: z.string().optional(),
+                        ctas: z.array(useCaseCta).optional(),
+                    }),
+                ])),
             })
         }),
         // The template lifted from automotive.vue. Every industry page built on it (starting
diff --git a/nuxt/content/use-cases/data-integration.yml b/nuxt/content/use-cases/data-integration.yml
index 24ba2a9ea1..dd137ccd7e 100644
--- a/nuxt/content/use-cases/data-integration.yml
+++ b/nuxt/content/use-cases/data-integration.yml
@@ -1,8 +1,60 @@
-# Listing metadata only. The page itself is pages/use-cases/data-integration.vue - this one
-# had a real markup body in src/use-cases/data-integration.njk, so it did not lift into data the way the
-# two operational use-cases did. Kept here so /use-cases/ still builds its cards from
-# one place rather than a hand-maintained list.
+# Ported from src/use-cases/data-integration.njk (11ty). Rendered by
+# pages/use-cases/[slug].vue from the `sections` list below.
 slug: data-integration
 title: "FlowFuse for Data Integration"
 industries: ["building-materials", "energy-utilities"]
 problem: "Collect, transform, and route data from any industrial source to any destination, without writing integration code from scratch."
+seoMeta:
+  image: /images/solutions/og-solutions-data-integration.jpg
+
+sections:
+  - type: hero
+    layout: pictogram
+    text: "Data integration can be a challenging task, especially when dealing with multiple data formats, protocols, and sources. FlowFuse's low-code industrial application platform allows anyone to collect data from multiple sources, apply the data, and update, store, and transmit data to a new service."
+    image: { src: /images/pictograms/data_integration_blue.png, alt: "" }
+    ctas:
+      - { cta: contact-us }
+
+  - type: features
+    centered: true
+    heading: "Challenges of Data Integration"
+    image: { src: /images/solutions/data-integration.png, alt: "" }
+    items:
+      - { navIcon: data, solid: true, text: "Data comes from different sources, including internal IT systems (ERP, CRM, SCM), IoT devices, external data services (weather, foreign exchange, etc.)" }
+      - { navIcon: codeblock, text: "Data is accessible in a wide variety of formats, including CSV files, REST Api, XML, YAML, MQTT." }
+      - { navIcon: lock, text: "Access to data is often gated by IT departments making it slow and timing consuming for departments to get access to new integrated data." }
+      - { navIcon: database, text: "Data needs to be stored in different formats and databases." }
+      - { navIcon: chart, text: "Data needs to be visualized and communicated back to a user." }
+
+  - type: features
+    layout: panel
+    columns: 1
+    heading: "Why FlowFuse is the !!Data Integration Solution!!"
+    items:
+      - title: "Accessible for Anyone"
+        text: "FlowFuse’s low-code visual environment makes it easy for non-programmers to integrate data from different sources without needing to know how to code. This enables all kinds of departments to work on their own data integration projects without requiring support from IT."
+      - title: "Real-Time Data Visualisation"
+        text: "FlowFuse makes it easy to create real-time data visualizations and dashboards. Data can be filtered, transformed and analyzed through event-driven flows to get real-time insights into your business."
+      - title: "Support for Different Data Formats"
+        text: "FlowFuse supports parsing a wide range of formats including: **csv**, **html**, **json**, **xml** and **yaml**. Additional data formats are available through FlowFuse’s support for over 5,000 open-source plug-ins."
+
+  - type: features
+    centered: true
+    heading: "FlowFuse Improves Data Integration"
+    items:
+      - image: /images/pictograms/community_blue.png
+        title: "Collaborative Development"
+        text:
+          - "FlowFuse makes it possible for teams to collaborate on the same flows and applications."
+          - "Team members can share instances to make for quicker and more efficient development, with full version control and audit trails built in."
+      - image: /images/pictograms/node_catalog_blue.png
+        title: "Managed Application Service"
+        text: "We run your instances so you don’t have to worry about the production reliability of your industrial applications."
+      - image: /images/pictograms/bias_for_action_blue.png
+        title: "Software Delivery Pipelines"
+        text: "FlowFuse allows you to create snapshots of your instances so you can create software delivery pipelines for development, test, and production. You can revert to a previous version of a snapshot to rollback any changes."
+
+  - type: cta
+    heading: "Discover how FlowFuse can power your Data Integration."
+    ctas:
+      - { cta: contact-us }
diff --git a/nuxt/content/use-cases/it-ot-middleware.yml b/nuxt/content/use-cases/it-ot-middleware.yml
index 0bf10cf297..b60e971058 100644
--- a/nuxt/content/use-cases/it-ot-middleware.yml
+++ b/nuxt/content/use-cases/it-ot-middleware.yml
@@ -1,7 +1,73 @@
-# Listing metadata only. The page itself is pages/use-cases/it-ot-middleware.vue - this one
-# had a real markup body in src/use-cases/it-ot-middleware.njk, so it did not lift into data the way the
-# two operational use-cases did. Kept here so /use-cases/ still builds its cards from
-# one place rather than a hand-maintained list.
+# Ported from src/use-cases/it-ot-middleware.njk (11ty). Rendered by
+# pages/use-cases/[slug].vue from the `sections` list below.
 slug: it-ot-middleware
 title: "FlowFuse for IT/OT Integration"
 problem: "Bridge OT protocols and IT systems with low-code flows. Connect PLCs, SCADA, and historians to ERP, databases, and cloud services."
+seoMeta:
+  image: /images/solutions/og-solutions-manufacturing.jpg
+  keywords: "FlowFuse, Manufacturing, Automation, DevOps, Integration, OT, IT, Data, Visualization, Event Triggers, Fleet Management, Monitoring, Collaborative Development, Environment, Application Deployment, Professional Support"
+
+sections:
+  - type: hero
+    layout: pictogram
+    subtitle: "FlowFuse allows teams to automate their manufacturing process through customized, reliable applications."
+    text: "FlowFuse streamlines manufacturing automation, from production monitoring to supply chain management. Our intuitive, customizable platform enables simple creation of custom solutions for unique manufacturing needs."
+    image: { src: /images/pictograms/factory_blue.png, alt: "" }
+    ctas:
+      - { cta: book-demo }
+      - { label: "Read Whitepaper", href: "#whitepapers" }
+
+  - type: features
+    columns: 2
+    items:
+      - { title: "Hardware & Sensor ==Integration==", text: "FlowFuse simplifies connecting diverse hardware and sensors in manufacturing, enhancing data collection and analytics for informed decision-making and efficiency improvements." }
+      - { title: "==Integrate== OT and IT Data", text: "Our platform unifies operational and information technology data, offering manufacturers a comprehensive view of production processes for improved efficiency." }
+      - { title: "==Intuitive== OT Data visualization", text: "FlowFuse offers a visual interface for real-time monitoring and analysis of operational data, aiding in quick, data-driven decisions to optimize manufacturing operations." }
+      - { title: "==Automate== Event Triggers", text: "With FlowFuse, automate event triggers to respond instantly to production line changes, reducing downtime and boosting efficiency." }
+
+  - type: prose
+    body:
+      - image: { src: /images/solutions/markitechture-manufacturing.png, alt: "High level architecture diagram showing how Node-RED can assist with data flow across a factory and manufacturing use-case" }
+
+  - type: features
+    layout: alternating
+    background: gray
+    centered: true
+    heading: "Enhancing Manufacturing with FlowFuse's DevOps Integration"
+    intro: "FlowFuse elevates manufacturing by ensuring reliable and continuous delivery of applications. Our platform incorporates widely recognized DevOps concepts, fostering a collaborative and secure development environment."
+    items:
+      - { image: /images/pictograms/edge_blue.png, title: "Optimized Fleet Management & Monitoring", text: "FlowFuse revolutionizes equipment and device monitoring in manufacturing. Our platform automates remote deployment and management, ensuring efficiency and flexibility in operations." }
+      - { image: /images/pictograms/community_blue.png, title: "Collaborative Development Environment", text: "Enhancing teamwork in development, FlowFuse allows multiple team members to co-create and streamline application development, increasing efficiency and cohesion." }
+      - { image: /images/pictograms/bias_for_action_blue.png, title: "Efficient Application Deployment", text: "FlowFuse introduces structured DevOps pipelines, supporting various stages from development to production, to guarantee reliable, secure, and high-quality application delivery." }
+      - { image: /images/pictograms/ticket_blue.png, title: "Dedicated Professional Support", text: "FlowFuse provides expert support for your deployments, ensuring systems are consistently up-to-date and operationally continuous, backed by our professional guidance." }
+
+  - type: faq
+    items:
+      - question: "Can FlowFuse connect our PLCs to our ERP system?"
+        answer: "Yes, FlowFuse can be extended with over 5,000 open-source plug-ins to support virtually all industrial protocols. Connect your Siemens, Allen-Bradley, Omron, or other PLCs directly to SAP, Oracle, or any ERP system."
+      - question: "We have mixed equipment brands on our shop floor. Can FlowFuse handle this?"
+        answer: "Absolutely. FlowFuse acts as a universal translator between different equipment brands and protocols, allowing seamless data exchange between Siemens, Rockwell, Schneider, and other vendors."
+      - question: "How do we ensure production data security when connecting shop floor to business systems?"
+        answer: "FlowFuse provides secure tunneling for device connections, encrypted data transmission using TLS/SSL, role-based access control (RBAC), and comprehensive audit logging to meet manufacturing compliance requirements."
+      - question: "Can our plant operators create data flows without IT support?"
+        answer: "Yes, FlowFuse uses a visual drag-and-drop interface. Operators can build integrations between machines, SCADA, and business systems by connecting pre-built nodes - no coding required."
+      - question: "What if our legacy equipment doesn't support modern protocols?"
+        answer: "FlowFuse can connect through serial converters, protocol gateways, or even manual data entry interfaces, ensuring no equipment is left behind in your digital transformation."
+      - question: "Do we need to shut down production to implement FlowFuse?"
+        answer: "No, FlowFuse can be deployed alongside existing systems with read-only connections initially. Full integration can be phased in during scheduled maintenance windows."
+
+  - type: resources
+    heading: "Resources"
+    columns:
+      - heading: "Case Studies"
+        items:
+          - { title: "Revolutionizing Precision Manufacturing with Node-RED", href: /customer-stories/leveraging-node-red-and-flowfuse-to-automate-precision-manufacturing/, image: /images/stories/abrasive_tech.jpg, alt: "Photo of helicopters and a precision manufacturing machine" }
+          - { title: "The Future of Textile Manufacturing Powered with Node-RED", href: /customer-stories/stfi-future-of-textile-powered-by-node-red/, image: /images/stories/stfi-future-textile.jpg, alt: "Photo of the STFI floor plant" }
+          - { title: "Node-RED Enables Digital Transformation of a Large US Manufacturing Company", href: /customer-stories/manufacturing-digital-transformation/, image: /images/stories/large-us-manufacturing.jpg, alt: "Photo of a manufacturing company with a worker holding a laptop" }
+      - heading: "Whitepapers"
+        id: whitepapers
+        items:
+          - { title: "Accelerating Innovation in Manufacturing with FlowFuse", href: /whitepaper/accelerating-innovation-in-manufacturing-with-flowfuse/, image: /whitepaper/images/whitepaper-manufacturing.png, alt: "Photo of a manufacturing company with a worker holding a laptop" }
+          - { title: "Open Source Software for Manufacturing", href: /whitepaper/open-source-software-for-manufacturing/, image: /whitepaper/images/whitepaper-oss-manufacturing.jpg, alt: "Photo of a manufacturing company shop floor" }
+
+  - type: deploymentOptions
diff --git a/nuxt/content/use-cases/mes.yml b/nuxt/content/use-cases/mes.yml
index 4b0064b2ea..112a711798 100644
--- a/nuxt/content/use-cases/mes.yml
+++ b/nuxt/content/use-cases/mes.yml
@@ -1,7 +1,56 @@
-# Listing metadata only. The page itself is pages/use-cases/mes.vue - this one
-# had a real markup body in src/use-cases/mes.njk, so it did not lift into data the way the
-# two operational use-cases did. Kept here so /use-cases/ still builds its cards from
-# one place rather than a hand-maintained list.
+# Ported from src/use-cases/mes.njk (11ty). Rendered by pages/use-cases/[slug].vue from
+# the `sections` list below.
 slug: mes
 title: "FlowFuse for MES"
 problem: "Build exactly the MES your operation needs, compose modular execution, tracking, and reporting flows without a monolithic vendor platform."
+seoMeta:
+  title: "FlowFuse for your own MES"
+  description: "FlowFuse provides everything you need to build the robust Manufacturing Execution System (MES) you want, providing everything from production tracking to data analysis, with the components you need and the flexibility to customize as you see fit."
+  keywords: "FlowFuse, manufacturing, MES, Industry 4.0, Siemens S7, PLC, Sentron"
+
+sections:
+  - type: hero
+    layout: split
+    heading: "FlowFuse for ==your own MES=="
+    text: "FlowFuse provides everything you need to build the robust Manufacturing Execution System (MES) you want, providing everything from production tracking to data analysis, with the components you need and the flexibility to customize as you see fit."
+    image: { src: /images/solutions/mes-hero.png, alt: "MES with FlowFuse", width: 550 }
+    ctas:
+      - { cta: contact-us, variant: primary }
+      - { cta: sign-up }
+
+  - type: prose
+    callout: true
+    heading: "MES for Modern Industry"
+    body:
+      - "MES systems evolved to manage and monitor manufacturing operations on the shop floor, serving to bridge the gap between enterprise resource planning (ERP) systems and production process management like a SCADA system. Complete, monolithic MES systems are no longer needed. FlowFuse provides the resources that allow you to build and augment the components for the MES system you need, securely and at scale."
+
+  - type: prose
+    heading: "How it Works"
+    body:
+      - "Monolithic MES systems - think Siemens OpCenter Execution or Rockwell Automation’s Plex - offer MES products that are comprehensive and sophisticated, but also expensive and complex. In contrast, FlowFuse gives you a flexible, low-code industrial application platform with popular industry protocols, [integrations](/integrations/), and our resource library to design and deploy applications for the MES solution you want for your business - and nothing more."
+      - "Here is an example. An MES system is essentially a collection of management functions, like production tracking, resource management, data collection and analysis, and scheduling and dispatching. With FlowFuse, you can build the MES features you want by creating applications for the functions that you need, and none that you don’t."
+      - "Collect data from the shop floor or the lab by using [FlowFuse Certified Nodes](/integrations/) to connect with local machines using any protocol: MQTT, OPC-UA, Modbus, Sparkplug B, and any other protocol that exists now or in the future."
+      - image: { src: /images/home/connect_graphic.png, alt: "Icons of communication protocols", width: 550 }
+      - "Create applications in FlowFuse to transform your data for analysis and create visualizations that enable your team to make data-driven decisions about your business. Our ever-expanding [Blueprints library](/blueprints/) helps you get started quickly."
+      - "Because FlowFuse provides central management of all of your instances, you can easily monitor your applications whether you're running a dozen in a factory or thousands at sites across the globe."
+      - image: { src: /images/solutions/oee-dashboard--1.png, alt: "OEE dashboard", framed: true }
+
+  - type: prose
+    heading: "MES for Your Industry"
+    body:
+      - "The MES needs for an automotive plant, a pharmaceutical manufacturer, and an airline are all very distinct - and yet all can (and do) rely on FlowFuse. With the flexibility, security, and scalability of the FlowFuse platform, every kind of industrial operation can operate the MES they need."
+      - "And with the FlowFuse open source advantage, you can extend the platform with any custom integrations or nodes you need at any time, and securely manage the instances that you create along the way."
+
+  - type: features
+    background: indigo
+    heading: "The FlowFuse !!Advantage!!"
+    items:
+      - { title: "Built-in adaptation layer", text: "Leverage FlowFuse's low-code platform to design exactly the MES your organization needs." }
+      - { title: "End-to-end insight and control", text: "Everything you need to connect, manage, visualize and analyze your data in one place." }
+      - { title: "Limitless connections", text: "Robust and growing open-source library provides connections for all protocols, all machines, and all devices." }
+      - { title: "Rapid implementation", text: "Get up and running quickly on FlowFuse Cloud." }
+      - { title: "Open-source", text: "Avoid vendor lock-in." }
+      - { title: "Low-Code", text: "Empowering your teams to build custom solutions with ease." }
+
+  - type: cta
+    heading: "Ready to build the MES your business needs?"
diff --git a/nuxt/content/use-cases/production-monitoring.yml b/nuxt/content/use-cases/production-monitoring.yml
index 0128e962ba..05cbd04ae2 100644
--- a/nuxt/content/use-cases/production-monitoring.yml
+++ b/nuxt/content/use-cases/production-monitoring.yml
@@ -1,6 +1,6 @@
 # Lifted verbatim from src/use-cases/production-monitoring.njk (11ty), which had no template body: the whole
 # page was frontmatter read by layouts/use-case.njk. Rendered now by
-# pages/use-cases/[slug].vue through the components in components/use-case/.
+# pages/use-cases/[slug].vue from the `sections` list below.
 slug: production-monitoring
 title: "Production Monitoring"
 seoMeta:
@@ -10,112 +10,113 @@ problem: "Your operation is running. You just can't see it clearly enough, until
 industries: ["automotive", "food-beverage", "life-sciences", "aviation-aerospace", "aerospace-components", "semiconductors", "electronics-appliances", "industrial-machinery", "building-materials"]
 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."
-  intro:
-    - "Production teams know their lines are running. What they don't always know is how well, until a supervisor walks the floor, a shift report lands, or a machine stops."
-    - "By then, the window to intervene is gone. Decisions get made on lag, instinct, and tribal knowledge instead of data."
-    - "The pain isn't unique to any one industry. It surfaces wherever machines produce output and humans are responsible for the result."
-  cards:
-    - icon: "i-heroicons-clock"
-      title: "Reactive firefighting"
-      detail: "Problems are discovered after the fact, via alarms, operator reports, or finished-goods inspection. The response is always late."
-    - icon: "i-heroicons-clipboard-document-list"
-      title: "Manual data collection"
-      detail: "Operators log counts, cycle times, and downtime events by hand. Numbers are inconsistent, delayed, and disconnected from the actual machine record."
-    - icon: "i-heroicons-link-slash"
-      title: "Data that doesn't talk"
-      detail: "PLCs, SCADA, MES, and ERP each hold a piece of the picture. Nobody has connected them. Each system speaks a different protocol."
-    - icon: "i-heroicons-chart-bar-square"
-      title: "Reporting built on stale data"
-      detail: "Shift summaries and OEE reports tell you what happened yesterday. Nobody is watching what is happening now."
-
-outcomeFirst:
-  heading: "Define what \"monitored\" means for your operation."
-  intro: "There is no universal production monitoring app, because every operation measures success differently. The value FlowFuse delivers isn't a fixed dashboard. It is the ability to build exactly the one your operation needs."
-  dimensions:
-    - label: "Operational"
-      title: "Know what every line is producing, right now"
-      detail: "Live counts, cycle times, and throughput visible to anyone who needs them, from the floor to the control room."
-    - label: "Financial"
-      title: "Turn downtime from a cost center into a managed metric"
-      detail: "When you can see and categorize downtime events as they happen, you can act on them, and start reducing them systematically."
-    - label: "Organizational"
-      title: "Replace floor walks with live visibility"
-      detail: "Supervisors and engineers spend less time gathering data and more time acting on it. The floor reports to them, not the other way around."
-    - label: "Quality"
-      title: "Catch deviations before they become defects"
-      detail: "Monitoring process conditions in real time means anomalies surface early, before they have run through a full batch or shift."
-    - label: "Strategic"
-      title: "Build a data foundation you actually own"
-      detail: "Contextualized, historian-backed production data that feeds into MES, ERP, or AI tools, on your terms, not a vendor's."
-    - label: "Flexibility"
-      title: "Start where the pain is, scale from there"
-      detail: "One line, one shift, one KPI. Prove value fast, then expand. You are not locked into a one-size-fits-all deployment model."
-
-whyItMatters:
-  heading: "Blind production is a compounding liability."
-  intro: "Every hour a line runs without real-time visibility, the cost of the gap grows, not just in lost output, but in the decisions that never got made."
-  points:
-    - title: "Downtime is under-reported by design"
-      detail: "Manual logging creates pressure to minimize recorded stops. The real downtime picture is almost always worse than the data shows, which means improvement programs are built on a false baseline."
-    - title: "Reactive maintenance costs more than planned"
-      detail: "When you can't see a machine degrading, you can't schedule around it. You respond to failures instead of preventing them, and pay the premium every time."
-    - title: "OEE without live data is a lagging indicator"
-      detail: "A shift report tells you your OEE was 68%. Live monitoring tells you it dropped to 51% at 10:42 and you can still do something about it."
-    - title: "Digitization pressure isn't going away"
-      detail: "Customer requirements, ESG commitments, and internal efficiency mandates all require production data. The longer it takes to build the foundation, the further behind you fall."
-    - title: "The talent that knows your machines is leaving"
-      detail: "Experienced operators carry decades of institutional knowledge. Without a system to capture and surface what they know, that knowledge walks out the door at retirement."
-
-competition:
-  heading: "Your operation isn't a template."
-  intro: "Off-the-shelf monitoring platforms are built to fit the widest possible audience, which means they fit your specific operation poorly. You end up adapting your processes to the tool, not the other way around."
-  traps:
-    - label: "Trap 01"
-      title: "Rigid data models that don't match your machines"
-      detail: "Pre-built solutions assume standard signals, standard naming conventions, and standard equipment hierarchies. Your PLC speaks Siemens S7. Your historian uses a custom tag structure built in 2009. The integration becomes a months-long professional-services engagement, if it is even possible."
-    - label: "Trap 02"
-      title: "One dashboard for everyone means optimal for no one"
-      detail: "The shift supervisor needs a line overview. The maintenance engineer needs trend data on a specific axis. The plant manager needs a KPI roll-up. Off-the-shelf tools offer one fixed view, or an expensive configuration layer to build the others."
-    - label: "Trap 03"
-      title: "Time-to-value measured in quarters, not weeks"
-      detail: "Configuration, data mapping, and integration scoping turn into a professional-services engagement that drags on. The pilot budget runs out before anyone sees a working dashboard, and the project quietly stalls before it ever proves value."
-    - label: "Trap 04"
-      title: "Deployment models built for greenfield, not the shop floor"
-      detail: "Cloud-first SaaS tools were not designed for air-gapped networks, aging edge hardware, or mixed OT/IT environments where every change requires a change-management process. Getting them deployed takes longer than the pilot budget allows."
-
-comparison:
-  without:
-    - title: "Visibility on a delay"
-      detail: "Production status comes from shift reports, floor walks, and end-of-day summaries. By the time you know something went wrong, the shift is over."
-    - title: "Integrations that never close"
-      detail: "Every protocol difference, every legacy PLC, every proprietary historian adds months to a monitoring project. Most stall in pilot."
-    - title: "Apps built for someone else's operation"
-      detail: "The vendor's dashboard shows what they thought you would want to see. Your real KPIs live in a spreadsheet someone updates manually every morning."
-    - title: "IT projects that outpace OT readiness"
-      detail: "Cloud-native tools land in environments that were not built for them. Security reviews, network changes, and change management consume the timeline."
-    - title: "One site at a time, forever"
-      detail: "Even if a monitoring app works well in one facility, replicating it means rebuilding it. Nothing transfers. Every deployment is a new project."
-  with:
-    - title: "Live production data, where you need it"
-      detail: "Node-RED flows collect, contextualize, and surface machine data in real time, on the floor, in the control room, or wherever your team works."
-    - title: "Connect anything, regardless of protocol"
-      detail: "OPC-UA, Modbus, S7, MQTT, REST: Node-RED speaks them all. FlowFuse manages the infrastructure so your integrations stay running."
-    - title: "Build the app your operation actually needs"
-      detail: "FlowFuse Dashboard gives your team the tools to build purpose-fit interfaces, without a dedicated front-end developer or a six-figure SI engagement."
-    - title: "Runs at the edge, in the cloud, or both"
-      detail: "Deploy the Device Agent on existing edge hardware. Run instances in FlowFuse Cloud. Mix and match based on what your network allows."
-    - title: "Snapshot, replicate, and roll out at scale"
-      detail: "Once your monitoring app works on one line, FlowFuse lets you snapshot it and push it across every site, with environment-specific variables, centrally managed. Built on open Node-RED, the foundation stays yours."
+sections:
+  - type: hero
+    layout: centered
+  - type: sectionNav
+  - type: pain
+    heading: "Visibility gaps are expensive."
+    intro:
+      - "Production teams know their lines are running. What they don't always know is how well, until a supervisor walks the floor, a shift report lands, or a machine stops."
+      - "By then, the window to intervene is gone. Decisions get made on lag, instinct, and tribal knowledge instead of data."
+      - "The pain isn't unique to any one industry. It surfaces wherever machines produce output and humans are responsible for the result."
+    cards:
+      - icon: "i-heroicons-clock"
+        title: "Reactive firefighting"
+        detail: "Problems are discovered after the fact, via alarms, operator reports, or finished-goods inspection. The response is always late."
+      - icon: "i-heroicons-clipboard-document-list"
+        title: "Manual data collection"
+        detail: "Operators log counts, cycle times, and downtime events by hand. Numbers are inconsistent, delayed, and disconnected from the actual machine record."
+      - icon: "i-heroicons-link-slash"
+        title: "Data that doesn't talk"
+        detail: "PLCs, SCADA, MES, and ERP each hold a piece of the picture. Nobody has connected them. Each system speaks a different protocol."
+      - icon: "i-heroicons-chart-bar-square"
+        title: "Reporting built on stale data"
+        detail: "Shift summaries and OEE reports tell you what happened yesterday. Nobody is watching what is happening now."
+  - type: outcomes
+    heading: "Define what \"monitored\" means for your operation."
+    intro: "There is no universal production monitoring app, because every operation measures success differently. The value FlowFuse delivers isn't a fixed dashboard. It is the ability to build exactly the one your operation needs."
+    dimensions:
+      - label: "Operational"
+        title: "Know what every line is producing, right now"
+        detail: "Live counts, cycle times, and throughput visible to anyone who needs them, from the floor to the control room."
+      - label: "Financial"
+        title: "Turn downtime from a cost center into a managed metric"
+        detail: "When you can see and categorize downtime events as they happen, you can act on them, and start reducing them systematically."
+      - label: "Organizational"
+        title: "Replace floor walks with live visibility"
+        detail: "Supervisors and engineers spend less time gathering data and more time acting on it. The floor reports to them, not the other way around."
+      - label: "Quality"
+        title: "Catch deviations before they become defects"
+        detail: "Monitoring process conditions in real time means anomalies surface early, before they have run through a full batch or shift."
+      - label: "Strategic"
+        title: "Build a data foundation you actually own"
+        detail: "Contextualized, historian-backed production data that feeds into MES, ERP, or AI tools, on your terms, not a vendor's."
+      - label: "Flexibility"
+        title: "Start where the pain is, scale from there"
+        detail: "One line, one shift, one KPI. Prove value fast, then expand. You are not locked into a one-size-fits-all deployment model."
+  - type: whyItMatters
+    heading: "Blind production is a compounding liability."
+    intro: "Every hour a line runs without real-time visibility, the cost of the gap grows, not just in lost output, but in the decisions that never got made."
+    points:
+      - title: "Downtime is under-reported by design"
+        detail: "Manual logging creates pressure to minimize recorded stops. The real downtime picture is almost always worse than the data shows, which means improvement programs are built on a false baseline."
+      - title: "Reactive maintenance costs more than planned"
+        detail: "When you can't see a machine degrading, you can't schedule around it. You respond to failures instead of preventing them, and pay the premium every time."
+      - title: "OEE without live data is a lagging indicator"
+        detail: "A shift report tells you your OEE was 68%. Live monitoring tells you it dropped to 51% at 10:42 and you can still do something about it."
+      - title: "Digitization pressure isn't going away"
+        detail: "Customer requirements, ESG commitments, and internal efficiency mandates all require production data. The longer it takes to build the foundation, the further behind you fall."
+      - title: "The talent that knows your machines is leaving"
+        detail: "Experienced operators carry decades of institutional knowledge. Without a system to capture and surface what they know, that knowledge walks out the door at retirement."
+  - type: competition
+    heading: "Your operation isn't a template."
+    intro: "Off-the-shelf monitoring platforms are built to fit the widest possible audience, which means they fit your specific operation poorly. You end up adapting your processes to the tool, not the other way around."
+    traps:
+      - label: "Trap 01"
+        title: "Rigid data models that don't match your machines"
+        detail: "Pre-built solutions assume standard signals, standard naming conventions, and standard equipment hierarchies. Your PLC speaks Siemens S7. Your historian uses a custom tag structure built in 2009. The integration becomes a months-long professional-services engagement, if it is even possible."
+      - label: "Trap 02"
+        title: "One dashboard for everyone means optimal for no one"
+        detail: "The shift supervisor needs a line overview. The maintenance engineer needs trend data on a specific axis. The plant manager needs a KPI roll-up. Off-the-shelf tools offer one fixed view, or an expensive configuration layer to build the others."
+      - label: "Trap 03"
+        title: "Time-to-value measured in quarters, not weeks"
+        detail: "Configuration, data mapping, and integration scoping turn into a professional-services engagement that drags on. The pilot budget runs out before anyone sees a working dashboard, and the project quietly stalls before it ever proves value."
+      - label: "Trap 04"
+        title: "Deployment models built for greenfield, not the shop floor"
+        detail: "Cloud-first SaaS tools were not designed for air-gapped networks, aging edge hardware, or mixed OT/IT environments where every change requires a change-management process. Getting them deployed takes longer than the pilot budget allows."
+  - type: comparison
+    without:
+      - title: "Visibility on a delay"
+        detail: "Production status comes from shift reports, floor walks, and end-of-day summaries. By the time you know something went wrong, the shift is over."
+      - title: "Integrations that never close"
+        detail: "Every protocol difference, every legacy PLC, every proprietary historian adds months to a monitoring project. Most stall in pilot."
+      - title: "Apps built for someone else's operation"
+        detail: "The vendor's dashboard shows what they thought you would want to see. Your real KPIs live in a spreadsheet someone updates manually every morning."
+      - title: "IT projects that outpace OT readiness"
+        detail: "Cloud-native tools land in environments that were not built for them. Security reviews, network changes, and change management consume the timeline."
+      - title: "One site at a time, forever"
+        detail: "Even if a monitoring app works well in one facility, replicating it means rebuilding it. Nothing transfers. Every deployment is a new project."
+    with:
+      - title: "Live production data, where you need it"
+        detail: "Node-RED flows collect, contextualize, and surface machine data in real time, on the floor, in the control room, or wherever your team works."
+      - title: "Connect anything, regardless of protocol"
+        detail: "OPC-UA, Modbus, S7, MQTT, REST: Node-RED speaks them all. FlowFuse manages the infrastructure so your integrations stay running."
+      - title: "Build the app your operation actually needs"
+        detail: "FlowFuse Dashboard gives your team the tools to build purpose-fit interfaces, without a dedicated front-end developer or a six-figure SI engagement."
+      - title: "Runs at the edge, in the cloud, or both"
+        detail: "Deploy the Device Agent on existing edge hardware. Run instances in FlowFuse Cloud. Mix and match based on what your network allows."
+      - title: "Snapshot, replicate, and roll out at scale"
+        detail: "Once your monitoring app works on one line, FlowFuse lets you snapshot it and push it across every site, with environment-specific variables, centrally managed. Built on open Node-RED, the foundation stays yours."
+  - type: 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."
+  - type: industries
+  - type: cta
diff --git a/nuxt/content/use-cases/remote-device-management.yml b/nuxt/content/use-cases/remote-device-management.yml
index 99aa57a4eb..a745c73773 100644
--- a/nuxt/content/use-cases/remote-device-management.yml
+++ b/nuxt/content/use-cases/remote-device-management.yml
@@ -1,7 +1,130 @@
-# Listing metadata only. The page itself is pages/use-cases/remote-device-management.vue
-# (formerly /use-cases/edge-connectivity/, which now redirects here). Its layout is a
-# hand-written page rather than data, but it is kept here so /use-cases/ still builds its
-# cards from one place rather than a hand-maintained list.
+# Formerly /use-cases/edge-connectivity/, which now 301s here (see redirects.ts). The
+# layout came from the Figma file (FF Website V3, node 7421:6134). Rendered by
+# pages/use-cases/[slug].vue from the `sections` list below.
 slug: remote-device-management
 title: "Remote Device Management for Industrial Equipment"
 problem: "FlowFuse runs Node-RED next to your PLCs and governs it from one place with remote device management, editing, snapshots, and fleet-wide controls."
+seoMeta:
+  description: "Remote device management for every machine in the field. See, edit, and deploy Node-RED across your fleet."
+  image: /images/solutions/og-solutions-device-management.jpg
+
+sections:
+  - type: hero
+    layout: feature
+    heading: "Remote device management !!for every machine in the field!!"
+    text: "FlowFuse runs Node-RED next to your [PLCs](/landing/plc/) and governs it from one place with remote device management, editing, [snapshots](/docs/user/snapshots/), and fleet-wide controls."
+    image: { src: /images/use-cases/edge-connectivity.jpg, alt: "Machines on a factory shop floor" }
+    ctas:
+      - { cta: book-demo }
+      - { cta: sign-up, variant: ghost, icon: i-lucide-arrow-right }
+    quote:
+      text: "It's not just about connecting machines; it's about creating the foundation that makes everything else possible."
+      author: "Felix Reck"
+      role: "IT Application Manager, Walter"
+      avatar: /images/customer-headshots/felix-reck-walter-tools.png
+
+  - type: results
+    eyebrow: "Results"
+    heading: "!!Customer results!! with remote device management"
+    items:
+      - before: "1"
+        after: "130+"
+        unit: "instances"
+        company: "Walter Tools"
+        text: "scaled from a single Node-RED instance to over 130 across four continents and unified five separate machine-connectivity systems — with the same seven-person IT team."
+        linkText: "Read the case study with Walter Tools"
+        linkName: "Walter Tools"
+        href: /customer-stories/scaling-industrial-iot-operations-while-maintaining-competitive-edge/
+      - before: "15"
+        after: "1"
+        unit: "deployment"
+        company: "Aperia Technologies"
+        text: "replaced a USB-stick walk across five lines with one device-group deployment, and freed 8–12 hours a day of idle end-of-line test equipment."
+        linkText: "Read the case study with Aperia Technologies"
+        linkName: "Aperia Technologies"
+        href: /customer-stories/aperia-technologies-plc-replacement/
+      - after: "½"
+        unit: "shift returned"
+        company: "Paloma Irrigation and Drainage District's"
+        text: "team spent half of every shift driving between remote pumping stations. Remote access and automated alerts ended the routine visits across 30,000 acres."
+        linkText: "Read the case study with Paloma Irrigation"
+        linkName: "Paloma Irrigation"
+        href: /customer-stories/leveraging-node-red-and-flowfuse-to-revolutionize-irrigation/
+      - after: "7,000 km"
+        unit: "of grid"
+        company: "Energinet"
+        text: "monitors substation health at hundreds of critical nodes across Denmark's transmission grid — 24/7, with a small operations team."
+        linkText: "Read the Energinet case study"
+        linkName: "Energinet"
+        href: /customer-stories/energinet-streamlining-critical-infrastructure-data-management/
+
+  - type: features
+    background: gray
+    columns: 2
+    eyebrow: "Visibility"
+    heading: "See and manage ==every remote device from one place=="
+    items:
+      - icon: i-heroicons-cpu-chip
+        title: "Every device, one view"
+        text: "Instance state and last seen. CPU and memory over time. Agent and Node-RED versions. [Device groups](/docs/user/device-groups/) by site or line."
+      - icon: i-lucide-history
+        title: "What changed, and who changed it"
+        text: "[Audit log](/docs/user/logs/#audit-log) across the team. [Snapshot comparison](/docs/user/snapshots/#comparing-snapshots). [Version history](/docs/user/snapshots/#timeline-view). Attribution on every deployment."
+      - icon: i-heroicons-lifebuoy
+        title: "When something goes wrong"
+        text: "[Node-RED logs](/docs/user/logs/#node-red-logs) without SSH. Health checks and auto-restart. Diagnostic emails with the logs attached. Structured JSON logs for Loki or Elastic."
+      - icon: i-heroicons-signal
+        title: "Reach a machine you can't touch"
+        text: "Open the editor from your browser. Developer Mode tunnel for live debugging. Restart a device remotely. Outbound-only — no inbound ports."
+    note: "The [FlowFuse Device Agent](/platform/device-agent/) runs your flows on remote devices and keeps them connected to FlowFuse for centralized monitoring and management."
+
+  - type: steps
+    eyebrow: "Connectivity"
+    heading: "Fix one machine. ==Deploy to all of them.=="
+    intro: "This is where a monitoring tool stops and remote device management keeps going."
+    link: { label: "Learn how to install the FlowFuse Device Agent", href: /docs/device-agent/install/overview/ }
+    steps:
+      - icon: i-heroicons-wrench-screwdriver
+        title: "Fix One"
+        text: "Open the Node-RED editor on the machine itself, from your browser, and change the flow on live hardware."
+      - icon: i-heroicons-camera
+        title: "Snapshot It"
+        text: "Capture the working state as a versioned snapshot you can compare, promote and roll back."
+      - icon: i-heroicons-rocket-launch
+        title: "Roll It Out"
+        text: "Push that snapshot to the device group through a [pipeline](/docs/user/devops-pipelines/) — every filler on every line, or every site in the region."
+
+  - type: features
+    layout: cards
+    background: gradient
+    eyebrow: "Intelligence at the Edge"
+    heading: "Once the loop is closed, ==intelligence is a node, not a project=="
+    items:
+      - icon: i-heroicons-cpu-chip
+        title: "Run the model where the data is"
+        text: "Drop a trained [ONNX model](/blog/2025/10/custom-onnx-model/) into a flow and run inference on the device. No round trip, no inference bill, no data leaving the plant."
+      - icon: i-heroicons-chat-bubble-left-right
+        title: "Ask the factory a question"
+        text: "[FlowFuse Expert](/docs/user/expert/) Insights Mode connects to the MCP servers in your instances, so you can query live state in plain language instead of building a report for it."
+      - icon: i-heroicons-bolt
+        title: "Allow an agent to act"
+        text: "Expose your flows to our [MCP integration](/changelog/2025/10/mcp-nodes/) so Copilot, Claude or your own AI agent can read live operational state and act on it, inside the role-based access control you already run. Read-only stays read-only. Every action is logged."
+
+  - type: cta
+    layout: banner
+    heading: "Make your remote devices intelligent"
+    description: "Your first operational application could be running this week. Request a demo to see how, or explore pricing to find the right fit."
+    ctas:
+      - { cta: book-demo }
+      - { cta: sign-up, variant: ghost, color: white, icon: i-lucide-arrow-right }
+
+  - type: faq
+    items:
+      - question: "What is remote device management?"
+        answer: "Remote device management lets teams monitor, troubleshoot, update, and deploy application flows to devices without being physically present at the device."
+      - question: "What is a remote device management platform?"
+        answer: "Remote device management platform provides centralized tools for monitoring and managing devices across multiple machines, sites, or facilities."
+      - question: "Can FlowFuse manage Node-RED on remote devices?"
+        answer: "Yes. FlowFuse lets teams remotely monitor, edit, deploy, restart, and manage Node-RED instances running across their device fleet."
+      - question: "Can FlowFuse deploy changes to multiple remote devices?"
+        answer: "Yes. FlowFuse supports [device groups](/docs/user/device-groups/) and centralized deployments, allowing teams to roll out a tested flow or [snapshot](/docs/user/snapshots/) to multiple devices at once."
diff --git a/nuxt/content/use-cases/scada.yml b/nuxt/content/use-cases/scada.yml
index 0fb31f75a1..7fe69c7639 100644
--- a/nuxt/content/use-cases/scada.yml
+++ b/nuxt/content/use-cases/scada.yml
@@ -1,8 +1,51 @@
-# Listing metadata only. The page itself is pages/use-cases/scada.vue - this one
-# had a real markup body in src/use-cases/scada.njk, so it did not lift into data the way the
-# two operational use-cases did. Kept here so /use-cases/ still builds its cards from
-# one place rather than a hand-maintained list.
+# Ported from src/use-cases/scada.njk (11ty). Rendered by pages/use-cases/[slug].vue from
+# the `sections` list below.
 slug: scada
 title: "FlowFuse for SCADA"
 problem: "Modernize SCADA with low-code flows that connect legacy hardware, stream real-time data, and drive dashboards and alerts from a single platform."
 industries: ["energy-utilities"]
+seoMeta:
+  description: "FlowFuse provides SCADA value in an Industry 4.0 way and unlocks the potential to modernize your SCADA system with its powerful, customizable, modular components that streamline operations, reduce dependence on costly, monolithic solutions."
+  keywords: "FlowFuse, manufacturing, SCADA, Industry 4.0, Siemens S7, PLC, Sentron"
+
+sections:
+  - type: hero
+    layout: split
+    heading: "FlowFuse for ==SCADA=="
+    text: "FlowFuse provides SCADA value in an Industry 4.0 way and unlocks the potential to modernize your SCADA system with its powerful, customizable, modular components that streamline operations, reduce dependence on costly, monolithic solutions."
+    image: { src: /images/solutions/scada-hero.png, alt: "SCADA system with FlowFuse", width: 450 }
+    ctas:
+      - { cta: contact-us, variant: primary }
+      - { cta: sign-up }
+
+  - type: prose
+    callout: true
+    heading: "SCADA meets Industry 4.0"
+    body:
+      - "Legacy SCADA systems were built to monitor and control industrial systems before technological advancements provided a way to perform those functions without monolithic hardware systems. FlowFuse provides what you need to augment and develop modern SCADA, enabling industrial control and monitoring at scale and with enterprise-grade security. Enjoy low-code, agile, and responsive development with a platform that will integrate with all future protocols."
+
+  - type: prose
+    heading: "How it Works"
+    body:
+      - "FlowFuse uses open-source, low-code technology capable of quickly and securely building applications to connect, integrate, and control machines previously packaged as a standalone SCADA system."
+      - image: { src: /images/solutions/scada-how-diagram.png, alt: "FlowFuse SCADA diagram", width: 550 }
+      - "Let’s take an example. Your factory is using a Siemens S7 PLC and a Sentron, collecting data from various sensors and actuators. You want to manage the efficiency of this process, so you open the FlowFuse instance that you created for managing this workflow and drag in the FlowFuse Certified S7 PLC node and Sentron node, entering configuration details to connect these devices along with anything else running in your factory."
+      - image: { src: /images/solutions/scada-how-flow.png, alt: "FlowFuse flow using the FlowFuse Certified S7 PLC node", width: 385, framed: true }
+      - "After perfecting the flow to connect your devices needed for control, you add settings to send data from every important part of the process to a database. To save time creating actionable visualizations, you pull in one of the customizable dashboard Blueprints approved by FlowFuse. Because this entire process runs on FlowFuse, each step is customizable and not limited to built-in parameters imposed by closed software. The entire operation is secure and can scale to as many lines and sites as you need."
+      - "The last step is to create useful visualizations. Since your team has been empowered to build the applications you need, you import some of your custom nodes and flows from your Team Library directly into your instance, structure your data the way you want to see it, and use FlowFuse Dashboard to create actionable visualizations. Because this entire process runs on FlowFuse, each step is customizable and not limited to built-in parameters imposed by closed software. The entire operation is secure and can scale to as many lines and sites as you need."
+      - "No matter your SCADA setup, FlowFuse empowers your organization to securely control, connect, and operate your workflow the way you see fit."
+      - "FlowFuse connects Siemens, Allen-Bradley, Omron, and other PLCs to MQTT, OPC UA, cloud, and enterprise systems, without expensive gateways or proprietary lock-in. See the [FlowFuse PLC integration overview](/landing/plc/) for all supported protocols and use cases."
+
+  - type: features
+    background: indigo
+    heading: "The FlowFuse !!Advantage!!"
+    items:
+      - { title: "Built-in adaptation layer", text: "Leverage FlowFuse's platform to integrate your SCADA functions into a comprehensive, modular solution." }
+      - { title: "End-to-end insight and control", text: "Everything you need to connect, manage, visualize and analyze your data in one place." }
+      - { title: "Limitless connections", text: "Robust and growing open-source library provides connections for all protocols, all machines, and all devices." }
+      - { title: "Rapid implementation", text: "Get up and running quickly on FlowFuse Cloud." }
+      - { title: "Open-source", text: "Avoid vendor lock-in. Rely on an open-source community of thousands for insights and advice." }
+      - { title: "Low-Code", text: "Empowering your teams to build custom solutions with ease." }
+
+  - type: cta
+    heading: "Ready to unlock SCADA for your organization?"
diff --git a/nuxt/content/use-cases/shop-floor-communication.yml b/nuxt/content/use-cases/shop-floor-communication.yml
index 8c9c3c7fa3..8025c88840 100644
--- a/nuxt/content/use-cases/shop-floor-communication.yml
+++ b/nuxt/content/use-cases/shop-floor-communication.yml
@@ -1,6 +1,6 @@
 # Lifted verbatim from src/use-cases/shop-floor-communication.njk (11ty), which had no template body: the whole
 # page was frontmatter read by layouts/use-case.njk. Rendered now by
-# pages/use-cases/[slug].vue through the components in components/use-case/.
+# pages/use-cases/[slug].vue from the `sections` list below.
 slug: shop-floor-communication
 title: "Shop Floor Communication"
 seoMeta:
@@ -11,91 +11,90 @@ industries: ["automotive", "food-beverage", "aviation-aerospace", "electronics-a
 values: ["labor-operational-efficiency"]
 architecture: "remote-device-management"
 
-customerPain:
-  heading: "Events travel at walking speed."
-  intro:
-    - "Machines know the moment something needs attention. Getting that moment to a human still relies on stack lights someone must see, radios someone must answer, and walks across the floor."
-    - "Escalation is informal: if the first person is busy, the event waits. Response times are unmeasured because nobody records when the call for help actually started."
-  cards:
-    - icon: "i-heroicons-bell-alert"
-      title: "Alarms without an audience"
-      detail: "Stack lights and local alarms help only whoever happens to be nearby."
-    - icon: "i-heroicons-chat-bubble-left-right"
-      title: "Events never reach team channels"
-      detail: "The tools people actually watch, phones, Teams, Slack, displays, are disconnected from the machines."
-    - icon: "i-heroicons-arrow-path"
-      title: "No escalation path"
-      detail: "If the first responder is occupied, nothing routes the event to the next person."
-    - icon: "i-heroicons-clock"
-      title: "Response time is invisible"
-      detail: "Without timestamps from event to acknowledgment, response cannot be measured or improved."
-
-outcomeFirst:
-  heading: "From machine event to the right person, in seconds."
-  intro: "FlowFuse turns machine and operator events into routed notifications: andon displays, team-channel messages, SMS escalation chains, with acknowledgment and timing captured for every event."
-  dimensions:
-    - label: "Operational"
-      title: "Events routed, not broadcast"
-      detail: "The right role gets the right event on the channel they actually watch, with context attached."
-    - label: "Organizational"
-      title: "Escalation that runs itself"
-      detail: "Unacknowledged events climb the chain automatically; nothing waits on a walk across the floor."
-    - label: "Financial"
-      title: "Measured, shrinking response times"
-      detail: "Event-to-acknowledgment timing becomes a metric you can see and improve."
-
-whyItMatters:
-  heading: "Downtime is often waiting time in disguise."
-  intro: "A meaningful share of every stop is the gap between the event and the right person knowing about it."
-  points:
-    - title: "Minutes of waiting hide in every stop"
-      detail: "Multiply the notification gap across every stop and shift; the total is a production line's worth of capacity."
-    - title: "Informal escalation fails on bad days"
-      detail: "Exactly when the floor is busiest, word-of-mouth routing breaks down."
-    - title: "Communication data improves staffing"
-      detail: "Knowing which events, where, at what times, shapes shift coverage and skill placement."
-
-competition:
-  heading: "Why the usual approaches stall."
-  intro: "Andon exists in many forms; connected, routed, measured andon rarely does."
-  traps:
-    - label: "Hardware andon"
-      title: "Lights and towers, no routing"
-      detail: "Visual signals with no notion of who should respond or what happens if they do not."
-    - label: "MES call buttons"
-      title: "Locked to one vendor's screens"
-      detail: "Built-in call functions reach only the people logged into that system."
-    - label: "Group chat chaos"
-      title: "Everything posted to everyone"
-      detail: "Unrouted alerts train people to ignore the channel."
-
-comparison:
-  without:
-    - title: "Events wait for a passerby"
-      detail: "Stack lights and shouts; response depends on proximity."
-    - title: "No record of response"
-      detail: "Event-to-fix timing unmeasured, unimprovable."
-    - title: "Every plant improvises"
-      detail: "Each site wires its own ad-hoc notification hacks."
-  with:
-    - title: "Events reach the right person in seconds"
-      detail: "Routed notifications with context, on channels people watch."
-    - title: "Acknowledgment and timing captured"
-      detail: "Response becomes a measured, managed metric."
-    - title: "One pattern across sites"
-      detail: "The same escalation flows deployed fleet-wide."
-
-aiBuildLayer:
-  intro: "The FlowFuse Expert works on this use case with you, from routing logic to summarizing what happened overnight."
-  steps:
-    - title: "Describe it, get a starting flow"
-      detail: "Tell the Expert your events, roles and channels; it assembles a routing and escalation starting flow. Currently in open beta on FlowFuse Cloud."
-    - title: "Refine with in-editor assistance"
-      detail: "Function Builder and completions handle message formatting, shift calendars and escalation timers."
-    - title: "Own and adapt what you built"
-      detail: "The flow explainer documents routing rules so supervisors can read and adjust them without a developer."
-  note: "AI capabilities noted as beta are in open beta on FlowFuse Cloud at time of writing."
-
-closingCta:
-  heading: "Close the gap between event and action"
-  description: "Talk to an expert about connected andon and escalation, or route your first event today."
+sections:
+  - type: hero
+    layout: centered
+  - type: sectionNav
+  - type: pain
+    heading: "Events travel at walking speed."
+    intro:
+      - "Machines know the moment something needs attention. Getting that moment to a human still relies on stack lights someone must see, radios someone must answer, and walks across the floor."
+      - "Escalation is informal: if the first person is busy, the event waits. Response times are unmeasured because nobody records when the call for help actually started."
+    cards:
+      - icon: "i-heroicons-bell-alert"
+        title: "Alarms without an audience"
+        detail: "Stack lights and local alarms help only whoever happens to be nearby."
+      - icon: "i-heroicons-chat-bubble-left-right"
+        title: "Events never reach team channels"
+        detail: "The tools people actually watch, phones, Teams, Slack, displays, are disconnected from the machines."
+      - icon: "i-heroicons-arrow-path"
+        title: "No escalation path"
+        detail: "If the first responder is occupied, nothing routes the event to the next person."
+      - icon: "i-heroicons-clock"
+        title: "Response time is invisible"
+        detail: "Without timestamps from event to acknowledgment, response cannot be measured or improved."
+  - type: outcomes
+    heading: "From machine event to the right person, in seconds."
+    intro: "FlowFuse turns machine and operator events into routed notifications: andon displays, team-channel messages, SMS escalation chains, with acknowledgment and timing captured for every event."
+    dimensions:
+      - label: "Operational"
+        title: "Events routed, not broadcast"
+        detail: "The right role gets the right event on the channel they actually watch, with context attached."
+      - label: "Organizational"
+        title: "Escalation that runs itself"
+        detail: "Unacknowledged events climb the chain automatically; nothing waits on a walk across the floor."
+      - label: "Financial"
+        title: "Measured, shrinking response times"
+        detail: "Event-to-acknowledgment timing becomes a metric you can see and improve."
+  - type: whyItMatters
+    heading: "Downtime is often waiting time in disguise."
+    intro: "A meaningful share of every stop is the gap between the event and the right person knowing about it."
+    points:
+      - title: "Minutes of waiting hide in every stop"
+        detail: "Multiply the notification gap across every stop and shift; the total is a production line's worth of capacity."
+      - title: "Informal escalation fails on bad days"
+        detail: "Exactly when the floor is busiest, word-of-mouth routing breaks down."
+      - title: "Communication data improves staffing"
+        detail: "Knowing which events, where, at what times, shapes shift coverage and skill placement."
+  - type: competition
+    heading: "Why the usual approaches stall."
+    intro: "Andon exists in many forms; connected, routed, measured andon rarely does."
+    traps:
+      - label: "Hardware andon"
+        title: "Lights and towers, no routing"
+        detail: "Visual signals with no notion of who should respond or what happens if they do not."
+      - label: "MES call buttons"
+        title: "Locked to one vendor's screens"
+        detail: "Built-in call functions reach only the people logged into that system."
+      - label: "Group chat chaos"
+        title: "Everything posted to everyone"
+        detail: "Unrouted alerts train people to ignore the channel."
+  - type: comparison
+    without:
+      - title: "Events wait for a passerby"
+        detail: "Stack lights and shouts; response depends on proximity."
+      - title: "No record of response"
+        detail: "Event-to-fix timing unmeasured, unimprovable."
+      - title: "Every plant improvises"
+        detail: "Each site wires its own ad-hoc notification hacks."
+    with:
+      - title: "Events reach the right person in seconds"
+        detail: "Routed notifications with context, on channels people watch."
+      - title: "Acknowledgment and timing captured"
+        detail: "Response becomes a measured, managed metric."
+      - title: "One pattern across sites"
+        detail: "The same escalation flows deployed fleet-wide."
+  - type: aiBuildLayer
+    intro: "The FlowFuse Expert works on this use case with you, from routing logic to summarizing what happened overnight."
+    steps:
+      - title: "Describe it, get a starting flow"
+        detail: "Tell the Expert your events, roles and channels; it assembles a routing and escalation starting flow. Currently in open beta on FlowFuse Cloud."
+      - title: "Refine with in-editor assistance"
+        detail: "Function Builder and completions handle message formatting, shift calendars and escalation timers."
+      - title: "Own and adapt what you built"
+        detail: "The flow explainer documents routing rules so supervisors can read and adjust them without a developer."
+    note: "AI capabilities noted as beta are in open beta on FlowFuse Cloud at time of writing."
+  - type: industries
+  - type: cta
+    heading: "Close the gap between event and action"
+    description: "Talk to an expert about connected andon and escalation, or route your first event today."
diff --git a/nuxt/content/use-cases/uns.yml b/nuxt/content/use-cases/uns.yml
index 11e7ee293c..051eea02f0 100644
--- a/nuxt/content/use-cases/uns.yml
+++ b/nuxt/content/use-cases/uns.yml
@@ -1,7 +1,64 @@
-# Listing metadata only. The page itself is pages/use-cases/uns.vue - this one
-# had a real markup body in src/use-cases/uns.njk, so it did not lift into data the way the
-# two operational use-cases did. Kept here so /use-cases/ still builds its cards from
-# one place rather than a hand-maintained list.
+# Ported from src/use-cases/uns.njk (11ty). Rendered by pages/use-cases/[slug].vue from
+# the `sections` list below.
 slug: uns
 title: "FlowFuse for UNS"
 problem: "Adopt a Unified Namespace without ripping out existing infrastructure. FlowFuse connects producers and consumers through MQTT with low-code flows."
+seoMeta:
+  title: "FlowFuse for the Unified Namespace"
+  description: "FlowFuse simplifies UNS adoption for manufacturing companies by providing a user-friendly, low-code platform for deploying and using data from a UNS."
+  image: /images/solutions/flowfuse-uns.png
+  keywords: "FlowFuse, UNS, Unified Namespace, manufacturing, data, data integration, data management, data visualization, data analysis, data-driven decisions, data silos, real-time data, collaboration, Node-RED, MQTT Broker, low-code, open-source, rapid implementation, seamless integration"
+
+sections:
+  - type: hero
+    layout: split
+    heading: "FlowFuse for the ==Unified Namespace=="
+    text: "FlowFuse simplifies UNS adoption for manufacturing companies by providing a user-friendly, low-code platform for deploying and using data from a UNS."
+    image: { src: /images/solutions/ff-uns.png, alt: "FlowFuse connected to many industrial devices", width: 400 }
+    ctas:
+      - { cta: contact-us, variant: primary }
+      - { cta: sign-up }
+
+  - type: features
+    heading: "Unlock the power of your ==real-time data=="
+    intro: "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."
+    lead: "With FlowFuse adopting UNS has never been faster or easier"
+    items:
+      - { icon: i-heroicons-circle-stack, title: "Break down data silos", text: "Access data from any source, regardless of its format or location and make it available through a central hub." }
+      - { icon: i-heroicons-eye, title: "Gain real-time visibility", text: "Monitor your operations with interactive visual dashboards." }
+      - { icon: i-heroicons-bolt, title: "Make faster, data-driven decisions", text: "Analyze data from across your organization to identify gaps and optimize processes." }
+      - { icon: i-heroicons-lock-closed, title: "Replace point-to-point connections", text: "Seamlessly share data across your entire operation." }
+      - { icon: i-heroicons-arrows-pointing-out, title: "Improved collaboration", text: "Adapt data across different systems with minimal data loss or loss of context." }
+
+  - type: prose
+    heading: "From Data Source to Application:\n==Streamline Your UNS Workflows with FlowFuse=="
+    body:
+      - image: { src: /images/solutions/flowfuse-uns.png, alt: "FlowFuse UNS Workflow" }
+
+  - type: features
+    background: indigo
+    heading: "The FlowFuse !!Advantage!!"
+    items:
+      - { title: "Built-in adaptation layer", text: "Leverage FlowFuse's low-code platform to transform and make your data available for UNS." }
+      - { title: "End-to-end UNS platform", text: "Everything you need to connect, manage, visualize and analyze your data in one place." }
+      - { title: "Seamless integration", text: "Built-in MQTT Broker ready to use alongside your FlowFuse applications with robust enterprise-grade features of the FlowFuse Platform." }
+      - { title: "Rapid implementation", text: "Get up and running quickly on FlowFuse Cloud." }
+      - { title: "Open-source", text: "Avoid vendor lock-in." }
+      - { title: "Low-Code", text: "Empowering your teams to build custom solutions with ease." }
+
+  - type: cta
+    heading: "Ready to simplify your UNS journey and unlock the power of your industrial data?"
+
+  - type: resources
+    heading: "Learn about UNS"
+    columns:
+      - items:
+          - { title: "Introduction to UNS", href: /blog/2023/12/introduction-to-unified-namespace/, image: /blog/2023/12/images/introduction-to-uns.png, alt: "Graphics depicting a unified namespace." }
+          - { title: "From ISA 95 towards the UNS", href: /blog/2023/08/isa-95-automation-pyramid-to-unified-namespace/, image: /blog/2023/08/images/UNS/UNS-Headline.svg, alt: "Graphics depicting the UNS related to the automation pyramid." }
+          - { title: "Node-RED: The perfect adapter and middleware for the UNS", href: /blog/2024/02/node-red-perfect-adapter-middleware-uns/, image: /blog/2024/02/images/node-red-for-uns.png, alt: "Node-RED and the UNS" }
+          - { title: "Building a Unified Namespace (UNS) with FlowFuse", href: /blog/2024/11/building-uns-with-flowfuse/, image: /blog/2024/11/images/building-uns-with-flowfuse.png, alt: "Graphics depicting a Unified Namespace with FlowFuse." }
+      - items:
+          - { lead: "Free whitepaper:", title: "UNS - Decoupling data producers and consumers", href: /whitepaper/uns-decoupling-data-producers-and-consumers/, image: /resources/images/whitepaper_uns.png, alt: "Graphics depicting the cover of the Whitepaper." }
+          - { title: "Data Modeling: The Key to a Successful Unified Namespace", href: /blog/2024/12/why-uns-need-data-modeling/, image: /blog/2024/12/images/data-modeling-uns.png, alt: "Graphics depicting unified namespace data modeling." }
+          - { title: "Selecting your UNS Broker", href: /blog/2024/01/unified-namespace-what-broker/, image: /blog/2024/01/images/broker-for-uns.png, alt: "Graphics displaying different broker logos." }
+          - { title: "Unified Namespace: When to Use It, and When to Choose Something Else", href: /blog/2024/01/unified-namespace-when-not-to-use/, image: /blog/2024/01/images/when-not-to-use-the-uns.png, alt: "Graphics depicting unified namespace data modeling using FlowFuse." }
diff --git a/nuxt/lib/rich-text.mjs b/nuxt/lib/rich-text.mjs
new file mode 100644
index 0000000000..2a5b9c656b
--- /dev/null
+++ b/nuxt/lib/rich-text.mjs
@@ -0,0 +1,30 @@
+// Renders one line of page copy authored in YAML into HTML. Kept free of Nuxt and Vue
+// imports so it can be unit tested with `node --test`.
+//
+// The use-case pages keep their copy in content/use-cases/*.yml, and that copy carries
+// the same few pieces of markup the hand-written pages used to write as template HTML:
+// a coloured accent inside a heading, an inline link, a bold run, a forced line break.
+// It is escaped first, exactly like BlogFaq's answers (lib/faq-answer.mjs supplies the
+// link, bold and italic rules), so a YAML string cannot reintroduce arbitrary markup.
+//
+//   [label](url)   inline link, http(s) or site-absolute only
+//   **bold**       <strong>
+//   *italic*       <em>
+//   ==text==       the indigo accent, `text-indigo-600`
+//   !!text!!       the red accent, `text-red-600`
+//   newline        <br> (a heading split over two lines)
+import { inline } from './faq-answer.mjs'
+
+// Non-greedy and single-line, so an unclosed marker does not swallow the rest.
+const INDIGO = /==([^=\n]+)==/g
+const RED = /!!([^!\n]+)!!/g
+
+export function richText (text) {
+    if (!text) return ''
+    return inline(String(text).trim())
+        .replace(INDIGO, '<span class="text-indigo-600">$1</span>')
+        .replace(RED, '<span class="text-red-600">$1</span>')
+        // The space after <br> keeps the two lines apart for a screen reader, which reads
+        // straight through a <br> otherwise.
+        .replace(/\s*\n\s*/g, '<br> ')
+}
diff --git a/nuxt/lib/rich-text.test.mjs b/nuxt/lib/rich-text.test.mjs
new file mode 100644
index 0000000000..75db47b563
--- /dev/null
+++ b/nuxt/lib/rich-text.test.mjs
@@ -0,0 +1,47 @@
+import { test } from 'node:test'
+import assert from 'node:assert/strict'
+import { richText } from './rich-text.mjs'
+
+test('plain text passes through', () => {
+    assert.equal(richText('FlowFuse for SCADA'), 'FlowFuse for SCADA')
+})
+
+test('empty and missing input render nothing', () => {
+    assert.equal(richText(''), '')
+    assert.equal(richText(undefined), '')
+})
+
+test('accents become coloured spans', () => {
+    assert.equal(
+        richText('The FlowFuse !!Advantage!!'),
+        'The FlowFuse <span class="text-red-600">Advantage</span>'
+    )
+    assert.equal(
+        richText('==Integrate== OT and IT Data'),
+        '<span class="text-indigo-600">Integrate</span> OT and IT Data'
+    )
+})
+
+test('links and bold still work alongside accents', () => {
+    assert.equal(
+        richText('See the [PLC overview](/landing/plc/) for **all** ==protocols=='),
+        'See the <a href="/landing/plc/">PLC overview</a> for <strong>all</strong> <span class="text-indigo-600">protocols</span>'
+    )
+})
+
+test('a newline becomes a line break with a space after it', () => {
+    assert.equal(
+        richText('From Data Source to Application:\n==Streamline Your UNS Workflows=='),
+        'From Data Source to Application:<br> <span class="text-indigo-600">Streamline Your UNS Workflows</span>'
+    )
+})
+
+test('markup in the source is escaped, not rendered', () => {
+    assert.equal(richText('<script>x</script>'), '&lt;script&gt;x&lt;/script&gt;')
+    assert.equal(richText('==<b>x</b>=='), '<span class="text-indigo-600">&lt;b&gt;x&lt;/b&gt;</span>')
+})
+
+test('an unclosed marker is left as text', () => {
+    assert.equal(richText('a == b'), 'a == b')
+    assert.equal(richText('wow!! really'), 'wow!! really')
+})
diff --git a/nuxt/pages/ai/index.vue b/nuxt/pages/ai/index.vue
index 4655cbe4c3..f2291f4aef 100644
--- a/nuxt/pages/ai/index.vue
+++ b/nuxt/pages/ai/index.vue
@@ -9,7 +9,7 @@ import { getAllBlogPosts } from '~/utils/sharedContent'
 //  - The copy button becomes <FfCommand>, and the whole agent picker becomes
 //    <AgentSetupTabs>, both shared with the changelog and the docs page instead
 //    of markup plus a copy helper pasted per page.
-//  - jsonld.njk's meta.faq becomes useSchemaOrg, which escapes properly. The 11ty
+//  - jsonld.njk's meta.faq becomes <FaqSection>'s FAQPage data, which escapes properly. The 11ty
 //    partial interpolated answers straight into a JSON string.
 //  - Sign-up buttons become <CtaSignUp>, so the copy is the site's fixed "Try it
 //    out" and the event is the unified cta-sign-up. The .njk had bespoke labels
@@ -48,11 +48,6 @@ const FAQ = [
     },
 ]
 
-useSchemaOrg([
-    defineWebPage({ '@type': 'FAQPage' }),
-    ...FAQ.map(item => defineQuestion({ question: item.question, answer: item.answer })),
-])
-
 // The Cloud address. Self-hosted platforms answer on their own domain, so the block
 // takes one (host-swap) rather than telling the reader in prose to edit what they
 // have just copied.
@@ -425,15 +420,6 @@ onUnmounted(() => {
       </div>
     </div>
 
-    <!-- FAQ: the questions are also emitted as FAQPage structured data by
-         useSchemaOrg above, off the same array. -->
-    <div class="w-full px-6 py-12 sm:py-16 bg-indigo-50/50">
-      <div class="max-w-screen-lg mx-auto">
-        <h2 class="mb-8">Frequently Asked <span class="text-indigo-600">Questions</span></h2>
-        <!-- The shared accordion, same as the blog and customer stories. It carries
-             the #faqs anchor itself, so the wrapper above no longer sets one. -->
-        <BlogFaq :faq="FAQ" />
-      </div>
-    </div>
+    <FaqSection :items="FAQ" background="indigo" />
   </div>
 </template>
diff --git a/nuxt/pages/index.vue b/nuxt/pages/index.vue
index 2a01f1ca81..928497d6ea 100644
--- a/nuxt/pages/index.vue
+++ b/nuxt/pages/index.vue
@@ -7,7 +7,7 @@
 //    inline script that queried the DOM and ran two timers with no teardown.
 //  - testimonials.njk becomes <TestimonialCarousel>, explore-more-content.njk becomes
 //    <ExploreMoreContent> (renamed from ThankYouExploreMore, since this page renders it
-//    too), social-proof.njk becomes <SocialProof> and faq.njk becomes <BlogFaq>.
+//    too), social-proof.njk becomes <SocialProof> and faq.njk becomes <FaqSection>.
 //  - cta-get-started.njk was a four-line partial reading a `cta` object the caller set;
 //    it is the markup at the foot of this page.
 //  - site.messaging.heroTagLine and .subtitle came from src/_data/site.json, which Nuxt
@@ -108,10 +108,6 @@ useSeoMeta({
     twitterSite: '@FlowFuseinc',
 })
 
-useSchemaOrg([
-    defineWebPage({ '@type': 'FAQPage' }),
-    ...FAQ.map(item => defineQuestion({ question: item.question, answer: item.answer })),
-])
 </script>
 
 <template>
@@ -366,15 +362,7 @@ useSchemaOrg([
       </div>
   </div>
 
-  <!-- FAQ Section -->
-  <div class="w-full px-6 pt-20 bg-indigo-50/50 mb-10">
-      <div class="max-w-screen-lg mx-auto">
-          <h2 class="mb-1">Frequently Asked <span class="text-indigo-600">Questions</span></h2>
-          <div class="-mt-20">
-              <BlogFaq :faq="FAQ" variant="page" />
-          </div>
-      </div>
-  </div>
+  <FaqSection :items="FAQ" background="indigo" class="mb-10" />
 
   <div class="pb-10 md:pb-12 pt-14 px-6">
       <!-- Get Started -->
diff --git a/nuxt/pages/industries/[slug].vue b/nuxt/pages/industries/[slug].vue
index 5386c51d63..21f159d040 100644
--- a/nuxt/pages/industries/[slug].vue
+++ b/nuxt/pages/industries/[slug].vue
@@ -71,6 +71,11 @@ useSeoMeta({
       </div>
     </div>
 
-    <IndustryCta :cta="page.cta" />
+    <ClosingCta
+        :heading="page.cta.title"
+        :description="page.cta.description"
+        :ctas="[{ cta: 'book-demo' }]"
+        position="cta"
+    />
   </div>
 </template>
diff --git a/nuxt/pages/integrations/opcua.vue b/nuxt/pages/integrations/opcua.vue
index 69d759eeb8..9dde80b62e 100644
--- a/nuxt/pages/integrations/opcua.vue
+++ b/nuxt/pages/integrations/opcua.vue
@@ -206,28 +206,24 @@ const useCases = [
 
 const steps = [
     {
-        number: '1',
         icon: 'i-heroicons-link',
         title: 'Connect or Build',
-        description: 'Browse and connect to an existing OPC UA server as a client. On self-hosted FlowFuse, model your own address space and expose it as a server, from the same canvas.',
+        text: 'Browse and connect to an existing OPC UA server as a client. On self-hosted FlowFuse, model your own address space and expose it as a server, from the same canvas.',
     },
     {
-        number: '2',
         icon: 'i-heroicons-shield-check',
         title: 'Secure the Session',
-        description: 'Set Security Policy to SignAndEncrypt, then add the client certificate to the server\'s trusted list so the secure handshake succeeds.',
+        text: 'Set Security Policy to SignAndEncrypt, then add the client certificate to the server\'s trusted list so the secure handshake succeeds.',
     },
     {
-        number: '3',
         icon: 'i-heroicons-arrows-right-left',
         title: 'Bridge Other Protocols',
-        description: 'Wire in Modbus, EtherNet/IP, or Siemens S7 nodes alongside OPC UA on the same canvas, for the plants that aren\'t running OPC UA end to end.',
+        text: 'Wire in Modbus, EtherNet/IP, or Siemens S7 nodes alongside OPC UA on the same canvas, for the plants that aren\'t running OPC UA end to end.',
     },
     {
-        number: '4',
         icon: 'i-heroicons-chart-bar',
         title: 'Visualize, Route & Scale',
-        description: 'Wire the results into a live dashboard, forward data to MQTT, a time-series database, or a cloud platform. Then push the flow to one edge device or a thousand with one click.',
+        text: 'Wire the results into a live dashboard, forward data to MQTT, a time-series database, or a cloud platform. Then push the flow to one edge device or a thousand with one click.',
     },
 ]
 
@@ -235,40 +231,40 @@ const resourceGroups = [
     {
         group: 'Start here',
         items: [
-            { title: 'OPC UA Tutorial: Connect and Exchange Data with Industrial Equipment', image: '/blog/2025/07/images/opcua-tutorial.png', alt: 'Reading and writing PLC tags over OPC UA in a Node-RED flow', url: '/blog/2025/07/reading-and-writing-plc-data-using-opc-ua/' },
-            { title: 'OPC UA Tutorial: Advanced Monitoring with Subscriptions, Alarms & History', image: '/blog/2025/08/images/advanced-opcua-real-time-subscriptions-alarms-historical-data.png', alt: 'Subscriptions, alarms, and historical reads in an OPC UA flow', url: '/blog/2025/08/advanced-opcua-real-time-subscriptions-alarms-historical-data/' },
-            { title: 'How to Deploy a Basic OPC UA Server in Node-RED', image: '/blog/2023/07/images/opc-ua-1/opc-ua-1-title-image.png', alt: 'An OPC UA server running inside a Node-RED flow', url: '/blog/2023/07/how-to-deploy-a-basic-opc-ua-server-in-node-red/' },
+            { title: 'OPC UA Tutorial: Connect and Exchange Data with Industrial Equipment', image: '/blog/2025/07/images/opcua-tutorial.png', alt: 'Reading and writing PLC tags over OPC UA in a Node-RED flow', href: '/blog/2025/07/reading-and-writing-plc-data-using-opc-ua/' },
+            { title: 'OPC UA Tutorial: Advanced Monitoring with Subscriptions, Alarms & History', image: '/blog/2025/08/images/advanced-opcua-real-time-subscriptions-alarms-historical-data.png', alt: 'Subscriptions, alarms, and historical reads in an OPC UA flow', href: '/blog/2025/08/advanced-opcua-real-time-subscriptions-alarms-historical-data/' },
+            { title: 'How to Deploy a Basic OPC UA Server in Node-RED', image: '/blog/2023/07/images/opc-ua-1/opc-ua-1-title-image.png', alt: 'An OPC UA server running inside a Node-RED flow', href: '/blog/2023/07/how-to-deploy-a-basic-opc-ua-server-in-node-red/' },
         ],
     },
     {
         group: 'Secure it',
         items: [
-            { title: 'OPC UA Security: How Threat Actors Exploit Industrial Protocol Vulnerabilities', image: '/blog/2026/05/images/opcua-security-blog.png', alt: 'Common OPC UA misconfigurations that attackers target', url: '/blog/2026/05/opc-ua-security-attack-vectors/' },
-            { title: 'OPC UA Security: How to Establish a Defensible Architecture', image: '/blog/2026/06/images/opc-ua-security.png', alt: 'A defensible OPC UA architecture with Reverse Connect and managed certificates', url: '/blog/2026/06/opc-ua-security-best-practices/' },
+            { title: 'OPC UA Security: How Threat Actors Exploit Industrial Protocol Vulnerabilities', image: '/blog/2026/05/images/opcua-security-blog.png', alt: 'Common OPC UA misconfigurations that attackers target', href: '/blog/2026/05/opc-ua-security-attack-vectors/' },
+            { title: 'OPC UA Security: How to Establish a Defensible Architecture', image: '/blog/2026/06/images/opc-ua-security.png', alt: 'A defensible OPC UA architecture with Reverse Connect and managed certificates', href: '/blog/2026/06/opc-ua-security-best-practices/' },
         ],
     },
     {
         group: 'Compare and migrate',
         items: [
-            { title: 'MQTT vs OPC UA: Why This Question Never Has a Straight Answer', image: '/blog/2026/01/images/opcua-vs-mqtt.png', alt: 'Where MQTT and OPC UA each fit in an industrial architecture', url: '/blog/2026/01/opcua-vs-mqtt/' },
-            { title: 'Why OPC UA Is Not Replacing Modbus (Yet)', image: '/blog/2026/03/images/opcua-is-not-replacing-modbus-yet.png', alt: 'Why Modbus still ships on new field devices', url: '/blog/2026/03/why-opcua-is-not-replacing-modbus-yet/' },
-            { title: 'Beyond Kepware: Why Modern Industrial Connectivity Demands a Second Look', image: '/blog/2026/01/images/kepware-alternative.png', alt: 'Alternatives to per-tag OPC UA gateway licensing', url: '/blog/2026/01/kepware-opcua-better-alternative/' },
+            { title: 'MQTT vs OPC UA: Why This Question Never Has a Straight Answer', image: '/blog/2026/01/images/opcua-vs-mqtt.png', alt: 'Where MQTT and OPC UA each fit in an industrial architecture', href: '/blog/2026/01/opcua-vs-mqtt/' },
+            { title: 'Why OPC UA Is Not Replacing Modbus (Yet)', image: '/blog/2026/03/images/opcua-is-not-replacing-modbus-yet.png', alt: 'Why Modbus still ships on new field devices', href: '/blog/2026/03/why-opcua-is-not-replacing-modbus-yet/' },
+            { title: 'Beyond Kepware: Why Modern Industrial Connectivity Demands a Second Look', image: '/blog/2026/01/images/kepware-alternative.png', alt: 'Alternatives to per-tag OPC UA gateway licensing', href: '/blog/2026/01/kepware-opcua-better-alternative/' },
         ],
     },
     {
         group: 'Put the data to work',
         items: [
-            { title: 'Historical Data Logging with OPC UA and InfluxDB', image: '/blog/2026/06/images/opcua-to-influxdb.png', alt: 'Logging OPC UA values into an InfluxDB time-series database', url: '/blog/2026/06/opcua-to-influxdb/' },
-            { title: 'Connect Node-RED to KepServerEX OPC Server', image: '/blog/2024/02/images/node-red-to-kepware.png', alt: 'A Node-RED client session against a KepServerEX OPC UA server', url: '/blog/2024/02/connect-node-red-to-kepware-opc/' },
+            { title: 'Historical Data Logging with OPC UA and InfluxDB', image: '/blog/2026/06/images/opcua-to-influxdb.png', alt: 'Logging OPC UA values into an InfluxDB time-series database', href: '/blog/2026/06/opcua-to-influxdb/' },
+            { title: 'Connect Node-RED to KepServerEX OPC Server', image: '/blog/2024/02/images/node-red-to-kepware.png', alt: 'A Node-RED client session against a KepServerEX OPC UA server', href: '/blog/2024/02/connect-node-red-to-kepware-opc/' },
         ],
     },
 ]
 
 const webinars = [
-    { title: 'MQTT vs OPC UA: The Industrial Data Showdown', image: '/images/webinars/webinar-mqtt-vs-opc-ua.jpg', alt: 'MQTT vs OPC UA industrial data showdown webinar', url: '/webinars/2026/mqtt-vs-opc-ua-industrial-data-showdown/' },
-    { title: 'Making Industry Work – Leveraging OPC UA at Scale', image: '/images/webinars/making-industry-work-leveraging-opc-ua-at-scale.jpg', alt: 'Leveraging OPC UA at scale webinar', url: '/webinars/2026/making-industry-work-leveraging-opc-ua-at-scale/' },
-    { title: 'Simplifying OPC UA: Implement Scalable Information Models with FlowFuse', image: '/images/webinars/simplifying-opc-ua.jpg', alt: 'Simplifying OPC UA webinar', url: '/webinars/2025/simplifying-opc-ua/' },
-    { title: 'Getting Started with OPC-UA and Node-RED', image: '/images/webinars/getting-started-with-opc-ua-and-node-red-webinar-august.jpg', alt: 'Getting started with OPC-UA and Node-RED webinar', url: '/webinars/2023/getting-started-opcua-node-red/' },
+    { title: 'MQTT vs OPC UA: The Industrial Data Showdown', image: '/images/webinars/webinar-mqtt-vs-opc-ua.jpg', alt: 'MQTT vs OPC UA industrial data showdown webinar', href: '/webinars/2026/mqtt-vs-opc-ua-industrial-data-showdown/' },
+    { title: 'Making Industry Work – Leveraging OPC UA at Scale', image: '/images/webinars/making-industry-work-leveraging-opc-ua-at-scale.jpg', alt: 'Leveraging OPC UA at scale webinar', href: '/webinars/2026/making-industry-work-leveraging-opc-ua-at-scale/' },
+    { title: 'Simplifying OPC UA: Implement Scalable Information Models with FlowFuse', image: '/images/webinars/simplifying-opc-ua.jpg', alt: 'Simplifying OPC UA webinar', href: '/webinars/2025/simplifying-opc-ua/' },
+    { title: 'Getting Started with OPC-UA and Node-RED', image: '/images/webinars/getting-started-with-opc-ua-and-node-red-webinar-august.jpg', alt: 'Getting started with OPC-UA and Node-RED webinar', href: '/webinars/2023/getting-started-opcua-node-red/' },
 ]
 
 // Answers include internal links, rendered with v-html below - BlogFaq.vue interpolates
@@ -520,32 +516,7 @@ function toggleFaq (i: number) {
     </div>
 
     <!-- How it works -->
-    <div class="w-full py-20 md:py-24 px-6">
-      <div class="max-w-screen-lg mx-auto md:flex md:gap-16 md:items-start">
-        <h2 class="mb-12 md:mb-0 md:w-1/3 md:shrink-0 md:sticky! md:top-24 md:self-start"><span class="text-indigo-600">From OPC UA to insight,</span> step by step</h2>
-        <div class="max-w-screen-md mx-auto md:mx-0">
-          <div v-for="(step, index) in steps" :key="step.number" class="flex flex-col sm:flex-row gap-3 sm:gap-6">
-            <div class="flex items-center gap-3 sm:flex-col sm:items-center sm:gap-0">
-              <!-- Mobile: icon flanked by two short horizontal lines (hidden past
-                   the first/last step), matching /partners/certify-hardware/'s
-                   mobile layout. Desktop: single vertical line below the icon,
-                   offset with mt-7 so the icon lines up with the title instead
-                   of the "Step N" label above it. -->
-              <div class="ff-line h-px flex-1 sm:hidden" />
-              <UIcon :name="step.icon" class="w-6 h-6 text-indigo-600 shrink-0 sm:mt-7" />
-              <div class="ff-line h-px flex-1 sm:hidden" />
-              <div v-if="index !== steps.length - 1" class="ff-line hidden sm:block w-px flex-1 my-4 bg-gray-300" />
-            </div>
-            <div :class="index !== steps.length - 1 ? 'pb-10 sm:pb-12' : ''">
-              <span class="block text-sm font-semibold text-gray-500 mb-1 text-center sm:text-left">Step {{ step.number }}</span>
-              <h4 class="mt-0 mb-4 sm:mb-2 text-indigo-600 text-center sm:text-left">{{ step.title }}</h4>
-              <p class="font-light text-gray-600 mb-0">{{ step.description }}</p>
-            </div>
-          </div>
-        </div>
-
-      </div>
-    </div>
+    <StepList heading="==From OPC UA to insight,== step by step" :steps="steps" />
 
     <!-- FAQ -->
     <div class="w-full bg-indigo-50/50 py-20 md:py-20 px-6">
@@ -588,16 +559,7 @@ function toggleFaq (i: number) {
         <h2 class="mb-8">OPC UA <span class="text-indigo-600">guides and webinars</span></h2>
         <div v-for="group in resourceGroups" :key="group.group" class="mb-12 last:mb-0">
           <h3 class="mb-3 text-sm font-semibold uppercase">{{ group.group }}</h3>
-          <div class="ff-nodered-resources grid grid-cols-1 md:grid-cols-2 gap-4">
-            <a v-for="resource in group.items" :key="resource.url" class="h-full" :href="resource.url">
-              <li class="h-full">
-                <div class="w-2/5 max-md:aspect-video ff-image-cover ff-image-left-rounded h-full">
-                  <img :src="resource.image" :alt="resource.alt" loading="lazy">
-                </div>
-                <label class="w-3/5 font-light">{{ resource.title }}</label>
-              </li>
-            </a>
-          </div>
+          <ResourceList :items="group.items" />
         </div>
         <a href="/blog/opcua/" class="flex items-center justify-end gap-1.5 text-blue-600 hover:underline">
           See all OPC UA articles
@@ -605,16 +567,7 @@ function toggleFaq (i: number) {
         </a>
         <div class="mt-12 py-12 border-t border-gray-200">
           <h3 class="mb-3 text-sm font-semibold uppercase">Webinars</h3>
-          <div class="ff-nodered-resources grid grid-cols-1 md:grid-cols-2 gap-4">
-            <a v-for="webinar in webinars" :key="webinar.url" class="h-full" :href="webinar.url">
-              <li class="h-full">
-                <div class="w-2/5 max-md:aspect-video ff-image-cover ff-image-left-rounded h-full">
-                  <img :src="webinar.image" :alt="webinar.alt" loading="lazy">
-                </div>
-                <label class="w-3/5 font-light">{{ webinar.title }}</label>
-              </li>
-            </a>
-          </div>
+          <ResourceList :items="webinars" />
         </div>
         <a href="/webinars/" class="flex items-center justify-end gap-1.5 text-blue-600 hover:underline">
           See all webinars
diff --git a/nuxt/pages/landing/plc.vue b/nuxt/pages/landing/plc.vue
index e725bc6409..4e656018ae 100644
--- a/nuxt/pages/landing/plc.vue
+++ b/nuxt/pages/landing/plc.vue
@@ -6,7 +6,7 @@
 //  - The protocol/use-case glyphs are <UIcon>. They were {% include %}d raw with no
 //    wrapper, filling the wrapper box through the svg's intrinsic ratio; a masked <span>
 //    has none, so each one carries the wrapper's size itself.
-//  - faq.njk becomes <BlogFaq> plus useSchemaOrg. One answer carried an inline <a> under
+//  - faq.njk becomes <FaqSection>, which also emits the FAQPage data. One answer carried an inline <a> under
 //    `| safe`; it is a markdown link now, which BlogFaq renders after escaping.
 //  - The CTA macros become their components.
 //  - This page has both `metaTitle` and `meta.title`; base.njk's precedence put
@@ -132,55 +132,55 @@ const RESOURCES = [
         title: "How to Connect Any PLC to MQTT in Under an Hour",
         image: "/blog/2025/10/images/plc-to-mqtt.png",
         alt: "PLC to MQTT integration diagram",
-        url: "/blog/2025/10/plc-to-mqtt-using-flowfuse/"
+        href: "/blog/2025/10/plc-to-mqtt-using-flowfuse/"
     },
     {
         title: "OPC UA Tutorial: Connect and Exchange Data with Industrial Equipment",
         image: "/blog/2025/07/images/opcua-tutorial.png",
         alt: "OPC UA tutorial illustration",
-        url: "/blog/2025/07/reading-and-writing-plc-data-using-opc-ua/"
+        href: "/blog/2025/07/reading-and-writing-plc-data-using-opc-ua/"
     },
     {
         title: "How to Log PLC Data to CSV Files",
         image: "/blog/2025/10/images/log-plc-data-to-csv.png",
         alt: "PLC data logging illustration",
-        url: "/blog/2025/10/how-to-log-plc-data-csv-files/"
+        href: "/blog/2025/10/how-to-log-plc-data-csv-files/"
     },
     {
         title: "Getting Started: Integrating Siemens S7 PLCs with Node-RED",
         image: "/blog/2025/01/images/s7-with-node-red.png",
         alt: "Siemens S7 PLC integration guide",
-        url: "/blog/2025/01/integrating-siemens-s7-plcs-with-node-red-guide/"
+        href: "/blog/2025/01/integrating-siemens-s7-plcs-with-node-red-guide/"
     },
     {
         title: "EtherNet/IP Integration: Communicating with Allen-Bradley PLCs",
         image: "/blog/2025/10/images/allen-bradly-plc.png",
         alt: "Allen-Bradley PLC with EtherNet/IP",
-        url: "/blog/2025/10/using-ethernet-ip-with-flowfuse/"
+        href: "/blog/2025/10/using-ethernet-ip-with-flowfuse/"
     },
     {
         title: "How to Connect to Beckhoff TwinCAT PLC Using ADS",
         image: "/blog/2026/03/images/backoff-twincat.png",
         alt: "Beckhoff TwinCAT ADS integration",
-        url: "/blog/2026/03/how-to-connect-to-twincat-using-ads/"
+        href: "/blog/2026/03/how-to-connect-to-twincat-using-ads/"
     },
     {
         title: "Building a Web HMI for Factory Equipment Control",
         image: "/blog/2025/11/images/building-a-web-hmi-for-factory.png",
         alt: "Web HMI dashboard for factory",
-        url: "/blog/2025/11/building-hmi-for-equipment-control/"
+        href: "/blog/2025/11/building-hmi-for-equipment-control/"
     },
     {
         title: "Store-and-Forward: Buffering PLC Data During Network Outages",
         image: "/blog/2025/11/images/store-and-forward.png",
         alt: "Store and forward edge buffering",
-        url: "/blog/2025/11/store-and-forward-edge-data-buffering/"
+        href: "/blog/2025/11/store-and-forward-edge-data-buffering/"
     },
     {
         title: "Fixing PLC Communication Latency: Where the Milliseconds Really Go",
         image: "/blog/2026/06/images/fixing-plc-communication.png",
         alt: "Diagnosing and fixing PLC communication latency",
-        url: "/blog/2026/06/plc-communication-latency-causes-and-fixes/"
+        href: "/blog/2026/06/plc-communication-latency-causes-and-fixes/"
     }
 ]
 
@@ -247,10 +247,6 @@ useSeoMeta({
     twitterSite: '@FlowFuseinc',
 })
 
-useSchemaOrg([
-    defineWebPage({ '@type': 'FAQPage' }),
-    ...FAQ.map(item => defineQuestion({ question: item.question, answer: item.answer })),
-])
 </script>
 
 <template>
@@ -520,14 +516,7 @@ useSchemaOrg([
       <!-- ============================================================
            FAQ
       ============================================================ -->
-      <div class="w-full bg-gray-50 py-16 px-6">
-          <div class="max-w-screen-lg mx-auto">
-              <h2 class="max-md:text-center -mb-12">
-                  Frequently Asked <span class="text-indigo-600">Questions</span>
-              </h2>
-              <BlogFaq :faq="FAQ" variant="page" />
-          </div>
-      </div>
+      <FaqSection :items="FAQ" background="gray" />
 
       <!-- ============================================================
            BLOG RESOURCES
@@ -536,16 +525,7 @@ useSchemaOrg([
           <div class="max-w-screen-lg mx-auto">
               <h2 class="text-center mb-10">Learn More: <span class="text-indigo-600">PLC Integration Guides</span></h2>
 
-              <div class="ff-nodered-resources grid grid-cols-1 md:grid-cols-2 gap-4">
-                  <NuxtLink v-for="resource in RESOURCES" :key="resource.url" class="h-full" :to="resource.url">
-                      <li class="h-full">
-                          <div class="w-2/5 max-md:aspect-video ff-image-cover ff-image-left-rounded h-full">
-                              <img :src="resource.image" :alt="resource.alt" width="208" loading="lazy" class="w-full h-auto">
-                          </div>
-                          <label class="w-3/5 font-light">{{ resource.title }}</label>
-                      </li>
-                  </NuxtLink>
-              </div>
+              <ResourceList :items="RESOURCES" />
               <div class="text-center mt-8">
                   <a href="/blog/plc/" class="ff-btn uppercase">See All PLC Articles →</a>
               </div>
diff --git a/nuxt/pages/node-red/index.vue b/nuxt/pages/node-red/index.vue
index 0bde5d90ca..c5984e2223 100644
--- a/nuxt/pages/node-red/index.vue
+++ b/nuxt/pages/node-red/index.vue
@@ -14,7 +14,7 @@
 //  - components/device-agent-install-commands.njk becomes <DeviceAgentInstallCommands>.
 //  - The customer-stories grid read collections.stories sorted by date; it queries the
 //    `stories` collection for the same three.
-//  - faq.njk becomes <BlogFaq> plus useSchemaOrg. Two answers carried <ol>/<ul> lists and
+//  - faq.njk becomes <FaqSection>, which also emits the FAQPage data. Two answers carried <ol>/<ul> lists and
 //    several carried inline links, all under `| safe`; they are markdown now, which
 //    BlogFaq escapes around. Its renderer gained list support for this.
 
@@ -98,10 +98,6 @@ useSeoMeta({
     twitterSite: '@FlowFuseinc',
 })
 
-useSchemaOrg([
-    defineWebPage({ '@type': 'FAQPage' }),
-    ...FAQ.map(item => defineQuestion({ question: item.question, answer: item.answer })),
-])
 </script>
 
 <template>
@@ -338,12 +334,6 @@ useSchemaOrg([
               </div>
           </div>
       </div>
-      <!-- Frequently Asked Questions -->
-      <div class="md:text-left max-md:max-w-md mx-auto pt-24 md:pt-16 text-left">
-          <h2 class="max-md:text-center -mb-12">
-              Frequently Asked <span class="text-indigo-600">Questions</span>
-          </h2>
-          <BlogFaq :faq="FAQ" variant="page" />
-      </div>
   </div>
+  <FaqSection :items="FAQ" />
 </template>
diff --git a/nuxt/pages/platform/device-agent.vue b/nuxt/pages/platform/device-agent.vue
index 18df232040..7731d74bf9 100644
--- a/nuxt/pages/platform/device-agent.vue
+++ b/nuxt/pages/platform/device-agent.vue
@@ -55,26 +55,26 @@ const STEPS = [
         label: 'Step one',
         icon: 'i-heroicons-command-line',
         title: 'Install and provision',
-        paragraphs: [
+        text: [
             'Run the installer on the machine. It installs the required components, registers the machine with your FlowFuse team, and configures the Device Agent as a service so it starts again after a reboot.',
-            'For larger deployments, use <a href="/docs/device-agent/register/#bulk-registration">bulk registration options</a> to provision multiple devices.',
+            'For larger deployments, use [bulk registration options](/docs/device-agent/register/#bulk-registration) to provision multiple devices.',
         ],
     },
     {
         label: 'Step two',
         icon: 'i-heroicons-wrench-screwdriver',
         title: 'Build and test against the real hardware',
-        paragraphs: [
-            'Developer Mode opens that device\'s <span class="whitespace-nowrap">Node-RED</span> editor through FlowFuse. Build against the real PLC, sensors, and network, then take a snapshot when the application is ready.',
+        text: [
+            'Developer Mode opens that device\'s Node‑RED editor through FlowFuse. Build against the real PLC, sensors, and network, then take a snapshot when the application is ready.',
         ],
     },
     {
         label: 'Step three',
         icon: 'i-heroicons-rocket-launch',
         title: 'Deploy the version you tested',
-        paragraphs: [
+        text: [
             'Set that snapshot as the target for one device or a group of hundreds. Devices update to the assigned version and stay there until you assign another target.',
-            'Use <a href="/docs/user/devops-pipelines/">DevOps pipelines</a> to move changes from development through testing and into production.',
+            'Use [DevOps pipelines](/docs/user/devops-pipelines/) to move changes from development through testing and into production.',
         ],
     },
 ]
@@ -169,10 +169,6 @@ const FAQ_DISPLAY = FAQ.map(item => ({
     answer: item.answer.replaceAll('Node-RED', 'Node\u2011RED'),
 }))
 
-useSchemaOrg([
-    defineWebPage({ '@type': 'FAQPage' }),
-    ...FAQ.map(item => defineQuestion(item)),
-])
 </script>
 
 <template>
@@ -241,37 +237,13 @@ useSchemaOrg([
       </div>
     </div>
 
-    <!-- How it works: /integrations/opcua/ ("From OPC UA to insight, step by step") -->
-    <section class="w-full px-6 py-20 md:py-24">
-      <div class="max-w-screen-lg mx-auto md:flex md:gap-12 md:items-start">
-        <div class="mb-12 md:mb-0 md:w-[373px] md:shrink-0 md:sticky! md:top-24 md:self-start max-md:text-center">
-          <h2 class="mt-0 mb-0">How the Device Agent Works</h2>
-          <p class="font-light text-gray-700 mt-6 mb-0">Three steps take you from a machine sitting on a bench to a <span class="whitespace-nowrap">Node-RED</span> application running in production.</p>
-          <NuxtLink to="/docs/device-agent/install/overview/" class="mt-3 inline-flex items-center gap-1.5">
-            Learn how to install the FlowFuse Device Agent
-            <UIcon name="i-heroicons-arrow-long-right-20-solid" class="w-5 h-5 shrink-0" />
-          </NuxtLink>
-        </div>
-        <div class="max-w-screen-md mx-auto md:mx-0">
-          <div v-for="(step, index) in STEPS" :key="step.title" class="flex flex-col sm:flex-row gap-3 sm:gap-6">
-            <div class="flex items-center gap-3 sm:flex-col sm:items-center sm:gap-0">
-              <div class="ff-line h-px flex-1 sm:hidden" />
-              <span class="flex items-center h-7 shrink-0 sm:mt-6">
-                <UIcon :name="step.icon" class="w-6 h-6 text-indigo-600" />
-              </span>
-              <div class="ff-line h-px flex-1 sm:hidden" />
-              <div v-if="index !== STEPS.length - 1" class="ff-line hidden sm:block w-px flex-1 mt-3 -mb-3 bg-gray-300" />
-            </div>
-            <div :class="index !== STEPS.length - 1 ? 'pb-10 sm:pb-12' : ''">
-              <span class="block text-sm leading-5 font-semibold text-gray-500 mb-1 text-center sm:text-left">{{ step.label }}</span>
-              <h3 class="mt-0 mb-4 sm:mb-2 text-xl leading-7 font-semibold text-indigo-600 text-center sm:text-left">{{ step.title }}</h3>
-              <!-- eslint-disable-next-line vue/no-v-html -->
-              <p v-for="(paragraph, p) in step.paragraphs" :key="p" class="font-light text-gray-600" :class="p === step.paragraphs.length - 1 ? 'mb-0' : ''" v-html="paragraph" />
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
+    <!-- How it works -->
+    <StepList
+        heading="How the Device Agent Works"
+        intro="Three steps take you from a machine sitting on a bench to a Node‑RED application running in production."
+        :link="{ label: 'Learn how to install the FlowFuse Device Agent', href: '/docs/device-agent/install/overview/' }"
+        :steps="STEPS"
+    />
 
     <!-- Where it runs: /product/edge/ ("What's Included") -->
     <section class="w-full px-6 pb-24">
@@ -330,14 +302,6 @@ useSchemaOrg([
       </div>
     </section>
 
-    <!-- FAQ: homepage -->
-    <div class="w-full px-6 pt-20 bg-indigo-50/50 mt-24">
-      <div class="max-w-screen-lg mx-auto">
-        <h2 class="mb-1 text-center md:text-left">Frequently Asked <span class="text-indigo-600">Questions</span></h2>
-        <div class="-mt-20">
-          <BlogFaq :faq="FAQ_DISPLAY" variant="page" />
-        </div>
-      </div>
-    </div>
+    <FaqSection :items="FAQ_DISPLAY" :schema-items="FAQ" background="indigo" class="mt-24" />
   </div>
 </template>
diff --git a/nuxt/pages/platform/why-flowfuse.vue b/nuxt/pages/platform/why-flowfuse.vue
index ccf0c75494..c7224fdbce 100644
--- a/nuxt/pages/platform/why-flowfuse.vue
+++ b/nuxt/pages/platform/why-flowfuse.vue
@@ -7,7 +7,7 @@
 //    blog. Both render the same video, one for each breakpoint, as the .njk did.
 //  - The four quote glyphs were {% include %}d raw at w-16 with no ff-icon wrapper, so
 //    they resolve through <UIcon> against the installed heroicons set.
-//  - faq.njk becomes <BlogFaq> plus useSchemaOrg.
+//  - faq.njk becomes <FaqSection>, which also emits the FAQPage data.
 //  - The CTA macros become <CtaBookDemo> and <CtaSignUp>.
 //  - The <title> and meta description are FIXED here. This page's frontmatter carried
 //    MES's meta block verbatim, so production serves
@@ -52,10 +52,6 @@ useSeoMeta({
     twitterSite: '@FlowFuseinc',
 })
 
-useSchemaOrg([
-    defineWebPage({ '@type': 'FAQPage' }),
-    ...FAQ.map(item => defineQuestion({ question: item.question, answer: item.answer })),
-])
 </script>
 
 <template>
@@ -164,12 +160,9 @@ useSchemaOrg([
               </tbody>
             </table>
           </div>
-          <h2 class="max-md:text-center -mb-12">
-            Frequently Asked <span class="text-indigo-600">Questions</span>
-          </h2>
-          <BlogFaq :faq="FAQ" variant="page" />
         </div>
       </div>
+      <FaqSection :items="FAQ" />
     </div>
   </div>
 </template>
diff --git a/nuxt/pages/resources/roi-calculator.vue b/nuxt/pages/resources/roi-calculator.vue
index ad143de296..ddcad52097 100644
--- a/nuxt/pages/resources/roi-calculator.vue
+++ b/nuxt/pages/resources/roi-calculator.vue
@@ -78,10 +78,6 @@ useSeoMeta({
   twitterSite: '@FlowFuseinc',
 })
 
-useSchemaOrg([
-  defineWebPage({ '@type': 'FAQPage' }),
-  ...faqs.map(item => defineQuestion(item)),
-])
 </script>
 
 <template>
@@ -161,12 +157,7 @@ useSchemaOrg([
     </section>
 
     <!-- ============================ FAQ ============================ -->
-    <section class="w-full px-6 pt-10">
-      <div class="max-w-screen-lg mx-auto pb-18">
-        <h2 class="mb-8"><span class="text-indigo-600">ROI questions</span> industrial teams ask</h2>
-        <BlogFaq :faq="faqs" />
-      </div>
-    </section>
+    <FaqSection :items="faqs" heading="==ROI questions== industrial teams ask" />
 
     <!-- ============================ CLOSING CTA ============================ -->
     <div class="w-full px-6 pb-16">
diff --git a/nuxt/pages/use-cases/[slug].vue b/nuxt/pages/use-cases/[slug].vue
index de9ac1fdcd..b4efa04522 100644
--- a/nuxt/pages/use-cases/[slug].vue
+++ b/nuxt/pages/use-cases/[slug].vue
@@ -1,18 +1,8 @@
 <script setup lang="ts">
-// Ported from src/_includes/layouts/use-case.njk (11ty), which this replaces.
-//
-// The .njk was a content-driven layout: a fixed set of optional blocks, each rendered
-// only when its frontmatter key was present. That maps onto a data collection plus one
-// component per block, so this file is just resolution and ordering.
-//
-// Only the two operational use-cases (production-monitoring, shop-floor-communication)
-// come through here - they had no template body at all. The six architecture pages had
-// real markup and are hand-written Vue pages alongside this one; Nuxt matches those
-// static routes ahead of this dynamic one, and the guard below makes that explicit
-// rather than load-bearing-by-accident.
-//
-// The .njk's legacy `gap`/`workflow`/`outcomes` fall-back skeleton is not ported: no
-// remaining page used it, and it rendered visible "Placeholder copy" text.
+// Every /use-cases/<slug>/ page. A use case is one content/use-cases/<slug>.yml entry: its
+// listing metadata plus an ordered `sections` list, each entry rendered by the component
+// its `type` names below. No use case has a .vue file of its own, so adding one, or
+// moving a band, is a YAML change. The schema lives in content.config.ts (`useCases`).
 const route = useRoute()
 const slug = String(route.params.slug)
 
@@ -24,20 +14,49 @@ if (!page.value) {
     throw createError({ statusCode: 404, statusMessage: 'Use case not found' })
 }
 
-// The .njk assembled this list by testing each block in turn, and numbered the entries
-// by position, so a page missing a block does not leave a gap in the numbering.
-const navItems = computed(() => {
-    const p = page.value
-    if (!p) return []
-    return [
-        p.customerPain && { id: 'customer-pain', label: 'Customer Pain' },
-        p.outcomeFirst && { id: 'outcome-first', label: 'Outcome First' },
-        p.whyItMatters && { id: 'why-it-matters', label: 'Why It Matters' },
-        p.competition && { id: 'competition', label: 'Why Off-the-Shelf Fails' },
-        p.comparison && { id: 'with-without', label: 'With / Without FlowFuse' },
-        p.aiBuildLayer && { id: 'ai-build-layer', label: 'Build It With AI' },
-    ].filter(Boolean) as Array<{ id: string, label: string }>
-})
+// The numbered sections from layouts/use-case.njk. Each one carries an anchor and a
+// section-nav label; its number is its position among them, so a page that leaves one
+// out does not leave a gap.
+const NUMBERED: Record<string, { id: string, label: string }> = {
+    pain: { id: 'customer-pain', label: 'Customer Pain' },
+    outcomes: { id: 'outcome-first', label: 'Outcome First' },
+    whyItMatters: { id: 'why-it-matters', label: 'Why It Matters' },
+    competition: { id: 'competition', label: 'Why Off-the-Shelf Fails' },
+    comparison: { id: 'with-without', label: 'With / Without FlowFuse' },
+    aiBuildLayer: { id: 'ai-build-layer', label: 'Build It With AI' },
+}
+
+const COMPONENTS: Record<string, ReturnType<typeof resolveComponent>> = {
+    pain: resolveComponent('UseCasePain'),
+    outcomes: resolveComponent('UseCaseOutcomes'),
+    whyItMatters: resolveComponent('UseCaseWhyItMatters'),
+    competition: resolveComponent('UseCaseCompetition'),
+    comparison: resolveComponent('UseCaseComparison'),
+    aiBuildLayer: resolveComponent('UseCaseAiBuildLayer'),
+    prose: resolveComponent('UseCaseProse'),
+    features: resolveComponent('UseCaseFeatures'),
+    results: resolveComponent('UseCaseResults'),
+    resources: resolveComponent('UseCaseResources'),
+}
+
+const sections = computed(() => page.value?.sections || [])
+
+const navItems = computed(() =>
+    sections.value.filter(s => s.type in NUMBERED).map(s => NUMBERED[s.type]!)
+)
+
+// Only the numbered sections take a number, and only the AI build layer the slug (for
+// its CTA's tracking props); passing either to the rest would fall through as an HTML
+// attribute on their root element.
+function propsFor(section: { type: string }) {
+    const props: Record<string, unknown> = { block: section }
+    if (section.type in NUMBERED) {
+        const index = navItems.value.findIndex(item => item.id === NUMBERED[section.type]!.id)
+        props.number = String(index + 1).padStart(2, '0')
+    }
+    if (section.type === 'aiBuildLayer') props.slug = slug
+    return props
+}
 
 const seoTitle = computed(() => page.value?.seoMeta?.title || page.value?.title)
 const seoDescription = computed(() => page.value?.seoMeta?.description || page.value?.problem || '')
@@ -46,28 +65,38 @@ useSeoMeta({
     title: seoTitle,
     description: seoDescription,
     ogDescription: seoDescription,
-    ogUrl: computed(() => `https://flowfuse.com/use-cases/${slug}/`),
+    ogImage: computed(() => page.value?.seoMeta?.image ? `https://flowfuse.com${page.value.seoMeta.image}` : undefined),
+    keywords: computed(() => page.value?.seoMeta?.keywords),
+    ogUrl: `https://flowfuse.com/use-cases/${slug}/`,
     twitterSite: '@FlowFuseinc',
 })
 </script>
 
 <template>
   <div v-if="page" class="w-full">
-    <UseCaseHero :title="page.title" :problem="page.problem" />
-    <UseCaseSectionNav :items="navItems" />
-
-    <UseCasePain v-if="page.customerPain" :block="page.customerPain" />
-    <UseCaseOutcomes v-if="page.outcomeFirst" :block="page.outcomeFirst" />
-    <UseCaseWhyItMatters v-if="page.whyItMatters" :block="page.whyItMatters" />
-    <UseCaseCompetition v-if="page.competition" :block="page.competition" />
-    <UseCaseComparison v-if="page.comparison" :block="page.comparison" />
-    <UseCaseAiBuildLayer v-if="page.aiBuildLayer" :block="page.aiBuildLayer" :slug="slug" />
-
-    <UseCaseIndustryChips :industries="page.industries" />
-
-    <UseCaseClosingCta
-        :heading="page.closingCta?.heading"
-        :description="page.closingCta?.description"
-    />
+    <template v-for="(section, i) in sections" :key="i">
+      <UseCaseHero v-if="section.type === 'hero'" :hero="section" :title="page.title" :problem="page.problem" />
+      <UseCaseSectionNav v-else-if="section.type === 'sectionNav'" :items="navItems" />
+      <UseCaseIndustryChips v-else-if="section.type === 'industries'" :industries="page.industries" />
+      <UseCaseDeploymentOptions v-else-if="section.type === 'deploymentOptions'" />
+      <FaqSection v-else-if="section.type === 'faq'" :items="section.items" :heading="section.heading" />
+      <StepList
+          v-else-if="section.type === 'steps'"
+          :eyebrow="section.eyebrow"
+          :heading="section.heading"
+          :intro="section.intro"
+          :link="section.link"
+          :steps="section.steps"
+      />
+      <!-- A card with no copy of its own gets the line layouts/use-case.njk defaulted to. -->
+      <ClosingCta
+          v-else-if="section.type === 'cta'"
+          :layout="section.layout"
+          :heading="section.heading || 'See it on your operations'"
+          :description="section.description || (section.layout === 'banner' ? undefined : 'Talk to an expert, or get started with FlowFuse today.')"
+          :ctas="section.ctas"
+      />
+      <component :is="COMPONENTS[section.type]" v-else v-bind="propsFor(section)" />
+    </template>
   </div>
 </template>
diff --git a/nuxt/pages/use-cases/data-integration.vue b/nuxt/pages/use-cases/data-integration.vue
deleted file mode 100644
index b8d62fcc17..0000000000
--- a/nuxt/pages/use-cases/data-integration.vue
+++ /dev/null
@@ -1,145 +0,0 @@
-<script setup lang="ts">
-// Ported from src/use-cases/data-integration.njk (11ty), which this replaces. Same page,
-// same copy, same classes from nuxt/assets/css/style.css.
-//
-// What the port changes on purpose:
-//  - layouts/solution.njk's hero becomes <UseCaseSolutionHero>, with the frontmatter
-//    `description` HTML fragment moving into the slot as ordinary template markup.
-//  - The {% ffIconLg %} shortcode becomes <NavIcon size="lg">, which already reproduces
-//    that wrapper for the nav; its registry gained the four icon keys this page needs.
-//  - ctaContactUs becomes <CtaContactUs>, keeping the registry's copy and event.
-const CHALLENGES = [
-    { icon: 'data', solid: true, text: 'Data comes from different sources, including internal IT systems (ERP, CRM, SCM), IoT devices, external data services (weather, foreign exchange, etc.)' },
-    { icon: 'codeblock', text: 'Data is accessible in a wide variety of formats, including CSV files, REST Api, XML, YAML, MQTT.' },
-    { icon: 'lock', text: 'Access to data is often gated by IT departments making it slow and timing consuming for departments to get access to new integrated data.' },
-    { icon: 'database', text: 'Data needs to be stored in different formats and databases.' },
-    { icon: 'chart', text: 'Data needs to be visualized and communicated back to a user.' },
-]
-
-const IMPROVEMENTS = [
-    {
-        image: '/images/pictograms/community_blue.png',
-        title: 'Collaborative Development',
-        // The .njk carried two <h4>s per card, one with a <br> shown only from sm up.
-        titleLines: ['Collaborative', 'Development'],
-        paragraphs: [
-            'FlowFuse makes it possible for teams to collaborate on the same flows and applications.',
-            'Team members can share instances to make for quicker and more efficient development, with full version control and audit trails built in.',
-        ],
-    },
-    {
-        image: '/images/pictograms/node_catalog_blue.png',
-        title: 'Managed Application Service',
-        paragraphs: ['We run your instances so you don’t have to worry about the production reliability of your industrial applications.'],
-    },
-    {
-        image: '/images/pictograms/bias_for_action_blue.png',
-        title: 'Software Delivery Pipelines',
-        titleLines: ['Software Delivery', 'Pipelines'],
-        paragraphs: ['FlowFuse allows you to create snapshots of your instances so you can create software delivery pipelines for development, test, and production. You can revert to a previous version of a snapshot to rollback any changes.'],
-    },
-]
-
-useSeoMeta({
-    title: 'FlowFuse for Data Integration',
-    description: 'Collect, transform, and route data from any industrial source to any destination, without writing integration code from scratch.',
-    ogImage: 'https://flowfuse.com/images/solutions/og-solutions-data-integration.jpg',
-    ogUrl: 'https://flowfuse.com/use-cases/data-integration/',
-    twitterSite: '@FlowFuseinc',
-})
-</script>
-
-<template>
-  <div class="w-full">
-    <UseCaseSolutionHero title="FlowFuse for Data Integration" hero-img="/images/pictograms/data_integration_blue.png">
-      <p class="mt-0">
-        Data integration can be a challenging task, especially when dealing with multiple data formats, protocols, and
-        sources. FlowFuse's low-code industrial application platform allows anyone to collect data from multiple
-        sources, apply the data, and update, store, and transmit data to a new service.
-      </p>
-    </UseCaseSolutionHero>
-
-    <div class="w-full px-0">
-      <div>
-        <div class="mt-6 text-center">
-          <CtaContactUs variant="highlight" position="hero" class="inline-block shadow" />
-        </div>
-      </div>
-
-      <div class="container m-auto text-center mb-10">
-        <div class="mt-20 content max-w-screen-lg m-auto">
-          <h2 class="mb-4 m-auto">Challenges of Data Integration</h2>
-          <div class="hidden sm:block w-full md:max-w-screen-lg m-auto">
-            <img src="/images/solutions/data-integration.png" alt="." width="1024" class="w-full h-auto">
-          </div>
-          <div class="grid mt-12 px-6 grid-cols-1 md:grid-cols-3 gap-8 sm:mt-0 sm:gap-16 sm:gap-y-4 mb-20 text-left">
-            <div v-for="challenge in CHALLENGES" :key="challenge.icon" class="text-indigo-700">
-              <NavIcon :name="challenge.icon" :solid="challenge.solid" size="lg" />
-              <p class="mt-2">{{ challenge.text }}</p>
-            </div>
-          </div>
-
-          <div class="m-auto text-center sm:text-left p-8 max-w-md sm:max-w-screen-lg bg-indigo-50 rounded-lg border-[3px] border-indigo-200 mt-6 drop-shadow-xl">
-            <h2 class="mb-10 m-auto font-bold">Why FlowFuse is the <span class="text-red-600">Data Integration Solution</span></h2>
-            <div class="grid grid-cols-1 gap-8">
-              <div class="text-left self-start">
-                <h4>Accessible for Anyone</h4>
-                <div>
-                  <p>
-                    FlowFuse’s low-code visual environment makes it easy for non-programmers to integrate data from
-                    different sources without needing to know how to code. This enables all kinds of departments to work
-                    on their own data integration projects without requiring support from IT.
-                  </p>
-                </div>
-              </div>
-              <div class="text-left self-start">
-                <h4>Real-Time Data Visualisation</h4>
-                <p>
-                  FlowFuse makes it easy to create real-time data visualizations and dashboards. Data can be
-                  filtered, transformed and analyzed through event-driven flows to get real-time insights into your business.
-                </p>
-              </div>
-              <div class="text-left self-start">
-                <h4>Support for Different Data Formats</h4>
-                <p>
-                  FlowFuse supports parsing a wide range of formats including: <strong>csv</strong>,
-                  <strong>html</strong>, <strong>json</strong>, <strong>xml</strong> and <strong>yaml</strong>. Additional
-                  additional data formats are available through FlowFuse’s support for over 5,000 open-source plug-ins.
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="w-full px-6 pb-28 pt-12 md:px-0">
-        <div class="page container pt-6 px-6 md:max-w-screen-lg m-auto sm:gap-y-4 text-center max-w-screen-lg">
-          <div class="hero">
-            <h2 class="mb-6 m-auto">FlowFuse Improves Data Integration</h2>
-          </div>
-          <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8 sm:gap-8 mt-20 mb-12 text-left">
-            <div v-for="item in IMPROVEMENTS" :key="item.title">
-              <div class="w-24 sm:w-24 mb-6 flex-shrink-0">
-                <img :src="item.image" alt="" width="128" class="w-full h-auto">
-              </div>
-              <template v-if="item.titleLines">
-                <h4 class="block sm:hidden">{{ item.title }}</h4>
-                <h4 class="hidden sm:block">{{ item.titleLines[0] }}<br>{{ item.titleLines[1] }}</h4>
-              </template>
-              <h4 v-else>{{ item.title }}</h4>
-              <div>
-                <p v-for="(paragraph, i) in item.paragraphs" :key="i">{{ paragraph }}</p>
-              </div>
-            </div>
-          </div>
-        </div>
-        <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">Discover how FlowFuse can power your Data Integration.</p>
-          <div>
-            <CtaContactUs variant="primary" position="footer" class="inline-block m-auto" />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/nuxt/pages/use-cases/index.vue b/nuxt/pages/use-cases/index.vue
index 9d398ec294..dbb40d64b1 100644
--- a/nuxt/pages/use-cases/index.vue
+++ b/nuxt/pages/use-cases/index.vue
@@ -9,7 +9,7 @@
 //  - The repeated card markup becomes <UseCaseCard>, shared with the cross-link band that
 //    components/use-case-links.njk used to render.
 //  - The CTA macros become <CtaContactUs> and <CtaSignUp>, and the closing band is the
-//    shared <UseCaseClosingCta> the use-case pages also end on.
+//    shared <ClosingCta> the use-case pages also end on.
 const { data: useCases } = await useAsyncData('use-cases-listing', () =>
     queryCollection('useCases').select('slug', 'title', 'problem', 'values').all()
 )
@@ -88,10 +88,10 @@ useSeoMeta({
       </div>
     </div>
 
-    <UseCaseClosingCta
+    <ClosingCta
         heading="See it on your workflow"
         description="Talk to an expert, or get started with FlowFuse today."
-        lead="contact-us"
+        :ctas="[{ cta: 'contact-us' }, { cta: 'sign-up' }]"
     />
   </div>
 </template>
diff --git a/nuxt/pages/use-cases/it-ot-middleware.vue b/nuxt/pages/use-cases/it-ot-middleware.vue
deleted file mode 100644
index 0d25138e77..0000000000
--- a/nuxt/pages/use-cases/it-ot-middleware.vue
+++ /dev/null
@@ -1,240 +0,0 @@
-<script setup lang="ts">
-// Ported from src/use-cases/it-ot-middleware.njk (11ty), which this replaces. Same page,
-// same copy, same classes from nuxt/assets/css/style.css.
-//
-// What the port changes on purpose:
-//  - layouts/solution.njk's hero becomes <UseCaseSolutionHero>, with the frontmatter
-//    `description` HTML fragment moving into the slot as ordinary template markup.
-//  - faq.njk becomes <BlogFaq> plus useSchemaOrg, so the FAQ answers are escaped rather
-//    than interpolated into a JSON string by hand.
-//  - smooth-scroll.njk's global function and inline onclick are dropped: the site-wide
-//    `scroll-behavior: smooth` in style.css already animates a plain in-page anchor.
-//  - The CTA macros become <CtaBookDemo> and <CtaSignUp>. The two hand-written
-//    ff-btn links that were not CTAs keep their own markup; the "INSTALL NOW" one keeps
-//    its inline capture('cta-install') event, routed through useCapture.
-//  - The three deployment-card headings carried a stray </br>, which is not a tag.
-//    They are plain headings here.
-//  - The reading-list and resources thumbnails point at /blog/**, /whitepaper/** and
-//    /resources/** - assets owned by those sections, in nuxt/public/ at the same paths.
-//    The page's own art is in nuxt/public/images/.
-const capture = useCapture()
-
-const FEATURES = [
-    { headingLead: 'Hardware & Sensor ', headingAccent: 'Integration', body: 'FlowFuse simplifies connecting diverse hardware and sensors in manufacturing, enhancing data collection and analytics for informed decision-making and efficiency improvements.' },
-    { headingAccent: 'Integrate', headingRest: ' OT and IT Data', body: 'Our platform unifies operational and information technology data, offering manufacturers a comprehensive view of production processes for improved efficiency.' },
-    { headingAccent: 'Intuitive', headingRest: ' OT Data visualization', body: 'FlowFuse offers a visual interface for real-time monitoring and analysis of operational data, aiding in quick, data-driven decisions to optimize manufacturing operations.' },
-    { headingAccent: 'Automate', headingRest: ' Event Triggers', body: 'With FlowFuse, automate event triggers to respond instantly to production line changes, reducing downtime and boosting efficiency.' },
-]
-
-// Alternating left/right rows in the .njk, in this order.
-const DEVOPS = [
-    { image: '/images/pictograms/edge_blue.png', title: 'Optimized Fleet Management & Monitoring', body: 'FlowFuse revolutionizes equipment and device monitoring in manufacturing. Our platform automates remote deployment and management, ensuring efficiency and flexibility in operations.' },
-    { image: '/images/pictograms/community_blue.png', title: 'Collaborative Development Environment', body: 'Enhancing teamwork in development, FlowFuse allows multiple team members to co-create and streamline application development, increasing efficiency and cohesion.' },
-    { image: '/images/pictograms/bias_for_action_blue.png', title: 'Efficient Application Deployment', body: 'FlowFuse introduces structured DevOps pipelines, supporting various stages from development to production, to guarantee reliable, secure, and high-quality application delivery.' },
-    { image: '/images/pictograms/ticket_blue.png', title: 'Dedicated Professional Support', body: 'FlowFuse provides expert support for your deployments, ensuring systems are consistently up-to-date and operationally continuous, backed by our professional guidance.' },
-]
-
-const FAQ = [
-    { question: 'Can FlowFuse connect our PLCs to our ERP system?', answer: 'Yes, FlowFuse can be extended with over 5,000 open-source plug-ins to support virtually all industrial protocols. Connect your Siemens, Allen-Bradley, Omron, or other PLCs directly to SAP, Oracle, or any ERP system.' },
-    { question: 'We have mixed equipment brands on our shop floor. Can FlowFuse handle this?', answer: 'Absolutely. FlowFuse acts as a universal translator between different equipment brands and protocols, allowing seamless data exchange between Siemens, Rockwell, Schneider, and other vendors.' },
-    { question: 'How do we ensure production data security when connecting shop floor to business systems?', answer: 'FlowFuse provides secure tunneling for device connections, encrypted data transmission using TLS/SSL, role-based access control (RBAC), and comprehensive audit logging to meet manufacturing compliance requirements.' },
-    { question: 'Can our plant operators create data flows without IT support?', answer: 'Yes, FlowFuse uses a visual drag-and-drop interface. Operators can build integrations between machines, SCADA, and business systems by connecting pre-built nodes - no coding required.' },
-    { question: "What if our legacy equipment doesn't support modern protocols?", answer: 'FlowFuse can connect through serial converters, protocol gateways, or even manual data entry interfaces, ensuring no equipment is left behind in your digital transformation.' },
-    { question: 'Do we need to shut down production to implement FlowFuse?', answer: 'No, FlowFuse can be deployed alongside existing systems with read-only connections initially. Full integration can be phased in during scheduled maintenance windows.' },
-]
-
-const CASE_STUDIES = [
-    { title: 'Revolutionizing Precision Manufacturing with Node-RED', image: '/images/stories/abrasive_tech.jpg', alt: 'Photo of helicopters and a precision manufacturing machine', link: '/customer-stories/leveraging-node-red-and-flowfuse-to-automate-precision-manufacturing/' },
-    { titleLead: 'The Future of Textile Manufacturing Powered with ', titleTail: 'Node-RED', image: '/images/stories/stfi-future-textile.jpg', alt: 'Photo of the STFI floor plant', link: '/customer-stories/stfi-future-of-textile-powered-by-node-red/' },
-    { title: 'Node-RED Enables Digital Transformation of a Large US Manufacturing Company', image: '/images/stories/large-us-manufacturing.jpg', alt: 'Photo of a manufacturing company with a worker holding a laptop', link: '/customer-stories/manufacturing-digital-transformation/' },
-]
-
-const WHITEPAPERS = [
-    { title: 'Accelerating Innovation in Manufacturing with FlowFuse', image: '/whitepaper/images/whitepaper-manufacturing.png', alt: 'Photo of a manufacturing company with a worker holding a laptop', link: '/whitepaper/accelerating-innovation-in-manufacturing-with-flowfuse/' },
-    { title: 'Open Source Software for Manufacturing', image: '/whitepaper/images/whitepaper-oss-manufacturing.jpg', alt: 'Photo of a manufacturing company shop floor', link: '/whitepaper/open-source-software-for-manufacturing/' },
-]
-
-useSeoMeta({
-    title: 'FlowFuse for IT/OT Integration',
-    description: 'Bridge OT protocols and IT systems with low-code flows. Connect PLCs, SCADA, and historians to ERP, databases, and cloud services.',
-    keywords: 'FlowFuse, Manufacturing, Automation, DevOps, Integration, OT, IT, Data, Visualization, Event Triggers, Fleet Management, Monitoring, Collaborative Development, Environment, Application Deployment, Professional Support',
-    ogImage: 'https://flowfuse.com/images/solutions/og-solutions-manufacturing.jpg',
-    ogUrl: 'https://flowfuse.com/use-cases/it-ot-middleware/',
-    twitterSite: '@FlowFuseinc',
-})
-
-useSchemaOrg([
-    defineWebPage({ '@type': 'FAQPage' }),
-    ...FAQ.map(item => defineQuestion({ question: item.question, answer: item.answer })),
-])
-</script>
-
-<template>
-  <div class="w-full">
-    <UseCaseSolutionHero
-        title="FlowFuse for IT/OT Integration"
-        subtitle="FlowFuse allows teams to automate their manufacturing process through customized, reliable applications."
-        hero-img="/images/pictograms/factory_blue.png"
-    >
-      <p>
-        FlowFuse streamlines manufacturing automation, from production monitoring to supply chain management. Our
-        intuitive, customizable platform enables simple creation of custom solutions for unique manufacturing needs.
-      </p>
-    </UseCaseSolutionHero>
-
-    <div class="w-full px-0">
-      <div class="w-full flex justify-center mt-6">
-        <div class="mx-auto text-center flex flex-row gap-8">
-          <CtaBookDemo variant="highlight" position="hero" class="inline-block shadow" />
-          <a href="#whitepapers" class="inline-block ff-btn ff-btn--primary-outlined shadow uppercase">Read Whitepaper</a>
-        </div>
-      </div>
-
-      <div class="container m-auto text-center">
-        <div class="mt-20 content max-w-screen-lg m-auto">
-          <div class="grid px-6 grid-cols-1 md:grid-cols-2 gap-8 sm:gap-16 mb-16">
-            <div v-for="feature in FEATURES" :key="feature.headingAccent" class="text-left self-start">
-              <h3>
-                <template v-if="feature.headingLead">{{ feature.headingLead }}</template><span class="text-indigo-600">{{ feature.headingAccent }}</span><template v-if="feature.headingRest">{{ feature.headingRest }}</template>
-              </h3>
-              <div><p>{{ feature.body }}</p></div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="w-full md:max-w-screen-lg m-auto pb-32">
-        <img
-            src="/images/solutions/markitechture-manufacturing.png"
-            alt="High level architecture diagram showing how Node-RED can assist with data flow across a factory and manufacturing use-case"
-            width="1024"
-            class="w-full h-auto"
-        >
-      </div>
-
-      <div class="w-full bg-gray-50 py-6">
-        <div class="page container pt-12 pd-6 sm:pb-12 px-3 md:px-12 md:max-w-screen-lg m-auto text-center max-w-screen-lg px-6 md:px-0">
-          <div class="hero">
-            <h2 class="mb-6 m-auto">Enhancing Manufacturing with FlowFuse's DevOps Integration</h2>
-            <p class="mt-0">
-              FlowFuse elevates manufacturing by ensuring reliable and continuous delivery of applications. Our platform
-              incorporates widely recognized DevOps concepts, fostering a collaborative and secure development
-              environment.
-            </p>
-          </div>
-        </div>
-        <div class="page content max-w-screen-lg m-auto px-6 md:px-0">
-          <div
-              v-for="(row, i) in DEVOPS"
-              :key="row.title"
-              class="self-start flex gap-8 items-center mb-12"
-              :class="i % 2 === 0 ? 'text-left' : 'text-left sm:text-right flex-row-reverse'"
-          >
-            <div
-                class="flex flex-col gap-8 max-w-screen-lg"
-                :class="i % 2 === 0 ? 'sm:flex-row sm:pr-24 md:pr-48' : 'sm:flex-row-reverse sm:pl-24 md:pl-48'"
-            >
-              <div class="w-32 sm:w-48 flex-shrink-0">
-                <img :src="row.image" alt="" width="128" class="w-full h-auto">
-              </div>
-              <div>
-                <h4>{{ row.title }}</h4>
-                <div><p>{{ row.body }}</p></div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="w-full">
-        <div class="container m-auto text-center">
-          <div class="content max-w-screen-lg m-auto px-6 md:px-0">
-            <div class="pt-24 md:pt-16 text-left">
-              <h2 class="max-md:text-center -mb-12">
-                Frequently Asked <span class="text-indigo-600">Questions</span>
-              </h2>
-              <BlogFaq :faq="FAQ" variant="page" />
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="w-full">
-        <div class="px-6 pt-3 md:pt-10 pb-20 md:pb-12 text-lg flex-col flex-row items-center justify-center gap-1 hover:no-underline flex-wrap">
-          <div class="text-center mt-6 md:mt-4 mb-6">
-            <h2>Resources</h2>
-          </div>
-          <div class="container m-auto max-w-5xl">
-            <div class="ff-nodered-resources grid grid-cols-1 md:grid-rows-[auto_1fr_1fr_1fr] md:grid-cols-2 md:grid-flow-col md:gap-x-4 pt-4 md:pt-6 items-start px-6">
-              <h4 class="text-center">Case Studies</h4>
-              <NuxtLink v-for="study in CASE_STUDIES" :key="study.link" class="h-full" :to="study.link">
-                <li class="h-full">
-                  <div class="w-2/5 max-md:aspect-video ff-image-cover ff-image-left-rounded h-full">
-                    <img :src="study.image" :alt="study.alt" width="208" loading="lazy" class="w-full h-auto">
-                  </div>
-                  <label class="w-3/5">
-                    <template v-if="study.titleLead">{{ study.titleLead }}<span class="inline-block">{{ study.titleTail }}</span></template>
-                    <template v-else>{{ study.title }}</template>
-                  </label>
-                </li>
-              </NuxtLink>
-              <h4 id="whitepapers" class="text-center max-md:pt-12">Whitepapers</h4>
-              <NuxtLink v-for="paper in WHITEPAPERS" :key="paper.link" :to="paper.link">
-                <li>
-                  <div class="w-2/5 max-md:aspect-video ff-image-cover ff-image-left-rounded h-full">
-                    <img :src="paper.image" :alt="paper.alt" width="208" loading="lazy" class="w-full h-auto">
-                  </div>
-                  <label class="w-3/5">{{ paper.title }}</label>
-                </li>
-              </NuxtLink>
-            </div>
-          </div>
-
-          <div class="text-center mt-20 mb-14">
-            <h2>Flexible Deployment Options with <span class="text-indigo-600">FlowFuse</span></h2>
-          </div>
-          <div class="container m-auto max-w-screen-lg">
-            <div class="grid md:px-6 md:px-0 grid-cols-1 md:grid-cols-3 gap-12 md:gap-5 max-w-md md:max-w-none mx-auto">
-              <div class="deployment-card white-bg">
-                <div>
-                  <div class="title pb-4"><h4 class="text-indigo-600">FlowFuse Cloud</h4></div>
-                  <p class="mb-0 text-left">
-                    The easiest way to start building industrial applications. No installation required! Simply sign up
-                    and gain immediate access to the editor.
-                  </p>
-                </div>
-                <CtaSignUp variant="primary-outlined" position="manufacturing" class="md:self-end align-baseline w-full mt-3" />
-              </div>
-              <div class="deployment-card white-bg">
-                <div>
-                  <div class="title">
-                    <h4 class="text-indigo-600">Self managed</h4>
-                    <div class="text-base font-bold text-gray-600 pb-4">(on premise)</div>
-                  </div>
-                  <p class="mb-0 text-left">
-                    Run FlowFuse where you prefer; that's possible too! In your cloud of preference, or even on-site.
-                  </p>
-                </div>
-                <NuxtLink
-                    class="md:self-end ff-btn ff-btn--primary-outlined uppercase align-baseline w-full mt-3"
-                    to="/docs/install/introduction/"
-                    @click="capture('cta-install', { position: 'manufacturing' })"
-                >INSTALL NOW</NuxtLink>
-              </div>
-              <div class="deployment-card white-bg">
-                <div>
-                  <div class="title pb-4"><h4 class="text-indigo-600">Edge device</h4></div>
-                  <p class="mb-0 text-left">
-                    Run FlowFuse where the data is generated. Manage thousands of edge devices through the FlowFuse
-                    Device Agent.
-                  </p>
-                </div>
-                <NuxtLink class="md:self-end ff-btn ff-btn--primary-outlined uppercase align-baseline w-full mt-3" to="/platform/device-agent/">MORE INFO</NuxtLink>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/nuxt/pages/use-cases/mes.vue b/nuxt/pages/use-cases/mes.vue
deleted file mode 100644
index d3a561b4cb..0000000000
--- a/nuxt/pages/use-cases/mes.vue
+++ /dev/null
@@ -1,149 +0,0 @@
-<script setup lang="ts">
-// Ported from src/use-cases/mes.njk (11ty), which this replaces. Same page, same copy,
-// same classes from nuxt/assets/css/style.css.
-//
-// What the port changes on purpose:
-//  - The page's frontmatter carried markup (heading spans, inline links) that the .njk
-//    printed with `| safe`. That markup is written directly in this template instead, so
-//    nothing interpolates an HTML string at render time.
-//  - The three CTA macros become <CtaContactUs>, <CtaSignUp> and <CtaBookDemo>.
-//  - The .njk closed the banner heading with a stray </span> that had no opening tag;
-//    browsers dropped it, and it is simply gone here.
-//  - Production renders TWO <h1> on this page: layouts/page.njk emits one from `title`
-//    when `nohero` is set, and the template then writes its own. Only the page's own,
-//    more specific heading survives here.
-const META_DESCRIPTION = 'FlowFuse provides everything you need to build the robust Manufacturing Execution System (MES) you want, providing everything from production tracking to data analysis, with the components you need and the flexibility to customize as you see fit.'
-
-const REASONS = [
-    { title: 'Built-in adaptation layer', description: "Leverage FlowFuse's low-code platform to design exactly the MES your organization needs." },
-    { title: 'End-to-end insight and control', description: 'Everything you need to connect, manage, visualize and analyze your data in one place.' },
-    { title: 'Limitless connections', description: 'Robust and growing open-source library provides connections for all protocols, all machines, and all devices.' },
-    { title: 'Rapid implementation', description: 'Get up and running quickly on FlowFuse Cloud.' },
-    { title: 'Open-source', description: 'Avoid vendor lock-in.' },
-    { title: 'Low-Code', description: 'Empowering your teams to build custom solutions with ease.' },
-]
-
-useSeoMeta({
-    title: 'FlowFuse for your own MES',
-    description: META_DESCRIPTION,
-    ogDescription: META_DESCRIPTION,
-    keywords: 'FlowFuse, manufacturing, MES, Industry 4.0, Siemens S7, PLC, Sentron',
-    ogUrl: 'https://flowfuse.com/use-cases/mes/',
-    twitterSite: '@FlowFuseinc',
-})
-</script>
-
-<template>
-  <div class="w-full page hero">
-    <div class="content">
-      <div class="nohero w-full px-6">
-        <div class="w-full pt-12 pb-20 md:pt-6 md:pb-8">
-          <div class="md:flex md:my-16 items-center md:flex-row md:justify-between container mx-auto text-center md:text-left md:max-w-screen-lg gap-8">
-            <div class="my-auto max-md:mx-auto md:w-1/2 lg:w-5/12 max-w-lg">
-              <h1 class="w-full mt-0 md:px-0 m-auto font-medium">
-                FlowFuse for <span class="text-indigo-600 inline-block">your own MES</span>
-              </h1>
-              <p class="mb-10 flex-grow">{{ META_DESCRIPTION }}</p>
-              <div class="flex md:hidden justify-center m-auto max-w-[400px] mb-10">
-                <img src="/images/solutions/mes-hero.png" alt="MES with FlowFuse" width="400" class="w-full h-auto">
-              </div>
-              <div class="flex gap-3 max-md:max-w-sm max-md:mx-auto max-sm:flex-col max-md:justify-center">
-                <CtaContactUs variant="primary" position="primary" class="min-h-[40px]" />
-                <CtaSignUp variant="primary-outlined" position="primary" class="min-h-[40px]" />
-              </div>
-            </div>
-            <div class="flex max-md:hidden justify-center m-auto max-w-[550px]">
-              <img src="/images/solutions/mes-hero.png" alt="MES with FlowFuse" width="550" class="w-full h-auto">
-            </div>
-          </div>
-        </div>
-
-        <div class="w-full">
-          <div class="max-w-screen-lg mx-auto">
-            <div class="flex md:flex-row flex-col w-full bg-white border-2 border-indigo-200 px-6 py-2 drop-shadow-lg md:gap-6 rounded-lg">
-              <h2 class="w-full max-sm:mx-auto my-6 text-indigo-400">MES for Modern Industry</h2>
-              <p class="md:max-w-[680px] max-sm:mx-auto">
-                MES systems evolved to manage and monitor manufacturing operations on the shop floor, serving to bridge
-                the gap between enterprise resource planning (ERP) systems and production process management like a
-                SCADA system. Complete, monolithic MES systems are no longer needed. FlowFuse provides the resources
-                that allow you to build and augment the components for the MES system you need, securely and at scale.
-              </p>
-            </div>
-
-            <h2 class="mt-16">How it Works</h2>
-            <p class="w-full max-sm:mx-auto mt-6">
-              Monolithic MES systems - think Siemens OpCenter Execution or Rockwell Automation’s Plex - offer MES
-              products that are comprehensive and sophisticated, but also expensive and complex. In contrast, FlowFuse
-              gives you a flexible, low-code industrial application platform with popular industry protocols,
-              <NuxtLink to="/integrations/">integrations</NuxtLink>, and our resource library to design and deploy
-              applications for the MES solution you want for your business - and nothing more.
-            </p>
-            <p class="w-full max-sm:mx-auto mt-6">
-              Here is an example. An MES system is essentially a collection of management functions, like production
-              tracking, resource management, data collection and analysis, and scheduling and dispatching. With
-              FlowFuse, you can build the MES features you want by creating applications for the functions that you
-              need, and none that you don’t.
-            </p>
-            <p class="w-full max-sm:mx-auto mt-4">
-              Collect data from the shop floor or the lab by using
-              <NuxtLink to="/integrations/">FlowFuse Certified Nodes</NuxtLink> to connect with local machines using any
-              protocol: MQTT, OPC-UA, Modbus, Sparkplug B, and any other protocol that exists now or in the future.
-            </p>
-            <div class="mx-auto max-w-[550px] my-12">
-              <img src="/images/home/connect_graphic.png" alt="Icons of communication protocols" width="550" class="w-full h-auto">
-            </div>
-            <div class="max-md:order-first">
-              <p class="w-full max-sm:mx-auto mt-4">
-                Create applications in FlowFuse to transform your data for analysis and create visualizations that
-                enable your team to make data-driven decisions about your business. Our ever-expanding
-                <NuxtLink to="/blueprints/">Blueprints library</NuxtLink> helps you get started quickly.
-              </p>
-              <p class="w-full max-sm:mx-auto mt-4">
-                Because FlowFuse provides central management of all of your instances, you can easily monitor your
-                applications whether you're running a dozen in a factory or thousands at sites across the globe.
-              </p>
-            </div>
-            <div class="mx-auto ff-image-rounded p-1 max-md:max-w-[500px] max-md:my-12 md:mt-4 max-md:order-last">
-              <img src="/images/solutions/oee-dashboard--1.png" alt="OEE dashboard" width="1024" class="w-full h-auto">
-            </div>
-
-            <h2 class="mt-16">MES for Your Industry</h2>
-            <p class="w-full max-sm:mx-auto mt-6">
-              The MES needs for an automotive plant, a pharmaceutical manufacturer, and an airline are all very distinct
-              - and yet all can (and do) rely on FlowFuse. With the flexibility, security, and scalability of the
-              FlowFuse platform, every kind of industrial operation can operate the MES they need.
-            </p>
-            <p class="w-full max-sm:mx-auto mt-6">
-              And with the FlowFuse open source advantage, you can extend the platform with any custom integrations or
-              nodes you need at any time, and securely manage the instances that you create along the way.
-            </p>
-          </div>
-        </div>
-      </div>
-
-      <div class="w-full bg-indigo-50/50 py-12 mt-20 px-6">
-        <div class="max-w-screen-lg mx-auto">
-          <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>
-          <div class="w-full grid sm:grid-cols-2 md:grid-cols-3 gap-6 md:gap-8">
-            <div v-for="reason in REASONS" :key="reason.title" class="w-full mt-4 md:mt-0 flex flex-col">
-              <h4 class="flex justify-center sm:justify-start font-semibold text-gray-500">{{ reason.title }}</h4>
-              <p class="text-center sm:text-left font-light mt-6 max-sm:max-w-md max-sm:mx-auto">{{ reason.description }}</p>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="max-md:max-w-xl md:max-w-screen-lg mx-auto max-sm:text-center pt-16 pb-10 px-6 text-lg flex-col flex-row items-center justify-center gap-1 hover:no-underline flex-wrap mb-12">
-        <div class="ff-blue-card max-sm:max-w-none">
-          <h4 class="mb-6 w-full text-center">Ready to build the MES your business needs?</h4>
-          <div class="flex max-sm:flex-col max-md:mx-auto gap-3 justify-center">
-            <CtaBookDemo variant="primary" position="secondary" class="min-h-[40px]" />
-            <CtaSignUp variant="primary-outlined" position="secondary" class="min-h-[40px]" />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/nuxt/pages/use-cases/remote-device-management.vue b/nuxt/pages/use-cases/remote-device-management.vue
deleted file mode 100644
index 7428f3e53c..0000000000
--- a/nuxt/pages/use-cases/remote-device-management.vue
+++ /dev/null
@@ -1,322 +0,0 @@
-<script setup lang="ts">
-// Replaces the old /use-cases/edge-connectivity/ page (now a 301 to here, see
-// redirects.ts). A one-off layout built from the Figma file (FF Website V3, node
-// 7421:6134): each band reuses markup already on the site rather than a shared template,
-// noted per section below. If a second use-case page adopts this structure, lift it into
-// components/use-case-page/ + a .yml the way industry-page/ was.
-//
-// Copy strings support the same `[label](url)` / **bold** subset as BlogFaq's answers,
-// rendered through inline() from lib/faq-answer.mjs (escaped first, so no raw HTML).
-import { inline } from '../../lib/faq-answer.mjs'
-
-// `before` is optional: only the two results that are a change (1 → 130+, 15 → 1) have
-// one. `company` is pulled out of `text` because the whole card is the link, so the name
-// is styled like a link rather than being a second <a> nested inside the first.
-const RESULTS = [
-    {
-        before: '1',
-        after: '130+',
-        unit: 'instances',
-        company: 'Walter Tools',
-        text: 'scaled from a single Node-RED instance to over 130 across four continents and unified five separate machine-connectivity systems — with the same seven-person IT team.',
-        linkText: 'Read the case study with Walter Tools',
-        linkName: 'Walter Tools',
-        linkHref: '/customer-stories/scaling-industrial-iot-operations-while-maintaining-competitive-edge/',
-    },
-    {
-        before: '15',
-        after: '1',
-        unit: 'deployment',
-        company: 'Aperia Technologies',
-        text: 'replaced a USB-stick walk across five lines with one device-group deployment, and freed 8–12 hours a day of idle end-of-line test equipment.',
-        linkText: 'Read the case study with Aperia Technologies',
-        linkName: 'Aperia Technologies',
-        linkHref: '/customer-stories/aperia-technologies-plc-replacement/',
-    },
-    {
-        after: '½',
-        unit: 'shift returned',
-        company: 'Paloma Irrigation and Drainage District\'s',
-        text: 'team spent half of every shift driving between remote pumping stations. Remote access and automated alerts ended the routine visits across 30,000 acres.',
-        linkText: 'Read the case study with Paloma Irrigation',
-        linkName: 'Paloma Irrigation',
-        linkHref: '/customer-stories/leveraging-node-red-and-flowfuse-to-revolutionize-irrigation/',
-    },
-    {
-        after: '7,000 km',
-        unit: 'of grid',
-        company: 'Energinet',
-        text: 'monitors substation health at hundreds of critical nodes across Denmark\'s transmission grid — 24/7, with a small operations team.',
-        linkText: 'Read the Energinet case study',
-        linkName: 'Energinet',
-        linkHref: '/customer-stories/energinet-streamlining-critical-infrastructure-data-management/',
-    },
-]
-
-const VISIBILITY = [
-    {
-        icon: 'i-heroicons-cpu-chip',
-        title: 'Every device, one view',
-        text: 'Instance state and last seen. CPU and memory over time. Agent and Node-RED versions. [Device groups](/docs/user/device-groups/) by site or line.',
-    },
-    {
-        icon: 'i-lucide-history',
-        title: 'What changed, and who changed it',
-        text: '[Audit log](/docs/user/logs/#audit-log) across the team. [Snapshot comparison](/docs/user/snapshots/#comparing-snapshots). [Version history](/docs/user/snapshots/#timeline-view). Attribution on every deployment.',
-    },
-    {
-        icon: 'i-heroicons-lifebuoy',
-        title: 'When something goes wrong',
-        text: '[Node-RED logs](/docs/user/logs/#node-red-logs) without SSH. Health checks and auto-restart. Diagnostic emails with the logs attached. Structured JSON logs for Loki or Elastic.',
-    },
-    {
-        icon: 'i-heroicons-signal',
-        title: 'Reach a machine you can\'t touch',
-        text: 'Open the editor from your browser. Developer Mode tunnel for live debugging. Restart a device remotely. Outbound-only — no inbound ports.',
-    },
-]
-
-const STEPS = [
-    {
-        icon: 'i-heroicons-wrench-screwdriver',
-        title: 'Fix One',
-        text: 'Open the Node-RED editor on the machine itself, from your browser, and change the flow on live hardware.',
-    },
-    {
-        icon: 'i-heroicons-camera',
-        title: 'Snapshot It',
-        text: 'Capture the working state as a versioned snapshot you can compare, promote and roll back.',
-    },
-    {
-        icon: 'i-heroicons-rocket-launch',
-        title: 'Roll It Out',
-        text: 'Push that snapshot to the device group through a [pipeline](/docs/user/devops-pipelines/) — every filler on every line, or every site in the region.',
-    },
-]
-
-const INTELLIGENCE = [
-    {
-        icon: 'i-heroicons-cpu-chip',
-        title: 'Run the model where the data is',
-        text: 'Drop a trained [ONNX model](/blog/2025/10/custom-onnx-model/) into a flow and run inference on the device. No round trip, no inference bill, no data leaving the plant.',
-    },
-    {
-        icon: 'i-heroicons-chat-bubble-left-right',
-        title: 'Ask the factory a question',
-        text: '[FlowFuse Expert](/docs/user/expert/) Insights Mode connects to the MCP servers in your instances, so you can query live state in plain language instead of building a report for it.',
-    },
-    {
-        icon: 'i-heroicons-bolt',
-        title: 'Allow an agent to act',
-        text: 'Expose your flows to our [MCP integration](/changelog/2025/10/mcp-nodes/) so Copilot, Claude or your own AI agent can read live operational state and act on it, inside the role-based access control you already run. Read-only stays read-only. Every action is logged.',
-    },
-]
-
-const FAQ = [
-    {
-        question: 'What is remote device management?',
-        answer: 'Remote device management lets teams monitor, troubleshoot, update, and deploy application flows to devices without being physically present at the device.',
-    },
-    {
-        question: 'What is a remote device management platform?',
-        answer: 'Remote device management platform provides centralized tools for monitoring and managing devices across multiple machines, sites, or facilities.',
-    },
-    {
-        question: 'Can FlowFuse manage Node-RED on remote devices?',
-        answer: 'Yes. FlowFuse lets teams remotely monitor, edit, deploy, restart, and manage Node-RED instances running across their device fleet.',
-    },
-    {
-        question: 'Can FlowFuse deploy changes to multiple remote devices?',
-        answer: 'Yes. FlowFuse supports [device groups](/docs/user/device-groups/) and centralized deployments, allowing teams to roll out a tested flow or [snapshot](/docs/user/snapshots/) to multiple devices at once.',
-    },
-]
-
-// The hover overlay highlights `linkName` inside the card's link text, the way the ROI
-// evidence cards highlight their source ("Read more at <source>").
-function splitLinkText (result: { linkText: string, linkName: string }) {
-    const at = result.linkText.indexOf(result.linkName)
-    return {
-        before: result.linkText.slice(0, at),
-        name: result.linkName,
-        after: result.linkText.slice(at + result.linkName.length),
-    }
-}
-
-useSeoMeta({
-    title: 'Remote Device Management for Industrial Equipment',
-    description: 'Remote device management for every machine in the field. See, edit, and deploy Node-RED across your fleet.',
-    ogImage: 'https://flowfuse.com/images/solutions/og-solutions-device-management.jpg',
-    ogUrl: 'https://flowfuse.com/use-cases/remote-device-management/',
-    twitterSite: '@FlowFuseinc',
-})
-
-useSchemaOrg([
-    defineWebPage({ '@type': 'FAQPage' }),
-    ...FAQ.map(item => defineQuestion(item)),
-])
-</script>
-
-<template>
-  <div class="w-full">
-    <!-- Hero + quote, under one soft indigo glow from the top-right corner -->
-    <div class="w-full px-6 bg-[radial-gradient(ellipse_65%_80%_at_100%_0%,theme(colors.indigo.100)_0%,theme(colors.indigo.50/0)_100%)]">
-      <!-- Hero: two-column layout from product/[tier].vue -->
-      <section class="max-w-screen-lg mx-auto pt-16 md:pt-32 grid md:grid-cols-2 gap-12 items-center">
-        <div class="text-center md:text-left">
-          <h1 class="text-4xl md:text-[42px] md:leading-10 font-medium m-0">Remote device management <span class="text-red-600">for every machine in the field</span></h1>
-          <p class="mt-10 text-gray-700 leading-relaxed max-w-md mx-auto md:mx-0">
-            FlowFuse runs Node-RED next to your <NuxtLink to="/landing/plc/">PLCs</NuxtLink> and governs it from one place with remote device management, editing, <NuxtLink to="/docs/user/snapshots/">snapshots</NuxtLink>, and fleet-wide controls.
-          </p>
-          <div class="mt-12 flex flex-row flex-wrap gap-4 items-center justify-center md:justify-start">
-            <CtaBookDemo variant="highlight" position="hero" />
-            <CtaSignUp variant="ghost" position="hero" icon="i-lucide-arrow-right" />
-          </div>
-        </div>
-        <div class="rounded-xl border-2 border-red-100 overflow-hidden shadow-[20px_20px_40px_0_rgba(0,0,0,0.25)] aspect-[3/2]">
-          <img src="/images/use-cases/edge-connectivity.jpg" alt="Machines on a factory shop floor" width="1082" height="722" class="w-full h-full object-cover" loading="eager">
-        </div>
-      </section>
-
-      <!-- Quote: /product/edge/'s QuoteBlock -->
-      <div class="max-w-screen-lg mx-auto pt-16">
-        <QuoteBlock
-            quote="It's not just about connecting machines; it's about creating the foundation that makes everything else possible."
-            author="Felix Reck"
-            role="IT Application Manager, Walter"
-            avatar="/images/customer-headshots/felix-reck-walter-tools.png"
-        />
-      </div>
-    </div>
-
-    <!-- Results: background and hover cards from /resources/roi-calculator/'s "The research
-         behind the ROI analysis" -->
-    <section class="w-full px-6 pt-20 pb-20 relative overflow-hidden">
-      <div class="absolute -inset-y-1 inset-x-0 solution-section-bg" aria-hidden="true" />
-      <div class="max-w-screen-lg mx-auto relative">
-        <p class="text-gray-500 text-sm font-semibold uppercase m-0 max-md:text-center">Results</p>
-        <h2 class="mt-3 mb-0 max-md:text-center"><span class="text-red-500">Customer results</span> with remote device management</h2>
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-12">
-          <NuxtLink
-              v-for="result in RESULTS"
-              :key="result.company"
-              :to="result.linkHref"
-              class="group relative z-[1] overflow-hidden md:overflow-visible bg-white rounded-lg border border-gray-200 px-7 pt-6 pb-7 flex flex-col gap-9 transition-all duration-200 ease-out hover:no-underline md:hover:z-[2] md:motion-safe:hover:scale-[1.04] md:after:absolute md:after:inset-0 md:after:rounded-lg md:after:pointer-events-none md:after:opacity-0 md:after:shadow-lift md:after:transition-opacity md:after:duration-200 md:after:ease-linear md:hover:after:opacity-100"
-          >
-            <UIcon name="i-heroicons-arrow-up-right" class="absolute top-6 right-7 z-10 w-4 h-4 text-gray-400 group-hover:text-indigo-600" />
-            <div class="flex flex-col gap-1 pr-8">
-              <div class="flex items-center gap-3.5 text-5xl font-semibold text-red-400">
-                <template v-if="result.before">
-                  <span>{{ result.before }}</span>
-                  <UIcon name="i-heroicons-chevron-right" class="w-8 h-8 shrink-0" />
-                </template>
-                <span>{{ result.after }}</span>
-              </div>
-              <span class="text-xl font-semibold text-red-500 opacity-90">{{ result.unit }}</span>
-            </div>
-            <p class="text-sm leading-5 text-gray-700 opacity-90 m-0">
-              <span class="font-semibold text-blue-700">{{ result.company }}</span> {{ result.text }}
-            </p>
-            <div class="hidden md:flex absolute inset-0 rounded-lg items-center justify-center text-center px-6 bg-white/80 backdrop-blur-sm opacity-0 group-hover:opacity-100 transition duration-300 ease-in-out">
-              <span class="text-sm font-medium text-gray-900">{{ splitLinkText(result).before }}<span class="text-indigo-600">{{ result.linkName }}</span>{{ splitLinkText(result).after }}</span>
-            </div>
-            <span class="absolute -inset-px z-20 rounded-lg border border-transparent group-hover:border-indigo-600 pointer-events-none transition-colors duration-200" aria-hidden="true" />
-          </NuxtLink>
-        </div>
-      </div>
-    </section>
-
-    <!-- Visibility -->
-    <section class="w-full px-6 pt-20 pb-24 bg-gray-50">
-      <div class="max-w-screen-lg mx-auto">
-        <p class="text-gray-500 text-sm font-semibold uppercase m-0 max-md:text-center">Visibility</p>
-        <h2 class="mt-3 mb-0 max-md:text-center">See and manage <span class="text-indigo-600">every remote device from one place</span></h2>
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-x-16 gap-y-14 mt-16">
-          <div v-for="item in VISIBILITY" :key="item.title" class="max-md:text-center">
-            <UIcon :name="item.icon" class="w-8 h-8 text-indigo-600" />
-            <p class="text-xl font-semibold text-gray-600 mt-3 mb-0">{{ item.title }}</p>
-            <!-- eslint-disable-next-line vue/no-v-html -->
-            <p class="font-light text-gray-700 leading-relaxed mt-6 mb-0" v-html="inline(item.text)" />
-          </div>
-        </div>
-        <ProseNote class="mt-16">
-          The <a href="/platform/device-agent/">FlowFuse Device Agent</a> runs your flows on remote devices and keeps them connected to FlowFuse for centralized monitoring and management.
-        </ProseNote>
-      </div>
-    </section>
-
-    <!-- Connectivity: the sticky-heading step list from integrations/opcua.vue ("From OPC
-         UA to insight, step by step") -->
-    <section class="w-full px-6 pt-20 pb-24">
-      <div class="max-w-screen-lg mx-auto md:flex md:gap-12 md:items-start">
-        <div class="mb-12 md:mb-0 md:w-[373px] md:shrink-0 md:sticky! md:top-24 md:self-start max-md:text-center">
-          <p class="text-gray-500 text-sm font-semibold uppercase m-0">Connectivity</p>
-          <h2 class="mt-3 mb-0">Fix one machine. <span class="text-indigo-600">Deploy to all of them.</span></h2>
-          <p class="font-light text-gray-700 leading-relaxed mt-6 mb-0">This is where a monitoring tool stops and remote device management keeps going.</p>
-          <NuxtLink to="/docs/device-agent/install/overview/" class="mt-3 inline-flex items-center gap-1.5">
-            Learn how to install the FlowFuse Device Agent
-            <UIcon name="i-heroicons-arrow-long-right-20-solid" class="w-5 h-5 shrink-0" />
-          </NuxtLink>
-        </div>
-        <div class="max-w-screen-md mx-auto md:mx-0">
-          <div v-for="(step, index) in STEPS" :key="step.title" class="flex flex-col sm:flex-row gap-3 sm:gap-6">
-            <div class="flex items-center gap-3 sm:flex-col sm:items-center sm:gap-0">
-              <div class="ff-line h-px flex-1 sm:hidden" />
-              <UIcon :name="step.icon" class="w-7 h-7 text-indigo-600 shrink-0 sm:mt-7" />
-              <div class="ff-line h-px flex-1 sm:hidden" />
-              <div v-if="index !== STEPS.length - 1" class="ff-line hidden sm:block w-px flex-1 my-4 bg-gray-300" />
-            </div>
-            <div :class="index !== STEPS.length - 1 ? 'pb-10 sm:pb-16' : ''">
-              <span class="block font-semibold text-gray-500 mb-1 text-center sm:text-left">Step {{ index + 1 }}</span>
-              <h4 class="mt-0 mb-4 text-xl font-semibold text-indigo-600 text-center sm:text-left">{{ step.title }}</h4>
-              <!-- eslint-disable-next-line vue/no-v-html -->
-              <p class="font-light text-gray-700 leading-relaxed mb-0" v-html="inline(step.text)" />
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-
-    <!-- Intelligence at the Edge: background and card style of the "Use Cases" tiles on
-         the industry pages (industry/UseCaseTiles.vue), with an icon in place of the photo -->
-    <section class="w-full px-6 py-20 comparison-section-bg">
-      <div class="max-w-screen-lg mx-auto">
-        <p class="text-gray-500 text-sm font-semibold uppercase m-0 max-md:text-center">Intelligence at the Edge</p>
-        <h2 class="mt-3 mb-0 max-md:text-center">Once the loop is closed, <span class="text-indigo-600">intelligence is a node, not a project</span></h2>
-        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-14">
-          <div v-for="item in INTELLIGENCE" :key="item.title" class="flex flex-col gap-9 rounded-lg border border-white p-5 bg-[linear-gradient(135deg,_theme(colors.white)_0%,_theme(colors.white/20%)_100%)]">
-            <div class="flex flex-col gap-3">
-              <UIcon :name="item.icon" class="w-8 h-8 text-indigo-600" />
-              <p class="text-lg font-semibold text-gray-600 m-0">{{ item.title }}</p>
-            </div>
-            <!-- eslint-disable-next-line vue/no-v-html -->
-            <p class="text-sm leading-5 font-light text-gray-700 m-0" v-html="inline(item.text)" />
-          </div>
-        </div>
-      </div>
-    </section>
-
-    <!-- Closing CTA: the get-started card from /product/, with this page's heading -->
-    <section class="w-full px-6 pt-28">
-      <div class="max-w-screen-lg mx-auto">
-        <div class="rounded-xl px-9 py-12 flex flex-col items-center gap-8 text-center ff-get-started-bg">
-          <p class="text-white text-4xl sm:text-5xl font-medium m-0">Make your remote devices intelligent</p>
-          <p class="text-indigo-50 font-light text-xl max-w-3xl m-0">Your first operational application could be running this week. Request a demo to see how, or explore pricing to find the right fit.</p>
-          <div class="flex flex-col sm:flex-row gap-4 items-center">
-            <CtaBookDemo variant="highlight" position="final-cta" />
-            <CtaSignUp variant="ghost" color="white" position="final-cta" icon="i-lucide-arrow-right" />
-          </div>
-        </div>
-      </div>
-    </section>
-
-    <!-- FAQ: last on the page, as in the doc -->
-    <section class="w-full px-6 pt-24 pb-10">
-      <div class="max-w-screen-lg mx-auto">
-        <h2 class="mb-1 text-center md:text-left">Frequently Asked <span class="text-indigo-600">Questions</span></h2>
-        <div class="-mt-20">
-          <BlogFaq :faq="FAQ" variant="page" />
-        </div>
-      </div>
-    </section>
-  </div>
-</template>
diff --git a/nuxt/pages/use-cases/scada.vue b/nuxt/pages/use-cases/scada.vue
deleted file mode 100644
index ba8e24a4f4..0000000000
--- a/nuxt/pages/use-cases/scada.vue
+++ /dev/null
@@ -1,132 +0,0 @@
-<script setup lang="ts">
-// Ported from src/use-cases/scada.njk (11ty), which this replaces. Same page, same copy,
-// same classes from nuxt/assets/css/style.css.
-//
-// What the port changes on purpose:
-//  - Frontmatter that carried markup (the heading spans) is written as template markup
-//    here instead of being printed with `| safe`.
-//  - The three CTA macros become <CtaContactUs>, <CtaSignUp> and <CtaBookDemo>.
-//  - Production renders TWO <h1>, both reading "FlowFuse for SCADA": layouts/page.njk
-//    emits one from `title` when `nohero` is set, and the template writes its own. Only
-//    one survives here.
-//  - The .njk closed the banner heading with a stray </span> that had no opening tag.
-const META_DESCRIPTION = 'FlowFuse provides SCADA value in an Industry 4.0 way and unlocks the potential to modernize your SCADA system with its powerful, customizable, modular components that streamline operations, reduce dependence on costly, monolithic solutions.'
-
-const HOW_P3 = [
-    'After perfecting the flow to connect your devices needed for control, you add settings to send data from every important part of the process to a database. To save time creating actionable visualizations, you pull in one of the customizable dashboard Blueprints approved by FlowFuse. Because this entire process runs on FlowFuse, each step is customizable and not limited to built-in parameters imposed by closed software. The entire operation is secure and can scale to as many lines and sites as you need.',
-    'The last step is to create useful visualizations. Since your team has been empowered to build the applications you need, you import some of your custom nodes and flows from your Team Library directly into your instance, structure your data the way you want to see it, and use FlowFuse Dashboard to create actionable visualizations. Because this entire process runs on FlowFuse, each step is customizable and not limited to built-in parameters imposed by closed software. The entire operation is secure and can scale to as many lines and sites as you need.',
-    'No matter your SCADA setup, FlowFuse empowers your organization to securely control, connect, and operate your workflow the way you see fit.',
-]
-
-const REASONS = [
-    { title: 'Built-in adaptation layer', description: "Leverage FlowFuse's platform to integrate your SCADA functions into a comprehensive, modular solution." },
-    { title: 'End-to-end insight and control', description: 'Everything you need to connect, manage, visualize and analyze your data in one place.' },
-    { title: 'Limitless connections', description: 'Robust and growing open-source library provides connections for all protocols, all machines, and all devices.' },
-    { title: 'Rapid implementation', description: 'Get up and running quickly on FlowFuse Cloud.' },
-    { title: 'Open-source', description: 'Avoid vendor lock-in. Rely on an open-source community of thousands for insights and advice.' },
-    { title: 'Low-Code', description: 'Empowering your teams to build custom solutions with ease.' },
-]
-
-useSeoMeta({
-    title: 'FlowFuse for SCADA',
-    description: META_DESCRIPTION,
-    ogDescription: META_DESCRIPTION,
-    keywords: 'FlowFuse, manufacturing, SCADA, Industry 4.0, Siemens S7, PLC, Sentron',
-    ogUrl: 'https://flowfuse.com/use-cases/scada/',
-    twitterSite: '@FlowFuseinc',
-})
-</script>
-
-<template>
-  <div class="w-full page hero">
-    <div class="content">
-      <div class="nohero w-full px-6">
-        <div class="w-full pt-12 pb-20 md:pt-6 md:pb-8">
-          <div class="md:flex md:my-16 items-center md:flex-row md:justify-between container mx-auto text-center md:text-left md:max-w-screen-lg gap-8">
-            <div class="my-auto max-md:mx-auto md:w-1/2 lg:w-5/12 max-w-lg">
-              <h1 class="w-full mt-0 md:px-0 m-auto font-medium">
-                FlowFuse for <span class="text-indigo-600 inline-block">SCADA</span>
-              </h1>
-              <p class="mb-10 flex-grow">{{ META_DESCRIPTION }}</p>
-              <div class="flex md:hidden justify-center m-auto max-w-[400px] mb-10">
-                <img src="/images/solutions/scada-hero.png" alt="SCADA system with FlowFuse" width="400" class="w-full h-auto">
-              </div>
-              <div class="flex gap-3 max-md:max-w-sm max-md:mx-auto max-sm:flex-col max-md:justify-center">
-                <CtaContactUs variant="primary" position="primary" class="min-h-[40px]" />
-                <CtaSignUp variant="primary-outlined" position="primary" class="min-h-[40px]" />
-              </div>
-            </div>
-            <div class="flex max-md:hidden justify-center m-auto max-w-[450px]">
-              <img src="/images/solutions/scada-hero.png" alt="SCADA system with FlowFuse" width="450" class="w-full h-auto">
-            </div>
-          </div>
-        </div>
-
-        <div class="w-full">
-          <div class="max-w-screen-lg mx-auto">
-            <div class="flex md:flex-row flex-col w-full bg-white border-2 border-indigo-200 px-6 py-2 drop-shadow-lg md:gap-6 rounded-lg">
-              <h2 class="w-full max-sm:mx-auto my-6 text-indigo-400">SCADA meets Industry 4.0</h2>
-              <p class="md:max-w-2/3 max-sm:mx-auto">
-                Legacy SCADA systems were built to monitor and control industrial systems before technological
-                advancements provided a way to perform those functions without monolithic hardware systems. FlowFuse
-                provides what you need to augment and develop modern SCADA, enabling industrial control and monitoring
-                at scale and with enterprise-grade security. Enjoy low-code, agile, and responsive development with a
-                platform that will integrate with all future protocols.
-              </p>
-            </div>
-
-            <h2 class="mt-16">How it Works</h2>
-            <p class="w-full max-sm:mx-auto mt-6">
-              FlowFuse uses open-source, low-code technology capable of quickly and securely building applications to
-              connect, integrate, and control machines previously packaged as a standalone SCADA system.
-            </p>
-            <div class="mx-auto max-w-[550px] my-12">
-              <img src="/images/solutions/scada-how-diagram.png" alt="FlowFuse SCADA diagram" width="550" class="w-full h-auto">
-            </div>
-            <p class="w-full max-sm:mx-auto mt-6">
-              Let’s take an example. Your factory is using a Siemens S7 PLC and a Sentron, collecting data from various
-              sensors and actuators. You want to manage the efficiency of this process, so you open the FlowFuse
-              instance that you created for managing this workflow and drag in the FlowFuse Certified S7 PLC node and
-              Sentron node, entering configuration details to connect these devices along with anything else running in
-              your factory.
-            </p>
-            <div class="mx-auto ff-image-rounded border drop-shadow-md p-1 max-w-[385px] my-12 bg-white">
-              <img src="/images/solutions/scada-how-flow.png" alt="FlowFuse flow using the FlowFuse Certified S7 PLC node" width="385" class="w-full h-auto">
-            </div>
-            <p v-for="(paragraph, i) in HOW_P3" :key="i" class="w-full max-sm:mx-auto mt-6">{{ paragraph }}</p>
-            <p class="w-full max-sm:mx-auto mt-6">
-              FlowFuse connects Siemens, Allen-Bradley, Omron, and other PLCs to MQTT, OPC UA, cloud, and enterprise
-              systems, without expensive gateways or proprietary lock-in. See the
-              <NuxtLink to="/landing/plc/" class="text-indigo-600 hover:underline">FlowFuse PLC integration overview</NuxtLink>
-              for all supported protocols and use cases.
-            </p>
-          </div>
-        </div>
-      </div>
-
-      <div class="w-full bg-indigo-50/50 py-12 mt-20 px-6">
-        <div class="max-w-screen-lg mx-auto">
-          <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>
-          <div class="w-full grid sm:grid-cols-2 md:grid-cols-3 gap-6 md:gap-8">
-            <div v-for="reason in REASONS" :key="reason.title" class="w-full mt-4 md:mt-0 flex flex-col">
-              <h4 class="flex justify-center sm:justify-start font-semibold text-gray-500">{{ reason.title }}</h4>
-              <p class="text-center sm:text-left font-light mt-6 max-sm:max-w-md max-sm:mx-auto">{{ reason.description }}</p>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="max-md:max-w-xl md:max-w-screen-lg mx-auto max-sm:text-center pt-16 pb-10 px-6 text-lg flex-col flex-row items-center justify-center gap-1 hover:no-underline flex-wrap mb-12">
-        <div class="ff-blue-card max-sm:max-w-none">
-          <h4 class="mb-6 w-full text-center">Ready to unlock SCADA for your organization?</h4>
-          <div class="flex max-sm:flex-col max-md:mx-auto gap-3 justify-center">
-            <CtaBookDemo variant="primary" position="secondary" class="min-h-[40px]" />
-            <CtaSignUp variant="primary-outlined" position="secondary" class="min-h-[40px]" />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/nuxt/pages/use-cases/uns.vue b/nuxt/pages/use-cases/uns.vue
deleted file mode 100644
index 8fbc167ac9..0000000000
--- a/nuxt/pages/use-cases/uns.vue
+++ /dev/null
@@ -1,181 +0,0 @@
-<script setup lang="ts">
-// Ported from src/use-cases/uns.njk (11ty), which this replaces. Same page, same copy,
-// same classes from nuxt/assets/css/style.css.
-//
-// What the port changes on purpose:
-//  - The five feature icons were {% include %}d straight from
-//    src/_includes/components/icons/ with no ff-icon wrapper, so they are plain Heroicons
-//    at w-8 h-8. They resolve through <UIcon> against the installed heroicons set here.
-//  - The three CTA macros become <CtaContactUs>, <CtaSignUp> and <CtaBookDemo>.
-//  - Production renders TWO <h1> ("FlowFuse for UNS" from layouts/page.njk's `nohero`
-//    branch, then the page's own "FlowFuse for the Unified Namespace"). Only the page's
-//    own heading survives here.
-//  - The "From Data Source to Application:" heading used </br>, which is not a tag. It is
-//    a <br> here, which is what it was reaching for.
-//  - The reading-list and resources thumbnails point at /blog/**, /whitepaper/** and
-//    /resources/** - assets owned by those sections, in nuxt/public/ at the same paths.
-//    The page's own art is in nuxt/public/images/.
-const FEATURES = [
-    { icon: 'i-heroicons-circle-stack', title: 'Break down data silos', description: 'Access data from any source, regardless of its format or location and make it available through a central hub. ' },
-    { icon: 'i-heroicons-eye', title: 'Gain real-time visibility', description: 'Monitor your operations with interactive visual dashboards.' },
-    { icon: 'i-heroicons-bolt', title: 'Make faster, data-driven decisions', description: 'Analyze data from across your organization to identify gaps and optimize processes.' },
-    { icon: 'i-heroicons-lock-closed', title: 'Replace point-to-point connections', description: 'Seamlessly share data across your entire operation.' },
-    { icon: 'i-heroicons-arrows-pointing-out', title: 'Improved collaboration', description: 'Adapt data across different systems with minimal data loss or loss of context.' },
-]
-
-const REASONS = [
-    { title: 'Built-in adaptation layer', description: "Leverage FlowFuse's low-code platform to transform and make your data available for UNS." },
-    { title: 'End-to-end UNS platform', description: 'Everything you need to connect, manage, visualize and analyze your data in one place.' },
-    { title: 'Seamless integration', description: 'Built-in MQTT Broker ready to use alongside your FlowFuse applications with robust enterprise-grade features of the FlowFuse Platform.' },
-    { title: 'Rapid implementation', description: 'Get up and running quickly on FlowFuse Cloud.' },
-    { title: 'Open-source', description: 'Avoid vendor lock-in.' },
-    { title: 'Low-Code', description: 'Empowering your teams to build custom solutions with ease.' },
-]
-
-// Two columns of reading, kept in the .njk's order.
-const READING_COLUMNS = [
-    [
-        { title: 'Introduction to UNS', url: '/blog/2023/12/introduction-to-unified-namespace/', image: '/blog/2023/12/images/introduction-to-uns.png', alt: 'Graphics depicting a unified namespace.' },
-        { title: 'From ISA 95 towards the UNS', url: '/blog/2023/08/isa-95-automation-pyramid-to-unified-namespace/', image: '/blog/2023/08/images/UNS/UNS-Headline.svg', alt: 'Graphics depicting the UNS related to the automation pyramid.' },
-        { title: 'Node-RED: The perfect adapter and middleware for the UNS', url: '/blog/2024/02/node-red-perfect-adapter-middleware-uns/', image: '/blog/2024/02/images/node-red-for-uns.png', alt: 'Node-RED and the UNS' },
-        { title: 'Building a Unified Namespace (UNS) with FlowFuse', url: '/blog/2024/11/building-uns-with-flowfuse/', image: '/blog/2024/11/images/building-uns-with-flowfuse.png', alt: 'Graphics depicting a Unified Namespace with FlowFuse.' },
-    ],
-    [
-        { titleLead: 'Free whitepaper:', title: ' UNS - Decoupling data producers and consumers', url: '/whitepaper/uns-decoupling-data-producers-and-consumers/', image: '/resources/images/whitepaper_uns.png', alt: 'Graphics depicting the cover of the Whitepaper.' },
-        { title: 'Data Modeling: The Key to a Successful Unified Namespace', url: '/blog/2024/12/why-uns-need-data-modeling/', image: '/blog/2024/12/images/data-modeling-uns.png', alt: 'Graphics depicting unified namespace data modeling.' },
-        { title: 'Selecting your UNS Broker', url: '/blog/2024/01/unified-namespace-what-broker/', image: '/blog/2024/01/images/broker-for-uns.png', alt: 'Graphics displaying different broker logos.' },
-        { title: 'Unified Namespace: When to Use It, and When to Choose Something Else', url: '/blog/2024/01/unified-namespace-when-not-to-use/', image: '/blog/2024/01/images/when-not-to-use-the-uns.png', alt: 'Graphics depicting unified namespace data modeling using FlowFuse.' },
-    ],
-]
-
-const META_DESCRIPTION = 'FlowFuse simplifies UNS adoption for manufacturing companies by providing a user-friendly, low-code platform for deploying and using data from a UNS.'
-
-useSeoMeta({
-    title: 'FlowFuse for the Unified Namespace',
-    description: META_DESCRIPTION,
-    ogDescription: META_DESCRIPTION,
-    ogImage: 'https://flowfuse.com/images/solutions/flowfuse-uns.png',
-    keywords: 'FlowFuse, UNS, Unified Namespace, manufacturing, data, data integration, data management, data visualization, data analysis, data-driven decisions, data silos, real-time data, collaboration, Node-RED, MQTT Broker, low-code, open-source, rapid implementation, seamless integration',
-    ogUrl: 'https://flowfuse.com/use-cases/uns/',
-    twitterSite: '@FlowFuseinc',
-})
-</script>
-
-<template>
-  <div class="w-full page hero">
-    <div class="content">
-      <div class="nohero w-full">
-        <div class="w-full pt-12 pb-20 md:pt-6 md:pb-8">
-          <div class="md:flex px-6 md:my-16 items-center md:flex-row md:justify-between container mx-auto text-center md:text-left md:max-w-screen-lg gap-8">
-            <div class="my-auto max-md:mx-auto md:w-1/2 lg:w-5/12 max-w-md">
-              <h1 class="w-full mt-0 px-12 md:px-0 m-auto font-medium">
-                FlowFuse for the <span class="text-indigo-600 inline-block">Unified Namespace</span>
-              </h1>
-              <p class="mb-10">{{ META_DESCRIPTION }}</p>
-              <div class="flex md:hidden justify-center m-auto max-w-[400px] mb-10">
-                <img src="/images/solutions/ff-uns.png" alt="FlowFuse connected to many industrial devices" width="400" class="w-full h-auto">
-              </div>
-              <div class="flex gap-3 max-md:max-w-sm max-md:mx-auto max-sm:flex-col max-md:justify-center">
-                <CtaContactUs variant="primary" position="primary" class="min-h-[40px]" />
-                <CtaSignUp variant="primary-outlined" position="primary" class="min-h-[40px]" />
-              </div>
-            </div>
-            <div class="flex max-md:hidden justify-center m-auto max-w-[400px]">
-              <img src="/images/solutions/ff-uns.png" alt="FlowFuse connected to many industrial devices" width="400" class="w-full h-auto">
-            </div>
-          </div>
-        </div>
-
-        <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="flex flex-col justify-center w-full max-md:max-w-md mx-auto sm:bg-indigo-50 rounded-lg sm:p-7">
-                <h2 class="text-center w-full sm:text-left col-span-full text-3xl text-gray-500 font-light leading-14">
-                  With FlowFuse adopting UNS has never been faster or easier
-                </h2>
-              </div>
-              <div v-for="feature in FEATURES" :key="feature.title" class="relative w-full max-md:max-w-md mx-auto">
-                <div class="flex flex-col items-center sm:items-start">
-                  <div class="flex flex-col justify-center sm:justify-start gap-3 w-full mb-4">
-                    <div class="w-8 h-8 m-auto sm:m-0 text-indigo-600">
-                      <UIcon :name="feature.icon" class="w-8 h-8" />
-                    </div>
-                    <div class="w-full flex flex-row gap-3 mx-auto md:m-0">
-                      <h5 class="w-full md:m-0">
-                        <div class="text-xl text-gray-600 text-center sm:text-left">{{ feature.title }}</div>
-                      </h5>
-                    </div>
-                  </div>
-                  <div>
-                    <p class="text-center sm:text-left font-light">{{ feature.description }}</p>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <h2 class="mb-16 mt-16">
-              <!-- Vue condenses the newline between <br> and <span>, which would run the two
-                   lines together for a screen reader; the explicit space keeps them apart. -->
-              From Data Source to Application:<br>{{ ' ' }}
-              <span class="text-indigo-600">Streamline Your UNS Workflows with FlowFuse</span>
-            </h2>
-            <img src="/images/solutions/flowfuse-uns.png" alt="FlowFuse UNS Workflow" width="1024" class="w-full h-auto">
-          </div>
-        </div>
-      </div>
-
-      <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>
-          <div class="w-full grid sm:grid-cols-2 md:grid-cols-3 gap-6 md:gap-8">
-            <div v-for="reason in REASONS" :key="reason.title" class="w-full mt-4 md:mt-0 flex flex-col">
-              <h4 class="flex justify-center sm:justify-start font-semibold text-gray-500">{{ reason.title }}</h4>
-              <p class="text-center sm:text-left font-light mt-6 max-sm:max-w-md max-sm:mx-auto">{{ reason.description }}</p>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="max-md:max-w-xl md:max-w-screen-lg mx-auto max-sm:text-center pt-16 pb-10 px-6 text-lg flex-col flex-row items-center justify-center gap-1 hover:no-underline flex-wrap mb-12">
-        <div class="ff-blue-card max-sm:max-w-none">
-          <h4 class="mb-6 w-full text-center">Ready to simplify your UNS journey and unlock the power of your industrial data?</h4>
-          <div class="flex max-sm:flex-col max-md:mx-auto gap-3 justify-center">
-            <CtaBookDemo variant="primary" position="secondary" class="min-h-[40px]" />
-            <CtaSignUp variant="primary-outlined" position="secondary" class="min-h-[40px]" />
-          </div>
-        </div>
-
-        <div class="about w-full pt-24">
-          <h3 class="w-full mb-8 text-gray-500 text-center">Learn about UNS</h3>
-          <div class="grid grid-cols-1 md:gap-12 md:grid-cols-2 pt-4 md:pt-6 items-start m-auto">
-            <div v-for="(column, c) in READING_COLUMNS" :key="c" class="pb-4 md:pb-0">
-              <div class="ff-nodered-resources grid grid-cols-1 max-md:text-center">
-                <NuxtLink v-for="article in column" :key="article.url" :to="article.url">
-                  <li>
-                    <div class="w-2/5 ff-image-cover ff-image-left-rounded h-full">
-                      <img :src="article.image" :alt="article.alt" width="208" loading="lazy" class="w-full h-auto">
-                    </div>
-                    <label class="w-3/5 font-light text-left">
-                      <span v-if="article.titleLead" class="font-semibold">{{ article.titleLead }}</span>{{ article.title }}
-                    </label>
-                  </li>
-                </NuxtLink>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>

From 759bb21f775a95b5db1d528e3ae6cc77a71b3d32 Mon Sep 17 00:00:00 2001
From: ZJ van de Weg <git@zjvandeweg.nl>
Date: Fri, 2 Oct 2026 07:14:05 -0700
Subject: [PATCH 2/2] Write use-case copy as HTML instead of rich-text markup

The YAML is ours and rendered at build time, so it doesn't need an
escaping markup layer. Copy fields now hold HTML (accent spans, links,
<strong>, <br>) rendered with v-html, the same convention as
content/industries/*.yml. lib/rich-text.mjs and its tests are removed.

FAQ answers stay markdown: BlogFaq renders those through faq-answer.mjs.

With HTML available, two original classes the marker syntax couldn't
express are back: `inline-block` on the SCADA, MES and UNS hero accents,
and `text-red-500` on remote-device-management's results heading. Device
Agent's step copy returns to its original markup, including the
whitespace-nowrap span around Node-RED.
---
 nuxt/components/ClosingCta.vue                |  9 ++--
 nuxt/components/FaqSection.vue                |  5 +-
 nuxt/components/StepList.vue                  | 12 ++---
 nuxt/components/use-case/Features.vue         | 17 ++++---
 nuxt/components/use-case/Hero.vue             |  7 ++-
 nuxt/components/use-case/Prose.vue            |  9 ++--
 nuxt/components/use-case/Resources.vue        |  3 +-
 nuxt/components/use-case/Results.vue          |  3 +-
 nuxt/content.config.ts                        |  5 +-
 nuxt/content/use-cases/data-integration.yml   |  4 +-
 nuxt/content/use-cases/it-ot-middleware.yml   |  8 ++--
 nuxt/content/use-cases/mes.yml                | 10 ++--
 .../use-cases/remote-device-management.yml    | 28 +++++------
 nuxt/content/use-cases/scada.yml              |  6 +--
 nuxt/content/use-cases/uns.yml                |  8 ++--
 nuxt/lib/rich-text.mjs                        | 30 ------------
 nuxt/lib/rich-text.test.mjs                   | 47 -------------------
 nuxt/pages/integrations/opcua.vue             |  2 +-
 nuxt/pages/platform/device-agent.vue          |  8 ++--
 nuxt/pages/resources/roi-calculator.vue       |  2 +-
 20 files changed, 70 insertions(+), 153 deletions(-)
 delete mode 100644 nuxt/lib/rich-text.mjs
 delete mode 100644 nuxt/lib/rich-text.test.mjs

diff --git a/nuxt/components/ClosingCta.vue b/nuxt/components/ClosingCta.vue
index a493e4762f..fc062bd200 100644
--- a/nuxt/components/ClosingCta.vue
+++ b/nuxt/components/ClosingCta.vue
@@ -7,7 +7,6 @@
 // Buttons are a list of fixed CTA destinations (see <ActionButtons>), a demo request plus
 // sign-up unless the caller lists its own. `position` is the PostHog placement name, kept
 // per caller so each page's existing series carries on.
-import { richText } from '../lib/rich-text.mjs'
 
 withDefaults(defineProps<{
     heading: string
@@ -28,8 +27,8 @@ withDefaults(defineProps<{
   <section v-if="layout === 'banner'" class="w-full px-6 py-20">
     <div class="max-w-screen-lg mx-auto">
       <div class="rounded-xl px-9 py-12 flex flex-col items-center gap-8 text-center ff-get-started-bg">
-        <p class="text-white text-4xl sm:text-5xl font-medium m-0" v-html="richText(heading)" />
-        <p v-if="description" class="text-indigo-50 font-light text-xl max-w-3xl m-0" v-html="richText(description)" />
+        <p class="text-white text-4xl sm:text-5xl font-medium m-0" v-html="heading" />
+        <p v-if="description" class="text-indigo-50 font-light text-xl max-w-3xl m-0" v-html="description" />
         <div class="flex flex-col sm:flex-row gap-4 items-center">
           <ActionButtons :ctas="ctas" :position="position" />
         </div>
@@ -39,8 +38,8 @@ withDefaults(defineProps<{
 
   <section v-else class="w-full px-6 py-20">
     <div class="ff-blue-card max-md:max-w-xl md:max-w-screen-lg mx-auto pt-12 pb-10 text-center">
-      <h3 class="mb-4 w-full text-center" v-html="richText(heading)" />
-      <p v-if="description" class="text-gray-600 mb-8 max-w-2xl mx-auto text-center" v-html="richText(description)" />
+      <h3 class="mb-4 w-full text-center" v-html="heading" />
+      <p v-if="description" class="text-gray-600 mb-8 max-w-2xl mx-auto text-center" v-html="description" />
       <div class="flex flex-wrap gap-4 justify-center" :class="{ 'mt-8': !description }">
         <ActionButtons :ctas="ctas" :position="position" />
       </div>
diff --git a/nuxt/components/FaqSection.vue b/nuxt/components/FaqSection.vue
index f23367f9e9..b7ef75cd30 100644
--- a/nuxt/components/FaqSection.vue
+++ b/nuxt/components/FaqSection.vue
@@ -6,7 +6,6 @@
 // `schemaItems` is for a page whose displayed copy is altered for layout only, so search
 // engines still get the plain text: device-agent shows "Node‑RED" with a non-breaking
 // hyphen. `schema: false` is for a page that emits its FAQPage some other way.
-import { richText } from '../lib/rich-text.mjs'
 
 const props = withDefaults(defineProps<{
     items: Array<{ question: string, answer: string }>
@@ -15,7 +14,7 @@ const props = withDefaults(defineProps<{
     schema?: boolean
     schemaItems?: Array<{ question: string, answer: string }>
 }>(), {
-    heading: 'Frequently Asked ==Questions==',
+    heading: 'Frequently Asked <span class="text-indigo-600">Questions</span>',
     background: 'white',
     schema: true,
     schemaItems: undefined,
@@ -35,7 +34,7 @@ if (props.schema && props.items.length) {
   <section class="w-full px-6 py-16" :class="BACKGROUNDS[background]">
     <div class="max-w-screen-lg mx-auto">
       <!-- eslint-disable-next-line vue/no-v-html -->
-      <h2 class="mb-4 max-md:text-center" v-html="richText(heading)" />
+      <h2 class="mb-4 max-md:text-center" v-html="heading" />
       <BlogFaq :faq="items" />
     </div>
   </section>
diff --git a/nuxt/components/StepList.vue b/nuxt/components/StepList.vue
index c7f1240d07..745dfb89ec 100644
--- a/nuxt/components/StepList.vue
+++ b/nuxt/components/StepList.vue
@@ -3,13 +3,13 @@
 // to insight, step by step" band on /integrations/opcua/, and /platform/device-agent/
 // and /use-cases/remote-device-management/ each carried a copy before this.
 //
-// Each step's `label` defaults to "Step <n>". All copy goes through lib/rich-text.mjs, so
-// it can carry links and accents but not raw HTML.
+// Each step's `label` defaults to "Step <n>". Headings, intro and step text are HTML
+// strings (links, accent spans), rendered with v-html: they come from this repo's own
+// pages and YAML, never from a visitor.
 //
 // On mobile the icon sits between two short horizontal lines; from sm up there is a
 // single vertical line below it, offset so the icon lines up with the title rather than
 // the label above it.
-import { richText } from '../lib/rich-text.mjs'
 
 defineProps<{
     heading: string
@@ -28,8 +28,8 @@ const paragraphs = (text: string | string[]) => (Array.isArray(text) ? text : [t
     <div class="max-w-screen-lg mx-auto md:flex md:gap-12 md:items-start">
       <div class="mb-12 md:mb-0 md:w-[373px] md:shrink-0 md:sticky! md:top-24 md:self-start max-md:text-center">
         <p v-if="eyebrow" class="text-gray-500 text-sm font-semibold uppercase mt-0 mb-3">{{ eyebrow }}</p>
-        <h2 class="mt-0 mb-0" v-html="richText(heading)" />
-        <p v-if="intro" class="font-light text-gray-700 leading-relaxed mt-6 mb-0" v-html="richText(intro)" />
+        <h2 class="mt-0 mb-0" v-html="heading" />
+        <p v-if="intro" class="font-light text-gray-700 leading-relaxed mt-6 mb-0" v-html="intro" />
         <NuxtLink v-if="link" :to="link.href" class="mt-3 inline-flex items-center gap-1.5">
           {{ link.label }}
           <UIcon name="i-heroicons-arrow-long-right-20-solid" class="w-5 h-5 shrink-0" />
@@ -51,7 +51,7 @@ const paragraphs = (text: string | string[]) => (Array.isArray(text) ? text : [t
                 :key="p"
                 class="font-light text-gray-600"
                 :class="p === paragraphs(step.text).length - 1 ? 'mb-0' : ''"
-                v-html="richText(paragraph)"
+                v-html="paragraph"
             />
           </div>
         </div>
diff --git a/nuxt/components/use-case/Features.vue b/nuxt/components/use-case/Features.vue
index 8abdf78b49..1e38bc12a6 100644
--- a/nuxt/components/use-case/Features.vue
+++ b/nuxt/components/use-case/Features.vue
@@ -9,7 +9,6 @@
 //  - cards: items on translucent white cards (meant for the gradient background).
 //  - panel: the whole list inside one bordered indigo panel.
 //  - alternating: one item per row, pictogram flipping sides.
-import { richText } from '../../lib/rich-text.mjs'
 
 const props = defineProps<{
     block: {
@@ -61,8 +60,8 @@ const paragraphs = (text?: string | string[]) => (Array.isArray(text) ? text : t
           :class="layout === 'panel' ? 'm-auto text-center sm:text-left p-8 max-w-md sm:max-w-screen-lg bg-indigo-50 rounded-lg border-[3px] border-indigo-200 drop-shadow-xl' : ''"
       >
         <p v-if="block.eyebrow" class="text-gray-500 text-sm font-semibold uppercase m-0 max-md:text-center">{{ block.eyebrow }}</p>
-        <h2 v-if="block.heading" class="max-md:text-center" :class="block.eyebrow ? 'mt-3 mb-0' : 'mb-0'" v-html="richText(block.heading)" />
-        <p v-if="block.intro" class="mt-6 mb-0 max-w-3xl max-md:text-center" :class="{ 'mx-auto': block.centered }" v-html="richText(block.intro)" />
+        <h2 v-if="block.heading" class="max-md:text-center" :class="block.eyebrow ? 'mt-3 mb-0' : 'mb-0'" v-html="block.heading" />
+        <p v-if="block.intro" class="mt-6 mb-0 max-w-3xl max-md:text-center" :class="{ 'mx-auto': block.centered }" v-html="block.intro" />
 
         <div v-if="block.image" class="mx-auto mt-10" :style="{ maxWidth: block.image.width ? `${block.image.width}px` : undefined }">
           <img :src="block.image.src" :alt="block.image.alt" :width="block.image.width || 1024" loading="lazy" class="w-full h-auto">
@@ -79,15 +78,15 @@ const paragraphs = (text?: string | string[]) => (Array.isArray(text) ? text : t
               <img :src="item.image" alt="" width="128" loading="lazy" class="w-full h-auto">
             </div>
             <div>
-              <h4 v-if="item.title" v-html="richText(item.title)" />
-              <p v-for="(paragraph, p) in paragraphs(item.text)" :key="p" v-html="richText(paragraph)" />
+              <h4 v-if="item.title" v-html="item.title" />
+              <p v-for="(paragraph, p) in paragraphs(item.text)" :key="p" v-html="paragraph" />
             </div>
           </div>
         </div>
 
         <div v-else class="grid gap-x-12 gap-y-12 mt-12 text-left" :class="COLUMNS[block.columns || 3]">
           <div v-if="block.lead" class="flex flex-col justify-center w-full max-md:max-w-md mx-auto sm:bg-indigo-50 rounded-lg sm:p-7">
-            <h3 class="text-center w-full sm:text-left text-3xl text-gray-500 font-light leading-snug m-0" v-html="richText(block.lead)" />
+            <h3 class="text-center w-full sm:text-left text-3xl text-gray-500 font-light leading-snug m-0" v-html="block.lead" />
           </div>
           <div
               v-for="(item, i) in block.items"
@@ -105,13 +104,13 @@ const paragraphs = (text?: string | string[]) => (Array.isArray(text) ? text : t
               <img :src="item.image" alt="" width="128" loading="lazy" class="w-full h-auto">
             </div>
             <div>
-              <h3 v-if="item.title" class="text-xl font-semibold text-gray-600 m-0" v-html="richText(item.title)" />
+              <h3 v-if="item.title" class="text-xl font-semibold text-gray-600 m-0" v-html="item.title" />
               <p
                   v-for="(paragraph, p) in paragraphs(item.text)"
                   :key="p"
                   class="font-light text-gray-700 leading-relaxed mb-0"
                   :class="item.title ? 'mt-4' : 'mt-0'"
-                  v-html="richText(paragraph)"
+                  v-html="paragraph"
               />
             </div>
           </div>
@@ -119,7 +118,7 @@ const paragraphs = (text?: string | string[]) => (Array.isArray(text) ? text : t
       </div>
 
       <!-- eslint-disable-next-line vue/no-v-html -->
-      <ProseNote v-if="block.note" class="mt-16"><span v-html="richText(block.note)" /></ProseNote>
+      <ProseNote v-if="block.note" class="mt-16"><span v-html="block.note" /></ProseNote>
     </div>
   </section>
 </template>
diff --git a/nuxt/components/use-case/Hero.vue b/nuxt/components/use-case/Hero.vue
index 0ffe8298f3..c98b176f30 100644
--- a/nuxt/components/use-case/Hero.vue
+++ b/nuxt/components/use-case/Hero.vue
@@ -7,7 +7,6 @@
 //    one indigo glow from the top-right corner (remote-device-management).
 // `heading` and `text` fall back to the page's own title and problem, which is what the
 // operational pages show.
-import { richText } from '../../lib/rich-text.mjs'
 
 type Image = { src: string, alt: string, width?: number }
 
@@ -28,10 +27,10 @@ const props = defineProps<{
 
 // The centered band shows the page title in the indigo accent, as layouts/use-case.njk did.
 const heading = computed(() => {
-    if (props.hero.heading) return richText(props.hero.heading)
-    return richText(props.hero.layout === 'centered' ? `==${props.title}==` : props.title)
+    if (props.hero.heading) return props.hero.heading
+    return props.hero.layout === 'centered' ? `<span class="text-indigo-600">${props.title}</span>` : props.title
 })
-const text = computed(() => richText(props.hero.text || props.problem))
+const text = computed(() => props.hero.text || props.problem)
 const ctas = computed(() => props.hero.ctas || [{ cta: 'book-demo' }])
 const maxWidth = (image?: Image) => image?.width ? `${image.width}px` : undefined
 </script>
diff --git a/nuxt/components/use-case/Prose.vue b/nuxt/components/use-case/Prose.vue
index f8a0e9190a..2db59ada0d 100644
--- a/nuxt/components/use-case/Prose.vue
+++ b/nuxt/components/use-case/Prose.vue
@@ -2,7 +2,6 @@
 // Headings, paragraphs and images in reading order: the "How it Works" write-ups on
 // SCADA and MES, the architecture diagrams on UNS and IT/OT. With `callout`, the heading
 // and the first paragraph sit side by side in the bordered card SCADA and MES opened with.
-import { richText } from '../../lib/rich-text.mjs'
 
 type Image = { src: string, alt: string, width?: number, framed?: boolean }
 
@@ -24,13 +23,13 @@ const body = computed(() => calloutText.value ? props.block.body.slice(1) : prop
   <section class="w-full px-6 pt-8 pb-8">
     <div class="max-w-screen-lg mx-auto">
       <div v-if="block.callout" class="flex md:flex-row flex-col w-full bg-white border-2 border-indigo-200 px-6 py-2 drop-shadow-lg md:gap-6 rounded-lg">
-        <h2 class="w-full max-sm:mx-auto my-6 text-indigo-400" v-html="richText(block.heading)" />
-        <p v-if="calloutText" class="md:max-w-2/3 max-sm:mx-auto" v-html="richText(calloutText)" />
+        <h2 class="w-full max-sm:mx-auto my-6 text-indigo-400" v-html="block.heading" />
+        <p v-if="calloutText" class="md:max-w-2/3 max-sm:mx-auto" v-html="calloutText" />
       </div>
-      <h2 v-else-if="block.heading" class="mt-8" v-html="richText(block.heading)" />
+      <h2 v-else-if="block.heading" class="mt-8" v-html="block.heading" />
 
       <template v-for="(item, i) in body" :key="i">
-        <p v-if="typeof item === 'string'" class="w-full max-sm:mx-auto mt-6" v-html="richText(item)" />
+        <p v-if="typeof item === 'string'" class="w-full max-sm:mx-auto mt-6" v-html="item" />
         <div
             v-else
             class="mx-auto my-12"
diff --git a/nuxt/components/use-case/Resources.vue b/nuxt/components/use-case/Resources.vue
index 43a84d57eb..5a4f856787 100644
--- a/nuxt/components/use-case/Resources.vue
+++ b/nuxt/components/use-case/Resources.vue
@@ -2,7 +2,6 @@
 // Columns of <ResourceList> cards under an optional heading each: UNS's "Learn about UNS"
 // reading list, IT/OT's case studies and whitepapers. Thumbnails point at the sections
 // that own them (/blog/**, /whitepaper/**, /images/stories/**).
-import { richText } from '../../lib/rich-text.mjs'
 
 defineProps<{
     block: {
@@ -20,7 +19,7 @@ defineProps<{
   <section class="w-full px-6 pt-16 pb-20">
     <div class="container m-auto max-w-5xl">
       <!-- eslint-disable-next-line vue/no-v-html -->
-      <h2 v-if="block.heading" class="text-center mb-8" v-html="richText(block.heading)" />
+      <h2 v-if="block.heading" class="text-center mb-8" v-html="block.heading" />
       <div class="grid grid-cols-1 md:grid-cols-2 md:gap-x-12 items-start">
         <div v-for="(column, c) in block.columns" :key="c" class="pb-4 md:pb-0">
           <h4 v-if="column.heading" :id="column.id" class="text-center max-md:pt-8 scroll-mt-24">{{ column.heading }}</h4>
diff --git a/nuxt/components/use-case/Results.vue b/nuxt/components/use-case/Results.vue
index 92c201c2c1..84510f0dc9 100644
--- a/nuxt/components/use-case/Results.vue
+++ b/nuxt/components/use-case/Results.vue
@@ -4,7 +4,6 @@
 // analysis". `before` is optional: only a result that is a change (1 → 130+) has one.
 // `company` is separate from `text` because the whole card is the link, so the name is
 // styled like one rather than being a second <a> nested inside the first.
-import { richText } from '../../lib/rich-text.mjs'
 
 defineProps<{
     block: {
@@ -38,7 +37,7 @@ function splitLinkText(item: { linkText: string, linkName: string }) {
     <div class="max-w-screen-lg mx-auto relative">
       <p v-if="block.eyebrow" class="text-gray-500 text-sm font-semibold uppercase m-0 max-md:text-center">{{ block.eyebrow }}</p>
       <!-- eslint-disable-next-line vue/no-v-html -->
-      <h2 class="mt-3 mb-0 max-md:text-center" v-html="richText(block.heading)" />
+      <h2 class="mt-3 mb-0 max-md:text-center" v-html="block.heading" />
       <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-12">
         <NuxtLink
             v-for="item in block.items"
diff --git a/nuxt/content.config.ts b/nuxt/content.config.ts
index 82808e801a..ec1e3a72bb 100644
--- a/nuxt/content.config.ts
+++ b/nuxt/content.config.ts
@@ -464,8 +464,9 @@ export default defineContentConfig({
         // Every /use-cases/<slug>/ page, rendered by pages/use-cases/[slug].vue. A page is
         // its listing metadata plus an ordered `sections` list; each entry's `type` picks
         // one component in components/use-case/, so a page is laid out entirely here and
-        // no use case has a .vue file of its own. Copy fields go through lib/rich-text.mjs
-        // (links, bold, ==indigo== and !!red!! accents), never raw HTML.
+        // no use case has a .vue file of its own. Copy fields are HTML, rendered with v-html
+        // (accent spans, links, <strong>, <br>), the same as content/industries/*.yml. FAQ
+        // answers are the exception: <BlogFaq> renders those as markdown.
         useCases: defineCollection({
             type: 'data',
             source: 'use-cases/*.yml',
diff --git a/nuxt/content/use-cases/data-integration.yml b/nuxt/content/use-cases/data-integration.yml
index 8a088ba721..19b94fc92c 100644
--- a/nuxt/content/use-cases/data-integration.yml
+++ b/nuxt/content/use-cases/data-integration.yml
@@ -29,14 +29,14 @@ sections:
   - type: features
     layout: panel
     columns: 1
-    heading: "Why FlowFuse is the !!Data Integration Solution!!"
+    heading: "Why FlowFuse is the <span class='text-red-600'>Data Integration Solution</span>"
     items:
       - title: "Accessible for Anyone"
         text: "FlowFuse’s low-code visual environment makes it easy for non-programmers to integrate data from different sources without needing to know how to code. This enables all kinds of departments to work on their own data integration projects without requiring support from IT."
       - title: "Real-Time Data Visualisation"
         text: "FlowFuse makes it easy to create real-time data visualizations and dashboards. Data can be filtered, transformed and analyzed through event-driven flows to get real-time insights into your business."
       - title: "Support for Different Data Formats"
-        text: "FlowFuse supports parsing a wide range of formats including: **csv**, **html**, **json**, **xml** and **yaml**. Additional data formats are available through FlowFuse’s support for over 5,000 open-source plug-ins."
+        text: "FlowFuse supports parsing a wide range of formats including: <strong>csv</strong>, <strong>html</strong>, <strong>json</strong>, <strong>xml</strong> and <strong>yaml</strong>. Additional data formats are available through FlowFuse’s support for over 5,000 open-source plug-ins."
 
   - type: features
     centered: true
diff --git a/nuxt/content/use-cases/it-ot-middleware.yml b/nuxt/content/use-cases/it-ot-middleware.yml
index b60e971058..b957583a55 100644
--- a/nuxt/content/use-cases/it-ot-middleware.yml
+++ b/nuxt/content/use-cases/it-ot-middleware.yml
@@ -20,10 +20,10 @@ sections:
   - type: features
     columns: 2
     items:
-      - { title: "Hardware & Sensor ==Integration==", text: "FlowFuse simplifies connecting diverse hardware and sensors in manufacturing, enhancing data collection and analytics for informed decision-making and efficiency improvements." }
-      - { title: "==Integrate== OT and IT Data", text: "Our platform unifies operational and information technology data, offering manufacturers a comprehensive view of production processes for improved efficiency." }
-      - { title: "==Intuitive== OT Data visualization", text: "FlowFuse offers a visual interface for real-time monitoring and analysis of operational data, aiding in quick, data-driven decisions to optimize manufacturing operations." }
-      - { title: "==Automate== Event Triggers", text: "With FlowFuse, automate event triggers to respond instantly to production line changes, reducing downtime and boosting efficiency." }
+      - { title: "Hardware & Sensor <span class='text-indigo-600'>Integration</span>", text: "FlowFuse simplifies connecting diverse hardware and sensors in manufacturing, enhancing data collection and analytics for informed decision-making and efficiency improvements." }
+      - { title: "<span class='text-indigo-600'>Integrate</span> OT and IT Data", text: "Our platform unifies operational and information technology data, offering manufacturers a comprehensive view of production processes for improved efficiency." }
+      - { title: "<span class='text-indigo-600'>Intuitive</span> OT Data visualization", text: "FlowFuse offers a visual interface for real-time monitoring and analysis of operational data, aiding in quick, data-driven decisions to optimize manufacturing operations." }
+      - { title: "<span class='text-indigo-600'>Automate</span> Event Triggers", text: "With FlowFuse, automate event triggers to respond instantly to production line changes, reducing downtime and boosting efficiency." }
 
   - type: prose
     body:
diff --git a/nuxt/content/use-cases/mes.yml b/nuxt/content/use-cases/mes.yml
index 112a711798..88180a219b 100644
--- a/nuxt/content/use-cases/mes.yml
+++ b/nuxt/content/use-cases/mes.yml
@@ -11,7 +11,7 @@ seoMeta:
 sections:
   - type: hero
     layout: split
-    heading: "FlowFuse for ==your own MES=="
+    heading: "FlowFuse for <span class='text-indigo-600 inline-block'>your own MES</span>"
     text: "FlowFuse provides everything you need to build the robust Manufacturing Execution System (MES) you want, providing everything from production tracking to data analysis, with the components you need and the flexibility to customize as you see fit."
     image: { src: /images/solutions/mes-hero.png, alt: "MES with FlowFuse", width: 550 }
     ctas:
@@ -27,11 +27,11 @@ sections:
   - type: prose
     heading: "How it Works"
     body:
-      - "Monolithic MES systems - think Siemens OpCenter Execution or Rockwell Automation’s Plex - offer MES products that are comprehensive and sophisticated, but also expensive and complex. In contrast, FlowFuse gives you a flexible, low-code industrial application platform with popular industry protocols, [integrations](/integrations/), and our resource library to design and deploy applications for the MES solution you want for your business - and nothing more."
+      - "Monolithic MES systems - think Siemens OpCenter Execution or Rockwell Automation’s Plex - offer MES products that are comprehensive and sophisticated, but also expensive and complex. In contrast, FlowFuse gives you a flexible, low-code industrial application platform with popular industry protocols, <a href='/integrations/'>integrations</a>, and our resource library to design and deploy applications for the MES solution you want for your business - and nothing more."
       - "Here is an example. An MES system is essentially a collection of management functions, like production tracking, resource management, data collection and analysis, and scheduling and dispatching. With FlowFuse, you can build the MES features you want by creating applications for the functions that you need, and none that you don’t."
-      - "Collect data from the shop floor or the lab by using [FlowFuse Certified Nodes](/integrations/) to connect with local machines using any protocol: MQTT, OPC-UA, Modbus, Sparkplug B, and any other protocol that exists now or in the future."
+      - "Collect data from the shop floor or the lab by using <a href='/integrations/'>FlowFuse Certified Nodes</a> to connect with local machines using any protocol: MQTT, OPC-UA, Modbus, Sparkplug B, and any other protocol that exists now or in the future."
       - image: { src: /images/home/connect_graphic.png, alt: "Icons of communication protocols", width: 550 }
-      - "Create applications in FlowFuse to transform your data for analysis and create visualizations that enable your team to make data-driven decisions about your business. Our ever-expanding [Blueprints library](/blueprints/) helps you get started quickly."
+      - "Create applications in FlowFuse to transform your data for analysis and create visualizations that enable your team to make data-driven decisions about your business. Our ever-expanding <a href='/blueprints/'>Blueprints library</a> helps you get started quickly."
       - "Because FlowFuse provides central management of all of your instances, you can easily monitor your applications whether you're running a dozen in a factory or thousands at sites across the globe."
       - image: { src: /images/solutions/oee-dashboard--1.png, alt: "OEE dashboard", framed: true }
 
@@ -43,7 +43,7 @@ sections:
 
   - type: features
     background: indigo
-    heading: "The FlowFuse !!Advantage!!"
+    heading: "The FlowFuse <span class='text-red-600'>Advantage</span>"
     items:
       - { title: "Built-in adaptation layer", text: "Leverage FlowFuse's low-code platform to design exactly the MES your organization needs." }
       - { title: "End-to-end insight and control", text: "Everything you need to connect, manage, visualize and analyze your data in one place." }
diff --git a/nuxt/content/use-cases/remote-device-management.yml b/nuxt/content/use-cases/remote-device-management.yml
index a745c73773..eea28f2328 100644
--- a/nuxt/content/use-cases/remote-device-management.yml
+++ b/nuxt/content/use-cases/remote-device-management.yml
@@ -11,8 +11,8 @@ seoMeta:
 sections:
   - type: hero
     layout: feature
-    heading: "Remote device management !!for every machine in the field!!"
-    text: "FlowFuse runs Node-RED next to your [PLCs](/landing/plc/) and governs it from one place with remote device management, editing, [snapshots](/docs/user/snapshots/), and fleet-wide controls."
+    heading: "Remote device management <span class='text-red-600'>for every machine in the field</span>"
+    text: "FlowFuse runs Node-RED next to your <a href='/landing/plc/'>PLCs</a> and governs it from one place with remote device management, editing, <a href='/docs/user/snapshots/'>snapshots</a>, and fleet-wide controls."
     image: { src: /images/use-cases/edge-connectivity.jpg, alt: "Machines on a factory shop floor" }
     ctas:
       - { cta: book-demo }
@@ -25,7 +25,7 @@ sections:
 
   - type: results
     eyebrow: "Results"
-    heading: "!!Customer results!! with remote device management"
+    heading: "<span class='text-red-500'>Customer results</span> with remote device management"
     items:
       - before: "1"
         after: "130+"
@@ -62,25 +62,25 @@ sections:
     background: gray
     columns: 2
     eyebrow: "Visibility"
-    heading: "See and manage ==every remote device from one place=="
+    heading: "See and manage <span class='text-indigo-600'>every remote device from one place</span>"
     items:
       - icon: i-heroicons-cpu-chip
         title: "Every device, one view"
-        text: "Instance state and last seen. CPU and memory over time. Agent and Node-RED versions. [Device groups](/docs/user/device-groups/) by site or line."
+        text: "Instance state and last seen. CPU and memory over time. Agent and Node-RED versions. <a href='/docs/user/device-groups/'>Device groups</a> by site or line."
       - icon: i-lucide-history
         title: "What changed, and who changed it"
-        text: "[Audit log](/docs/user/logs/#audit-log) across the team. [Snapshot comparison](/docs/user/snapshots/#comparing-snapshots). [Version history](/docs/user/snapshots/#timeline-view). Attribution on every deployment."
+        text: "<a href='/docs/user/logs/#audit-log'>Audit log</a> across the team. <a href='/docs/user/snapshots/#comparing-snapshots'>Snapshot comparison</a>. <a href='/docs/user/snapshots/#timeline-view'>Version history</a>. Attribution on every deployment."
       - icon: i-heroicons-lifebuoy
         title: "When something goes wrong"
-        text: "[Node-RED logs](/docs/user/logs/#node-red-logs) without SSH. Health checks and auto-restart. Diagnostic emails with the logs attached. Structured JSON logs for Loki or Elastic."
+        text: "<a href='/docs/user/logs/#node-red-logs'>Node-RED logs</a> without SSH. Health checks and auto-restart. Diagnostic emails with the logs attached. Structured JSON logs for Loki or Elastic."
       - icon: i-heroicons-signal
         title: "Reach a machine you can't touch"
         text: "Open the editor from your browser. Developer Mode tunnel for live debugging. Restart a device remotely. Outbound-only — no inbound ports."
-    note: "The [FlowFuse Device Agent](/platform/device-agent/) runs your flows on remote devices and keeps them connected to FlowFuse for centralized monitoring and management."
+    note: "The <a href='/platform/device-agent/'>FlowFuse Device Agent</a> runs your flows on remote devices and keeps them connected to FlowFuse for centralized monitoring and management."
 
   - type: steps
     eyebrow: "Connectivity"
-    heading: "Fix one machine. ==Deploy to all of them.=="
+    heading: "Fix one machine. <span class='text-indigo-600'>Deploy to all of them.</span>"
     intro: "This is where a monitoring tool stops and remote device management keeps going."
     link: { label: "Learn how to install the FlowFuse Device Agent", href: /docs/device-agent/install/overview/ }
     steps:
@@ -92,23 +92,23 @@ sections:
         text: "Capture the working state as a versioned snapshot you can compare, promote and roll back."
       - icon: i-heroicons-rocket-launch
         title: "Roll It Out"
-        text: "Push that snapshot to the device group through a [pipeline](/docs/user/devops-pipelines/) — every filler on every line, or every site in the region."
+        text: "Push that snapshot to the device group through a <a href='/docs/user/devops-pipelines/'>pipeline</a> — every filler on every line, or every site in the region."
 
   - type: features
     layout: cards
     background: gradient
     eyebrow: "Intelligence at the Edge"
-    heading: "Once the loop is closed, ==intelligence is a node, not a project=="
+    heading: "Once the loop is closed, <span class='text-indigo-600'>intelligence is a node, not a project</span>"
     items:
       - icon: i-heroicons-cpu-chip
         title: "Run the model where the data is"
-        text: "Drop a trained [ONNX model](/blog/2025/10/custom-onnx-model/) into a flow and run inference on the device. No round trip, no inference bill, no data leaving the plant."
+        text: "Drop a trained <a href='/blog/2025/10/custom-onnx-model/'>ONNX model</a> into a flow and run inference on the device. No round trip, no inference bill, no data leaving the plant."
       - icon: i-heroicons-chat-bubble-left-right
         title: "Ask the factory a question"
-        text: "[FlowFuse Expert](/docs/user/expert/) Insights Mode connects to the MCP servers in your instances, so you can query live state in plain language instead of building a report for it."
+        text: "<a href='/docs/user/expert/'>FlowFuse Expert</a> Insights Mode connects to the MCP servers in your instances, so you can query live state in plain language instead of building a report for it."
       - icon: i-heroicons-bolt
         title: "Allow an agent to act"
-        text: "Expose your flows to our [MCP integration](/changelog/2025/10/mcp-nodes/) so Copilot, Claude or your own AI agent can read live operational state and act on it, inside the role-based access control you already run. Read-only stays read-only. Every action is logged."
+        text: "Expose your flows to our <a href='/changelog/2025/10/mcp-nodes/'>MCP integration</a> so Copilot, Claude or your own AI agent can read live operational state and act on it, inside the role-based access control you already run. Read-only stays read-only. Every action is logged."
 
   - type: cta
     layout: banner
diff --git a/nuxt/content/use-cases/scada.yml b/nuxt/content/use-cases/scada.yml
index c57cfc1f7e..0d9ddb2cac 100644
--- a/nuxt/content/use-cases/scada.yml
+++ b/nuxt/content/use-cases/scada.yml
@@ -11,7 +11,7 @@ seoMeta:
 sections:
   - type: hero
     layout: split
-    heading: "FlowFuse for ==SCADA=="
+    heading: "FlowFuse for <span class='text-indigo-600 inline-block'>SCADA</span>"
     text: "FlowFuse provides SCADA value in an Industry 4.0 way and unlocks the potential to modernize your SCADA system with its powerful, customizable, modular components that streamline operations, reduce dependence on costly, monolithic solutions."
     image: { src: /images/solutions/scada-hero.png, alt: "SCADA system with FlowFuse", width: 450 }
     ctas:
@@ -34,11 +34,11 @@ sections:
       - "After perfecting the flow to connect your devices needed for control, you add settings to send data from every important part of the process to a database. To save time creating actionable visualizations, you pull in one of the customizable dashboard Blueprints approved by FlowFuse. Because this entire process runs on FlowFuse, each step is customizable and not limited to built-in parameters imposed by closed software. The entire operation is secure and can scale to as many lines and sites as you need."
       - "The last step is to create useful visualizations. Since your team has been empowered to build the applications you need, you import some of your custom nodes and flows from your Team Library directly into your instance, structure your data the way you want to see it, and use FlowFuse Dashboard to create actionable visualizations. Because this entire process runs on FlowFuse, each step is customizable and not limited to built-in parameters imposed by closed software. The entire operation is secure and can scale to as many lines and sites as you need."
       - "No matter your SCADA setup, FlowFuse empowers your organization to securely control, connect, and operate your workflow the way you see fit."
-      - "FlowFuse connects Siemens, Allen-Bradley, Omron, and other PLCs to MQTT, OPC UA, cloud, and enterprise systems, without expensive gateways or proprietary lock-in. See the [FlowFuse PLC integration overview](/landing/plc/) for all supported protocols and use cases."
+      - "FlowFuse connects Siemens, Allen-Bradley, Omron, and other PLCs to MQTT, OPC UA, cloud, and enterprise systems, without expensive gateways or proprietary lock-in. See the <a href='/landing/plc/'>FlowFuse PLC integration overview</a> for all supported protocols and use cases."
 
   - type: features
     background: indigo
-    heading: "The FlowFuse !!Advantage!!"
+    heading: "The FlowFuse <span class='text-red-600'>Advantage</span>"
     items:
       - { title: "Built-in adaptation layer", text: "Leverage FlowFuse's platform to integrate your SCADA functions into a comprehensive, modular solution." }
       - { title: "End-to-end insight and control", text: "Everything you need to connect, manage, visualize and analyze your data in one place." }
diff --git a/nuxt/content/use-cases/uns.yml b/nuxt/content/use-cases/uns.yml
index 051eea02f0..256aebcebc 100644
--- a/nuxt/content/use-cases/uns.yml
+++ b/nuxt/content/use-cases/uns.yml
@@ -12,7 +12,7 @@ seoMeta:
 sections:
   - type: hero
     layout: split
-    heading: "FlowFuse for the ==Unified Namespace=="
+    heading: "FlowFuse for the <span class='text-indigo-600 inline-block'>Unified Namespace</span>"
     text: "FlowFuse simplifies UNS adoption for manufacturing companies by providing a user-friendly, low-code platform for deploying and using data from a UNS."
     image: { src: /images/solutions/ff-uns.png, alt: "FlowFuse connected to many industrial devices", width: 400 }
     ctas:
@@ -20,7 +20,7 @@ sections:
       - { cta: sign-up }
 
   - type: features
-    heading: "Unlock the power of your ==real-time data=="
+    heading: "Unlock the power of your <span class='text-indigo-600'>real-time data</span>"
     intro: "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."
     lead: "With FlowFuse adopting UNS has never been faster or easier"
     items:
@@ -31,13 +31,13 @@ sections:
       - { icon: i-heroicons-arrows-pointing-out, title: "Improved collaboration", text: "Adapt data across different systems with minimal data loss or loss of context." }
 
   - type: prose
-    heading: "From Data Source to Application:\n==Streamline Your UNS Workflows with FlowFuse=="
+    heading: "From Data Source to Application:<br> <span class='text-indigo-600'>Streamline Your UNS Workflows with FlowFuse</span>"
     body:
       - image: { src: /images/solutions/flowfuse-uns.png, alt: "FlowFuse UNS Workflow" }
 
   - type: features
     background: indigo
-    heading: "The FlowFuse !!Advantage!!"
+    heading: "The FlowFuse <span class='text-red-600'>Advantage</span>"
     items:
       - { title: "Built-in adaptation layer", text: "Leverage FlowFuse's low-code platform to transform and make your data available for UNS." }
       - { title: "End-to-end UNS platform", text: "Everything you need to connect, manage, visualize and analyze your data in one place." }
diff --git a/nuxt/lib/rich-text.mjs b/nuxt/lib/rich-text.mjs
deleted file mode 100644
index 2a5b9c656b..0000000000
--- a/nuxt/lib/rich-text.mjs
+++ /dev/null
@@ -1,30 +0,0 @@
-// Renders one line of page copy authored in YAML into HTML. Kept free of Nuxt and Vue
-// imports so it can be unit tested with `node --test`.
-//
-// The use-case pages keep their copy in content/use-cases/*.yml, and that copy carries
-// the same few pieces of markup the hand-written pages used to write as template HTML:
-// a coloured accent inside a heading, an inline link, a bold run, a forced line break.
-// It is escaped first, exactly like BlogFaq's answers (lib/faq-answer.mjs supplies the
-// link, bold and italic rules), so a YAML string cannot reintroduce arbitrary markup.
-//
-//   [label](url)   inline link, http(s) or site-absolute only
-//   **bold**       <strong>
-//   *italic*       <em>
-//   ==text==       the indigo accent, `text-indigo-600`
-//   !!text!!       the red accent, `text-red-600`
-//   newline        <br> (a heading split over two lines)
-import { inline } from './faq-answer.mjs'
-
-// Non-greedy and single-line, so an unclosed marker does not swallow the rest.
-const INDIGO = /==([^=\n]+)==/g
-const RED = /!!([^!\n]+)!!/g
-
-export function richText (text) {
-    if (!text) return ''
-    return inline(String(text).trim())
-        .replace(INDIGO, '<span class="text-indigo-600">$1</span>')
-        .replace(RED, '<span class="text-red-600">$1</span>')
-        // The space after <br> keeps the two lines apart for a screen reader, which reads
-        // straight through a <br> otherwise.
-        .replace(/\s*\n\s*/g, '<br> ')
-}
diff --git a/nuxt/lib/rich-text.test.mjs b/nuxt/lib/rich-text.test.mjs
deleted file mode 100644
index 75db47b563..0000000000
--- a/nuxt/lib/rich-text.test.mjs
+++ /dev/null
@@ -1,47 +0,0 @@
-import { test } from 'node:test'
-import assert from 'node:assert/strict'
-import { richText } from './rich-text.mjs'
-
-test('plain text passes through', () => {
-    assert.equal(richText('FlowFuse for SCADA'), 'FlowFuse for SCADA')
-})
-
-test('empty and missing input render nothing', () => {
-    assert.equal(richText(''), '')
-    assert.equal(richText(undefined), '')
-})
-
-test('accents become coloured spans', () => {
-    assert.equal(
-        richText('The FlowFuse !!Advantage!!'),
-        'The FlowFuse <span class="text-red-600">Advantage</span>'
-    )
-    assert.equal(
-        richText('==Integrate== OT and IT Data'),
-        '<span class="text-indigo-600">Integrate</span> OT and IT Data'
-    )
-})
-
-test('links and bold still work alongside accents', () => {
-    assert.equal(
-        richText('See the [PLC overview](/landing/plc/) for **all** ==protocols=='),
-        'See the <a href="/landing/plc/">PLC overview</a> for <strong>all</strong> <span class="text-indigo-600">protocols</span>'
-    )
-})
-
-test('a newline becomes a line break with a space after it', () => {
-    assert.equal(
-        richText('From Data Source to Application:\n==Streamline Your UNS Workflows=='),
-        'From Data Source to Application:<br> <span class="text-indigo-600">Streamline Your UNS Workflows</span>'
-    )
-})
-
-test('markup in the source is escaped, not rendered', () => {
-    assert.equal(richText('<script>x</script>'), '&lt;script&gt;x&lt;/script&gt;')
-    assert.equal(richText('==<b>x</b>=='), '<span class="text-indigo-600">&lt;b&gt;x&lt;/b&gt;</span>')
-})
-
-test('an unclosed marker is left as text', () => {
-    assert.equal(richText('a == b'), 'a == b')
-    assert.equal(richText('wow!! really'), 'wow!! really')
-})
diff --git a/nuxt/pages/integrations/opcua.vue b/nuxt/pages/integrations/opcua.vue
index ccdc1a1583..c8d93dd621 100644
--- a/nuxt/pages/integrations/opcua.vue
+++ b/nuxt/pages/integrations/opcua.vue
@@ -516,7 +516,7 @@ function toggleFaq (i: number) {
     </div>
 
     <!-- How it works -->
-    <StepList heading="==From OPC UA to insight,== step by step" :steps="steps" />
+    <StepList heading="<span class='text-indigo-600'>From OPC UA to insight,</span> step by step" :steps="steps" />
 
     <!-- FAQ -->
     <div class="w-full bg-indigo-50/50 py-20 md:py-20 px-6">
diff --git a/nuxt/pages/platform/device-agent.vue b/nuxt/pages/platform/device-agent.vue
index 448629983c..df7177ea34 100644
--- a/nuxt/pages/platform/device-agent.vue
+++ b/nuxt/pages/platform/device-agent.vue
@@ -57,7 +57,7 @@ const STEPS = [
         title: 'Install and provision',
         text: [
             'Run the installer on the machine. It installs the required components, registers the machine with your FlowFuse team, and configures the Device Agent as a service so it starts again after a reboot.',
-            'For larger deployments, use [bulk registration options](/docs/device-agent/register/#bulk-registration) to provision multiple devices.',
+            'For larger deployments, use <a href="/docs/device-agent/register/#bulk-registration">bulk registration options</a> to provision multiple devices.',
         ],
     },
     {
@@ -65,7 +65,7 @@ const STEPS = [
         icon: 'i-heroicons-wrench-screwdriver',
         title: 'Build and test against the real hardware',
         text: [
-            'Developer Mode opens that device\'s Node‑RED editor through FlowFuse. Build against the real PLC, sensors, and network, then take a snapshot when the application is ready.',
+            'Developer Mode opens that device\'s <span class="whitespace-nowrap">Node-RED</span> editor through FlowFuse. Build against the real PLC, sensors, and network, then take a snapshot when the application is ready.',
         ],
     },
     {
@@ -74,7 +74,7 @@ const STEPS = [
         title: 'Deploy the version you tested',
         text: [
             'Set that snapshot as the target for one device or a group of hundreds. Devices update to the assigned version and stay there until you assign another target.',
-            'Use [DevOps pipelines](/docs/user/devops-pipelines/) to move changes from development through testing and into production.',
+            'Use <a href="/docs/user/devops-pipelines/">DevOps pipelines</a> to move changes from development through testing and into production.',
         ],
     },
 ]
@@ -240,7 +240,7 @@ const FAQ_DISPLAY = FAQ.map(item => ({
     <!-- How it works -->
     <StepList
         heading="How the Device Agent Works"
-        intro="Three steps take you from a machine sitting on a bench to a Node‑RED application running in production."
+        intro="Three steps take you from a machine sitting on a bench to a <span class='whitespace-nowrap'>Node-RED</span> application running in production."
         :link="{ label: 'Learn how to install the FlowFuse Device Agent', href: '/docs/device-agent/install/overview/' }"
         :steps="STEPS"
     />
diff --git a/nuxt/pages/resources/roi-calculator.vue b/nuxt/pages/resources/roi-calculator.vue
index 9f8bd46198..2a202b6564 100644
--- a/nuxt/pages/resources/roi-calculator.vue
+++ b/nuxt/pages/resources/roi-calculator.vue
@@ -155,7 +155,7 @@ useSeoMeta({
     </section>
 
     <!-- ============================ FAQ ============================ -->
-    <FaqSection :items="faqs" heading="==ROI questions== industrial teams ask" />
+    <FaqSection :items="faqs" heading="<span class='text-indigo-600'>ROI questions</span> industrial teams ask" />
 
     <!-- ============================ CLOSING CTA ============================ -->
     <div class="w-full px-6 pb-16">