diff --git a/.eleventy.js b/.eleventy.js
index 348c8ca69e..43c6881c3c 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -122,8 +122,6 @@ module.exports = function(eleventyConfig) {
     eleventyConfig.addLayoutAlias('default', 'layouts/base.njk');
     eleventyConfig.addLayoutAlias('page', 'layouts/page.njk');
     eleventyConfig.addLayoutAlias('nohero', 'layouts/nohero.njk');
-    eleventyConfig.addLayoutAlias('solution', 'layouts/solution.njk');
-    eleventyConfig.addLayoutAlias('use-case', 'layouts/use-case.njk');
     eleventyConfig.addLayoutAlias('catalog', 'layouts/catalog.njk');
     eleventyConfig.addLayoutAlias('redirect', 'layouts/redirect.njk');
 
diff --git a/nuxt/components/NavIcon.vue b/nuxt/components/NavIcon.vue
index beb9d2389b..fe775da98a 100644
--- a/nuxt/components/NavIcon.vue
+++ b/nuxt/components/NavIcon.vue
@@ -5,9 +5,12 @@
 // carries the sizing class, leaving the file's own <svg> nested inside. This
 // reproduces that exactly, so a given icon key renders identically whichever
 // renderer served the page.
-const props = withDefaults(defineProps<{ name?: string, solid?: boolean }>(), {
+const props = withDefaults(defineProps<{ name?: string, solid?: boolean, size?: 'sm' | 'lg' }>(), {
     name: '',
     solid: false,
+    // `navoption` (nav and footer) wraps icons at ff-icon-sm; `ffIconLg`, which page
+    // content used, is the same wrapper at ff-icon-lg. One prop covers both shortcodes.
+    size: 'sm',
 })
 
 const markup = computed(() => {
@@ -23,8 +26,8 @@ const markup = computed(() => {
 <template>
     <svg
         v-if="markup"
-        class="ff-icon ff-icon-sm"
-        :class="{ 'ff-icon--solid': solid }"
+        class="ff-icon"
+        :class="[`ff-icon-${size}`, { 'ff-icon--solid': solid }]"
         fill="none"
         viewBox="0 0 24 24"
         v-html="markup"
diff --git a/nuxt/components/use-case/AiBuildLayer.vue b/nuxt/components/use-case/AiBuildLayer.vue
new file mode 100644
index 0000000000..6b4207e911
--- /dev/null
+++ b/nuxt/components/use-case/AiBuildLayer.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+// "06 Build it with AI" from layouts/use-case.njk. The .njk wrote its CTA as a raw
+// <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<{
+    block: {
+        heading?: string
+        intro?: string
+        steps?: Array<{ title: string, detail: string }>
+        note?: string
+    }
+    slug: string
+}>()
+
+const capture = useCapture()
+
+function ordinal(index: number) {
+    return String(index + 1).padStart(2, '0')
+}
+</script>
+
+<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>
+      <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">
+        <div v-for="(step, i) in block.steps" :key="step.title" class="rounded-xl bg-white border border-gray-200 p-6 flex flex-col gap-2">
+          <div class="flex items-center gap-2">
+            <UIcon name="i-heroicons-sparkles" class="w-6 h-6 text-indigo-500" />
+            <span class="text-indigo-500 text-xs font-semibold uppercase tracking-widest">Step {{ ordinal(i) }}</span>
+          </div>
+          <h4 class="m-0 text-gray-800">{{ step.title }}</h4>
+          <p class="m-0 text-gray-600 text-sm">{{ step.detail }}</p>
+        </div>
+      </div>
+      <div class="mt-10 flex">
+        <NuxtLink
+            class="ff-btn ff-btn--primary-outlined uppercase"
+            to="/ai/"
+            @click="capture('cta-ai', { position: 'use-case-ai-build-layer', page: props.slug })"
+        >Get started with the Expert</NuxtLink>
+      </div>
+      <p v-if="block.note" class="mt-8 text-sm text-gray-400">{{ block.note }}</p>
+    </div>
+  </div>
+</template>
diff --git a/nuxt/components/use-case/Card.vue b/nuxt/components/use-case/Card.vue
new file mode 100644
index 0000000000..15dfe55f6a
--- /dev/null
+++ b/nuxt/components/use-case/Card.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+// The cross-link card shared by the /use-cases/ listing and components/use-case-links.njk,
+// which rendered identical markup in both places.
+withDefaults(defineProps<{
+    to: string
+    title: string
+    problem?: string
+    label?: string
+}>(), { label: 'View use case' })
+</script>
+
+<template>
+  <NuxtLink :to="to" class="group hover:no-underline flex flex-col gap-3 rounded-xl border border-gray-200 p-6 bg-white hover:border-indigo-300 hover:shadow-sm transition-all">
+    <h3 class="m-0 text-gray-800 group-hover:text-indigo-600 transition-colors">{{ title }}</h3>
+    <p class="m-0 text-gray-600 text-sm flex-grow">{{ problem }}</p>
+    <span class="mt-2 text-indigo-600 text-sm font-semibold flex items-center gap-2">
+      {{ label }}
+      <UIcon name="i-heroicons-arrow-right" class="w-4 h-4" />
+    </span>
+  </NuxtLink>
+</template>
diff --git a/nuxt/components/use-case/ClosingCta.vue b/nuxt/components/use-case/ClosingCta.vue
new file mode 100644
index 0000000000..32f4d479ea
--- /dev/null
+++ b/nuxt/components/use-case/ClosingCta.vue
@@ -0,0 +1,29 @@
+<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
new file mode 100644
index 0000000000..7fb3822190
--- /dev/null
+++ b/nuxt/components/use-case/Comparison.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+// "05 With / without FlowFuse" from layouts/use-case.njk.
+defineProps<{
+    block: {
+        without?: Array<{ title: string, detail: string }>
+        with?: Array<{ title: string, detail: string }>
+    }
+}>()
+</script>
+
+<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>
+      <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>
+          <div class="mt-6 flex flex-col gap-4">
+            <div v-for="row in block.without" :key="row.title" class="bg-white border border-gray-200 rounded-lg p-5 flex items-start gap-4">
+              <UIcon name="i-heroicons-x-mark" class="flex-shrink-0 w-6 h-6 text-red-400 mt-0.5" />
+              <div>
+                <h5 class="m-0 text-gray-800">{{ row.title }}</h5>
+                <p class="m-0 mt-1 text-gray-600 text-sm">{{ row.detail }}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div>
+          <h3 class="text-indigo-600 m-0">With FlowFuse</h3>
+          <div class="mt-6 flex flex-col gap-4">
+            <div v-for="row in block.with" :key="row.title" class="bg-white border border-indigo-100 rounded-lg p-5 flex items-start gap-4">
+              <UIcon name="i-heroicons-check-circle" class="flex-shrink-0 w-6 h-6 text-indigo-500 mt-0.5" />
+              <div>
+                <h5 class="m-0 text-gray-800">{{ row.title }}</h5>
+                <p class="m-0 mt-1 text-gray-600 text-sm">{{ row.detail }}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/nuxt/components/use-case/Competition.vue b/nuxt/components/use-case/Competition.vue
new file mode 100644
index 0000000000..9c47d1eaef
--- /dev/null
+++ b/nuxt/components/use-case/Competition.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+// "04 Why off-the-shelf doesn't work" from layouts/use-case.njk.
+defineProps<{
+    block: {
+        heading: string
+        intro?: string
+        traps?: Array<{ label: string, title: string, detail: string }>
+    }
+}>()
+</script>
+
+<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>
+      <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">
+        <div v-for="trap in block.traps" :key="trap.title" class="rounded-xl bg-gray-50 border border-gray-200 p-6 flex flex-col gap-2">
+          <div class="flex items-center gap-2">
+            <UIcon name="i-heroicons-x-circle" class="w-6 h-6 text-red-400" />
+            <span class="text-red-500 text-xs font-semibold uppercase tracking-widest">{{ trap.label }}</span>
+          </div>
+          <h4 class="m-0 text-gray-800">{{ trap.title }}</h4>
+          <p class="m-0 text-gray-600 text-sm">{{ trap.detail }}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/nuxt/components/use-case/Hero.vue b/nuxt/components/use-case/Hero.vue
new file mode 100644
index 0000000000..e8fb3c78d4
--- /dev/null
+++ b/nuxt/components/use-case/Hero.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+// The hero band from layouts/use-case.njk. Ported verbatim, classes included.
+defineProps<{ title: string, problem?: string }>()
+</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%)]">
+    <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>
+      <div class="mt-10 flex flex-wrap gap-4 justify-center">
+        <CtaBookDemo variant="highlight" position="hero" class="min-h-[40px]" />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/nuxt/components/use-case/IndustryChips.vue b/nuxt/components/use-case/IndustryChips.vue
new file mode 100644
index 0000000000..ed883bf423
--- /dev/null
+++ b/nuxt/components/use-case/IndustryChips.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+// components/use-case-chips.njk. The slug -> label map mirrors the Use Cases Asana
+// project fields, which are its source of truth.
+defineProps<{ industries?: string[] }>()
+
+const INDUSTRY_LABELS: Record<string, string> = {
+    'automotive': 'Automotive',
+    'food-beverage': 'Food & Beverage',
+    'life-sciences': 'Life Sciences',
+    'aviation-aerospace': 'Aviation & Aerospace',
+    'aerospace-components': 'Aerospace Components',
+    'renewables': 'Renewables',
+    'semiconductors': 'Semiconductors',
+    'electronics-appliances': 'Electronics & Appliances',
+}
+</script>
+
+<template>
+  <div v-if="industries?.length" class="w-full px-6 py-10 bg-gray-50 border-y border-gray-100">
+    <div class="max-w-screen-lg mx-auto grid grid-cols-1 sm:grid-cols-[12rem_1fr] gap-x-8 gap-y-4 items-baseline">
+      <span class="uppercase text-xs font-semibold text-gray-400 tracking-widest">Common in these industries</span>
+      <p class="m-0 text-gray-700">
+        <template v-for="(slug, i) in industries" :key="slug">
+          <NuxtLink :to="`/industries/${slug}/`" class="text-indigo-600 hover:text-indigo-800 font-medium">{{ INDUSTRY_LABELS[slug] || slug }}</NuxtLink><template v-if="i < industries.length - 1">, </template>
+        </template>
+        <span class="text-gray-400"> · </span> <NuxtLink to="/industries/" class="text-gray-500 hover:text-indigo-600 text-sm">all industries</NuxtLink>
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/nuxt/components/use-case/Links.vue b/nuxt/components/use-case/Links.vue
new file mode 100644
index 0000000000..92662b9992
--- /dev/null
+++ b/nuxt/components/use-case/Links.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+// components/use-case-links.njk: cross-link cards whose copy is read from each use-case's
+// own definition, so a title or problem line is written once. The .njk looped the whole
+// collection per slug to preserve the caller's order; a lookup does the same thing here.
+const props = defineProps<{ slugs: string[] }>()
+
+const { data: all } = await useAsyncData('use-case-links', () =>
+    queryCollection('useCases').select('slug', 'title', 'problem').all()
+)
+
+const cards = computed(() => {
+    const bySlug = new Map((all.value || []).map(uc => [uc.slug, uc]))
+    return props.slugs.map(slug => bySlug.get(slug)).filter(Boolean)
+})
+</script>
+
+<template>
+  <div v-if="cards.length" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mt-10">
+    <UseCaseCard
+        v-for="card in cards"
+        :key="card.slug"
+        :to="`/use-cases/${card.slug}/`"
+        :title="card.title"
+        :problem="card.problem"
+    />
+  </div>
+</template>
diff --git a/nuxt/components/use-case/Outcomes.vue b/nuxt/components/use-case/Outcomes.vue
new file mode 100644
index 0000000000..5fcaee08b7
--- /dev/null
+++ b/nuxt/components/use-case/Outcomes.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+// "02 Outcome first" from layouts/use-case.njk.
+defineProps<{
+    block: {
+        heading: string
+        intro?: string
+        dimensions?: Array<{ label: string, title: string, detail: string }>
+    }
+}>()
+</script>
+
+<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>
+      <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">
+        <div v-for="dim in block.dimensions" :key="dim.title" class="rounded-xl bg-white border border-gray-200 p-6 flex flex-col gap-2">
+          <span class="text-indigo-500 text-xs font-semibold uppercase tracking-widest">{{ dim.label }}</span>
+          <h4 class="m-0 text-gray-800">{{ dim.title }}</h4>
+          <p class="m-0 text-gray-600 text-sm">{{ dim.detail }}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/nuxt/components/use-case/Pain.vue b/nuxt/components/use-case/Pain.vue
new file mode 100644
index 0000000000..8ee0230f17
--- /dev/null
+++ b/nuxt/components/use-case/Pain.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+// "01 Customer pain" from layouts/use-case.njk.
+// 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<{
+    block: {
+        heading: string
+        intro?: string[]
+        cards?: Array<{ icon?: string, title: string, detail: string }>
+    }
+}>()
+</script>
+
+<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>
+      <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>
+      </div>
+      <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mt-12">
+        <div v-for="card in block.cards" :key="card.title" class="rounded-xl bg-gray-50 border border-gray-200 p-6 flex flex-col gap-3">
+          <div class="w-9 h-9 bg-white rounded-lg border border-gray-200 flex items-center justify-center text-red-500">
+            <UIcon v-if="card.icon" :name="card.icon" class="w-5 h-5" />
+          </div>
+          <h4 class="m-0 text-gray-800">{{ card.title }}</h4>
+          <p class="m-0 text-gray-600 text-sm">{{ card.detail }}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/nuxt/components/use-case/SectionNav.vue b/nuxt/components/use-case/SectionNav.vue
new file mode 100644
index 0000000000..1c640dd2ab
--- /dev/null
+++ b/nuxt/components/use-case/SectionNav.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+// The sticky in-page nav from layouts/use-case.njk. The .njk built its item list by
+// testing each block for existence in turn; the renderer passes the resolved list here.
+defineProps<{ items: Array<{ id: string, label: string }> }>()
+
+function ordinal(index: number) {
+    return String(index + 1).padStart(2, '0')
+}
+</script>
+
+<template>
+  <nav v-if="items.length" class="sticky top-0 z-30 w-full bg-white/90 backdrop-blur border-y border-gray-100">
+    <div class="max-w-screen-lg mx-auto px-6">
+      <ul class="flex gap-1 sm:gap-2 overflow-x-auto list-none m-0 p-0 py-2 text-sm">
+        <li v-for="(item, i) in items" :key="item.id" class="flex-shrink-0">
+          <a :href="`#${item.id}`" class="flex items-center gap-2 px-3 py-1.5 rounded-full text-gray-500 hover:text-indigo-600 hover:bg-indigo-50 transition-colors">
+            <span class="font-semibold text-indigo-400">{{ ordinal(i) }}</span>
+            <span class="whitespace-nowrap">{{ item.label }}</span>
+          </a>
+        </li>
+      </ul>
+    </div>
+  </nav>
+</template>
diff --git a/nuxt/components/use-case/SolutionHero.vue b/nuxt/components/use-case/SolutionHero.vue
new file mode 100644
index 0000000000..ae069a8b85
--- /dev/null
+++ b/nuxt/components/use-case/SolutionHero.vue
@@ -0,0 +1,31 @@
+<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
new file mode 100644
index 0000000000..501dc3e801
--- /dev/null
+++ b/nuxt/components/use-case/WhyItMatters.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+// "03 Why this is important" from layouts/use-case.njk.
+defineProps<{
+    block: {
+        heading: string
+        intro?: string
+        points?: Array<{ title: string, detail: string }>
+    }
+}>()
+
+function ordinal(index: number) {
+    return String(index + 1).padStart(2, '0')
+}
+</script>
+
+<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>
+      <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">
+        <div v-for="(point, i) in block.points" :key="point.title" class="rounded-xl border border-indigo-400/40 bg-indigo-950/30 p-6 flex gap-4">
+          <span class="text-indigo-300 text-2xl font-semibold leading-none">{{ ordinal(i) }}</span>
+          <div>
+            <h4 class="text-white m-0">{{ point.title }}</h4>
+            <p class="text-indigo-100 font-light m-0 mt-1 text-sm">{{ point.detail }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/nuxt/content.config.ts b/nuxt/content.config.ts
index b433e940da..a7ad8765f6 100644
--- a/nuxt/content.config.ts
+++ b/nuxt/content.config.ts
@@ -185,9 +185,11 @@ export default defineContentConfig({
                 hubspot: z.object({
                     formId: z.string(),
                 }),
-                // Raw frontmatter still writes this as "meta:" - the content:file:beforeParse
-                // hook in nuxt.config.ts rewrites it to "structuredData:" before parsing, same
-                // shim the blog collection uses, so existing story files don't need editing.
+                // Story frontmatter writes "structuredData:" directly, unlike the blog and
+                // webinars, whose files still say "meta:" and go through the rewrite hook in
+                // nuxt.config.ts. The name matters either way: `meta` is reserved by
+                // @nuxt/content (it holds the <!--more--> excerpt) and a collection that
+                // declares its own `meta` field silently loses everything under it.
                 structuredData: z.object({
                     // Falls back to "Frequently Asked Questions" (the blog's fixed heading)
                     // when unset - only set this when a story wants its own FAQ heading.
@@ -427,6 +429,79 @@ 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.
+        useCases: defineCollection({
+            type: 'data',
+            source: 'use-cases/*.yml',
+            schema: z.object({
+                slug: z.string(),
+                title: z.string(),
+                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(),
+                }).optional(),
+                // Industry lens slugs, rendered as the context band near the page foot.
+                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(),
+            })
+        }),
         ebooks: defineCollection({
             type: 'page',
             source: 'ebooks/*.md',
diff --git a/nuxt/content/use-cases/data-integration.yml b/nuxt/content/use-cases/data-integration.yml
new file mode 100644
index 0000000000..0f1f6d43fd
--- /dev/null
+++ b/nuxt/content/use-cases/data-integration.yml
@@ -0,0 +1,7 @@
+# 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.
+slug: data-integration
+title: "FlowFuse for Data Integration"
+problem: "Collect, transform, and route data from any industrial source to any destination, without writing integration code from scratch."
diff --git a/nuxt/content/use-cases/edge-connectivity.yml b/nuxt/content/use-cases/edge-connectivity.yml
new file mode 100644
index 0000000000..241b3e644e
--- /dev/null
+++ b/nuxt/content/use-cases/edge-connectivity.yml
@@ -0,0 +1,7 @@
+# Listing metadata only. The page itself is pages/use-cases/edge-connectivity.vue - this one
+# had a real markup body in src/use-cases/edge-connectivity.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.
+slug: edge-connectivity
+title: "FlowFuse for Edge Connectivity"
+problem: "Deploy and manage Node-RED instances on edge hardware at scale, from a single pane of glass, without touching each device."
diff --git a/nuxt/content/use-cases/it-ot-middleware.yml b/nuxt/content/use-cases/it-ot-middleware.yml
new file mode 100644
index 0000000000..0bf10cf297
--- /dev/null
+++ b/nuxt/content/use-cases/it-ot-middleware.yml
@@ -0,0 +1,7 @@
+# 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.
+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."
diff --git a/nuxt/content/use-cases/mes.yml b/nuxt/content/use-cases/mes.yml
new file mode 100644
index 0000000000..4b0064b2ea
--- /dev/null
+++ b/nuxt/content/use-cases/mes.yml
@@ -0,0 +1,7 @@
+# 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.
+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."
diff --git a/src/use-cases/production-monitoring.njk b/nuxt/content/use-cases/production-monitoring.yml
similarity index 95%
rename from src/use-cases/production-monitoring.njk
rename to nuxt/content/use-cases/production-monitoring.yml
index 5086a4a875..2ae81d33da 100644
--- a/src/use-cases/production-monitoring.njk
+++ b/nuxt/content/use-cases/production-monitoring.yml
@@ -1,6 +1,9 @@
----
+# 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/.
+slug: production-monitoring
 title: "Production Monitoring"
-meta:
+seoMeta:
   title: "Production Monitoring | Use Cases | FlowFuse"
   description: "Real-time visibility into what your production lines are actually doing. Build the monitoring app your operation needs with FlowFuse and Node-RED: connect any protocol, deploy at the edge or in the cloud, and roll out across sites."
 problem: "Your operation is running. You just can't see it clearly enough, until something breaks."
@@ -25,16 +28,16 @@ customerPain:
     - "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: "clock"
+    - 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: "clip-list"
+    - 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: "link-slash"
+    - 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: "chart"
+    - 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."
 
@@ -116,4 +119,3 @@ comparison:
       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."
----
diff --git a/nuxt/content/use-cases/scada.yml b/nuxt/content/use-cases/scada.yml
new file mode 100644
index 0000000000..621fb40ae7
--- /dev/null
+++ b/nuxt/content/use-cases/scada.yml
@@ -0,0 +1,7 @@
+# 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.
+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."
diff --git a/src/use-cases/shop-floor-communication.njk b/nuxt/content/use-cases/shop-floor-communication.yml
similarity index 92%
rename from src/use-cases/shop-floor-communication.njk
rename to nuxt/content/use-cases/shop-floor-communication.yml
index 070eede175..fe2c5308e8 100644
--- a/src/use-cases/shop-floor-communication.njk
+++ b/nuxt/content/use-cases/shop-floor-communication.yml
@@ -1,6 +1,9 @@
----
+# 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/.
+slug: shop-floor-communication
 title: "Shop Floor Communication"
-meta:
+seoMeta:
   title: "Shop Floor Communication | Use Cases | FlowFuse"
   description: "Andon, alerts and escalations that reach the right people in seconds: from machine events to team channels, displays and phones. Built on Node-RED, managed with FlowFuse."
 problem: "The line stopped four minutes ago. The person who can fix it will find out when someone walks over."
@@ -14,16 +17,16 @@ customerPain:
     - "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: "bell-alert"
+    - icon: "i-heroicons-bell-alert"
       title: "Alarms without an audience"
       detail: "Stack lights and local alarms help only whoever happens to be nearby."
-    - icon: "chat-bubble-left-right-sm"
+    - 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: "arrow-path"
+    - 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: "clock"
+    - icon: "i-heroicons-clock"
       title: "Response time is invisible"
       detail: "Without timestamps from event to acknowledgment, response cannot be measured or improved."
 
@@ -96,4 +99,3 @@ aiBuildLayer:
 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."
----
diff --git a/nuxt/content/use-cases/uns.yml b/nuxt/content/use-cases/uns.yml
new file mode 100644
index 0000000000..11e7ee293c
--- /dev/null
+++ b/nuxt/content/use-cases/uns.yml
@@ -0,0 +1,7 @@
+# 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.
+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."
diff --git a/nuxt/nuxt.config.ts b/nuxt/nuxt.config.ts
index 88499a6c34..5b7dd6e6e6 100644
--- a/nuxt/nuxt.config.ts
+++ b/nuxt/nuxt.config.ts
@@ -74,6 +74,17 @@ function readEntries (dir: string): Array<Record<string, any>> {
         .map(file => parseYaml(readFileSync(join(dir, file), 'utf8')))
 }
 
+// The two operational use-cases render through pages/use-cases/[slug].vue, so their
+// routes are not discoverable from the page tree. They are the entries carrying `values:`;
+// the rest of the collection is listing metadata for pages that have their own .vue file.
+function collectUseCaseRoutes (dir: string): string[] {
+    return readdirSync(dir)
+        .filter(file => file.endsWith('.yml'))
+        .map(file => parseYaml(readFileSync(join(dir, file), 'utf8')))
+        .filter(entry => Array.isArray(entry.values) && entry.values.length)
+        .map(entry => `/use-cases/${entry.slug}/`)
+}
+
 // The product tier pages (/product/[tier]/) are a `data` collection (see content.config.ts),
 // so their routes aren't discoverable from @nuxt/content page paths either. Derive them from
 // each file's `tierId` field rather than the filename, since that's the field the page route
@@ -195,9 +206,9 @@ export default defineNuxtConfig({
     },
 
     // Only covers content already served by Nuxt. The handbook is deliberately excluded
-    // (internal company content, not product documentation) - see README.md. Everything
-    // still on the legacy Eleventy site (customer-stories, use-cases, platform, etc.) isn't
-    // visible to @nuxt/content, so it's absent here too until those pages are migrated.
+    // (internal company content, not product documentation) - see README.md. Anything left
+    // on the legacy Eleventy site is not visible to @nuxt/content, so it is absent here too
+    // until it migrates - the named examples are gone now, so the list is not kept here.
     llms: {
         domain: site.baseURL,
         title: 'FlowFuse',
@@ -299,9 +310,6 @@ export default defineNuxtConfig({
             // pages left sitemap-legacy.xml when their .njk files were deleted, so without
             // this they are in neither sitemap.
             ...collectSlugRoutes(join(__dirname, 'content/vs'), '/vs').map(loc => ({ loc })),
-        ],
-        urls: [
-            ...blogAuthorRoutes.map(loc => ({ loc, priority: 0.6 })),
             // /landing/<slug>/ is one [slug].vue over a `data` collection, so the module's
             // static-route discovery cannot see it, and content-urls.get.ts cannot either
             // (it keys on `path`, which a data collection has no equivalent of). Without
@@ -310,6 +318,13 @@ export default defineNuxtConfig({
             ...readEntries(join(__dirname, 'content/landing'))
                 .filter(entry => !entry.skipIndex)
                 .map(entry => ({ loc: `/landing/${entry.slug}/` })),
+            // The two operational use-cases render through pages/use-cases/[slug].vue over a
+            // `data` collection, so the module's static-route discovery cannot see them, and
+            // content-urls.get.ts cannot either (it keys on `path`, which a data collection
+            // has no equivalent of). Without this they are in neither sitemap, having left
+            // sitemap-legacy.xml when their .njk files were deleted. The six architecture
+            // pages have their own .vue files and are discovered normally.
+            ...collectUseCaseRoutes(join(__dirname, 'content/use-cases')).map(loc => ({ loc })),
         ],
         exclude: ['/_studio/**', '/api/**'],
     },
@@ -477,6 +492,13 @@ export default defineNuxtConfig({
                     '/landing/tulip/',
                     '/landing/plc/',
                     '/landing/factory-efficiency/',
+                    // The six architecture pages are .vue files with no listing that links to them all, so the crawler never reaches them.
+                    '/use-cases/data-integration/',
+                    '/use-cases/edge-connectivity/',
+                    '/use-cases/it-ot-middleware/',
+                    '/use-cases/mes/',
+                    '/use-cases/scada/',
+                    '/use-cases/uns/',
                     // /ai is only linked from 11ty-generated HTML (nav, homepage), which the
                     // Nuxt prerender crawler never parses, so it has to be listed explicitly
                     // or the route is missing from nuxt/dist and every link to it breaks.
@@ -491,6 +513,12 @@ export default defineNuxtConfig({
                     '/about/',
 
                     ...collectSlugRoutes(join(__dirname, 'content/landing'), '/landing'),
+
+                    // /use-cases/ plus the two entries served by pages/use-cases/[slug].vue.
+                    // The six architecture pages are their own .vue files, so Nuxt finds
+                    // those itself; only the dynamic route needs enumerating.
+                    '/use-cases/',
+                    ...collectUseCaseRoutes(join(__dirname, 'content/use-cases')),
                     // Without this, @nuxtjs/sitemap only bakes /sitemap.xml statically when
                     // isNuxtGenerate() is true, which checks for nitro.static/preset "static" -
                     // the netlify preset here is hybrid (prerendered pages + a fallback
diff --git a/nuxt/pages/use-cases/[slug].vue b/nuxt/pages/use-cases/[slug].vue
new file mode 100644
index 0000000000..bff714a98b
--- /dev/null
+++ b/nuxt/pages/use-cases/[slug].vue
@@ -0,0 +1,76 @@
+<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.
+const route = useRoute()
+const slug = String(route.params.slug)
+
+const { data: page } = await useAsyncData(`use-case-${slug}`, () =>
+    queryCollection('useCases').where('slug', '=', slug).first()
+)
+
+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 }>
+})
+
+const seoTitle = computed(() => page.value?.seoMeta?.title || page.value?.title)
+const seoDescription = computed(() => page.value?.seoMeta?.description || page.value?.problem || '')
+
+useSeoMeta({
+    title: seoTitle,
+    description: seoDescription,
+    ogDescription: seoDescription,
+    ogUrl: computed(() => `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" />
+
+    <!-- "Common in these industries" is hidden until the new industry pages are live.
+         The component and the `industries:` field in the content stay in place, so
+         restoring it is putting this one line back:
+         <UseCaseIndustryChips :industries="page.industries" /> -->
+
+    <UseCaseClosingCta
+        :heading="page.closingCta?.heading"
+        :description="page.closingCta?.description"
+    />
+  </div>
+</template>
diff --git a/nuxt/pages/use-cases/data-integration.vue b/nuxt/pages/use-cases/data-integration.vue
new file mode 100644
index 0000000000..ae6ec1a011
--- /dev/null
+++ b/nuxt/pages/use-cases/data-integration.vue
@@ -0,0 +1,145 @@
+<script setup lang="ts">
+// Ported from src/use-cases/data-integration.njk (11ty), which this replaces. Same page,
+// same copy, same classes from src/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/edge-connectivity.vue b/nuxt/pages/use-cases/edge-connectivity.vue
new file mode 100644
index 0000000000..71fa8ca74f
--- /dev/null
+++ b/nuxt/pages/use-cases/edge-connectivity.vue
@@ -0,0 +1,115 @@
+<script setup lang="ts">
+// Ported from src/use-cases/edge-connectivity.njk (11ty), which this replaces. Same page,
+// same copy, same classes from src/css/style.css.
+//
+// What the port changes on purpose:
+//  - layouts/solution.njk's hero becomes <UseCaseSolutionHero>. Its `description` was an
+//    HTML fragment in frontmatter rendered with `| safe`; it is ordinary template markup
+//    in the slot here, so no page interpolates raw HTML.
+//  - The hand-written <lite-youtube> element becomes <LiteYoutube>, shared with the blog.
+//  - components/use-case-links.njk becomes <UseCaseLinks>, reading the same use-case
+//    definitions so the card copy still lives in one place.
+//  - ctaContactUs becomes <CtaContactUs>, keeping the registry's copy and event.
+const FEATURES = [
+    {
+        headingLead: 'Scaleable',
+        headingRest: ' Edge Connectivity',
+        body: 'Efficiently connect and manage vast fleets of edge devices with FlowFuse. Our device agent ensures synchronized updates across all devices, while our central console provides seamless status monitoring and reliable connectivity management.',
+    },
+    {
+        headingLead: 'Effortless',
+        headingRest: ' Data Streaming',
+        body: 'FlowFuse makes data streaming to the cloud painless, removing the hassle of network configurations. Our custom nodes facilitate effortless MQTT connection between the device and the FlowFuse platform, removing the need for complex setup. No configuration of IP address, domain name, certificates or firewalls required.',
+    },
+    {
+        headingLead: 'Consistent Deployment',
+        headingRest: ' Assurance',
+        body: 'Create and distribute consistent application snapshots across your devices with FlowFuse. Our central console ensures uniform deployment, maintaining version consistency across your network.',
+    },
+    {
+        headingPrefix: 'Rapid ',
+        headingLead: 'Security Deployment',
+        body: 'FlowFuse provides expert support for your deployments, ensuring systems are consistently up-to-date and operationally continuous, backed by our professional guidance.',
+    },
+    {
+        headingPrefix: 'Remote ',
+        headingLead: ' Troubleshooting',
+        body: "Identify and resolve production issues remotely with FlowFuse's debugging capabilities. This feature significantly eases troubleshooting of instances on devices.",
+    },
+    {
+        headingLead: 'Easy',
+        headingRest: ' Onboarding',
+        body: 'Easily integrate new devices into FlowFuse through our administrative interface or automated processes. This allows for hassle-free connection of multiple devices without manual intervention.',
+    },
+]
+
+useSeoMeta({
+    title: 'FlowFuse for Edge Connectivity',
+    description: 'Deploy and manage Node-RED instances on edge hardware at scale, from a single pane of glass, without touching each device.',
+    ogImage: 'https://flowfuse.com/images/solutions/og-solutions-edge-connectivity.jpg',
+    ogUrl: 'https://flowfuse.com/use-cases/edge-connectivity/',
+    twitterSite: '@FlowFuseinc',
+})
+</script>
+
+<template>
+  <div class="w-full">
+    <UseCaseSolutionHero title="FlowFuse for Edge Connectivity" hero-img="/images/pictograms/edge_blue.png">
+      <p>
+        FlowFuse simplifies the management of deployments to edge devices in manufacturing, from equipment to
+        <NuxtLink to="/landing/plc/">PLCs</NuxtLink>. Our platform ensures secure and reliable handling of large-scale
+        deployments, providing seamless edge connectivity solutions.
+      </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">
+        <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.headingLead" class="text-left self-start">
+              <h3>
+                <template v-if="feature.headingPrefix">{{ feature.headingPrefix }}</template><span class="text-indigo-600">{{ feature.headingLead }}</span><template v-if="feature.headingRest">{{ feature.headingRest }}</template>
+              </h3>
+              <div><p>{{ feature.body }}</p></div>
+            </div>
+          </div>
+        </div>
+        <div class="w-full max-w-screen-lg m-auto pb-16 px-6">
+          <div class="flex justify-center items-center md:w-full">
+            <LiteYoutube
+                videoid="dvTgCBXCa5A"
+                title="FlowFuse edge connectivity webinar"
+                class="aspect-video bg-cover bg-top bg-no-repeat border-2 border-black rounded-md drop-shadow-xl"
+                style="background-image: url('/images/solutions/webinar-july-2023_video_tile.jpg'); width: 1080px; background-repeat: no-repeat;"
+            />
+          </div>
+        </div>
+      </div>
+
+      <div class="w-full py-16 sm:py-20 px-6 bg-gray-50 border-y border-gray-100">
+        <div class="max-w-screen-lg mx-auto">
+          <h2 class="max-md:text-center">What teams build <span class="text-indigo-600">at the edge</span></h2>
+          <UseCaseLinks :slugs="['shop-floor-communication', 'production-monitoring']" />
+          <div class="mt-8 flex justify-center">
+            <NuxtLink class="ff-btn ff-btn--primary-outlined uppercase" to="/docs/device-agent/install/">Get the Device Agent</NuxtLink>
+          </div>
+        </div>
+      </div>
+
+      <div class="w-full px-6 pb-28 pt-12 md:px-0">
+        <div class="content max-w-screen-lg m-auto text-center border-2 rounded-lg py-6 px-20 bg-indigo-50 border-indigo-100">
+          <p class="text-2xl leading-10 mt-0 mb-9">Ready to learn more?</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
new file mode 100644
index 0000000000..0a7ca0937a
--- /dev/null
+++ b/nuxt/pages/use-cases/index.vue
@@ -0,0 +1,97 @@
+<script setup lang="ts">
+// Ported from src/use-cases.njk (11ty), which this replaces. Same page, same copy, same
+// classes from src/css/style.css.
+//
+// What the port changes on purpose:
+//  - collections["use-case"] becomes the `useCases` data collection. Whether an entry
+//    lands under "Operational use cases" or "By architecture" still turns on whether it
+//    declares `values:`, which is the same test the .njk made.
+//  - 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.
+const { data: useCases } = await useAsyncData('use-cases-listing', () =>
+    queryCollection('useCases').select('slug', 'title', 'problem', 'values').all()
+)
+
+// `| sort(false, true, "data.title")`: case-insensitive, ascending.
+const byTitle = (a: { title: string }, b: { title: string }) =>
+    a.title.toLowerCase().localeCompare(b.title.toLowerCase())
+
+const operational = computed(() =>
+    (useCases.value || []).filter(uc => uc.values?.length).sort(byTitle)
+)
+const architectures = computed(() =>
+    (useCases.value || []).filter(uc => !uc.values?.length).sort(byTitle)
+)
+
+useSeoMeta({
+    title: 'Use Cases',
+    description: 'Generic operational workflow patterns for industrial teams. Turn events into action with FlowFuse. Placeholder skeleton hub.',
+    ogUrl: 'https://flowfuse.com/use-cases/',
+    twitterSite: '@FlowFuseinc',
+})
+</script>
+
+<template>
+  <div class="w-full">
+    <div 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 cases</p>
+        <h1 class="m-auto max-w-3xl font-medium">Turn industrial events into <span class="text-indigo-600">action</span></h1>
+        <p class="mt-6 max-w-2xl mx-auto text-lg text-gray-600">
+          Operational workflow patterns that follow Event, Decision, Action. Explore how each one is operationalized
+          with FlowFuse.
+        </p>
+        <div class="mt-10 flex flex-wrap gap-4 justify-center">
+          <CtaContactUs variant="highlight" position="hero" class="min-h-[40px]" />
+        </div>
+      </div>
+    </div>
+
+    <div class="w-full py-16 sm:py-24 px-6 bg-white">
+      <div class="max-w-screen-lg mx-auto">
+        <h2 class="max-md:text-center">Operational <span class="text-indigo-600">use cases</span></h2>
+        <p class="mt-4 max-w-3xl text-gray-600">
+          Problems operations teams own, and how they are solved with FlowFuse. Each use case is also reachable by
+          <NuxtLink to="/industries/">industry</NuxtLink>.
+        </p>
+        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mt-10">
+          <UseCaseCard
+              v-for="uc in operational"
+              :key="uc.slug"
+              :to="`/use-cases/${uc.slug}/`"
+              :title="uc.title"
+              :problem="uc.problem"
+          />
+        </div>
+      </div>
+    </div>
+
+    <div class="w-full py-16 sm:py-24 px-6 bg-gray-50 border-y border-gray-100">
+      <div class="max-w-screen-lg mx-auto">
+        <h2 class="max-md:text-center">By <span class="text-indigo-600">architecture</span></h2>
+        <p class="mt-4 max-w-3xl text-gray-600">
+          How FlowFuse is deployed and where it sits in your stack. Architectures are the technical evaluator's entry
+          point; the use cases above are what gets built on them.
+        </p>
+        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mt-10">
+          <UseCaseCard
+              v-for="uc in architectures"
+              :key="uc.slug"
+              :to="`/use-cases/${uc.slug}/`"
+              :title="uc.title"
+              :problem="uc.problem"
+              label="View architecture"
+          />
+        </div>
+      </div>
+    </div>
+
+    <UseCaseClosingCta
+        heading="See it on your workflow"
+        description="Talk to an expert, or get started with FlowFuse today."
+        lead="contact-us"
+    />
+  </div>
+</template>
diff --git a/nuxt/pages/use-cases/it-ot-middleware.vue b/nuxt/pages/use-cases/it-ot-middleware.vue
new file mode 100644
index 0000000000..2a4556875c
--- /dev/null
+++ b/nuxt/pages/use-cases/it-ot-middleware.vue
@@ -0,0 +1,241 @@
+<script setup lang="ts">
+// Ported from src/use-cases/it-ot-middleware.njk (11ty), which this replaces. Same page,
+// same copy, same classes from src/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 sections still on 11ty. They stay where they are and
+//    move wholesale at teardown; the page's own art is copied into nuxt/public/images/,
+//    which is where the already-ported pages keep theirs.
+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
new file mode 100644
index 0000000000..af7d01424e
--- /dev/null
+++ b/nuxt/pages/use-cases/mes.vue
@@ -0,0 +1,149 @@
+<script setup lang="ts">
+// Ported from src/use-cases/mes.njk (11ty), which this replaces. Same page, same copy,
+// same classes from src/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/scada.vue b/nuxt/pages/use-cases/scada.vue
new file mode 100644
index 0000000000..1ae35f5022
--- /dev/null
+++ b/nuxt/pages/use-cases/scada.vue
@@ -0,0 +1,132 @@
+<script setup lang="ts">
+// Ported from src/use-cases/scada.njk (11ty), which this replaces. Same page, same copy,
+// same classes from src/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
new file mode 100644
index 0000000000..1be9248e75
--- /dev/null
+++ b/nuxt/pages/use-cases/uns.vue
@@ -0,0 +1,182 @@
+<script setup lang="ts">
+// Ported from src/use-cases/uns.njk (11ty), which this replaces. Same page, same copy,
+// same classes from src/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 sections still on 11ty. They stay where they are and
+//    move wholesale at teardown; the page's own art is copied into nuxt/public/images/,
+//    which is where the already-ported pages keep theirs.
+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>
diff --git a/nuxt/public/images/home/connect_graphic.png b/nuxt/public/images/home/connect_graphic.png
new file mode 100644
index 0000000000..384d4e30f1
Binary files /dev/null and b/nuxt/public/images/home/connect_graphic.png differ
diff --git a/nuxt/public/images/pictograms/bias_for_action_blue.png b/nuxt/public/images/pictograms/bias_for_action_blue.png
new file mode 100644
index 0000000000..127dbd23d1
Binary files /dev/null and b/nuxt/public/images/pictograms/bias_for_action_blue.png differ
diff --git a/nuxt/public/images/pictograms/data_integration_blue.png b/nuxt/public/images/pictograms/data_integration_blue.png
new file mode 100644
index 0000000000..40f7a4818c
Binary files /dev/null and b/nuxt/public/images/pictograms/data_integration_blue.png differ
diff --git a/nuxt/public/images/pictograms/edge_blue.png b/nuxt/public/images/pictograms/edge_blue.png
new file mode 100644
index 0000000000..967f86e152
Binary files /dev/null and b/nuxt/public/images/pictograms/edge_blue.png differ
diff --git a/nuxt/public/images/pictograms/factory_blue.png b/nuxt/public/images/pictograms/factory_blue.png
new file mode 100644
index 0000000000..de5908ff7c
Binary files /dev/null and b/nuxt/public/images/pictograms/factory_blue.png differ
diff --git a/nuxt/public/images/pictograms/node_catalog_blue.png b/nuxt/public/images/pictograms/node_catalog_blue.png
new file mode 100644
index 0000000000..4855425669
Binary files /dev/null and b/nuxt/public/images/pictograms/node_catalog_blue.png differ
diff --git a/nuxt/public/images/pictograms/ticket_blue.png b/nuxt/public/images/pictograms/ticket_blue.png
new file mode 100644
index 0000000000..f44d23eb5c
Binary files /dev/null and b/nuxt/public/images/pictograms/ticket_blue.png differ
diff --git a/nuxt/public/images/solutions/data-integration.png b/nuxt/public/images/solutions/data-integration.png
new file mode 100644
index 0000000000..9959837ffa
Binary files /dev/null and b/nuxt/public/images/solutions/data-integration.png differ
diff --git a/nuxt/public/images/solutions/ff-uns.png b/nuxt/public/images/solutions/ff-uns.png
new file mode 100644
index 0000000000..564c26cf16
Binary files /dev/null and b/nuxt/public/images/solutions/ff-uns.png differ
diff --git a/nuxt/public/images/solutions/flowfuse-uns.png b/nuxt/public/images/solutions/flowfuse-uns.png
new file mode 100644
index 0000000000..55cac98171
Binary files /dev/null and b/nuxt/public/images/solutions/flowfuse-uns.png differ
diff --git a/nuxt/public/images/solutions/markitechture-manufacturing.png b/nuxt/public/images/solutions/markitechture-manufacturing.png
new file mode 100644
index 0000000000..d23484184b
Binary files /dev/null and b/nuxt/public/images/solutions/markitechture-manufacturing.png differ
diff --git a/nuxt/public/images/solutions/mes-hero.png b/nuxt/public/images/solutions/mes-hero.png
new file mode 100644
index 0000000000..2fab328fa0
Binary files /dev/null and b/nuxt/public/images/solutions/mes-hero.png differ
diff --git a/nuxt/public/images/solutions/oee-dashboard--1.png b/nuxt/public/images/solutions/oee-dashboard--1.png
new file mode 100644
index 0000000000..5c15c26d9d
Binary files /dev/null and b/nuxt/public/images/solutions/oee-dashboard--1.png differ
diff --git a/nuxt/public/images/solutions/scada-hero.png b/nuxt/public/images/solutions/scada-hero.png
new file mode 100644
index 0000000000..99b50afd38
Binary files /dev/null and b/nuxt/public/images/solutions/scada-hero.png differ
diff --git a/nuxt/public/images/solutions/scada-how-diagram.png b/nuxt/public/images/solutions/scada-how-diagram.png
new file mode 100644
index 0000000000..26120a47e3
Binary files /dev/null and b/nuxt/public/images/solutions/scada-how-diagram.png differ
diff --git a/nuxt/public/images/solutions/scada-how-flow.png b/nuxt/public/images/solutions/scada-how-flow.png
new file mode 100644
index 0000000000..1daf7390d3
Binary files /dev/null and b/nuxt/public/images/solutions/scada-how-flow.png differ
diff --git a/nuxt/public/images/solutions/webinar-july-2023_video_tile.jpg b/nuxt/public/images/solutions/webinar-july-2023_video_tile.jpg
new file mode 100644
index 0000000000..e0b22e52ee
Binary files /dev/null and b/nuxt/public/images/solutions/webinar-july-2023_video_tile.jpg differ
diff --git a/nuxt/public/images/stories/abrasive_tech.jpg b/nuxt/public/images/stories/abrasive_tech.jpg
new file mode 100644
index 0000000000..90d2de5e0d
Binary files /dev/null and b/nuxt/public/images/stories/abrasive_tech.jpg differ
diff --git a/nuxt/public/images/stories/large-us-manufacturing.jpg b/nuxt/public/images/stories/large-us-manufacturing.jpg
new file mode 100644
index 0000000000..a6c021a8fa
Binary files /dev/null and b/nuxt/public/images/stories/large-us-manufacturing.jpg differ
diff --git a/nuxt/public/images/stories/stfi-future-textile.jpg b/nuxt/public/images/stories/stfi-future-textile.jpg
new file mode 100644
index 0000000000..445814f098
Binary files /dev/null and b/nuxt/public/images/stories/stfi-future-textile.jpg differ
diff --git a/nuxt/server/middleware/legacy.ts b/nuxt/server/middleware/legacy.ts
index cc1ebec52b..5606284c33 100644
--- a/nuxt/server/middleware/legacy.ts
+++ b/nuxt/server/middleware/legacy.ts
@@ -15,13 +15,12 @@ const NUXT_ROUTE_PREFIXES = ['/integrations/', '/raw/']
 // left once its one referring blog post pointed at /contact-us/ instead) - but they stay
 // listed so their 301s in nuxt/redirects.ts are served by Nitro in dev rather than being
 // proxied to 11ty, which has nothing there either.
-const NUXT_PREFIXES = ['/handbook', '/ebooks', '/whitepaper', '/pricing', '/docs', '/changelog', '/application-guide', '/blog', '/product', '/customer-stories', '/thank-you', '/resources', '/webinars', '/free-consultation', '/vs', '/landing']
+const NUXT_PREFIXES = ['/handbook', '/ebooks', '/whitepaper', '/pricing', '/docs', '/changelog', '/application-guide', '/blog', '/product', '/customer-stories', '/thank-you', '/resources', '/webinars', '/free-consultation', '/vs', '/landing', '/use-cases']
 
 // Top-level routes still on 11ty, not yet ported to Nuxt (everything not listed above
 // already falls through to the 11ty proxy by default). Remove entries here as they migrate:
 // /blueprints, /careers, /community, /events
-// /free-consultation, /industries, /node-red, /partners, /platform,
-// /use-cases, /webinars
+// /free-consultation, /industries, /node-red, /partners, /platform, /webinars
 
 // New pages should never grow that fallback set: nuxt/lib/legacy-pages.test.mjs fails
 // `npm test` if a PR adds a new .njk file under src/ that doesn't already exist on main,
@@ -48,8 +47,8 @@ export default defineEventHandler(async (event) => {
     // proxy them to 11ty in dev even though /changelog and /blog are Nuxt-handled prefixes.
     if (/^\/(changelog|blog)\/\d{4}\/\d{2}\/images\//.test(normalised)) return proxyRequest(event, `http://localhost:8080${path}`)
 
-    // Same story for src/resources/images/** (whitepaper/ebook cover images, referenced
-    // from still-11ty pages like use-cases/uns.njk) - /resources is otherwise a Nuxt prefix.
+    // Same story for src/resources/images/** (whitepaper/ebook cover images whose files
+    // still live in the 11ty tree) - /resources is otherwise a Nuxt prefix.
     if (normalised.startsWith('/resources/images/')) return proxyRequest(event, `http://localhost:8080${path}`)
 
     // Same story for src/landing/images/**: 11ty-owned files that only reach nuxt/public/
@@ -59,6 +58,12 @@ export default defineEventHandler(async (event) => {
         return proxyRequest(event, `http://localhost:8080${path}`)
     }
 
+    // And for src/whitepaper/images/** - the covers these pages link to. /whitepaper is
+    // itself a Nuxt prefix, so without this dev answers from Nuxt and the images 404.
+    if (normalised.startsWith('/whitepaper/images/')) {
+        return proxyRequest(event, `http://localhost:8080${path}`)
+    }
+
     // The documentation below /node-red/ moved into /docs/, and every old URL now 301s
     // from nuxt/redirects-node-red.ts. Those are Nitro route rules, so the request has to
     // reach Nitro in dev rather than being proxied to 11ty, which no longer has the pages.
diff --git a/nuxt/utils/navIcons.ts b/nuxt/utils/navIcons.ts
index 9f41efcf7e..9d981390dc 100644
--- a/nuxt/utils/navIcons.ts
+++ b/nuxt/utils/navIcons.ts
@@ -1,4 +1,5 @@
-// Icon markup for the marketing nav, keyed exactly as src/_data/chrome.json spells it.
+// Icon markup for the marketing nav, keyed exactly as src/_data/chrome.json spells it,
+// plus the handful of keys page content asks for by name through <NavIcon>.
 //
 // These are the same files Eleventy's `navoption` shortcode reads, so both
 // renderers draw the identical glyph from one source. The imports are listed
@@ -23,9 +24,13 @@ import iCertificate from '../../src/_includes/components/icons/certificate.svg?r
 import iChart from '../../src/_includes/components/icons/chart.svg?raw'
 
 import iCloud from '../../src/_includes/components/icons/cloud.svg?raw'
+import iCodeblock from '../../src/_includes/components/icons/codeblock.svg?raw'
 import iChat from '../../src/_includes/components/icons/chat.svg?raw'
 
 import iCubeTransparent from '../../src/_includes/components/icons/cube-transparent.svg?raw'
+import iData from '../../src/_includes/components/icons/data.svg?raw'
+import iDatabase from '../../src/_includes/components/icons/database.svg?raw'
+import iLock from '../../src/_includes/components/icons/lock.svg?raw'
 import iChatBubbleLeftRightSm from '../../src/_includes/components/icons/chat-bubble-left-right-sm.svg?raw'
 import iCheckBadge from '../../src/_includes/components/icons/check-badge.svg?raw'
 import iChip from '../../src/_includes/components/icons/chip.svg?raw'
@@ -80,6 +85,10 @@ export const navIcons: Record<string, string> = {
 
     'cloud': iCloud,
     'cube-transparent': iCubeTransparent,
+    'codeblock': iCodeblock,
+    'data': iData,
+    'database': iDatabase,
+    'lock': iLock,
     'chat-bubble-left-right-sm': iChatBubbleLeftRightSm,
     'check-badge': iCheckBadge,
     'chip': iChip,
diff --git a/src/_includes/components/use-case-chips.njk b/src/_includes/components/use-case-chips.njk
deleted file mode 100644
index 93e8e48e77..0000000000
--- a/src/_includes/components/use-case-chips.njk
+++ /dev/null
@@ -1,30 +0,0 @@
-{# ============================================================
-   USE CASE CONTEXT BAND - labeled links to the industry lens
-   pages. Reads `industries[]` (slugs) from page front-matter.
-   The slug->label maps mirror
-   the Use Cases Asana project fields (source of truth).
-   Rendered near the end of the use-case page, not under the hero.
-   ============================================================ #}
-{% set industryLabels = {
-    "automotive": "Automotive",
-    "food-beverage": "Food & Beverage",
-    "life-sciences": "Life Sciences",
-    "aviation-aerospace": "Aviation & Aerospace",
-    "aerospace-components": "Aerospace Components",
-    "renewables": "Renewables",
-    "semiconductors": "Semiconductors",
-    "electronics-appliances": "Electronics & Appliances"
-} %}
-{% if industries %}
-<div class="w-full px-6 py-10 bg-gray-50 border-y border-gray-100">
-    <div class="max-w-screen-lg mx-auto grid grid-cols-1 sm:grid-cols-[12rem_1fr] gap-x-8 gap-y-4 items-baseline">
-        {% if industries %}
-        <span class="uppercase text-xs font-semibold text-gray-400 tracking-widest">Common in these industries</span>
-        <p class="m-0 text-gray-700">
-            {% for slug in industries %}<a href="/industries/{{ slug }}/" class="text-indigo-600 hover:text-indigo-800 font-medium">{{ industryLabels[slug] or slug }}</a>{% if not loop.last %}, {% endif %}{% endfor %}
-            <span class="text-gray-400">&middot;</span> <a href="/industries/" class="text-gray-500 hover:text-indigo-600 text-sm">all industries</a>
-        </p>
-        {% endif %}
-    </div>
-</div>
-{% endif %}
diff --git a/src/_includes/layouts/solution.njk b/src/_includes/layouts/solution.njk
deleted file mode 100644
index 4e3e6c5fd9..0000000000
--- a/src/_includes/layouts/solution.njk
+++ /dev/null
@@ -1,29 +0,0 @@
----
-layout: layouts/base.njk
-sitemapPriority: 0.8
----
-<!--Hero Content-->
-<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 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">
-                {% image heroImg, "Hero image for the respective solution", [250] %}
-            </div>
-            <div class="flex flex-col justify-center text-center sm:text-left py-2">
-                {{ description | safe }}
-            </div>
-        </div>
-    </div>
-</div>
-
-<div class="w-full px-0">
-    {{ content | safe }}
-</div>
\ No newline at end of file
diff --git a/src/_includes/layouts/use-case.njk b/src/_includes/layouts/use-case.njk
deleted file mode 100644
index 210b1d51fd..0000000000
--- a/src/_includes/layouts/use-case.njk
+++ /dev/null
@@ -1,327 +0,0 @@
----
-layout: layouts/base.njk
-sitemapPriority: 0.7
----
-{% from "components/cta/cta-sign-up.njk" import ctaSignUp %}
-{% from "components/cta/cta-book-demo.njk" import ctaBookDemo %}
-{# ============================================================
-   USE CASE LAYOUT (content-driven, pain-led narrative)
-
-   Per-page front-matter (rich, preferred):
-     problem        hero sub-headline (the pain in one line)
-     customerPain   { heading, intro[], cards[ {icon,title,detail} ] }
-     outcomeFirst   { heading, intro, dimensions[ {label,title,detail} ] }
-     whyItMatters   { heading, intro, points[ {title,detail} ] }
-     competition    { heading, intro, traps[ {label,title,detail} ] }
-     comparison     { without[ {title,detail} ], with[ {title,detail} ] }
-
-   Legacy fall-back front-matter (simple skeleton, still supported):
-     gap[], workflow[], outcomes[]
-
-   No customer names and no attributed quotes on the public page.
-   ============================================================ #}
-
-{# --- build the sticky section nav from the blocks that exist --- #}
-{% set nav = [] %}
-{% if customerPain %}{% set nav = nav.concat([{ id: "customer-pain", label: "Customer Pain" }]) %}{% endif %}
-{% if outcomeFirst %}{% set nav = nav.concat([{ id: "outcome-first", label: "Outcome First" }]) %}{% endif %}
-{% if whyItMatters %}{% set nav = nav.concat([{ id: "why-it-matters", label: "Why It Matters" }]) %}{% endif %}
-{% if competition %}{% set nav = nav.concat([{ id: "competition", label: "Why Off-the-Shelf Fails" }]) %}{% endif %}
-{% if comparison %}{% set nav = nav.concat([{ id: "with-without", label: "With / Without FlowFuse" }]) %}{% endif %}
-{% if aiBuildLayer %}{% set nav = nav.concat([{ id: "ai-build-layer", label: "Build It With AI" }]) %}{% endif %}
-
-<div class="w-full">
-
-    <!-- ============================================================
-         HERO
-    ============================================================ -->
-    <div 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 class="mt-6 max-w-2xl mx-auto text-lg text-gray-600">{{ problem }}</p>
-            <div class="mt-10 flex flex-wrap gap-4 justify-center">
-                {{ ctaBookDemo('highlight', 'hero', extraClass='min-h-[40px]') }}
-            </div>
-        </div>
-    </div>
-
-    {% if nav.length %}
-    <!-- ============================================================
-         STICKY SECTION NAV
-    ============================================================ -->
-    <nav class="sticky top-0 z-30 w-full bg-white/90 backdrop-blur border-y border-gray-100">
-        <div class="max-w-screen-lg mx-auto px-6">
-            <ul class="flex gap-1 sm:gap-2 overflow-x-auto list-none m-0 p-0 py-2 text-sm">
-                {% for item in nav %}
-                <li class="flex-shrink-0">
-                    <a href="#{{ item.id }}" class="flex items-center gap-2 px-3 py-1.5 rounded-full text-gray-500 hover:text-indigo-600 hover:bg-indigo-50 transition-colors">
-                        <span class="font-semibold text-indigo-400">{% if loop.index < 10 %}0{% endif %}{{ loop.index }}</span>
-                        <span class="whitespace-nowrap">{{ item.label }}</span>
-                    </a>
-                </li>
-                {% endfor %}
-            </ul>
-        </div>
-    </nav>
-    {% endif %}
-
-    {% if customerPain %}
-    <!-- ============================================================
-         01. CUSTOMER PAIN
-    ============================================================ -->
-    <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>
-            <h2 class="max-md:text-center"><span class="text-red-600">{{ customerPain.heading }}</span></h2>
-            <div class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl">
-                {% for paragraph in customerPain.intro %}
-                <p class="text-gray-600 m-0">{{ paragraph }}</p>
-                {% endfor %}
-            </div>
-            <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mt-12">
-                {% for card in customerPain.cards %}
-                <div class="rounded-xl bg-gray-50 border border-gray-200 p-6 flex flex-col gap-3">
-                    <div class="w-9 h-9 bg-white rounded-lg border border-gray-200 flex items-center justify-center text-red-500">
-                        <span class="w-5 h-5">{% include "components/icons/" + card.icon + ".svg" %}</span>
-                    </div>
-                    <h4 class="m-0 text-gray-800">{{ card.title }}</h4>
-                    <p class="m-0 text-gray-600 text-sm">{{ card.detail }}</p>
-                </div>
-                {% endfor %}
-            </div>
-        </div>
-    </div>
-    {% endif %}
-
-    {% if outcomeFirst %}
-    <!-- ============================================================
-         02. OUTCOME FIRST
-    ============================================================ -->
-    <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>
-            <h2 class="max-md:text-center">{{ outcomeFirst.heading }}</h2>
-            <p class="mt-4 max-w-3xl text-gray-600">{{ outcomeFirst.intro }}</p>
-            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-12">
-                {% for dim in outcomeFirst.dimensions %}
-                <div class="rounded-xl bg-white border border-gray-200 p-6 flex flex-col gap-2">
-                    <span class="text-indigo-500 text-xs font-semibold uppercase tracking-widest">{{ dim.label }}</span>
-                    <h4 class="m-0 text-gray-800">{{ dim.title }}</h4>
-                    <p class="m-0 text-gray-600 text-sm">{{ dim.detail }}</p>
-                </div>
-                {% endfor %}
-            </div>
-        </div>
-    </div>
-    {% endif %}
-
-    {% if whyItMatters %}
-    <!-- ============================================================
-         03. WHY IT MATTERS
-    ============================================================ -->
-    <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>
-            <h2 class="text-white max-md:text-center">{{ whyItMatters.heading }}</h2>
-            <p class="mt-4 max-w-3xl text-indigo-100 font-light">{{ whyItMatters.intro }}</p>
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-12">
-                {% for point in whyItMatters.points %}
-                <div class="rounded-xl border border-indigo-400/40 bg-indigo-950/30 p-6 flex gap-4">
-                    <span class="text-indigo-300 text-2xl font-semibold leading-none">{% if loop.index < 10 %}0{% endif %}{{ loop.index }}</span>
-                    <div>
-                        <h4 class="text-white m-0">{{ point.title }}</h4>
-                        <p class="text-indigo-100 font-light m-0 mt-1 text-sm">{{ point.detail }}</p>
-                    </div>
-                </div>
-                {% endfor %}
-            </div>
-        </div>
-    </div>
-    {% endif %}
-
-    {% if competition %}
-    <!-- ============================================================
-         04. WHY OFF-THE-SHELF / COMPETITION FAILS
-    ============================================================ -->
-    <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>
-            <h2 class="max-md:text-center">{{ competition.heading }}</h2>
-            <p class="mt-4 max-w-3xl text-gray-600">{{ competition.intro }}</p>
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-12">
-                {% for trap in competition.traps %}
-                <div class="rounded-xl bg-gray-50 border border-gray-200 p-6 flex flex-col gap-2">
-                    <div class="flex items-center gap-2">
-                        <span class="w-6 h-6 text-red-400">{% include "components/icons/x-circle.svg" %}</span>
-                        <span class="text-red-500 text-xs font-semibold uppercase tracking-widest">{{ trap.label }}</span>
-                    </div>
-                    <h4 class="m-0 text-gray-800">{{ trap.title }}</h4>
-                    <p class="m-0 text-gray-600 text-sm">{{ trap.detail }}</p>
-                </div>
-                {% endfor %}
-            </div>
-        </div>
-    </div>
-    {% endif %}
-
-    {% if comparison %}
-    <!-- ============================================================
-         05. WITH / WITHOUT FLOWFUSE
-    ============================================================ -->
-    <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>
-            <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>
-                    <div class="mt-6 flex flex-col gap-4">
-                        {% for row in comparison.without %}
-                        <div class="bg-white border border-gray-200 rounded-lg p-5 flex items-start gap-4">
-                            <span class="flex-shrink-0 w-6 h-6 text-red-400 mt-0.5">{% include "components/icons/x-mark.svg" %}</span>
-                            <div>
-                                <h5 class="m-0 text-gray-800">{{ row.title }}</h5>
-                                <p class="m-0 mt-1 text-gray-600 text-sm">{{ row.detail }}</p>
-                            </div>
-                        </div>
-                        {% endfor %}
-                    </div>
-                </div>
-                <div>
-                    <h3 class="text-indigo-600 m-0">With FlowFuse</h3>
-                    <div class="mt-6 flex flex-col gap-4">
-                        {% for row in comparison.with %}
-                        <div class="bg-white border border-indigo-100 rounded-lg p-5 flex items-start gap-4">
-                            <span class="flex-shrink-0 w-6 h-6 text-indigo-500 mt-0.5">{% include "components/icons/check-circle.svg" %}</span>
-                            <div>
-                                <h5 class="m-0 text-gray-800">{{ row.title }}</h5>
-                                <p class="m-0 mt-1 text-gray-600 text-sm">{{ row.detail }}</p>
-                            </div>
-                        </div>
-                        {% endfor %}
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-    {% endif %}
-
-    {% if aiBuildLayer %}
-    <!-- ============================================================
-         06. BUILD IT WITH AI (Expert build layer)
-    ============================================================ -->
-    <div id="ai-build-layer" class="w-full py-16 sm:py-24 px-6 bg-gray-50 border-y border-gray-100 scroll-mt-16">
-        <div class="max-w-screen-lg mx-auto">
-            <p class="uppercase text-xs font-semibold text-indigo-400 mb-2">06 · Build it with AI</p>
-            <h2 class="max-md:text-center">{{ aiBuildLayer.heading or "From described to deployed, with the FlowFuse Expert" }}</h2>
-            <p class="mt-4 max-w-3xl text-gray-600">{{ aiBuildLayer.intro }}</p>
-            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-12">
-                {% for step in aiBuildLayer.steps %}
-                <div class="rounded-xl bg-white border border-gray-200 p-6 flex flex-col gap-2">
-                    <div class="flex items-center gap-2">
-                        <span class="w-6 h-6 text-indigo-500">{% include "components/icons/sparkles.svg" %}</span>
-                        <span class="text-indigo-500 text-xs font-semibold uppercase tracking-widest">Step {% if loop.index < 10 %}0{% endif %}{{ loop.index }}</span>
-                    </div>
-                    <h4 class="m-0 text-gray-800">{{ step.title }}</h4>
-                    <p class="m-0 text-gray-600 text-sm">{{ step.detail }}</p>
-                </div>
-                {% endfor %}
-            </div>
-            <div class="mt-10 flex">
-                <a class="ff-btn ff-btn--primary-outlined uppercase" href="/ai/" onclick="capture('cta-ai', {'position': 'use-case-ai-build-layer', 'page': '{{ page.fileSlug }}'})">Get started with the Expert</a>
-            </div>
-            {% if aiBuildLayer.note %}
-            <p class="mt-8 text-sm text-gray-400">{{ aiBuildLayer.note }}</p>
-            {% endif %}
-        </div>
-    </div>
-    {% endif %}
-
-    {# ============================================================
-       LEGACY SKELETON FALL-BACK (only when no rich blocks defined)
-    ============================================================ #}
-    {% if not nav.length %}
-        {% if gap %}
-        <div class="w-full py-16 sm:py-24 px-6 bg-white">
-            <div class="max-w-screen-lg mx-auto">
-                <h2 class="max-md:text-center"><span class="text-red-600">The operational</span> gap</h2>
-                <div class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl">
-                    {% for paragraph in gap %}
-                    <p class="text-gray-600 m-0">{{ paragraph }}</p>
-                    {% endfor %}
-                </div>
-                <p class="mt-8 text-sm text-gray-400 italic">Placeholder copy. Generic operational framing for this workflow pattern.</p>
-            </div>
-        </div>
-        {% endif %}
-        {% if workflow %}
-        <div class="w-full bg-indigo-900 py-16 sm:py-24 px-6">
-            <div class="max-w-screen-lg mx-auto">
-                <h2 class="text-white text-center">The operational workflow</h2>
-                <ul class="mt-10 max-w-3xl mx-auto flex flex-col gap-3 list-none p-0">
-                    {% for item in workflow %}
-                    <li class="flex items-start gap-3 text-indigo-100">
-                        <span class="flex-shrink-0 w-6 h-6 text-indigo-300 mt-0.5">{% include "components/icons/check.svg" %}</span>
-                        <span>{{ item }}</span>
-                    </li>
-                    {% endfor %}
-                </ul>
-            </div>
-        </div>
-        {% endif %}
-        {% if outcomes %}
-        <div class="w-full py-16 sm:py-24 px-6 comparison-section-bg">
-            <div class="max-w-screen-lg mx-auto">
-                <h2 class="text-indigo-600 max-md:text-center">Outcomes</h2>
-                <div class="mt-8 flex flex-col gap-4 max-w-3xl">
-                    {% for outcome in outcomes %}
-                    <div class="bg-white border border-indigo-100 rounded-lg p-5 flex items-center gap-4">
-                        <span class="flex-shrink-0 w-8 h-8 text-indigo-500">{% include "components/icons/arrow-trending-up.svg" %}</span>
-                        <p class="m-0 text-lg font-light text-gray-700">{{ outcome }}</p>
-                    </div>
-                    {% endfor %}
-                </div>
-                <p class="mt-6 text-xs text-gray-400 italic">Placeholder outcomes. No customer names or real figures.</p>
-            </div>
-        </div>
-        {% endif %}
-    {% endif %}
-
-    <!-- ============================================================
-         WHERE THIS FITS (outcome + industry lens links)
-    ============================================================ -->
-    {% include "components/use-case-chips.njk" %}
-
-    {# ============================================================
-       RELATED RESOURCES: disabled for now.
-
-       Held back until there is enough tagged content to fill it. With the
-       current set of resources the section renders more empty space and
-       "More coming soon" placeholders than actual links, which reads as
-       unfinished rather than as a useful set of next steps.
-
-       To bring it back, uncomment the two lines below. The component itself
-       is unchanged and still works; it needs no edits, only more resources
-       carrying the matching use-case tag.
-    ============================================================ #}
-    {#
-    {% set useCaseSlug = page.fileSlug %}
-    {% include "components/related-resources.njk" %}
-    #}
-
-    <!-- ============================================================
-         CLOSING CTA
-    ============================================================ -->
-    <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">{{ closingCta.heading or "See it on your operations" }}</h3>
-            <p class="text-gray-600 mb-8 max-w-xl mx-auto text-center">{{ closingCta.description or "Talk to an expert, or get started with FlowFuse today." }}</p>
-            <div class="flex flex-wrap gap-4 justify-center">
-                {{ ctaBookDemo('highlight', 'footer', extraClass='min-h-[40px]') }}
-                {{ ctaSignUp(site, 'primary-outlined', 'footer', extraClass='min-h-[40px]') }}
-            </div>
-        </div>
-    </div>
-
-
-</div>
diff --git a/src/use-cases.njk b/src/use-cases.njk
deleted file mode 100644
index 4b23bbdd04..0000000000
--- a/src/use-cases.njk
+++ /dev/null
@@ -1,81 +0,0 @@
----
-layout: layouts/base.njk
-sitemapPriority: 0.8
-title: "Use Cases"
-meta:
-  title: "Use Cases"
-  description: "Generic operational workflow patterns for industrial teams. Turn events into action with FlowFuse. Placeholder skeleton hub."
----
-{% from "components/cta/cta-sign-up.njk" import ctaSignUp %}
-{% from "components/cta/cta-contact-us.njk" import ctaContactUs %}
-<div class="w-full">
-
-    <!-- HERO with CTA buttons -->
-    <div 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 cases</p>
-            <h1 class="m-auto max-w-3xl font-medium">Turn industrial events into <span class="text-indigo-600">action</span></h1>
-            <p class="mt-6 max-w-2xl mx-auto text-lg text-gray-600">Operational workflow patterns that follow Event, Decision, Action. Explore how each one is operationalized with FlowFuse.</p>
-            <div class="mt-10 flex flex-wrap gap-4 justify-center">
-                {{ ctaContactUs('highlight', 'hero', extraClass='min-h-[40px]') }}
-            </div>
-        </div>
-    </div>
-
-    <!-- OPERATIONAL USE CASES (tagged with value pillars) -->
-    <div class="w-full py-16 sm:py-24 px-6 bg-white">
-        <div class="max-w-screen-lg mx-auto">
-            <h2 class="max-md:text-center">Operational <span class="text-indigo-600">use cases</span></h2>
-            <p class="mt-4 max-w-3xl text-gray-600">Problems operations teams own, and how they are solved with FlowFuse. Each use case is also reachable by <a href="/industries/">industry</a>.</p>
-            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mt-10">
-                {% for uc in collections["use-case"] | sort(false, true, "data.title") %}
-                {% if uc.data.values %}
-                <a href="{{ uc.url }}" class="group hover:no-underline flex flex-col gap-3 rounded-xl border border-gray-200 p-6 bg-white hover:border-indigo-300 hover:shadow-sm transition-all">
-                    <h3 class="m-0 text-gray-800 group-hover:text-indigo-600 transition-colors">{{ uc.data.title }}</h3>
-                    <p class="m-0 text-gray-600 text-sm flex-grow">{{ uc.data.problem }}</p>
-                    <span class="mt-2 text-indigo-600 text-sm font-semibold flex items-center gap-2">
-                        View use case
-                        <span class="w-4 h-4">{% include "components/icons/arrow-right.svg" %}</span>
-                    </span>
-                </a>
-                {% endif %}
-                {% endfor %}
-            </div>
-        </div>
-    </div>
-
-    <!-- PLATFORM ARCHITECTURES (untagged legacy solution pages) -->
-    <div class="w-full py-16 sm:py-24 px-6 bg-gray-50 border-y border-gray-100">
-        <div class="max-w-screen-lg mx-auto">
-            <h2 class="max-md:text-center">By <span class="text-indigo-600">architecture</span></h2>
-            <p class="mt-4 max-w-3xl text-gray-600">How FlowFuse is deployed and where it sits in your stack. Architectures are the technical evaluator's entry point; the use cases above are what gets built on them.</p>
-            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mt-10">
-                {% for uc in collections["use-case"] | sort(false, true, "data.title") %}
-                {% if not uc.data.values %}
-                <a href="{{ uc.url }}" class="group hover:no-underline flex flex-col gap-3 rounded-xl border border-gray-200 p-6 bg-white hover:border-indigo-300 hover:shadow-sm transition-all">
-                    <h3 class="m-0 text-gray-800 group-hover:text-indigo-600 transition-colors">{{ uc.data.title }}</h3>
-                    <p class="m-0 text-gray-600 text-sm flex-grow">{{ uc.data.problem }}</p>
-                    <span class="mt-2 text-indigo-600 text-sm font-semibold flex items-center gap-2">
-                        View architecture
-                        <span class="w-4 h-4">{% include "components/icons/arrow-right.svg" %}</span>
-                    </span>
-                </a>
-                {% endif %}
-                {% endfor %}
-            </div>
-        </div>
-    </div>
-
-    <!-- CLOSING CTA BAND -->
-    <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">See it on your workflow</h3>
-            <p class="text-gray-600 mb-8 max-w-xl mx-auto text-center">Talk to an expert, or get started with FlowFuse today.</p>
-            <div class="flex flex-wrap gap-4 justify-center">
-                {{ ctaContactUs('highlight', 'footer', extraClass='min-h-[40px]') }}
-                {{ ctaSignUp(site, 'primary-outlined', 'footer', extraClass='min-h-[40px]') }}
-            </div>
-        </div>
-    </div>
-
-</div>
diff --git a/src/use-cases/data-integration.njk b/src/use-cases/data-integration.njk
deleted file mode 100644
index 8e16f569b8..0000000000
--- a/src/use-cases/data-integration.njk
+++ /dev/null
@@ -1,143 +0,0 @@
----
-layout: solution
-title: FlowFuse for Data Integration
-problem: "Collect, transform, and route data from any industrial source to any destination, without writing integration code from scratch."
-image: /images/solutions/og-solutions-data-integration.jpg
-subtitle:
-heroImg: ./images/pictograms/data_integration_blue.png
-description:
-    <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>
----
-{% from "components/cta/cta-contact-us.njk" import ctaContactUs %}
-<div>
-    <div class="mt-6 text-center">
-        {{ ctaContactUs('highlight', 'hero', extraClass='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">
-            {% image "./images/solutions/data-integration.png", ".", [1024] %}
-        </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 class="text-indigo-700">
-                {% ffIconLg "data", true %}
-                <p class="mt-2">
-                    Data comes from different sources, including internal IT systems (ERP, CRM, SCM), IoT devices, external data services (weather, foreign exchange, etc.)
-                </p>
-            </div>
-            <div class="text-indigo-700">
-                {% ffIconLg "codeblock" %}
-                <p class="mt-2">
-                    Data is accessible in a wide variety of formats, including CSV files, REST Api, XML, YAML, MQTT.
-                </p>
-            </div>
-            <div class="text-indigo-700">
-                {% ffIconLg "lock" %}
-                <p class="mt-2">
-                    Access to data is often gated by IT departments making it slow and timing consuming for departments to get access to new integrated data.
-                </p>
-            </div>
-            <div class="text-indigo-700">
-                {% ffIconLg "database" %}
-                <p class="mt-2">
-                    Data needs to be stored in different formats and databases.
-                </p>
-            </div>
-            <div class="text-indigo-700">
-                {% ffIconLg "chart" %}
-                <p class="mt-2">
-                    Data needs to be visualized and communicated back to a user.
-                </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>
-                <div class="w-24 sm:w-24 mb-6 flex-shrink-0">
-                    {% image "./images/pictograms/community_blue.png", "", [128] %}
-                </div>
-                <h4 class="block sm:hidden">Collaborative Development</h4>
-                <h4 class="hidden sm:block">Collaborative<br>Development</h4>
-                <div>
-                    <p>
-                        FlowFuse makes it possible for teams to collaborate on the same flows and applications.
-                    </p>
-                    <p>
-                        Team members can share instances to make for quicker and more efficient development, with full version control and audit trails built in.
-                    </p>
-                </div>
-            </div>
-            <div>
-                <div class="w-24 sm:w-24 mb-6 flex-shrink-0">
-                    {% image "./images/pictograms/node_catalog_blue.png", "", [128] %}
-                </div>
-                <h4>Managed Application Service</h4>
-                <div>
-                    <p>
-                        We run your instances so you don’t have to worry about the production reliability of your industrial applications.
-                    </p>
-                </div>
-            </div>
-            <div>
-                <div class="w-24 sm:w-24 mb-6 flex-shrink-0">
-                    {% image "./images/pictograms/bias_for_action_blue.png", "", [128] %}
-                </div>
-                <h4 class="block sm:hidden">Software Delivery Pipelines</h4>
-                <h4 class="hidden sm:block">Software Delivery<br>Pipelines</h4>
-                <div>
-                    <p>
-                        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.
-                    </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('primary', 'footer', extraClass='inline-block m-auto') }}
-        </div>
-    </div>
-</div>
\ No newline at end of file
diff --git a/src/use-cases/edge-connectivity.njk b/src/use-cases/edge-connectivity.njk
deleted file mode 100644
index 3c51173c28..0000000000
--- a/src/use-cases/edge-connectivity.njk
+++ /dev/null
@@ -1,97 +0,0 @@
----
-layout: solution
-title: FlowFuse for Edge Connectivity
-problem: "Deploy and manage Node-RED instances on edge hardware at scale, from a single pane of glass, without touching each device."
-image: /images/solutions/og-solutions-edge-connectivity.jpg
-subtitle:
-heroImg: ./images/pictograms/edge_blue.png
-description:
-    <p>FlowFuse simplifies the management of deployments to edge devices in manufacturing, from equipment to <a href="/landing/plc/">PLCs</a>. Our platform ensures secure and reliable handling of large-scale deployments, providing seamless edge connectivity solutions.</p>
----
-{% from "components/cta/cta-contact-us.njk" import ctaContactUs %}
-<div>
-    <div class="mt-6 text-center">
-        {{ ctaContactUs('highlight', 'hero', extraClass='inline-block shadow') }}
-    </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 class="text-left self-start">
-                <h3><span class="text-indigo-600">Scaleable</span> Edge Connectivity</h3>
-                <div>
-                    <p>
-                        Efficiently connect and manage vast fleets of edge devices with FlowFuse. Our device agent ensures synchronized updates across all devices, while our central console provides seamless status monitoring and reliable connectivity management.
-                    </p>
-                </div>
-            </div>
-            <div class="text-left self-start">
-                <h3><span class="text-indigo-600">Effortless</span> Data Streaming</h3>
-                <div>
-                    <p>
-                        FlowFuse makes data streaming to the cloud painless, removing the hassle of network configurations. Our custom nodes facilitate effortless MQTT connection between the device and the FlowFuse platform, removing the need for complex setup. No configuration of IP address, domain name, certificates or firewalls required.
-                    </p>
-                 </div>
-            </div>
-            <div class="text-left self-start">
-                <h3><span class="text-indigo-600">Consistent Deployment</span> Assurance</h3>
-                <div>
-                    <p>
-                        Create and distribute consistent application snapshots across your devices with FlowFuse. Our central console ensures uniform deployment, maintaining version consistency across your network.
-                    </p>
-                </div>
-            </div>
-            <div class="text-left self-start">
-                <h3>Rapid <span class="text-indigo-600">Security Deployment</span></h3>
-                <div>
-                    <p>
-                        FlowFuse provides expert support for your deployments, ensuring systems are consistently up-to-date and operationally continuous, backed by our professional guidance.
-                    </p>
-                </div>
-            </div>
-            <div class="text-left self-start">
-                <h3 class="flex align-center">Remote <span class="text-indigo-600"> Troubleshooting</span></h3>
-                <div>
-                    <p>
-                        Identify and resolve production issues remotely with FlowFuse's debugging capabilities. This feature significantly eases troubleshooting of instances on devices.
-                    </p>
-                </div>
-            </div>
-            <div class="text-left self-start">
-                <h3><span class="text-indigo-600">Easy</span> Onboarding</h3>
-                <div>
-                    <p>
-                        Easily integrate new devices into FlowFuse through our administrative interface or automated processes. This allows for hassle-free connection of multiple devices without manual intervention.
-                    </p>
-                </div>
-            </div>
-        </div>
-    </div>
-    <div class="w-full max-w-screen-lg m-auto pb-16 px-6">
-        <div class="flex justify-center items-center md:w-full">
-            <lite-youtube videoid="dvTgCBXCa5A" class="aspect-video bg-cover bg-top bg-no-repeat border-2 border-black rounded-md drop-shadow-xl" style="background-image: url('../../images/solutions/webinar-july-2023_video_tile.jpg'); width: 1080px; background-repeat: no-repeat;"></lite-youtube>
-        </div>
-    </div>
-</div>
-
-<!-- USE CASES built at the edge (cross-links per web task) -->
-<div class="w-full py-16 sm:py-20 px-6 bg-gray-50 border-y border-gray-100">
-    <div class="max-w-screen-lg mx-auto">
-        <h2 class="max-md:text-center">What teams build <span class="text-indigo-600">at the edge</span></h2>
-        {% set featuredUseCases = ["shop-floor-communication", "production-monitoring"] %}
-        {% include "components/use-case-links.njk" %}
-        <div class="mt-8 flex justify-center"><a class="ff-btn ff-btn--primary-outlined uppercase" href="/docs/device-agent/install/">Get the Device Agent</a></div>
-    </div>
-</div>
-
-<div class="w-full px-6 pb-28 pt-12 md:px-0">
-       <div class="content max-w-screen-lg m-auto text-center border-2 rounded-lg py-6 px-20 bg-indigo-50 border-indigo-100">
-        <p class="text-2xl leading-10 mt-0 mb-9">
-            Ready to learn more?
-        </p>
-        <div>
-            {{ ctaContactUs('primary', 'footer', extraClass='inline-block m-auto') }}
-        </div>
-    </div>
-</div>
diff --git a/src/use-cases/it-ot-middleware.njk b/src/use-cases/it-ot-middleware.njk
deleted file mode 100644
index bb9ec13a6c..0000000000
--- a/src/use-cases/it-ot-middleware.njk
+++ /dev/null
@@ -1,289 +0,0 @@
----
-layout: solution
-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."
-subtitle: FlowFuse allows teams to automate their manufacturing process through customized, reliable applications.
-meta:
-    keywords: "FlowFuse, Manufacturing, Automation, DevOps, Integration, OT, IT, Data, Visualization, Event Triggers, Fleet Management, Monitoring, Collaborative Development, Environment, Application Deployment, Professional Support"
-    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.
-image: /images/solutions/og-solutions-manufacturing.jpg
-heroImg: ./images/pictograms/factory_blue.png
-description:
-    <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>
----
-{% from "components/cta/cta-sign-up.njk" import ctaSignUp %}
-{% from "components/cta/cta-book-demo.njk" import ctaBookDemo %}
-<div class="w-full flex justify-center mt-6">
-    <div class="mx-auto text-center flex flex-row gap-8">
-        {{ ctaBookDemo('highlight', 'hero', extraClass='inline-block shadow') }}
-        <a href="#whitepapers" onclick="scrollToAnchor(event, '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 class="text-left self-start">
-                <h3>Hardware & Sensor <span class="text-indigo-600">Integration</span></h3>
-                <div>
-                    <p>
-                        FlowFuse simplifies connecting diverse hardware and sensors in manufacturing, enhancing data collection and analytics for informed decision-making and efficiency improvements.
-                    </p>
-                </div>
-            </div>
-            <div class="text-left self-start">
-                <h3><span class="text-indigo-600">Integrate</span> OT and IT Data</h3>
-                <div>
-                    <p>
-                        Our platform unifies operational and information technology data, offering manufacturers a comprehensive view of production processes for improved efficiency.
-                    </p>
-                </div>
-            </div>
-            <div class="text-left self-start">
-                <h3><span class="text-indigo-600">Intuitive</span> OT Data visualization</h3>
-                <div>
-                    <p>
-                        FlowFuse offers a visual interface for real-time monitoring and analysis of operational data, aiding in quick, data-driven decisions to optimize manufacturing operations.
-                    </p>
-                </div>
-            </div>
-            <div class="text-left self-start">
-                <h3><span class="text-indigo-600">Automate</span> Event Triggers</h3>
-                <div>
-                    <p>
-                        With FlowFuse, automate event triggers to respond instantly to production line changes, reducing downtime and boosting efficiency.
-                    </p>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
-<div class="w-full md:max-w-screen-lg m-auto pb-32">
-    {% image "./images/solutions/markitechture-manufacturing.png", "High level architecture diagram showing how Node-RED can assist with data flow across a factory and manufacturing use-case", [1024] %}
-</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 class="text-left self-start flex gap-8 items-center mb-12">
-            <div class="flex flex-col sm:flex-row gap-8 max-w-screen-lg sm:pr-24 md:pr-48">
-                <div class="w-32 sm:w-48 flex-shrink-0">
-                    {% image "./images/pictograms/edge_blue.png", "", [128] %}
-                </div>
-                <div>
-                    <h4>Optimized Fleet Management & Monitoring</h4>
-                    <div>
-                        <p>
-                            FlowFuse revolutionizes equipment and device monitoring in manufacturing. Our platform automates remote deployment and management, ensuring efficiency and flexibility in operations.
-                        </p>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div class="text-left sm:text-right self-start flex flex-row-reverse gap-8 items-center mb-12">
-            <div class="flex flex-col sm:flex-row-reverse gap-8 max-w-screen-lg sm:pl-24 md:pl-48">
-                <div class="w-32 sm:w-48 flex-shrink-0">
-                    {% image "./images/pictograms/community_blue.png", "", [128] %}
-                </div>
-                <div>
-                    <h4>Collaborative Development Environment</h4>
-                    <div>
-                        <p>
-                            Enhancing teamwork in development, FlowFuse allows multiple team members to co-create and streamline application development, increasing efficiency and cohesion.
-                        </p>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div class="text-left self-start flex gap-8 items-center mb-12">
-            <div class="flex flex-col sm:flex-row gap-8 max-w-screen-lg sm:pr-24 md:pr-48">
-                <div class="w-32 sm:w-48 flex-shrink-0">
-                    {% image "./images/pictograms/bias_for_action_blue.png", "", [128] %}
-                </div>
-                <div>
-                    <h4>Efficient Application Deployment</h4>
-                    <div>
-                        <p>
-                            FlowFuse introduces structured DevOps pipelines, supporting various stages from development to production, to guarantee reliable, secure, and high-quality application delivery.
-                        </p>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div class="text-left sm:text-right self-start flex flex-row-reverse gap-8 items-center mb-12">
-            <div class="flex flex-col sm:flex-row-reverse gap-8 max-w-screen-lg sm:pl-24 md:pl-48">
-                <div class="w-32 sm:w-48 flex-shrink-0">
-                    {% image "./images/pictograms/ticket_blue.png", "", [128] %}
-                </div>
-                <div>
-                    <h4>Dedicated Professional Support</h4>
-                    <div>
-                        <p>
-                            FlowFuse provides expert support for your deployments, ensuring systems are consistently up-to-date and operationally continuous, backed by our professional guidance.
-                        </p>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
-<!-- FAQ Section -->
-<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>
-        {% include "faq.njk" %}
-      </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">
-        <!-- Resources -->
-        {% set caseStudies = [
-            {
-                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/"
-            },
-            {
-                title: "The Future of Textile Manufacturing Powered with <span class='inline-block'>Node-RED</span>",
-                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/"
-            }
-        ] %}
-        
-        {% set 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/"
-            }
-        ] %}
-        <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">
-                <!-- Left -->
-                <h4 class="text-center">Case Studies</h4>
-                {% for caseStudy in caseStudies %}
-                <a class="h-full" href="{{ caseStudy.link }}">
-                    <li class="h-full">
-                        <div class="w-2/5 max-md:aspect-video ff-image-cover ff-image-left-rounded h-full">
-                            {% image caseStudy.image, caseStudy.alt, [208] %}
-                        </div>
-                        <label class="w-3/5">{{ caseStudy.title | safe }}</label>
-                    </li>
-                </a>
-                {% endfor %}
-                <!-- Right -->
-                <h4 class="text-center max-md:pt-12" id="whitepapers">Whitepapers</h4>
-                {% for whitepaper in whitepapers %}
-                <a href="{{ whitepaper.link }}">
-                    <li>
-                        <div class="w-2/5 max-md:aspect-video ff-image-cover ff-image-left-rounded h-full">
-                            {% image whitepaper.image, whitepaper.alt, [208] %}
-                        </div>
-                        <label class="w-3/5">{{ whitepaper.title | safe }}</label>
-                    </li>
-                </a>
-                {% endfor %}
-            </div>
-        </div>
-        <!-- Deployment options -->
-        <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</br>
-                            </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(site, 'primary-outlined', 'manufacturing', extraClass='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</br>
-                            </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>
-                    <a class="md:self-end ff-btn ff-btn--primary-outlined uppercase align-baseline w-full mt-3" href="/docs/install/introduction/" onclick="capture('cta-install', {'position': 'manufacturing'})">INSTALL NOW</a>
-                </div>
-                <div class="deployment-card white-bg">
-                    <div>
-                        <div class="title pb-4">
-                            <h4 class="text-indigo-600">Edge device</br>
-                            </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>
-                    <a class="md:self-end ff-btn ff-btn--primary-outlined uppercase align-baseline w-full mt-3" href="/platform/device-agent/">MORE INFO</a>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-<!-- Scroll to anchor -->
-{% include "smooth-scroll.njk" %}
diff --git a/src/use-cases/mes.njk b/src/use-cases/mes.njk
deleted file mode 100644
index 97524ab51c..0000000000
--- a/src/use-cases/mes.njk
+++ /dev/null
@@ -1,150 +0,0 @@
----
-layout: page
-title: "FlowFuse for MES"
-problem: "Build exactly the MES your operation needs, compose modular execution, tracking, and reporting flows without a monolithic vendor platform."
-nohero: true
-heroSection:
-    title: "FlowFuse for <span class='text-indigo-600 inline-block'>your own MES</span>"
-    image: images/solutions/mes-hero.png
-    imgAlt: "MES with FlowFuse"
-bannerSection:
-    title: "MES for Modern Industry"
-    content: "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."
-howSection:
-    title: "How it Works"
-    p1:
-        - "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."
-    p2: "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."
-    image1: images/home/connect_graphic.png
-    imageAlt1: "Icons of communication protocols"
-    image2: images/solutions/oee-dashboard--1.png
-    imageAlt2: "OEE dashboard"
-    p3:
-        - "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."
-industrySection: 
-    title: "MES for Your Industry"
-    p1:
-        - "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."
-whySection:
-    title: "The FlowFuse <span class='text-red-600'>Advantage</span>"
-    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."
-ctaSection:
-    title: "Ready to build the MES your business needs?"
-    primaryUrl: "/book-demo/"
-    primaryCta: "Contact us for Demo"
-    secondaryUrl: "sign-up-url"
-    secondaryCta: "Try FlowFuse Now"
-meta:
-    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"
----
-{% from "components/cta/cta-sign-up.njk" import ctaSignUp %}
-{% from "components/cta/cta-contact-us.njk" import ctaContactUs %}
-{% from "components/cta/cta-book-demo.njk" import ctaBookDemo %}
-<div class="nohero w-full px-6">
-    <!--Hero Content-->
-    <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">
-                    {{ heroSection.title | safe }}
-                </h1>
-                <p class="mb-10 flex-grow">
-                    {{ meta.description }}
-                </p>
-                <div class="flex md:hidden justify-center m-auto max-w-[400px] mb-10"> 
-                    {% set image = ["./", heroSection.image ] | join %}
-                    {% set imageAlt = heroSection.imgAlt %}
-                    {% image image, imageAlt, [400] %}
-                </div>
-                <div class="flex gap-3 max-md:max-w-sm max-md:mx-auto max-sm:flex-col max-md:justify-center">
-                    {{ ctaContactUs('primary', 'primary', extraClass='min-h-[40px]') }}
-                    {{ ctaSignUp(site, 'primary-outlined', 'primary', extraClass='min-h-[40px]') }}
-                </div>
-            </div>
-            <div class="flex max-md:hidden justify-center m-auto max-w-[550px]">
-                {% set image = ["./", heroSection.image ] | join %}
-                {% set imageAlt = heroSection.imgAlt %}
-                {% image image, imageAlt, [550] %}
-            </div>
-        </div>   
-    </div>
-    <div class="w-full">
-        <div class="max-w-screen-lg mx-auto">
-            <!-- Banner - SCADA meets Industry 4.0 -->  
-            <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">{{ bannerSection.title | safe }}</span></h2>
-                <p class="md:max-w-[680px] max-sm:mx-auto">{{ bannerSection.content | safe }}</p>
-            </div>
-            <!--How it works-->    
-            <h2 class="mt-16">{{ howSection.title | safe }}</h2>
-            {% for p in howSection.p1 %}
-            <p class="w-full max-sm:mx-auto mt-6">{{ p | safe }}</p>
-            {% endfor %}
-            <p class="w-full max-sm:mx-auto mt-4">{{ howSection.p2 | safe }}</p>
-            <div class="mx-auto max-w-[550px] my-12">
-                    {% set image = ["./", howSection.image1 ] | join %}
-                    {% set imageAlt = howSection.imageAlt1 %}
-                    {% image image, imageAlt, [550] %}
-            </div>
-            <div class="max-md:order-first">
-                    {% for p in howSection.p3 %}
-                    <p class="w-full max-sm:mx-auto mt-4">{{ p | safe }}</p>
-                    {% endfor %}
-            </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">
-                    {% if howSection.image2 %}
-                        {% set image = ["./", howSection.image2 ] | join %}
-                        {% set imageAlt = howSection.imageAlt2 %}
-                        {% image image, imageAlt, [1024] %}
-                    {% endif %}
-                </div>
-            <!--How it works-->    
-            <h2 class="mt-16">{{ industrySection.title | safe }}</h2>
-            {% for p in industrySection.p1 %}
-            <p class="w-full max-sm:mx-auto mt-6">{{ p | safe }}</p>
-            {% endfor %}
-        </div>
-    </div>
-</div>
-<!--Why FlowFuse-->    
-<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">{{ whySection.title | safe }}</h2>
-        <div class="w-full grid sm:grid-cols-2 md:grid-cols-3 gap-6 md:gap-8">
-            {% for reason in whySection.reasons %}
-            <div class="w-full mt-4 md:mt-0 flex flex-col">
-                <h4 class="flex justify-center sm:justify-start font-semibold text-gray-500">{{ 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>
-            {% endfor %}
-        </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">
-    <!--CTA-->
-    <div class="ff-blue-card max-sm:max-w-none">
-        <h4 class="mb-6 w-full text-center">{{ ctaSection.title }}</h4>
-        <div class="flex max-sm:flex-col max-md:mx-auto gap-3 justify-center">
-            {{ ctaBookDemo('primary', 'secondary', extraClass='min-h-[40px]') }}
-            {{ ctaSignUp(site, 'primary-outlined', 'secondary', extraClass='min-h-[40px]') }}
-        </div>
-    </div>
-</div>
diff --git a/src/use-cases/scada.njk b/src/use-cases/scada.njk
deleted file mode 100644
index 2a116b3e78..0000000000
--- a/src/use-cases/scada.njk
+++ /dev/null
@@ -1,134 +0,0 @@
----
-layout: page
-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."
-nohero: true
-heroSection:
-    title: "FlowFuse for <span class='text-indigo-600 inline-block'>SCADA</span>"
-    image: images/solutions/scada-hero.png
-    imgAlt: "SCADA system with FlowFuse"
-bannerSection:
-    title: "SCADA meets Industry 4.0"
-    content: "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."
-howSection:
-    title: "How it Works"
-    p1: "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."
-    image1: images/solutions/scada-how-diagram.png
-    imageAlt1: "FlowFuse SCADA diagram"
-    p2: "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."
-    image2: images/solutions/scada-how-flow.png
-    imageAlt2: "FlowFuse flow using the FlowFuse Certified S7 PLC node"
-    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."
-whySection:
-    title: "The FlowFuse <span class='text-red-600'>Advantage</span>"
-    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."
-ctaSection:
-    title: "Ready to unlock SCADA for your organization?"
-    primaryUrl: "/book-demo/"
-    primaryCta: "Contact us for Demo"
-    secondaryUrl: "sign-up-url"
-    secondaryCta: "Try FlowFuse Now"
-meta:
-    title: "FlowFuse for SCADA"
-    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"
----
-{% from "components/cta/cta-sign-up.njk" import ctaSignUp %}
-{% from "components/cta/cta-contact-us.njk" import ctaContactUs %}
-{% from "components/cta/cta-book-demo.njk" import ctaBookDemo %}
-<div class="nohero w-full px-6">
-    <!--Hero Content-->
-    <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">
-                    {{ heroSection.title | safe }}
-                </h1>
-                <p class="mb-10 flex-grow">
-                    {{ meta.description }}
-                </p>
-                <div class="flex md:hidden justify-center m-auto max-w-[400px] mb-10"> 
-                    {% set image = ["./", heroSection.image ] | join %}
-                    {% set imageAlt = heroSection.imgAlt %}
-                    {% image image, imageAlt, [400] %}
-                </div>
-                <div class="flex gap-3 max-md:max-w-sm max-md:mx-auto max-sm:flex-col max-md:justify-center">
-                    {{ ctaContactUs('primary', 'primary', extraClass='min-h-[40px]') }}
-                    {{ ctaSignUp(site, 'primary-outlined', 'primary', extraClass='min-h-[40px]') }}
-                </div>
-            </div>
-            <div class="flex max-md:hidden justify-center m-auto max-w-[450px]">
-                {% set image = ["./", heroSection.image ] | join %}
-                {% set imageAlt = heroSection.imgAlt %}
-                {% image image, imageAlt, [450] %}
-            </div>
-        </div>   
-    </div>
-    <div class="w-full">
-        <div class="max-w-screen-lg mx-auto">
-            <!-- Banner - SCADA meets Industry 4.0 -->  
-            <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">{{ bannerSection.title | safe }}</span></h2>
-                <p class="md:max-w-2/3 max-sm:mx-auto">{{ bannerSection.content }}</p>
-            </div>
-            <!--How it works-->    
-            <h2 class="mt-16">{{ howSection.title }}</h2>
-            <p class="w-full max-sm:mx-auto mt-6">{{ howSection.p1 }}</p>
-            <div class="mx-auto max-w-[550px] my-12">
-                {% set image = ["./", howSection.image1 ] | join %}
-                {% set imageAlt = howSection.imageAlt1 %}
-                {% image image, imageAlt, [550] %}
-            </div>
-            <p class="w-full max-sm:mx-auto mt-6">{{ howSection.p2 }}</p>
-            <div class="mx-auto ff-image-rounded border drop-shadow-md p-1 max-w-[385px] my-12 bg-white">
-                {% set image = ["./", howSection.image2 ] | join %}
-                {% set imageAlt = howSection.imageAlt2 %}
-                {% image image, imageAlt, [385] %}
-            </div>
-            {% for p in howSection.p3 %}
-            <p class="w-full max-sm:mx-auto mt-6">{{ p }}</p>
-            {% endfor %}
-            <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 <a href="/landing/plc/" class="text-indigo-600 hover:underline">FlowFuse PLC integration overview</a> for all supported protocols and use cases.</p>
-        </div>
-    </div>
-</div>
-<!--Why FlowFuse-->    
-<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">{{ whySection.title | safe }}</h2>
-        <div class="w-full grid sm:grid-cols-2 md:grid-cols-3 gap-6 md:gap-8">
-            {% for reason in whySection.reasons %}
-            <div class="w-full mt-4 md:mt-0 flex flex-col">
-                <h4 class="flex justify-center sm:justify-start font-semibold text-gray-500">{{ 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>
-            {% endfor %}
-        </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">
-    <!--CTA-->
-    <div class="ff-blue-card max-sm:max-w-none">
-        <h4 class="mb-6 w-full text-center">{{ ctaSection.title }}</h4>
-        <div class="flex max-sm:flex-col max-md:mx-auto gap-3 justify-center">
-            {{ ctaBookDemo('primary', 'secondary', extraClass='min-h-[40px]') }}
-            {{ ctaSignUp(site, 'primary-outlined', 'secondary', extraClass='min-h-[40px]') }}
-        </div>
-    </div>
-</div>
diff --git a/src/use-cases/uns.njk b/src/use-cases/uns.njk
deleted file mode 100644
index 6d2f10af49..0000000000
--- a/src/use-cases/uns.njk
+++ /dev/null
@@ -1,242 +0,0 @@
----
-layout: page
-title: "FlowFuse for UNS"
-image: /images/solutions/flowfuse-uns.png
-problem: "Adopt a Unified Namespace without ripping out existing infrastructure. FlowFuse connects producers and consumers through MQTT with low-code flows."
-nohero: true
-meta:
-    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."
-    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"
----
-{% from "components/cta/cta-sign-up.njk" import ctaSignUp %}
-{% from "components/cta/cta-contact-us.njk" import ctaContactUs %}
-{% from "components/cta/cta-book-demo.njk" import ctaBookDemo %}
-<!--First two sections-->
-<div class="nohero w-full">
-    <!--Hero Content-->
-    <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">
-                    FlowFuse simplifies UNS adoption for manufacturing companies by providing a user-friendly, low-code platform for deploying and using data from a UNS.
-                </p>
-                <div class="flex md:hidden justify-center m-auto max-w-[400px] mb-10">
-                    {% image "./images/solutions/ff-uns.png", "FlowFuse connected to many industrial devices", [400] %}
-                </div>
-                <div class="flex gap-3 max-md:max-w-sm max-md:mx-auto max-sm:flex-col max-md:justify-center">
-                    {{ ctaContactUs('primary', 'primary', extraClass='min-h-[40px]') }}
-                    {{ ctaSignUp(site, 'primary-outlined', 'primary', extraClass='min-h-[40px]') }}
-                </div>
-            </div>
-            <div class="flex max-md:hidden justify-center m-auto max-w-[400px]">
-                {% image "./images/solutions/ff-uns.png", "FlowFuse connected to many industrial devices", [400] %}
-            </div>
-        </div>
-    </div>
-
-    <!-- Unlock the power of your real-time data -->
-    <div class="w-full">
-        <div class="max-w-screen-lg mx-auto px-6">
-            <h2 class="max-sm:max-w-md w-full max-sm:text-center max-sm:mx-auto mb-6">Unlock the power of your <span class="text-indigo-600">real-time data</span></h2>
-            <p class="max-sm:max-w-md w-full max-sm:text-center max-sm:mx-auto mt-6">IT and data professionals are often challenged by the complexities of accessing and analyzing data scattered across disparate systems in manufacturing environments. UNS offers a solution to these challenges by providing a standardized way to access and utilize real-time data across your entire manufacturing operation.</p>
-            <div class="w-full grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-x-7 gap-y-14 my-14">
-
-                {% set sections = [
-                    {
-                        "svgPath": "components/icons/circle-stack.svg",
-                        "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. "
-                    },
-                    {
-                        "svgPath": "components/icons/eye.svg",
-                        "title": "Gain real-time visibility",
-                        "description": "Monitor your operations with interactive visual dashboards."
-                    },
-                    {
-                        "svgPath": "components/icons/bolt.svg",
-                        "title": "Make faster, data-driven decisions",
-                        "description": "Analyze data from across your organization to identify gaps and optimize processes."
-                    },
-                    {
-                        "svgPath": "components/icons/lock-closed.svg",
-                        "title": "Replace point-to-point connections",
-                        "description": "Seamlessly share data across your entire operation."
-                    },
-                    {
-                        "svgPath": "components/icons/arrows-pointing-out.svg",
-                        "title": "Improved collaboration",
-                        "description": "Adapt data across different systems with minimal data loss or loss of context."
-                    }
-                ] %}
-
-                <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>
-                {% for section in sections %}
-                    <div 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">
-                                    {% include section.svgPath %}
-                                </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">{{ section.title }}</div>
-                                    </h5>
-                                </div>
-                            </div>
-                            <div>
-                                <p class="text-center sm:text-left font-light">{{ section.description | safe }}</p>
-                            </div>
-                        </div>
-                    </div>
-                {% endfor %}
-            </div>
-            <!-- From Data Source to Application -->
-            <h2 class="mb-16 mt-16">From Data Source to Application:</br>
-                <span class="text-indigo-600">Streamline Your UNS Workflows with FlowFuse</span></h2>
-            {% image "./images/solutions/flowfuse-uns.png", "FlowFuse UNS Workflow", [1024] %}
-        </div>
-    </div>
-</div>
-<!--Why FlowFuse-->
-<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">
-            {% set sections = [
-            {
-            "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."
-            }
-            ] %}
-
-            {% for section in sections %}
-            <div class="w-full mt-4 md:mt-0 flex flex-col">
-                <h4 class="flex justify-center sm:justify-start font-semibold text-gray-500">{{ section.title }}</h4>
-                <p class="text-center sm:text-left font-light mt-6 max-sm:max-w-md max-sm:mx-auto">{{ section.description }}
-                </p>
-            </div>
-            {% endfor %}
-        </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">
-    <!--CTA-->
-    <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('primary', 'secondary', extraClass='min-h-[40px]') }}
-            {{ ctaSignUp(site, 'primary-outlined', 'secondary', extraClass='min-h-[40px]') }}
-        </div>
-    </div>
-    <!-- Learn UNS -->
-    <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">
-            <!-- Getting Started -->
-            {% set sections = [
-                {
-                    "articles": [
-                        {
-                            "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."
-                        }
-                    ]
-                },
-                {
-                    "articles": [
-                        {
-                            "title": "<span class='font-semibold'>Free whitepaper:</span> 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."
-                        }
-                    ]
-                }
-            ] %}
-            {% for section in sections %}
-            <div class="pb-4 md:pb-0">
-                <div class="ff-nodered-resources grid grid-cols-1 max-md:text-center">
-                    {% for article in section.articles %}
-                    <a href="{{ article.url }}">
-                        <li>
-                            <div class="w-2/5 ff-image-cover ff-image-left-rounded h-full">
-                                {% image article.image, article.alt, [208] %}
-                            </div>
-                            <label class="w-3/5 font-light text-left">{{ article.title | safe }}</label>
-                        </li>
-                    </a>
-                    {% endfor %}
-                </div>
-            </div>
-            {% endfor %}
-        </div>
-    </div>
-</div>
-
-
diff --git a/src/use-cases/use-cases.json b/src/use-cases/use-cases.json
deleted file mode 100644
index eab4d428f3..0000000000
--- a/src/use-cases/use-cases.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-    "layout": "use-case",
-    "tags": [
-        "use-case"
-    ]
-}